:root{
  --bg:#060606;
  --fg:#eee8dd;
  --muted:#777067;
  --line:#1b1b1b;
  --accent:#e0a000;

  --memory:0;
  --decay:0;
  --grain:.06;
  --dust:0;
  --warmth:0;
  --drift:0px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Barlow",sans-serif;
  overflow-x:hidden;
}

/* permanent analog texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:990;
  pointer-events:none;
  opacity:calc(.055 + var(--grain) * .11);
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* scanlines */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:989;
  pointer-events:none;
  opacity:.1;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,.035) 2px,
    rgba(255,255,255,.035) 3px
  );
}

.stage{
  min-height:100vh;
  transform-origin:center center;
  animation:pageBreathe 6.2s cubic-bezier(.13,.78,.12,1) both;
}

@keyframes pageBreathe{
  0%{transform:scale(1.16) translateY(26px) rotate(-.25deg);filter:blur(10px) contrast(1.45)}
  16%{transform:scale(1.08) translateY(-16px) rotate(.18deg);filter:blur(4px) contrast(1.35)}
  38%{transform:scale(1.04) translateY(8px) rotate(-.08deg);filter:blur(2px) contrast(1.25)}
  64%{transform:scale(.992) translateY(-3px);filter:blur(.6px) contrast(1.12)}
  78%{transform:scale(1.018) translateY(2px)}
  100%{transform:scale(1);filter:blur(0) contrast(1)}
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 36px;
  border-bottom:1px solid var(--line);
}

.brand{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  font-size:15px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.brand span{color:var(--accent)}

.tcr{
  font-family:"Courier New",monospace;
  font-size:12px;
  letter-spacing:calc(.1em + var(--decay) * .002em);
  color:var(--muted);
  opacity:calc(1 - var(--decay) * .012);
}

.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  padding:40px 36px 72px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(6,6,6,.97), rgba(6,6,6,.62), rgba(6,6,6,.98)),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.08), transparent 20%),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=2200&q=85");
  background-size:cover;
  background-position:center;
}

/* age the medium, not the photography */
.hero::before{
  content:"";
  position:absolute;
  inset:-4%;
  pointer-events:none;
  opacity:calc(.8 + var(--memory) * .02);
  background:
    radial-gradient(circle at 38% 44%, rgba(224,160,0,.10), transparent 32%),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.08), transparent 24%);
  animation:lensDrift 7s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:calc(.56 + var(--decay) * .012);
  background:
    radial-gradient(circle at center, transparent 10%, rgba(0,0,0,.62) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 32px);
}

@keyframes lensDrift{
  from{transform:translate(-1.2%,.8%) scale(1.02)}
  to{transform:translate(1.4%,-.9%) scale(1.045)}
}

.hero-content{
  position:relative;
  z-index:5;
  max-width:1380px;
  transform:translateY(-4vh);
}

.kicker{
  margin-bottom:22px;
  font-family:"Courier New",monospace;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.68;
}

.poem{position:relative}

.poem::before{
  content:"MANIFESTO / CORTE BRUTO / IMAGEM EM ESTADO DE CHOQUE";
  position:absolute;
  left:0;
  top:-34px;
  font-family:"Courier New",monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(224,160,0,.72);
  animation:panicLabel .7s steps(1,end) infinite;
}

@keyframes panicLabel{
  0%,49%{opacity:1}
  50%,100%{opacity:.25}
}

.poem-line{
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  font-weight:900;
  font-size:clamp(64px,11vw,168px);
  line-height:.78;
  letter-spacing:-.095em;
  display:block;
  text-shadow:
    0 0 1px rgba(255,255,255,.2),
    8px 0 0 rgba(224,160,0,.035),
    -6px 0 0 rgba(255,255,255,.025);
}

.word-holder{
  position:relative;
  cursor:pointer;
  display:inline-block;
  min-width:min(72vw,920px);
  min-height:.88em;
  color:var(--accent);
  text-shadow:
    0 0 calc(22px + var(--memory) * 2px)
    rgba(224,160,0,.14);
}

.word-holder::after{
  content:"↺ re-spin";
  position:absolute;
  left:0;
  bottom:-22px;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.16em;
  color:rgba(224,160,0,.45);
  opacity:0;
  transform:translateY(4px);
  transition:.25s;
}

.word-holder:hover::after{
  opacity:1;
  transform:translateY(0);
}

.word{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:translateY(24px) scale(1.02);
  filter:blur(14px);
  pointer-events:none;
}

.word.active{
  animation:wordEnter .62s cubic-bezier(.05,.9,.12,1) forwards;
}

.word.exit{
  animation:wordExit .24s steps(2,end) forwards;
}

@keyframes wordEnter{
  0%{opacity:0;transform:translateY(38px) scale(1.08) skewX(-4deg);filter:blur(18px)}
  30%{opacity:1;transform:translateY(-8px) scale(.98) skewX(2deg);filter:blur(1px)}
  46%{transform:translateY(4px) scale(1.015) skewX(-1deg)}
  100%{opacity:1;transform:translateY(0) scale(1) skewX(0);filter:blur(0)}
}

@keyframes wordExit{
  0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translateY(-34px) scale(1.08) skewX(5deg);filter:blur(12px)}
}

.word-holder.spinning .word.active{
  animation:heroReelSpin .72s steps(5,end) infinite;
}

@keyframes heroReelSpin{
  0%{opacity:1;transform:translateY(0) skewX(0);filter:blur(0)}
  20%{opacity:.7;transform:translateY(-18px) skewX(5deg);filter:blur(10px)}
  40%{opacity:1;transform:translateY(16px) skewX(-4deg);filter:blur(7px)}
  60%{opacity:.65;transform:translateY(-8px) scale(1.06);filter:blur(14px)}
  80%{opacity:1;transform:translateY(10px) scale(.98);filter:blur(5px)}
  100%{opacity:.8;transform:translateY(0);filter:blur(9px)}
}

.ghost-line{
  position:absolute;
  left:0;
  bottom:-28px;
  font-family:"Courier New",monospace;
  color:rgba(224,160,0,.42);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:0;
  animation:ghostPulse 3.2s steps(1,end) 1.2s infinite;
}

@keyframes ghostPulse{
  0%,18%,36%,100%{opacity:0;transform:translateX(0)}
  20%{opacity:.95;transform:translateX(-6px)}
  23%{opacity:.18;transform:translateX(8px)}
  28%{opacity:.7;transform:translateX(0)}
}


/* RESTORED HERO STARTUP RITUAL */

.poem-line{
  opacity:0;
  transform:translateY(20px);
  filter:blur(8px);
}

.poem-line.visible{
  animation:lineReveal .9s cubic-bezier(.14,.82,.12,1) forwards;
}

.poem-line:nth-child(2){animation-delay:.22s}
.poem-line:nth-child(3){animation-delay:.44s}

@keyframes lineReveal{
  0%{opacity:0;transform:translateY(20px);filter:blur(10px)}
  60%{opacity:1;transform:translateY(0);filter:blur(0)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

.glitch-cut{
  position:fixed;
  inset:0;
  z-index:180;
  background:#eee8dd;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:difference;
  animation:cutFlash 3.9s steps(1,end) both;
}

@keyframes cutFlash{
  0%,9%,13%,29%,34%,49%,53%,72%,100%{opacity:0}
  10%,30%,50%{opacity:.28}
  12%,33%,52%{opacity:0}
}

.subliminal{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  animation:subliminalEnd 4.4s ease both;
}

.subliminal-word{
  position:absolute;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  opacity:0;
  filter:blur(8px) contrast(1.4);
  mix-blend-mode:difference;
  white-space:nowrap;
}

.sw1{
  top:13%;
  left:-7%;
  font-size:clamp(70px,14vw,220px);
  letter-spacing:-.08em;
  animation:flashWord .06s steps(1,end) .34s both;
}

.sw2{
  bottom:18%;
  right:8%;
  font-size:clamp(14px,1.8vw,22px);
  font-family:"Courier New",monospace;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55);
  animation:flashWord .045s steps(1,end) .72s both;
}

.sw3{
  top:44%;
  right:-3%;
  font-size:clamp(56px,9vw,160px);
  letter-spacing:-.06em;
  animation:flashWord .06s steps(1,end) 1.08s both;
}

.sw4{
  top:70%;
  left:6%;
  font-size:clamp(18px,2vw,28px);
  font-family:"Courier New",monospace;
  letter-spacing:.16em;
  color:rgba(255,255,255,.4);
  animation:flashWord .045s steps(1,end) 1.42s both;
}

.sw5{
  bottom:2%;
  right:10%;
  font-size:clamp(72px,14vw,210px);
  color:var(--accent);
  letter-spacing:-.09em;
  animation:flashWord .06s steps(1,end) 1.88s both;
}

@keyframes flashWord{
  0%{opacity:0;transform:scale(1.08) translateY(12px);filter:blur(16px)}
  40%{opacity:.86;transform:scale(1) translateY(0);filter:blur(1px)}
  100%{opacity:0;transform:scale(.985);filter:blur(10px)}
}

@keyframes subliminalEnd{
  0%,88%{visibility:visible}
  100%{visibility:hidden}
}


/* overlays */
.overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.scan-boost{
  z-index:950;
  opacity:0;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.05) 1px,
    transparent 1px,
    transparent 4px
  );
}

.scan-boost.active{animation:scanBoost .28s ease}

@keyframes scanBoost{
  0%{opacity:0}
  40%{opacity:.34}
  100%{opacity:0}
}

.memory-dust{
  z-index:945;
  opacity:calc(var(--dust) * .22);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.48) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(224,160,0,.14) 0 1px, transparent 1px);
  background-size:130px 130px, 83px 83px, 190px 190px;
  transition:opacity 1.6s ease;
}

.memory-vignette{
  z-index:944;
  opacity:calc(var(--memory) * .026);
  background:radial-gradient(circle at center, transparent 30%, rgba(0,0,0,.28) 100%);
  transition:opacity 1.8s ease;
}

.decay-scratches{
  z-index:943;
  opacity:calc(var(--decay) * .028);
  mix-blend-mode:screen;
  transition:opacity 1.8s ease;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 58px,
      rgba(255,255,255,.075) 58px 59px,
      transparent 59px 150px
    );
}

.decay-dust{
  z-index:942;
  opacity:calc(var(--decay) * .024);
  mix-blend-mode:screen;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.30) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(224,160,0,.10) 0 1px, transparent 1px);
  background-size:150px 150px, 94px 94px;
  background-position:30px 70px, 110px 22px;
}

.archive-burn{
  z-index:941;
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 12% 42%, rgba(224,160,0,.20), transparent 12%),
    radial-gradient(circle at 82% 22%, rgba(255,230,180,.15), transparent 14%);
}

.archive-burn.active{animation:archiveBurn .8s ease}

@keyframes archiveBurn{
  0%{opacity:0}
  30%{opacity:.62}
  100%{opacity:0}
}

.semantic-flash{
  position:fixed;
  z-index:970;
  pointer-events:none;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.08em;
  color:rgba(224,160,0,.9);
  mix-blend-mode:difference;
  opacity:0;
  filter:blur(8px);
}

.semantic-flash.active{animation:semanticFlash .22s cubic-bezier(.12,.82,.12,1)}

@keyframes semanticFlash{
  0%{opacity:0;transform:scale(1.12) translateY(12px);filter:blur(14px)}
  35%{opacity:.92;transform:scale(1) translateY(0);filter:blur(1px)}
  100%{opacity:0;transform:scale(.98);filter:blur(10px)}
}

.false-memory-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:975;
  overflow:hidden;
}

.false-memory-word{
  position:absolute;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.065em;
  color:rgba(238,232,221,.88);
  mix-blend-mode:difference;
  opacity:0;
  filter:blur(9px);
  white-space:nowrap;
}

.false-memory-word.visible{animation:falseMemoryFlash .14s steps(1,end) forwards}

@keyframes falseMemoryFlash{
  0%{opacity:0;filter:blur(16px);transform:scale(1.18) translateY(10px) skewX(-4deg)}
  36%{opacity:.9;filter:blur(1px);transform:scale(1) translateY(0) skewX(0)}
  100%{opacity:0;filter:blur(12px);transform:scale(.98) translateY(-6px) skewX(3deg)}
}

.false-memory-fragment{
  position:absolute;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(224,160,0,.52);
  opacity:0;
  filter:blur(4px);
  white-space:nowrap;
}

.false-memory-fragment.visible{animation:falseFragmentFlash .095s steps(1,end) forwards}

@keyframes falseFragmentFlash{
  0%{opacity:0;transform:translateX(-8px)}
  45%{opacity:.82;transform:translateX(0)}
  100%{opacity:0;transform:translateX(8px)}
}

.false-memory-scratch{
  position:fixed;
  top:0;
  bottom:0;
  width:1px;
  left:50%;
  z-index:974;
  pointer-events:none;
  background:rgba(255,255,255,.36);
  opacity:0;
  mix-blend-mode:screen;
}

.false-memory-scratch.visible{animation:falseScratch .16s steps(2,end) forwards}

@keyframes falseScratch{
  0%{opacity:0;transform:translateX(0)}
  40%{opacity:.62;transform:translateX(-18px)}
  100%{opacity:0;transform:translateX(22px)}
}

.memory-whisper{
  position:fixed;
  z-index:940;
  pointer-events:none;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.08);
  opacity:0;
  text-transform:uppercase;
}

.memory-whisper.visible{animation:memoryWhisper 2.4s ease forwards}

@keyframes memoryWhisper{
  0%{opacity:0;transform:translateY(8px)}
  18%{opacity:.32;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-8px)}
}

.stage.react{animation:semanticPulse .62s cubic-bezier(.08,.88,.12,1)}

@keyframes semanticPulse{
  0%{transform:scale(1) rotate(0deg);filter:contrast(1) brightness(1)}
  20%{transform:scale(1.025) rotate(-.08deg);filter:contrast(1.35) brightness(1.08)}
  48%{transform:scale(.992) rotate(.04deg);filter:contrast(1.12) brightness(.96)}
  100%{transform:scale(1) rotate(0deg);filter:contrast(1) brightness(1)}
}

.stage.heavy-decay{animation:decayInstability 7s ease-in-out infinite}

@keyframes decayInstability{
  0%,100%{transform:translateX(0)}
  48%{transform:translateX(calc(var(--decay) * -.07px))}
  52%{transform:translateX(calc(var(--decay) * .07px))}
}

.tcr.glitch{animation:tcrGlitch .18s steps(2,end) 3}

@keyframes tcrGlitch{
  0%{transform:translateX(0);opacity:1}
  20%{transform:translateX(-3px);opacity:.45}
  40%{transform:translateX(4px);opacity:1}
  60%{transform:translateX(-2px);opacity:.6}
  100%{transform:translateX(0);opacity:1}
}

.section{
  padding:38px 36px 56px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  margin-bottom:24px;
}

.section-head h2{
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(34px,6vw,84px);
  line-height:.88;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.section-head p{
  max-width:430px;
  font-family:"Courier New",monospace;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

.grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);
  transform:translateX(var(--drift)) rotate(calc(var(--memory) * -.012deg));
}

.col{
  position:relative;
  border-right:1px solid var(--line);
  background:#090909;
  overflow:hidden;
  cursor:pointer;
}

.col:last-child{border-right:none}

.viewport{
  position:relative;
  aspect-ratio:2/3;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.viewport::before,
.viewport::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:72px;
  z-index:10;
  pointer-events:none;
}

.viewport::before{top:0;background:linear-gradient(to bottom, rgba(6,6,6,.98), transparent)}
.viewport::after{bottom:0;background:linear-gradient(to top, rgba(6,6,6,.98), transparent)}

.film{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  will-change:transform,filter;
}

.frame{
  position:relative;
  min-height:100%;
  overflow:hidden;
}

.frame-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(calc(1.18 - var(--memory) * .006));
  transform:scale(calc(1.06 + var(--memory) * .002));
}

.scan{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:calc(.18 + var(--memory) * .018);
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.18) 2px, rgba(0,0,0,.18) 4px);
}

.perfs{
  position:absolute;
  top:0;
  bottom:0;
  width:16px;
  z-index:4;
  background:rgba(0,0,0,.78);
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  align-items:center;
}

.left{left:0}
.right{right:0}

.perf{
  width:8px;
  height:11px;
  background:#050505;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.frame-code{
  position:absolute;
  top:10px;
  left:22px;
  z-index:5;
  font-family:"Courier New",monospace;
  font-size:10px;
  color:rgba(255,255,255,.42);
}

.frame-num{
  position:absolute;
  bottom:10px;
  right:22px;
  z-index:5;
  font-family:"Courier New",monospace;
  font-size:10px;
  color:rgba(255,255,255,.28);
}

.gate{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:rgba(224,160,0,.18);
  z-index:15;
}

.col.spinning .film{animation:transport 1.05s cubic-bezier(.06,.88,.08,1)}
.col.spinning .frame-img{animation:shake .07s steps(2) infinite}

@keyframes transport{
  0%{transform:translateY(-80%);filter:blur(18px) contrast(1.4)}
  10%{transform:translateY(-260%);filter:blur(24px) contrast(1.8)}
  32%{transform:translateY(-430%);filter:blur(18px) contrast(1.55)}
  58%{transform:translateY(-170%);filter:blur(9px) contrast(1.3)}
  76%{transform:translateY(9%);filter:blur(1px)}
  86%{transform:translateY(-5%)}
  94%{transform:translateY(2%)}
  100%{transform:translateY(0);filter:blur(0)}
}

@keyframes shake{
  0%{transform:scale(1.13) translate(-3px,2px)}
  50%{transform:scale(1.18) translate(4px,-2px)}
  100%{transform:scale(1.15) translate(-2px,-4px)}
}

.col.locked{box-shadow:inset 0 -3px 0 rgba(224,160,0,.7)}

.text{
  padding:18px 16px 22px;
  min-height:122px;
}

.title{
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(20px,2vw,28px);
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.03em;
  margin-bottom:10px;
}

.col.spinning .title{
  color:var(--accent);
  filter:blur(2px);
}

.desc{
  font-family:"Courier New",monospace;
  font-size:11px;
  line-height:1.45;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#756e63;
}

.controls{
  margin-top:24px;
  display:flex;
  gap:20px;
  align-items:center;
}

button{
  background:none;
  border:1px solid var(--line);
  color:var(--fg);
  padding:12px 20px;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.13em;
  cursor:pointer;
}

button:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.hint{
  color:#70695e;
  font-family:"Courier New",monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.audio-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1000;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  color:#8d8578;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:10px 14px;
}




/* ============================================================
   ENHANCED RESIDUAL GHOSTING
   optical misregistration / semantic residue
   ============================================================ */

.word-ghost{
  position:absolute;
  left:0;
  top:0;
  z-index:-1;
  pointer-events:none;

  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.095em;

  color:rgba(224,160,0,.12);

  opacity:0;

  filter:
    blur(7px)
    brightness(1.25);

  transform:
    translate(0,0)
    scale(1.02)
    skewX(-1deg);

  mix-blend-mode:screen;

  white-space:nowrap;

  text-shadow:
    5px 0 rgba(224,160,0,.18),
    -4px 0 rgba(255,255,255,.08),
    0 0 24px rgba(224,160,0,.18);
}

.word-ghost.visible{
  animation:residualGhostEnhanced 1.18s cubic-bezier(.14,.72,.16,1) forwards;
}

@keyframes residualGhostEnhanced{

  0%{
    opacity:0;
    filter:
      blur(3px)
      brightness(1.45);

    transform:
      translate(2px,0px)
      scale(1.01)
      skewX(-2deg);
  }

  /* frame overlap */
  14%{
    opacity:.42;

    filter:
      blur(5px)
      brightness(1.3);

    transform:
      translate(10px,2px)
      scale(1.025)
      skewX(1deg);
  }

  /* projector misregistration */
  32%{
    opacity:.28;

    filter:
      blur(8px)
      brightness(1.16);

    transform:
      translate(-7px,-2px)
      scale(1.03)
      skewX(-1deg);
  }

  /* drift away */
  58%{
    opacity:.18;

    filter:
      blur(12px)
      brightness(1.02);

    transform:
      translate(14px,-5px)
      scale(1.04)
      skewX(2deg);
  }

  /* dying phosphor */
  100%{
    opacity:0;

    filter:
      blur(18px)
      brightness(.92);

    transform:
      translate(20px,-9px)
      scale(1.065)
      skewX(4deg);
  }
}

.word-ghost.memory-heavy{
  color:rgba(238,232,221,.16);

  text-shadow:
    8px 0 rgba(224,160,0,.22),
    -6px 0 rgba(255,255,255,.10),
    0 0 32px rgba(224,160,0,.22);
}



/* ============================================================
   REEL INERTIA SYSTEM
   subtle overshoot / drag / mechanical settling
   ============================================================ */

.col.inertia-lock .film{
  animation:reelInertiaLock .52s cubic-bezier(.18,.82,.12,1) forwards;
}

@keyframes reelInertiaLock{
  0%{
    transform:translateY(0);
    filter:blur(0);
  }

  /* overshoot downward */
  22%{
    transform:translateY(10px);
  }

  /* rebound upward */
  48%{
    transform:translateY(-5px);
  }

  /* tension release */
  68%{
    transform:translateY(2px);
  }

  /* micro drift */
  84%{
    transform:translateY(-1px);
  }

  100%{
    transform:translateY(0);
    filter:blur(0);
  }
}

.col.inertia-lock .gate{
  animation:gateTension .52s cubic-bezier(.18,.82,.12,1);
}

@keyframes gateTension{
  0%{
    opacity:.18;
    transform:scaleX(1);
  }

  24%{
    opacity:.72;
    transform:scaleX(1.04);
  }

  52%{
    opacity:.42;
    transform:scaleX(.985);
  }

  100%{
    opacity:.18;
    transform:scaleX(1);
  }
}

.col.inertia-lock{
  animation:bodySettling .62s cubic-bezier(.18,.82,.12,1);
}

@keyframes bodySettling{
  0%{
    transform:translateY(0);
  }

  18%{
    transform:translateY(1px);
  }

  52%{
    transform:translateY(-1px);
  }

  100%{
    transform:translateY(0);
  }
}

.col.inertia-lock .title{
  animation:titleSettle .55s cubic-bezier(.18,.82,.12,1);
}

@keyframes titleSettle{
  0%{
    letter-spacing:-.03em;
  }

  36%{
    letter-spacing:-.01em;
  }

  100%{
    letter-spacing:-.03em;
  }
}



.hero.startup-lock::before{
  animation:
    lensDrift 7s ease-in-out infinite alternate,
    startupBloom 2.4s cubic-bezier(.16,.74,.18,1) both;
}

@keyframes startupBloom{
  0%{
    opacity:1;
    filter:brightness(1.6) blur(2px);
  }
  35%{
    opacity:.92;
    filter:brightness(1.18) blur(.8px);
  }
  100%{
    opacity:calc(.8 + var(--memory) * .02);
    filter:brightness(1) blur(0);
  }
}



/* ============================================================
   PROJECTOR STARTUP SEQUENCE
   unstable synchronization / machine waking up
   ============================================================ */

.startup-phase .hero{
  animation:startupSyncSearch 2.1s cubic-bezier(.14,.78,.12,1) both;
}

@keyframes startupSyncSearch{

  0%{
    transform:
      translateY(24px)
      scale(1.08)
      skewY(-.5deg);

    filter:
      brightness(1.55)
      contrast(1.45)
      blur(5px);
  }

  12%{
    transform:
      translateY(-12px)
      scale(1.04)
      skewY(.25deg);

    filter:
      brightness(1.38)
      contrast(1.32)
      blur(2px);
  }

  24%{
    transform:
      translateY(8px)
      scale(1.02)
      skewY(-.18deg);

    filter:
      brightness(1.18)
      contrast(1.18)
      blur(1px);
  }

  42%{
    transform:
      translateY(-3px)
      scale(1.01);

    filter:
      brightness(1.08)
      contrast(1.08)
      blur(.4px);
  }

  100%{
    transform:
      translateY(0)
      scale(1);

    filter:
      brightness(1)
      contrast(1)
      blur(0);
  }
}

.startup-roll{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:996;
  opacity:0;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255,255,255,.14) 48%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,.14) 52%,
      transparent 100%
    );

  mix-blend-mode:screen;
}

.startup-phase .startup-roll{
  animation:startupRoll 1.8s cubic-bezier(.14,.78,.12,1) both;
}

@keyframes startupRoll{

  0%{
    opacity:.82;
    transform:translateY(-120%);
  }

  55%{
    opacity:.42;
    transform:translateY(20%);
  }

  100%{
    opacity:0;
    transform:translateY(120%);
  }
}

.startup-phase .tcr{
  animation:tcrStartupChaos 1.9s steps(2,end) both;
}

@keyframes tcrStartupChaos{

  0%{
    opacity:.28;
    transform:translateX(-8px);
    filter:blur(1px);
  }

  18%{
    opacity:1;
    transform:translateX(6px);
  }

  32%{
    opacity:.45;
    transform:translateX(-4px);
  }

  52%{
    opacity:1;
    transform:translateX(2px);
  }

  100%{
    opacity:1;
    transform:translateX(0);
    filter:blur(0);
  }
}

.projector-flare{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:995;
  opacity:0;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.28),
      rgba(224,160,0,.12) 22%,
      transparent 58%
    );

  mix-blend-mode:screen;
}

.startup-phase .projector-flare{
  animation:projectorFlare 1.7s ease both;
}

@keyframes projectorFlare{

  0%{
    opacity:1;
    filter:blur(12px);
  }

  28%{
    opacity:.68;
    filter:blur(6px);
  }

  100%{
    opacity:0;
    filter:blur(0);
  }
}



/* ============================================================
   INTERCONNECTED ARCHIVE SYSTEM
   reels contaminate neighboring memory structures
   ============================================================ */

.col{
  transition:
    transform .55s cubic-bezier(.16,.74,.18,1),
    filter .55s cubic-bezier(.16,.74,.18,1),
    opacity .55s ease;
}

.col.archive-neighbor{
  transform:
    translateY(-2px)
    scale(1.006);

  filter:
    brightness(1.08)
    contrast(1.04);
}

.col.archive-neighbor .frame-img{
  animation:neighborBleed 1.1s cubic-bezier(.16,.74,.18,1);
}

@keyframes neighborBleed{

  0%{
    transform:
      scale(1.08)
      translateX(0);

    filter:
      grayscale(1)
      contrast(1.15);
  }

  22%{
    transform:
      scale(1.12)
      translateX(4px);

    filter:
      grayscale(.82)
      contrast(1.22)
      brightness(1.08);
  }

  54%{
    transform:
      scale(1.1)
      translateX(-3px);

    filter:
      grayscale(.92)
      contrast(1.12);
  }

  100%{
    transform:
      scale(1.08)
      translateX(0);

    filter:
      grayscale(1)
      contrast(1.15);
  }
}

.col.archive-neighbor .title{
  animation:neighborTypography 1.2s cubic-bezier(.16,.74,.18,1);
}

@keyframes neighborTypography{

  0%{
    letter-spacing:-.03em;
  }

  28%{
    letter-spacing:-.015em;
    opacity:.92;
  }

  100%{
    letter-spacing:-.03em;
    opacity:1;
  }
}

.metadata-echo{
  position:absolute;
  z-index:50;
  pointer-events:none;

  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(224,160,0,.55);

  opacity:0;

  mix-blend-mode:screen;

  filter:blur(2px);
}

.metadata-echo.visible{
  animation:metadataLeak 1.4s cubic-bezier(.16,.74,.18,1) forwards;
}

@keyframes metadataLeak{

  0%{
    opacity:0;
    transform:
      translateY(4px)
      translateX(0);
  }

  18%{
    opacity:.82;
    transform:
      translateY(0)
      translateX(0);
  }

  62%{
    opacity:.24;
    transform:
      translateY(-10px)
      translateX(8px);
  }

  100%{
    opacity:0;
    transform:
      translateY(-18px)
      translateX(14px);
  }
}

.shared-transport{
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;

  opacity:0;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(224,160,0,.08),
      transparent
    );

  mix-blend-mode:screen;
}

.shared-transport.active{
  animation:transportPulse .9s cubic-bezier(.16,.74,.18,1);
}

@keyframes transportPulse{

  0%{
    opacity:0;
    transform:translateY(-20%);
  }

  26%{
    opacity:.42;
  }

  100%{
    opacity:0;
    transform:translateY(40%);
  }
}



/* ============================================================
   TEMPORAL DEPTH SYSTEM
   archival layers / damaged chronology / previous states
   ============================================================ */

.temporal-trace{
  position:absolute;
  z-index:52;
  pointer-events:none;

  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:rgba(238,232,221,.32);

  opacity:0;
  filter:blur(2px);

  mix-blend-mode:screen;
}

.temporal-trace.visible{
  animation:temporalTrace .95s steps(2,end) forwards;
}

@keyframes temporalTrace{

  0%{
    opacity:0;
    transform:translateY(8px);
  }

  28%{
    opacity:.72;
    transform:translateY(0);
  }

  62%{
    opacity:.26;
    transform:translateY(-5px);
  }

  100%{
    opacity:0;
    transform:translateY(-12px);
  }
}

.frame-num.temporal-slip{
  animation:frameSlip .42s steps(2,end);
}

@keyframes frameSlip{

  0%{
    opacity:.28;
    transform:translateX(0);
  }

  32%{
    opacity:.88;
    transform:translateX(-4px);
    color:rgba(224,160,0,.65);
  }

  64%{
    opacity:.42;
    transform:translateX(3px);
  }

  100%{
    opacity:.28;
    transform:translateX(0);
  }
}

.frame-code.temporal-corrupt{
  animation:codeCorrupt .5s steps(2,end);
}

@keyframes codeCorrupt{

  0%{
    opacity:.42;
    filter:blur(0);
  }

  34%{
    opacity:.9;
    filter:blur(1px);
    color:rgba(224,160,0,.78);
  }

  68%{
    opacity:.3;
    transform:translateX(3px);
  }

  100%{
    opacity:.42;
    filter:blur(0);
    transform:translateX(0);
  }
}

.lost-frame{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;

  opacity:0;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.05),
      rgba(0,0,0,.18)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.08) 0 1px,
      transparent 1px 18px
    );

  mix-blend-mode:screen;
}

.lost-frame.visible{
  animation:lostFrameFlash .12s steps(1,end) forwards;
}

@keyframes lostFrameFlash{

  0%{
    opacity:0;
    transform:scale(1.03) translateY(4px);
  }

  45%{
    opacity:.62;
    transform:scale(1.01) translateY(0);
  }

  100%{
    opacity:0;
    transform:scale(1.04) translateY(-4px);
  }
}

.col.temporal-memory{
  box-shadow:
    inset 0 0 0 1px rgba(224,160,0,.10),
    inset 0 -3px 0 rgba(224,160,0,.38);
}

.col.temporal-memory .title{
  text-shadow:
    2px 0 rgba(224,160,0,.12),
    -2px 0 rgba(255,255,255,.06);
}



/* ============================================================
   ARCHIVAL HAUNTING SYSTEM
   autonomous archive behavior / subconscious instability
   ============================================================ */

.col.archive-haunt{
  animation:hauntBreath 3.2s ease-in-out forwards;
}

@keyframes hauntBreath{

  0%{
    transform:translateY(0) scale(1);
  }

  24%{
    transform:translateY(-2px) scale(1.004);
  }

  58%{
    transform:translateY(1px) scale(.998);
  }

  100%{
    transform:translateY(0) scale(1);
  }
}

.autonomous-trace{
  position:absolute;
  z-index:58;
  pointer-events:none;

  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(224,160,0,.42);

  opacity:0;
  filter:blur(2px);

  mix-blend-mode:screen;
}

.autonomous-trace.visible{
  animation:autonomousTrace 2.1s cubic-bezier(.16,.74,.18,1) forwards;
}

@keyframes autonomousTrace{

  0%{
    opacity:0;
    transform:translateY(6px);
  }

  18%{
    opacity:.68;
    transform:translateY(0);
  }

  72%{
    opacity:.18;
    transform:translateY(-8px);
  }

  100%{
    opacity:0;
    transform:translateY(-14px);
  }
}

.tcr.archive-haunted{
  animation:tcrGhostRecall .8s steps(2,end);
}

@keyframes tcrGhostRecall{

  0%{
    opacity:1;
    transform:translateX(0);
  }

  20%{
    opacity:.48;
    transform:translateX(-4px);
  }

  45%{
    opacity:1;
    transform:translateX(3px);
    color:rgba(224,160,0,.78);
  }

  100%{
    opacity:1;
    transform:translateX(0);
  }
}

.word-holder.autonomous-spin{
  animation:autonomousBreath .9s cubic-bezier(.16,.74,.18,1);
}

@keyframes autonomousBreath{

  0%{
    transform:translateY(0);
  }

  22%{
    transform:translateY(-3px);
  }

  58%{
    transform:translateY(1px);
  }

  100%{
    transform:translateY(0);
  }
}

.autonomous-memory{
  position:fixed;
  z-index:938;
  pointer-events:none;

  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.08em;

  color:rgba(255,255,255,.08);

  opacity:0;

  filter:blur(10px);

  mix-blend-mode:screen;
}

.autonomous-memory.visible{
  animation:autonomousMemory 2.8s ease forwards;
}

@keyframes autonomousMemory{

  0%{
    opacity:0;
    transform:translateY(10px) scale(1.05);
  }

  22%{
    opacity:.28;
    transform:translateY(0) scale(1);
  }

  100%{
    opacity:0;
    transform:translateY(-12px) scale(.985);
  }
}



/* ============================================================
   TACTILITY SYSTEM
   transport resistance / mechanical weight / film drag
   ============================================================ */

.col{
  --transport-mass:1;
  --transport-friction:1;
}

.col[data-i="0"]{
  --transport-mass:1.08;
  --transport-friction:1.14;
}

.col[data-i="1"]{
  --transport-mass:.96;
  --transport-friction:.92;
}

.col[data-i="2"]{
  --transport-mass:1.18;
  --transport-friction:1.2;
}

.col[data-i="3"]{
  --transport-mass:1.04;
  --transport-friction:1.08;
}

.col[data-i="4"]{
  --transport-mass:1.26;
  --transport-friction:1.34;
}

.film{
  will-change:transform, filter;
}

.col.transport-engaged .film{
  animation:transportTension .55s cubic-bezier(.18,.72,.14,1);
}

@keyframes transportTension{

  0%{
    transform:
      scaleY(1)
      translateY(0);

    filter:
      contrast(1)
      brightness(1);
  }

  24%{
    transform:
      scaleY(.988)
      translateY(-2px);

    filter:
      contrast(1.08)
      brightness(1.03);
  }

  100%{
    transform:
      scaleY(1)
      translateY(0);

    filter:
      contrast(1)
      brightness(1);
  }
}

.transport-vibration{
  position:absolute;
  inset:0;
  z-index:16;
  pointer-events:none;

  opacity:0;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 5px,
      rgba(255,255,255,.025) 5px 6px
    );

  mix-blend-mode:screen;
}

.transport-vibration.active{
  animation:transportVibration .42s steps(3,end);
}

@keyframes transportVibration{

  0%{
    opacity:.08;
    transform:translateX(0);
  }

  18%{
    opacity:.16;
    transform:translateX(1px);
  }

  44%{
    opacity:.1;
    transform:translateX(-1px);
  }

  100%{
    opacity:0;
    transform:translateX(0);
  }
}

.frame{
  transition:
    transform .7s cubic-bezier(.16,.74,.18,1),
    filter .7s cubic-bezier(.16,.74,.18,1);
}

.col.transport-engaged .frame{
  filter:
    contrast(1.06)
    brightness(1.02);
}

.col.transport-heavy .frame{
  transition-duration:.92s;
}

.col.transport-heavy .film{
  transition-duration:.92s;
}

.reel-friction{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:24%;

  z-index:18;
  pointer-events:none;

  opacity:.22;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.38),
      rgba(0,0,0,.12),
      transparent
    );

  mix-blend-mode:multiply;
}

.transport-drag{
  position:absolute;
  inset:0;
  z-index:22;
  pointer-events:none;

  opacity:0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(224,160,0,.04),
      transparent
    );

  mix-blend-mode:screen;
}

.transport-drag.active{
  animation:transportDrag .68s cubic-bezier(.16,.74,.18,1);
}

@keyframes transportDrag{

  0%{
    opacity:0;
    transform:translateY(-16%);
  }

  24%{
    opacity:.32;
  }

  100%{
    opacity:0;
    transform:translateY(24%);
  }
}

.col.transport-heavy .shared-transport.active{
  animation-duration:1.28s;
}

.col.transport-heavy .film{
  filter:
    grayscale(1)
    contrast(1.18)
    brightness(.96);
}



/* ============================================================
   CONTROLLED AGGRESSION RESTORATION
   old signal violence reintroduced into the refined system
   ============================================================ */

.stage.aggressive-hit{
  animation:aggressiveSignalHit .52s steps(2,end);
}

@keyframes aggressiveSignalHit{
  0%{
    transform:scale(1) translateX(0);
    filter:contrast(1) brightness(1);
  }

  16%{
    transform:scale(1.028) translate(-7px,3px) skewX(-.8deg);
    filter:contrast(1.9) brightness(1.18) saturate(.62);
  }

  34%{
    transform:scale(.988) translate(6px,-3px) skewX(.7deg);
    filter:contrast(1.55) brightness(.82);
  }

  58%{
    transform:scale(1.012) translate(-3px,1px);
    filter:contrast(1.75) brightness(1.08);
  }

  100%{
    transform:scale(1) translateX(0);
    filter:contrast(1) brightness(1);
  }
}

.hero.aggressive-impact{
  animation:aggressiveHeroImpact .38s steps(2,end);
}

@keyframes aggressiveHeroImpact{
  0%{
    transform:translateY(0) scale(1);
    filter:brightness(1);
  }

  28%{
    transform:translateY(-2px) scale(1.018) translateX(-3px);
    filter:brightness(1.22) contrast(1.25);
  }

  54%{
    transform:translateY(2px) scale(.996) translateX(3px);
    filter:brightness(.86) contrast(1.1);
  }

  100%{
    transform:translateY(0) scale(1);
    filter:brightness(1);
  }
}

.scan-boost.aggressive{
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.14) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(224,160,0,.10),
      rgba(224,160,0,.10) 1px,
      transparent 1px,
      transparent 11px
    );
}

.scan-boost.aggressive.active{
  animation:aggressiveScanBurst .26s steps(3,end);
}

@keyframes aggressiveScanBurst{
  0%{
    opacity:0;
    transform:translateY(0);
  }

  22%{
    opacity:.58;
    transform:translateY(-2px);
  }

  54%{
    opacity:.26;
    transform:translateY(3px);
  }

  100%{
    opacity:0;
    transform:translateY(0);
  }
}

.semantic-flash.aggressive{
  color:rgba(255,255,255,.92);
  text-shadow:
    8px 0 rgba(224,160,0,.55),
    -8px 0 rgba(255,255,255,.22),
    0 0 38px rgba(224,160,0,.28);
}

.semantic-flash.aggressive.active{
  animation:aggressiveSemanticFlash .18s steps(2,end);
}

@keyframes aggressiveSemanticFlash{
  0%{
    opacity:0;
    transform:scale(1.18) translateY(14px) skewX(-4deg);
    filter:blur(16px);
  }

  34%{
    opacity:.96;
    transform:scale(1) translateY(0) skewX(2deg);
    filter:blur(1px);
  }

  62%{
    opacity:.32;
    transform:translateX(-7px) skewX(-2deg);
    filter:blur(5px);
  }

  100%{
    opacity:0;
    transform:scale(.98) translateY(-8px);
    filter:blur(12px);
  }
}

.col.aggressive-jolt{
  animation:aggressiveReelJolt .22s steps(2,end);
}

@keyframes aggressiveReelJolt{
  0%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  44%{transform:translateX(5px)}
  70%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

.col.aggressive-spike .frame-img{
  animation:aggressiveFrameSpike .16s steps(2,end);
}

@keyframes aggressiveFrameSpike{
  0%{
    transform:scale(1.06) translate(0,0);
    filter:grayscale(1) contrast(1.18);
  }

  40%{
    transform:scale(1.18) translate(-5px,3px);
    filter:grayscale(.8) contrast(1.7) brightness(1.18);
  }

  70%{
    transform:scale(1.12) translate(4px,-2px);
    filter:grayscale(1) contrast(1.4) brightness(.88);
  }

  100%{
    transform:scale(1.06) translate(0,0);
    filter:grayscale(1) contrast(1.18);
  }
}

.hard-cut-frame{
  position:fixed;
  inset:0;
  z-index:982;
  pointer-events:none;

  opacity:0;

  background:
    linear-gradient(
      90deg,
      rgba(238,232,221,.08),
      rgba(224,160,0,.16),
      rgba(238,232,221,.06)
    );

  mix-blend-mode:difference;
}

.hard-cut-frame.active{
  animation:hardCutFrame .14s steps(1,end);
}

@keyframes hardCutFrame{
  0%{
    opacity:0;
  }

  35%{
    opacity:.62;
  }

  100%{
    opacity:0;
  }
}

.word-holder.aggressive-lock{
  animation:aggressiveWordLock .16s steps(2,end);
}

@keyframes aggressiveWordLock{
  0%{
    transform:scale(1);
    filter:brightness(1);
  }

  45%{
    transform:scale(1.045) translateX(-2px);
    filter:brightness(1.35);
  }

  100%{
    transform:scale(1);
    filter:brightness(1);
  }
}



/* ============================================================
   EMOTIONAL PACING SYSTEM
   asymmetrical intensity / silence / catastrophic peaks
   ============================================================ */

.col.quiet-response .frame-img{
  filter:
    grayscale(1)
    contrast(1.04)
    brightness(.96);
}

.col.quiet-response{
  opacity:.94;
}

.col.quiet-response .title{
  color:rgba(238,232,221,.82);
}

.stage.catastrophic-hit{
  animation:catastrophicSignal .72s steps(3,end);
}

@keyframes catastrophicSignal{

  0%{
    transform:scale(1) translateX(0);
    filter:contrast(1) brightness(1);
  }

  12%{
    transform:
      scale(1.05)
      translate(-16px,8px)
      skewX(-2deg);

    filter:
      contrast(2.6)
      brightness(1.42)
      saturate(.55);
  }

  26%{
    transform:
      scale(.96)
      translate(14px,-7px)
      skewX(1.8deg);

    filter:
      contrast(2.1)
      brightness(.72);
  }

  52%{
    transform:
      scale(1.018)
      translate(-5px,2px);

    filter:
      contrast(1.75)
      brightness(1.12);
  }

  100%{
    transform:scale(1) translateX(0);
    filter:contrast(1) brightness(1);
  }
}

.semantic-flash.catastrophic{
  color:#fff;

  text-shadow:
    14px 0 rgba(224,160,0,.9),
    -12px 0 rgba(255,255,255,.35),
    0 0 64px rgba(224,160,0,.42);
}

.scan-boost.catastrophic.active{
  animation:catastrophicScan .42s steps(4,end);
}

@keyframes catastrophicScan{

  0%{
    opacity:0;
    transform:translateY(0);
  }

  18%{
    opacity:.92;
    transform:translateY(-5px);
  }

  42%{
    opacity:.38;
    transform:translateY(7px);
  }

  68%{
    opacity:.72;
    transform:translateY(-3px);
  }

  100%{
    opacity:0;
    transform:translateY(0);
  }
}

.hero.semantic-echo{
  animation:semanticEchoTail 2.8s ease-out;
}

@keyframes semanticEchoTail{

  0%{
    filter:contrast(1.22) brightness(1.08);
  }

  22%{
    filter:contrast(1.16) brightness(1.04);
  }

  100%{
    filter:contrast(1) brightness(1);
  }
}

.tcr.semantic-instability{
  animation:semanticInstability 1.8s steps(3,end);
}

@keyframes semanticInstability{

  0%{
    transform:translateX(0);
    opacity:1;
  }

  18%{
    transform:translateX(-4px);
    opacity:.42;
  }

  34%{
    transform:translateX(5px);
    opacity:1;
  }

  100%{
    transform:translateX(0);
    opacity:1;
  }
}



/* ============================================================
   CINEMATIC MICROTlMING SYSTEM
   desync / analog hesitation / temporal orchestration
   ============================================================ */

.stage.micro-latency{
  animation:microLatencyHold .12s linear;
}

@keyframes microLatencyHold{
  0%{
    transform:scale(1);
  }
  100%{
    transform:scale(1.002);
  }
}

.col.mechanical-variance .film{
  animation:mechanicalVariance .48s cubic-bezier(.18,.74,.14,1);
}

@keyframes mechanicalVariance{

  0%{
    transform:translateY(0);
  }

  18%{
    transform:translateY(-1px);
  }

  36%{
    transform:translateY(2px);
  }

  54%{
    transform:translateY(-3px);
  }

  78%{
    transform:translateY(1px);
  }

  100%{
    transform:translateY(0);
  }
}

.semantic-signature-memoria .hero{
  animation:memoriaSignature 3.8s ease-out;
}

@keyframes memoriaSignature{

  0%{
    filter:contrast(1.12) brightness(1.04);
  }

  28%{
    filter:contrast(1.08) brightness(1.02);
  }

  100%{
    filter:contrast(1) brightness(1);
  }
}

.semantic-signature-ruido .stage{
  animation:ruidoSignature .42s steps(3,end);
}

@keyframes ruidoSignature{

  0%{
    transform:translateX(0);
  }

  22%{
    transform:translateX(-9px);
  }

  44%{
    transform:translateX(8px);
  }

  72%{
    transform:translateX(-4px);
  }

  100%{
    transform:translateX(0);
  }
}

.semantic-signature-arquivo .grid{
  animation:arquivoSignature 1.8s ease;
}

@keyframes arquivoSignature{

  0%{
    transform:translateX(0);
  }

  22%{
    transform:translateX(-2px);
  }

  54%{
    transform:translateX(1px);
  }

  100%{
    transform:translateX(0);
  }
}

.semantic-signature-movimento .grid{
  animation:movimentoSignature 1.1s cubic-bezier(.14,.78,.12,1);
}

@keyframes movimentoSignature{

  0%{
    transform:translateX(0);
  }

  32%{
    transform:translateX(8px);
  }

  100%{
    transform:translateX(0);
  }
}

.semantic-signature-video .hero{
  animation:videoSignature .85s steps(2,end);
}

@keyframes videoSignature{

  0%{
    filter:contrast(1) brightness(1);
  }

  22%{
    filter:contrast(1.45) brightness(1.22);
  }

  54%{
    filter:contrast(.92) brightness(.82);
  }

  100%{
    filter:contrast(1) brightness(1);
  }
}



/* ============================================================
   MILD HOVER COLOR RESTORATION
   subtle chroma return when a reel is physically activated
   ============================================================ */

.col:hover .frame-img,
.col.color-wake .frame-img{
  filter:
    grayscale(.56)
    contrast(calc(1.24 - var(--memory) * .004))
    brightness(1.06)
    saturate(calc(1.22 * var(--signal-chroma, 1)));

  transform:
    scale(calc(1.075 + var(--memory) * .002));
}

.col:hover .scan,
.col.color-wake .scan{
  opacity:calc(.12 + var(--memory) * .012);
}

.col:hover .title,
.col.color-wake .title{
  color:var(--accent);
}

.col:hover .viewport::after,
.col.color-wake .viewport::after{
  background:
    linear-gradient(
      to top,
      rgba(6,6,6,.82),
      rgba(6,6,6,.22),
      transparent
    );
}

.col.color-wake-soft .frame-img{
  filter:
    grayscale(.72)
    contrast(1.16)
    brightness(1.02)
    saturate(calc(1.08 * var(--signal-chroma, 1)));
}

.col.color-wake-soft .title{
  color:rgba(224,160,0,.72);
}



/* ============================================================
   SEMANTIC MEMORY BIAS SYSTEM
   emotional state continuity / archive mood behavior
   ============================================================ */

body.memory-mood-melancholic{
  --archive-temper:.72;
}

body.memory-mood-unstable{
  --archive-temper:1.28;
}

body.memory-mood-neutral{
  --archive-temper:1;
}

body.memory-mood-melancholic .hero::before{
  opacity:calc(.9 + var(--memory) * .024);
  filter:sepia(.16) brightness(1.03);
}

body.memory-mood-melancholic .word-ghost.visible{
  animation-duration:1.65s;
}

body.memory-mood-melancholic .memory-dust{
  opacity:calc(var(--dust) * .30);
}

body.memory-mood-melancholic .col.color-wake .frame-img{
  filter:
    grayscale(.46)
    contrast(1.14)
    brightness(1.04)
    saturate(1.12)
    sepia(.12);
}

body.memory-mood-unstable .scan-boost.active{
  animation-duration:.22s;
}

body.memory-mood-unstable .hard-cut-frame.active{
  animation-duration:.10s;
}

body.memory-mood-unstable .col.color-wake .frame-img{
  filter:
    grayscale(.42)
    contrast(1.38)
    brightness(1.10)
    saturate(1.34);
}

body.memory-mood-unstable .tcr{
  color:rgba(224,160,0,.72);
}

.archive-mood-whisper{
  position:fixed;
  z-index:939;
  pointer-events:none;

  left:24px;
  bottom:58px;

  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(224,160,0,.32);

  opacity:0;
  filter:blur(2px);
}

.archive-mood-whisper.visible{
  animation:archiveMoodWhisper 2.2s ease forwards;
}

@keyframes archiveMoodWhisper{
  0%{
    opacity:0;
    transform:translateY(6px);
  }

  18%{
    opacity:.42;
    transform:translateY(0);
  }

  100%{
    opacity:0;
    transform:translateY(-8px);
  }
}



/* ============================================================
   DOMINANT SIGNAL STATE SYSTEM
   semantic hierarchy / directed audiovisual attention
   ============================================================ */

body.signal-ruido .word-ghost.visible{
  opacity:.16;
  animation-duration:.72s;
}

body.signal-ruido .col.color-wake .frame-img{
  filter:
    grayscale(.74)
    contrast(1.48)
    brightness(1.06)
    saturate(.86);
}

body.signal-ruido .scan-boost.active{
  animation-duration:.18s;
}

body.signal-ruido .semantic-flash.active{
  animation-duration:.14s;
}

body.signal-memoria .scan-boost.active,
body.signal-memoria .hard-cut-frame.active{
  opacity:.22;
  animation-duration:.42s;
}

body.signal-memoria .word-ghost.visible{
  animation-duration:1.85s;
}

body.signal-memoria .col.color-wake .frame-img{
  filter:
    grayscale(.38)
    contrast(1.08)
    brightness(1.04)
    saturate(1.08)
    sepia(.18);
}

body.signal-video .hero::before{
  animation:
    lensDrift 3.8s ease-in-out infinite alternate,
    videoDominantPulse 1.2s steps(2,end);
}

@keyframes videoDominantPulse{
  0%{
    filter:brightness(1) contrast(1);
  }

  34%{
    filter:brightness(1.28) contrast(1.32);
  }

  68%{
    filter:brightness(.88) contrast(1.08);
  }

  100%{
    filter:brightness(1) contrast(1);
  }
}

body.signal-video .semantic-flash.active{
  opacity:.62;
}

body.signal-video .metadata-echo.visible{
  opacity:.34;
}

body.signal-movimento .grid{
  animation:movementDominantDrift 1.35s cubic-bezier(.14,.78,.12,1);
}

@keyframes movementDominantDrift{
  0%{
    transform:translateX(var(--drift)) rotate(calc(var(--memory) * -.012deg));
  }

  28%{
    transform:translateX(calc(var(--drift) + 12px)) rotate(calc(var(--memory) * -.012deg));
  }

  58%{
    transform:translateX(calc(var(--drift) - 4px)) rotate(calc(var(--memory) * -.012deg));
  }

  100%{
    transform:translateX(var(--drift)) rotate(calc(var(--memory) * -.012deg));
  }
}

body.signal-movimento .word-ghost.visible{
  animation-duration:.78s;
}

body.signal-arquivo .metadata-echo.visible,
body.signal-arquivo .temporal-trace.visible,
body.signal-arquivo .autonomous-trace.visible{
  animation-duration:1.9s;
  color:rgba(224,160,0,.68);
}

body.signal-arquivo .semantic-flash.active,
body.signal-arquivo .scan-boost.active{
  opacity:.34;
}

body.signal-arquivo .col.color-wake .frame-img{
  filter:
    grayscale(.62)
    contrast(1.16)
    brightness(1.02)
    saturate(1.02)
    sepia(.08);
}

body.signal-corpo .hero{
  animation:bodyDominantBreath 2.4s ease-out;
}

@keyframes bodyDominantBreath{
  0%{
    transform:scale(1);
  }

  34%{
    transform:scale(1.012);
  }

  100%{
    transform:scale(1);
  }
}

body.signal-imagem .hero::before{
  opacity:calc(1 + var(--memory) * .018);
}

body.signal-tempo .tcr{
  color:rgba(224,160,0,.68);
}

body.signal-tempo .temporal-trace.visible,
body.signal-tempo .frame-num.temporal-slip,
body.signal-tempo .frame-code.temporal-corrupt{
  animation-duration:1.3s;
}

body.signal-linguagem .semantic-flash{
  letter-spacing:-.04em;
}

.signal-focus-whisper{
  position:fixed;
  right:24px;
  bottom:58px;
  z-index:939;
  pointer-events:none;

  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(238,232,221,.22);

  opacity:0;
  filter:blur(2px);
}

.signal-focus-whisper.visible{
  animation:signalFocusWhisper 1.8s ease forwards;
}

@keyframes signalFocusWhisper{
  0%{
    opacity:0;
    transform:translateY(5px);
  }

  18%{
    opacity:.38;
    transform:translateY(0);
  }

  100%{
    opacity:0;
    transform:translateY(-8px);
  }
}



/* ============================================================
   DYNAMIC INTENSITY BREATHING SYSTEM
   archive metabolism / exhaustion / recovery
   ============================================================ */

:root{
  --energy:1;
  --fatigue:0;
}

body.archive-fatigued .semantic-flash.active{
  opacity:calc(.92 * var(--energy));
}

body.archive-fatigued .scan-boost.active{
  opacity:calc(.26 + var(--energy) * .18);
}

/* Fatigue now affects behavior, not photographic image quality. */

body.archive-fatigued .film{
  transition:
    transform calc(.42s + var(--fatigue) * .55s) ease;
}

body.archive-fatigued .hard-cut-frame.active{
  opacity:calc(.9 - var(--fatigue) * .55);
}

body.archive-fatigued .tcr{
  opacity:calc(1 - var(--fatigue) * .34);
  letter-spacing:calc(.1em + var(--fatigue) * .04em);
}

/* Recovery no longer alters the hero photography layer. */

  34%{
    opacity:.72;
    filter:brightness(1.08) blur(.4px);
  }

  100%{
    opacity:calc(.8 + var(--memory) * .02);
    filter:brightness(1) blur(0);
  }
}

.archive-metabolism{
  position:fixed;
  left:24px;
  top:84px;
  z-index:936;
  pointer-events:none;

  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(224,160,0,.18);

  opacity:0;
}

.archive-metabolism.visible{
  animation:archiveMetabolismWhisper 2.4s ease forwards;
}

@keyframes archiveMetabolismWhisper{
  0%{
    opacity:0;
    transform:translateY(6px);
  }

  18%{
    opacity:.38;
    transform:translateY(0);
  }

  100%{
    opacity:0;
    transform:translateY(-10px);
  }
}



/* ============================================================
   BEHAVIORAL-ONLY FATIGUE PATCH
   preserves photographic richness while fatigue affects rhythm
   ============================================================ */

body.archive-fatigued .transport-vibration.active{
  animation-duration:calc(.42s + var(--fatigue) * .38s);
  opacity:calc(.16 - var(--fatigue) * .05);
}

body.archive-fatigued .transport-drag.active{
  animation-duration:calc(.68s + var(--fatigue) * .42s);
}

body.archive-fatigued .shared-transport.active{
  animation-duration:calc(.9s + var(--fatigue) * .5s);
}

body.archive-fatigued .metadata-echo.visible,
body.archive-fatigued .temporal-trace.visible,
body.archive-fatigued .autonomous-trace.visible{
  animation-duration:calc(1.4s + var(--fatigue) * .65s);
}

body.archive-fatigued .hard-cut-frame.active{
  animation-duration:calc(.14s + var(--fatigue) * .08s);
}

/* Keep the image beautiful: only interaction mechanics get tired. */
body.archive-fatigued .hero,
body.archive-fatigued .hero::before,
body.archive-fatigued .hero::after{
  filter:none;
}

body.archive-recovering .archive-metabolism{
  color:rgba(224,160,0,.28);
}




/* ============================================================
   MATÉRIA DE ARQUIVO
   archive drawers / what remains / material memory
   ============================================================ */

.archive-material-section{
  position:relative;
  padding:70px 36px 82px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,#060606,#080706 44%,#060606);
  overflow:hidden;
}

.archive-material-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 64px,
      rgba(224,160,0,.045) 64px 65px,
      transparent 65px 150px
    ),
    radial-gradient(circle at 72% 28%,rgba(224,160,0,.08),transparent 30%);
  mix-blend-mode:screen;
}

.archive-material-section::after{
  content:"CATÁLOGO / MATÉRIA / RESTO / INSISTÊNCIA";
  position:absolute;
  top:28px;
  right:36px;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(224,160,0,.32);
  text-transform:uppercase;
}

.archive-material-head{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:34px;
}

.archive-material-head h2{
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(40px,7vw,104px);
  line-height:.84;
  letter-spacing:-.07em;
  text-transform:uppercase;
}

.archive-material-head p{
  max-width:470px;
  font-family:"Courier New",monospace;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.archive-drawers{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  background:#070707;
}

.archive-drawer{
  position:relative;
  min-height:330px;
  padding:20px 18px 24px;
  border-right:1px solid var(--line);
  overflow:hidden;
  cursor:default;
  transition:
    transform .65s cubic-bezier(.16,.74,.18,1),
    filter .65s cubic-bezier(.16,.74,.18,1),
    background .65s ease;
}

.archive-drawer:last-child{
  border-right:none;
}

.archive-drawer::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 44%),
    repeating-linear-gradient(
      0deg,
      transparent 0 6px,
      rgba(255,255,255,.035) 6px 7px
    );
  mix-blend-mode:screen;
}

.archive-drawer::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:50%;
  height:1px;
  background:rgba(224,160,0,.24);
  transform:translateY(-50%);
  opacity:.5;
}

.drawer-handle{
  position:absolute;
  z-index:3;
  top:18px;
  right:18px;
  width:42px;
  height:9px;
  border:1px solid rgba(224,160,0,.28);
  background:rgba(0,0,0,.24);
  box-shadow:inset 0 0 12px rgba(224,160,0,.06);
}

.drawer-index{
  position:relative;
  z-index:3;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(224,160,0,.55);
  margin-bottom:96px;
}

.drawer-title{
  position:relative;
  z-index:3;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  font-size:clamp(30px,3.5vw,56px);
  line-height:.86;
  letter-spacing:-.06em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.drawer-copy{
  position:relative;
  z-index:3;
  max-width:270px;
  font-family:"Courier New",monospace;
  font-size:11px;
  line-height:1.55;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#7c7468;
}

.drawer-code{
  position:absolute;
  z-index:3;
  left:18px;
  bottom:18px;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.22);
}

.drawer-ghost{
  position:absolute;
  z-index:1;
  right:-10px;
  bottom:-18px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(72px,9vw,160px);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.035);
  pointer-events:none;
}

.archive-drawer:hover{
  transform:translateY(-4px) scale(1.006);
  background:#0a0908;
  box-shadow:
    inset 0 -3px 0 rgba(224,160,0,.42),
    inset 0 0 0 1px rgba(224,160,0,.08);
}

.archive-drawer:hover .drawer-title{
  color:var(--accent);
  animation:drawerTitleSlip .32s steps(2,end);
}

.archive-drawer:hover .drawer-handle{
  border-color:rgba(224,160,0,.62);
  transform:translateX(-4px);
}

.archive-drawer:hover .drawer-code{
  color:rgba(224,160,0,.55);
}

.archive-drawer:hover .drawer-ghost{
  animation:drawerGhostRecall .9s steps(2,end);
}

@keyframes drawerTitleSlip{
  0%{transform:translateX(0);filter:blur(0)}
  28%{transform:translateX(-4px);filter:blur(1px)}
  58%{transform:translateX(3px);filter:blur(0)}
  100%{transform:translateX(0);filter:blur(0)}
}

@keyframes drawerGhostRecall{
  0%{opacity:0;transform:translateY(8px)}
  26%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-8px)}
}

.archive-material-line{
  position:relative;
  z-index:2;
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(238,232,221,.3);
}

.archive-material-line span:nth-child(2){
  color:rgba(224,160,0,.42);
}


/* MATÉRIA DE ARQUIVO — ARCHIVAL EVIDENCE LAYER */

.drawer-evidence{
  margin-top:22px;
  padding-top:14px;
  border-top:1px dashed rgba(224,160,0,.18);
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.18);
  opacity:.55;
  transition:all .45s ease;
}

.drawer-evidence div{
  margin-bottom:6px;
  transform:translateY(4px);
  opacity:.45;
  transition:all .45s ease;
}

.archive-drawer:hover .drawer-evidence{
  color:rgba(224,160,0,.58);
  opacity:1;
}

.archive-drawer:hover .drawer-evidence div{
  transform:translateY(0);
  opacity:1;
}

.archive-drawer:hover .drawer-copy{
  color:#9b927f;
}

.archive-drawer:hover .drawer-ghost{
  opacity:.18;
}

.drawer-stamp{
  position:absolute;
  top:52px;
  right:18px;
  font-family:"Courier New",monospace;
  font-size:9px;
  letter-spacing:.18em;
  color:rgba(224,160,0,.22);
  transform:rotate(-2deg);
}


/* ============================================================
   MATÉRIA DE ARQUIVO — DRAWER DEPTH + CONNECTED ARCHIVE
   deeper compartments / hidden records / damaged vestiges
   ============================================================ */

.archive-drawer{
  perspective:900px;
  transform-style:preserve-3d;
}

.archive-drawer .drawer-panel{
  position:relative;
  z-index:4;
  min-height:100%;
  transition:
    transform .62s cubic-bezier(.16,.74,.18,1),
    filter .62s cubic-bezier(.16,.74,.18,1);
}

.archive-drawer:hover .drawer-panel{
  transform:translateY(-5px) translateZ(18px);
}

.drawer-depth{
  position:absolute;
  inset:18px;
  z-index:2;
  padding:18px;
  border:1px solid rgba(224,160,0,.10);
  background:
    linear-gradient(180deg,rgba(224,160,0,.035),rgba(0,0,0,.18)),
    repeating-linear-gradient(
      0deg,
      transparent 0 7px,
      rgba(255,255,255,.025) 7px 8px
    );
  opacity:0;
  transform:translateY(14px) scale(.98);
  transition:
    opacity .5s ease,
    transform .62s cubic-bezier(.16,.74,.18,1);
  pointer-events:none;
}

.archive-drawer:hover .drawer-depth{
  opacity:1;
  transform:translateY(0) scale(1);
}

.drawer-depth-line{
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(238,232,221,.24);
  margin-bottom:8px;
}

.drawer-depth-line strong{
  color:rgba(224,160,0,.48);
  font-weight:400;
}

.drawer-index{
  line-height:1.45;
}

.drawer-index .cat-num{
  display:block;
  color:rgba(224,160,0,.62);
}

.drawer-index .cat-label{
  display:block;
  color:rgba(238,232,221,.34);
}

.archive-drawer.archive-flicker::before{
  opacity:.26;
}

.archive-drawer.archive-flicker .drawer-code{
  color:rgba(224,160,0,.58);
  animation:archiveFlickerCode .32s steps(2,end);
}

@keyframes archiveFlickerCode{
  0%{opacity:.22;transform:translateX(0)}
  35%{opacity:.88;transform:translateX(-3px)}
  70%{opacity:.38;transform:translateX(2px)}
  100%{opacity:.55;transform:translateX(0)}
}

.archive-drawer[data-archive-signal="vestigios"]:hover .drawer-title{
  animation:vestigeDamage .22s steps(2,end) 2;
}

.archive-drawer[data-archive-signal="vestigios"]:hover .drawer-evidence div:nth-child(1)::first-letter{
  color:transparent;
}

.archive-drawer[data-archive-signal="vestigios"]:hover .drawer-evidence{
  text-shadow:
    4px 0 rgba(224,160,0,.24),
    -3px 0 rgba(255,255,255,.08);
}

@keyframes vestigeDamage{
  0%{transform:translateX(0);filter:blur(0)}
  28%{transform:translateX(-5px);filter:blur(1px)}
  58%{transform:translateX(4px);filter:blur(0)}
  100%{transform:translateX(0);filter:blur(0)}
}

.drawer-corrupt{
  display:none;
  color:rgba(224,160,0,.62);
}

.archive-drawer[data-archive-signal="vestigios"]:hover .drawer-corrupt{
  display:block;
  animation:corruptReveal .18s steps(2,end);
}

@keyframes corruptReveal{
  0%{opacity:0;transform:translateX(-5px)}
  50%{opacity:.9;transform:translateX(2px)}
  100%{opacity:.62;transform:translateX(0)}
}


/* SECTION 3 — GHOST WORD SWAP ONLY
   Keeps the drawer design untouched. Only TERRA / CORPO / TEMPO / RESTO
   briefly exchange positions on hover, then return. */

.drawer-ghost{
  transition:
    transform 1.25s cubic-bezier(.16,.74,.18,1),
    opacity .55s ease,
    filter .55s ease;
  will-change:transform;
}

.drawer-ghost.ghost-swap-active{
  z-index:12;
  opacity:.20 !important;
  filter:blur(.4px);
}



/* SECTION 3 — GHOST WORD TEXT SWAP ONLY
   Keeps all drawer layout/behavior untouched.
   Only TERRA / CORPO / TEMPO / RESTO trade labels temporarily. */

.drawer-ghost.semantic-word-swap{
  opacity:.20 !important;
  filter:blur(.2px);
  transition:opacity .35s ease, filter .35s ease;
}



/* SECTION 3 — INTENTIONAL GHOST WORD EXCHANGE
   No fade. No opacity override. Only the text labels exchange. */

.drawer-ghost{
  transition:
    text-shadow .22s ease;
}

.drawer-ghost.semantic-exchange-active{
  filter:inherit;
  opacity:inherit !important;
  text-shadow:
    5px 0 rgba(224,160,0,.12),
    -4px 0 rgba(255,255,255,.05),
    0 0 28px rgba(224,160,0,.10);
}


@media(max-width:1000px){
  .archive-drawers{grid-template-columns:1fr 1fr}
  .archive-drawer{border-bottom:1px solid var(--line)}
  .archive-drawer:nth-child(2){border-right:none}
}

@media(max-width:620px){
  .archive-material-section{padding-left:20px;padding-right:20px}
  .archive-material-head{display:block}
  .archive-material-head p{margin-top:18px}
  .archive-drawers{grid-template-columns:1fr}
  .archive-drawer{border-right:none}
}


@media(max-width:1000px){
  .process-grid{grid-template-columns:1fr 1fr}
  .process-step{border-bottom:1px solid var(--line)}
  .process-step:nth-child(2){border-right:none}
}

@media(max-width:620px){
  .process-section{padding-left:20px;padding-right:20px}
  .process-head{display:block}
  .process-head p{margin-top:18px}
  .process-grid{grid-template-columns:1fr}
  .process-step{border-right:none}
}


@media(max-width:1000px){
  .grid{grid-template-columns:1fr 1fr}
}

@media(max-width:620px){
  .topbar,.hero,.section{padding-left:20px;padding-right:20px}
  .section-head{display:block}
  .section-head p{margin-top:16px}
  .grid{grid-template-columns:1fr}
  .poem-line{font-size:clamp(48px,15vw,84px)}
  .word-holder{min-width:80vw}
}

/* SECTION 3 — NO FADE HARD OVERRIDE */
.archive-material-section .drawer-ghost.semantic-exchange-active,
.archive-material-section .archive-drawer:hover .drawer-ghost.semantic-exchange-active{
  opacity:inherit !important;
  filter:inherit !important;
}


/* ============================================================
   SECTION 4 — RECOVERY VIDEO ROOM
   MP4 background + projected screen + paper notes hover system
   ============================================================ */

.recovery-video-section{
  position:relative;
  min-height:100vh;
  padding:0;
  overflow:hidden;
  background:#050505;
  isolation:isolate;
}

.recovery-video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-4;
  filter:brightness(.92) contrast(1.05) saturate(.95);
}

.recovery-video-vignette{
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,.06) 44%, rgba(0,0,0,.52)),
    linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.08) 48%, rgba(0,0,0,.32));
}

.recovery-video-grain{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.12;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.045) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.recovery-left{
  position:absolute;
  left:4.6vw;
  top:11vh;
  z-index:5;
  width:300px;
}

.recovery-kicker{
  font-family:"Courier New",monospace;
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent);
  margin-bottom:24px;
}

.recovery-left h2{
  font-family:"Courier New",monospace;
  font-size:clamp(30px,3vw,54px);
  line-height:1.08;
  font-weight:400;
  letter-spacing:.05em;
  color:var(--fg);
  text-transform:uppercase;
}

.recovery-rule{
  width:160px;
  height:1px;
  background:rgba(224,160,0,.68);
  margin:24px 0;
}

.recovery-left p{
  font-family:"Courier New",monospace;
  font-size:12px;
  line-height:1.55;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(238,232,221,.62);
}

.recovery-index{
  position:absolute;
  left:4.6vw;
  top:38vh;
  z-index:5;
  font-family:"Courier New",monospace;
  font-size:13px;
  letter-spacing:.14em;
  color:rgba(238,232,221,.56);
}

.recovery-index span{display:block;margin:14px 0}
.recovery-index .active{color:var(--accent)}


.projected-archive-screen{
    left:45% !important;
    top:9% !important;
    width:36% !important;
    height:62% !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    border-radius:18px !important;
    overflow:hidden !important;
    opacity:.82 !important;
    mix-blend-mode:screen !important;
}


.projected-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(1.25) brightness(.86);
  transform:scale(1.035);
  opacity:.92;
}

.projected-image.switching{animation:usinaProjectionSwitch .36s steps(3,end)}

@keyframes usinaProjectionSwitch{
  0%{opacity:.08;filter:grayscale(1) contrast(1.8) brightness(1.25) blur(2px);transform:scale(1.07) translateX(-8px)}
  28%{opacity:.86;filter:grayscale(1) contrast(1.1) brightness(.7) blur(0);transform:scale(1.03)}
  52%{opacity:.20;filter:grayscale(1) contrast(1.5) brightness(1.1) blur(1px)}
  100%{opacity:.92;filter:grayscale(1) contrast(1.25) brightness(.86);transform:scale(1.035)}
}

.projected-damage{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.48)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 5px);
  opacity:.34;
  mix-blend-mode:multiply;
}

.recovery-info{
  position:absolute;
  right:5.6vw;
  top:16vh;
  z-index:5;
  width:min(360px,26vw);
  font-family:"Courier New",monospace;
  color:var(--fg);
  text-transform:uppercase;
}

.recovery-code{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:.16em;
  margin-bottom:22px;
}

.recovery-code::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px rgba(224,160,0,.65);
}

.recovery-info h3{
  font-family:"Courier New",monospace;
  font-size:clamp(21px,2vw,34px);
  line-height:1.2;
  letter-spacing:.08em;
  font-weight:400;
  margin-bottom:22px;
}

.recovery-info-rule{
  width:96px;
  height:1px;
  background:rgba(224,160,0,.68);
  margin-bottom:22px;
}

.recovery-info dl{
  display:grid;
  grid-template-columns:118px 1fr;
  gap:8px 18px;
  margin:0;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.08em;
}

.recovery-info dt{color:rgba(224,160,0,.65)}
.recovery-info dd{margin:0;color:rgba(238,232,221,.72)}

.recovery-info p{
  margin-top:22px;
  font-size:10px;
  line-height:1.65;
  letter-spacing:.08em;
  color:rgba(238,232,221,.58);
}

.recovery-actions{
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:28px;
}

.recovery-actions button{
  border:1px solid rgba(238,232,221,.46);
  background:rgba(0,0,0,.12);
  color:var(--fg);
  padding:10px 18px;
  font-family:"Courier New",monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.recovery-actions span{
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(238,232,221,.46);
}

.archive-note-strip{
  position:absolute;
  left:6vw;
  right:6vw;
  bottom:5.7vh;
  z-index:6;
}

.note-strip-title{
  font-family:"Courier New",monospace;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(238,232,221,.74);
  margin-bottom:18px;
}

.note-card-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:28px;
}

.paper-note{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:178px;
  border:1px solid rgba(238,232,221,.12);
  background:
    linear-gradient(180deg, rgba(241,224,188,.88), rgba(177,153,116,.90));
  color:#15110d;
  padding:25px 22px 18px;
  cursor:pointer;
  text-align:left;
  font-family:"Courier New",monospace;
  box-shadow:0 15px 42px rgba(0,0,0,.40);
  transform:translateY(0) rotate(var(--paper-rot,-.5deg));
  transition:
    transform .32s cubic-bezier(.16,.74,.18,1),
    filter .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.paper-note:nth-child(2){--paper-rot:.45deg}
.paper-note:nth-child(3){--paper-rot:-.35deg}
.paper-note:nth-child(4){--paper-rot:.25deg}
.paper-note:nth-child(5){--paper-rot:-.25deg}

.paper-note::before{
  content:"";
  position:absolute;
  top:-13px;
  left:38%;
  width:76px;
  height:22px;
  background:rgba(230,218,195,.45);
  transform:rotate(-1deg);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.paper-note::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(0,0,0,.15) 16px 17px),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 34%);
  mix-blend-mode:multiply;
}

.paper-note:hover,
.paper-note.active{
  transform:translateY(-16px) rotate(0deg) scale(1.018);
  border-color:rgba(224,160,0,.86);
  box-shadow:0 28px 70px rgba(0,0,0,.58);
  filter:brightness(1.06);
}

.paper-note.active{
  outline:2px solid rgba(224,160,0,.88);
  outline-offset:0;
}

.paper-code{
  font-size:12px;
  letter-spacing:.13em;
  margin-bottom:18px;
}

.paper-title{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:900;
  font-size:22px;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.paper-origin,
.paper-year{
  font-size:12px;
  line-height:1.35;
  text-transform:uppercase;
}

.paper-integrity{
  position:absolute;
  right:18px;
  bottom:16px;
  font-size:12px;
}

@media(max-width:900px){
  .recovery-video-section{min-height:140vh}
  .recovery-left{position:relative;left:auto;top:auto;padding:42px 24px 0}
  .recovery-index{display:none}
  .projected-archive-screen{
    position:relative;
    left:auto;
    top:auto;
    width:calc(100% - 48px);
    height:34vh;
    margin:36px 24px 0;
  }
  .recovery-info{
    position:relative;
    right:auto;
    top:auto;
    width:auto;
    margin:24px;
  }
  .archive-note-strip{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    padding:28px 24px 48px;
  }
  .note-card-row{grid-template-columns:1fr}
}


/* PATCH — use real rendered archive card images as Section 4 controls */
.archive-note-strip{
  left:6vw !important;
  right:6vw !important;
  bottom:5.2vh !important;
}

.image-card-row{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(170px,1fr)) !important;
  gap:28px !important;
  align-items:end !important;
}

.paper-note.image-note{
  min-height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:0 18px 46px rgba(0,0,0,.48) !important;
  overflow:visible !important;
  transform:translateY(0) rotate(var(--paper-rot,-.35deg)) !important;
}

.paper-note.image-note::before,
.paper-note.image-note::after{
  display:none !important;
}

.paper-note.image-note img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
  border:1px solid rgba(238,232,221,.08);
}

.paper-note.image-note:hover,
.paper-note.image-note.active{
  transform:translateY(-16px) rotate(0deg) scale(1.018) !important;
  border-color:transparent !important;
  box-shadow:0 32px 80px rgba(0,0,0,.64) !important;
  filter:brightness(1.04) contrast(1.02);
}

.paper-note.image-note.active{
  outline:2px solid rgba(224,160,0,.92) !important;
  outline-offset:0 !important;
}

.paper-note.image-note.active img{
  box-shadow:
    0 0 0 1px rgba(224,160,0,.55),
    0 0 34px rgba(224,160,0,.24);
}

@media(max-width:900px){
  .image-card-row{
    grid-template-columns:1fr !important;
  }
}


/* PATCH — bigger real cards, no black wrapper/background */
.archive-note-strip{
  left:3.8vw !important;
  right:3.8vw !important;
  bottom:4.4vh !important;
}

.image-card-row{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(230px, 1fr)) !important;
  gap:34px !important;
  align-items:end !important;
}

.paper-note.image-note{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:auto !important;
  overflow:visible !important;
  outline:none !important;
  transform:translateY(0) rotate(var(--paper-rot,-.25deg)) !important;
}

.paper-note.image-note::before,
.paper-note.image-note::after{
  display:none !important;
  content:none !important;
}

.paper-note.image-note img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  pointer-events:none;
  user-select:none;
}

.paper-note.image-note:hover,
.paper-note.image-note.active{
  transform:translateY(-14px) rotate(0deg) scale(1.025) !important;
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  filter:brightness(1.06) contrast(1.02) !important;
}

.paper-note.image-note.active img{
  box-shadow:none !important;
  border:0 !important;
  outline:none !important;
}

@media(max-width:1200px){
  .image-card-row{
    grid-template-columns:repeat(5, minmax(190px, 1fr)) !important;
    gap:24px !important;
  }
}

@media(max-width:900px){
  .image-card-row{
    grid-template-columns:1fr !important;
  }
}


/* REMOVE ALL BLACK PADS BEHIND CARDS */
.archive-note-strip,
.note-card-row,
.image-card-row{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.archive-note-strip::before,
.archive-note-strip::after,
.note-card-row::before,
.note-card-row::after,
.image-card-row::before,
.image-card-row::after{
    display:none !important;
    content:none !important;
}


/* FINAL FIX — transparent card PNGs + no wrapper pads */
.archive-note-strip,
.note-card-row,
.image-card-row,
.paper-note,
.paper-note.image-note{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.paper-note::before,
.paper-note::after,
.paper-note.image-note::before,
.paper-note.image-note::after,
.archive-note-strip::before,
.archive-note-strip::after,
.note-card-row::before,
.note-card-row::after,
.image-card-row::before,
.image-card-row::after{
  display:none !important;
  content:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

.paper-note.image-note img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

.paper-note.image-note:hover,
.paper-note.image-note.active{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}


/* PATCH — projection uses cropped photo only, not full card */
.projected-image{
  background-size:cover !important;
  background-position:center center !important;
  filter:grayscale(1) contrast(1.18) brightness(.88) sepia(.08) !important;
}

.projected-damage{
  opacity:.42 !important;
  mix-blend-mode:multiply !important;
}



/* ===== extracted stylesheet ===== */


.recovered-archives-section{
padding:140px 8vw;
border-top:1px solid rgba(255,255,255,.06);
}
.recovered-inner{max-width:1200px;margin:auto;}
.archive-access-label{
font-size:11px;letter-spacing:.3em;opacity:.55;margin-bottom:20px;
}
.recovered-title{
font-size:clamp(48px,8vw,110px);
line-height:.92;
margin:0 0 20px;
}
.recovered-intro{
max-width:620px;
opacity:.72;
margin-bottom:60px;
}
.archive-record{
padding:34px 0;
border-top:1px solid rgba(255,255,255,.08);
transition:all .3s ease;
}
.archive-record:last-child{
border-bottom:1px solid rgba(255,255,255,.08);
}
.archive-record:hover{
transform:translateX(10px);
}
.record-id{
font-size:12px;
letter-spacing:.25em;
color:rgba(224,160,0,.8);
margin-bottom:10px;
}
.record-title{
font-size:clamp(24px,3vw,42px);
margin-bottom:8px;
}
.record-meta{
font-size:12px;
letter-spacing:.18em;
opacity:.55;
}


/* ===== extracted stylesheet ===== */


.archive-record{position:relative;overflow:hidden}
.archive-record::after{
 content:"RECUPERADO";
 position:absolute; right:20px; top:20px;
 font-size:11px; letter-spacing:.2em;
 color:rgba(224,160,0,.25);
 transform:rotate(-12deg) scale(.9);
 opacity:0; transition:.3s;
}
.archive-record:hover::after{opacity:1}

.record-preview{
 max-height:0;
 overflow:hidden;
 transition:max-height .6s ease,padding .6s ease;
 padding:0 0;
}
.archive-record:hover .record-preview{
 max-height:260px;
 padding:18px 0 8px;
}

.preview-frame{
 height:140px;
 border:1px solid rgba(255,255,255,.08);
 background:linear-gradient(135deg,#222,#444,#222);
 margin-bottom:10px;
 position:relative;
}
.preview-frame:before{
 content:"FRAME 443  |  TCR 01:12:08:17";
 position:absolute;left:10px;bottom:8px;
 font-size:10px;color:rgba(255,255,255,.55);
}

.integrity{display:inline-block}
.archive-record:hover .integrity{
 animation:jitterIntegrity 1.2s steps(4,end) infinite;
}
@keyframes jitterIntegrity{
 0%{opacity:1}25%{opacity:.9}50%{opacity:1}75%{opacity:.95}100%{opacity:1}
}

.meta-grid{
 font-size:11px;
 letter-spacing:.14em;
 color:rgba(255,255,255,.6);
 line-height:1.8;
}


/* ===== extracted stylesheet ===== */


/* AMBER CONTAINMENT SYSTEM
   Keep the existing palette, but reserve yellow/amber for major signals.
   Neutral archive infrastructure becomes bone/gray. */

:root{
  --archive-neutral:rgba(238,232,221,.48);
  --archive-neutral-soft:rgba(238,232,221,.28);
  --archive-neutral-faint:rgba(255,255,255,.16);
  --archive-signal:rgba(224,160,0,.78);
  --archive-signal-soft:rgba(224,160,0,.28);
  --archive-rupture:rgba(255,255,255,.86);
}

/* NEUTRAL: technical / infrastructure / background archive layer */
.tcr,
.frame-code,
.frame-num,
.desc,
.hint,
.audio-toggle,
.metadata-echo,
.temporal-trace,
.autonomous-trace,
.archive-mood-whisper,
.false-memory-fragment,
.drawer-code,
.drawer-stamp,
.drawer-evidence,
.drawer-depth-line,
.record-meta,
.meta-grid,
.preview-frame:before{
  color:var(--archive-neutral) !important;
}

.gate{
  background:rgba(238,232,221,.12) !important;
}

.shared-transport{
  background:linear-gradient(to bottom,transparent,rgba(238,232,221,.055),transparent) !important;
}

.transport-drag{
  background:linear-gradient(90deg,transparent,rgba(238,232,221,.035),transparent) !important;
}

.memory-dust{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.42) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(238,232,221,.10) 0 1px, transparent 1px) !important;
}

.decay-dust{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.28) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(238,232,221,.08) 0 1px, transparent 1px) !important;
}

.archive-burn{
  background:
    radial-gradient(circle at 12% 42%, rgba(238,232,221,.11), transparent 12%),
    radial-gradient(circle at 82% 22%, rgba(224,160,0,.08), transparent 14%) !important;
}

.hero::before{
  background:
    radial-gradient(circle at 38% 44%, rgba(224,160,0,.045), transparent 32%),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.07), transparent 24%) !important;
}

/* AMBER: main heads / active memory / selected signal */
.word-holder,
.brand span,
button:hover,
.col:hover .title,
.col.color-wake .title,
.col.spinning .title,
.semantic-flash,
.sw5,
.record-id,
.archive-access-label,
.recovered-title,
.drawer-index .cat-num,
.drawer-title,
.drawer-ghost.semantic-exchange-active,
.archive-record::after,
.integrity,
.word-holder::after,
.poem::before{
  color:var(--accent) !important;
}

.word-holder{
  text-shadow:0 0 calc(20px + var(--memory) * 1.8px) rgba(224,160,0,.14) !important;
}

.semantic-flash{
  color:rgba(224,160,0,.82) !important;
}

.archive-record::after{
  color:rgba(224,160,0,.30) !important;
}

.recovered-archives-section .preview-frame{
  border-color:rgba(238,232,221,.12) !important;
  background:
    linear-gradient(135deg,rgba(18,18,18,.98),rgba(54,50,42,.36),rgba(9,9,9,.98)),
    radial-gradient(circle at 34% 42%,rgba(224,160,0,.055),transparent 34%) !important;
}

.recovered-archives-section .preview-frame:before{
  color:rgba(238,232,221,.50) !important;
}

.recovered-archives-section .record-meta,
.recovered-archives-section .meta-grid{
  color:rgba(238,232,221,.50) !important;
}

.recovered-archives-section .record-id,
.recovered-archives-section .integrity{
  color:rgba(224,160,0,.76) !important;
}

.archive-material-section .drawer-code,
.archive-material-section .drawer-stamp,
.archive-material-section .drawer-evidence,
.archive-material-section .drawer-depth-line{
  color:rgba(238,232,221,.34) !important;
}

.archive-material-section .archive-drawer:hover .drawer-code,
.archive-material-section .archive-drawer:hover .drawer-stamp,
.archive-material-section .archive-drawer:hover .drawer-evidence{
  color:rgba(238,232,221,.58) !important;
}

.archive-material-section .drawer-index .cat-num,
.archive-material-section .archive-drawer:hover .drawer-title{
  color:rgba(224,160,0,.74) !important;
}

.col.locked{
  box-shadow:inset 0 -3px 0 rgba(224,160,0,.52) !important;
}

.col.temporal-memory{
  box-shadow:
    inset 0 0 0 1px rgba(238,232,221,.10),
    inset 0 -3px 0 rgba(224,160,0,.24) !important;
}

/* WHITE: rupture / shocks / damaged frames */
.false-memory-word,
.semantic-flash.catastrophic{
  color:var(--archive-rupture) !important;
}

.semantic-flash.aggressive{
  color:rgba(255,255,255,.88) !important;
  text-shadow:
    8px 0 rgba(224,160,0,.28),
    -8px 0 rgba(255,255,255,.18),
    0 0 38px rgba(255,255,255,.16) !important;
}

.semantic-flash.catastrophic{
  text-shadow:
    14px 0 rgba(224,160,0,.32),
    -12px 0 rgba(255,255,255,.35),
    0 0 64px rgba(255,255,255,.28) !important;
}

.word-ghost{
  color:rgba(238,232,221,.10) !important;
  text-shadow:
    5px 0 rgba(224,160,0,.08),
    -4px 0 rgba(255,255,255,.06),
    0 0 24px rgba(238,232,221,.08) !important;
}

.word-ghost.memory-heavy{
  color:rgba(224,160,0,.13) !important;
  text-shadow:
    8px 0 rgba(224,160,0,.14),
    -6px 0 rgba(255,255,255,.08),
    0 0 32px rgba(224,160,0,.12) !important;
}

button{
  border-color:rgba(238,232,221,.16) !important;
}

button:hover{
  border-color:rgba(224,160,0,.72) !important;
  color:rgba(224,160,0,.82) !important;
}


/* ===== extracted stylesheet ===== */


/* USINA UI/UX SPRINT 1
   - clearer reel hover affordance
   - Section 3 drawer depth/parallax
   - reduced secondary literary noise
   - live archive status markers in Section 4
*/

.col{
  transition:
    transform .48s cubic-bezier(.16,.74,.18,1),
    filter .48s cubic-bezier(.16,.74,.18,1),
    opacity .48s ease,
    box-shadow .48s ease;
}

.col:hover{
  transform:translateY(-3px) scale(1.006);
  box-shadow:
    inset 0 0 0 1px rgba(238,232,221,.08),
    inset 0 -2px 0 rgba(224,160,0,.34);
}

.col:hover .viewport{
  box-shadow:
    inset 0 0 0 1px rgba(224,160,0,.12),
    inset 0 0 42px rgba(224,160,0,.045);
}

.col:hover .frame-code,
.col:hover .frame-num,
.col:hover .desc{
  color:rgba(238,232,221,.62) !important;
}

.col:hover .gate{
  background:rgba(224,160,0,.28) !important;
  box-shadow:0 0 14px rgba(224,160,0,.16);
}

.col:hover .perfs .perf{
  box-shadow:
    0 0 0 1px rgba(238,232,221,.14),
    0 0 10px rgba(224,160,0,.08);
}

.archive-material-section .archive-drawer{
  transition:
    transform .55s cubic-bezier(.16,.74,.18,1),
    box-shadow .55s cubic-bezier(.16,.74,.18,1),
    border-color .55s ease,
    background .55s ease;
  transform-style:preserve-3d;
}

.archive-material-section .archive-drawer:hover{
  transform:translateY(-5px) translateZ(0) scale(1.006);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(238,232,221,.08),
    inset 0 -1px 0 rgba(224,160,0,.22);
}

.archive-material-section .drawer-ghost{
  transition:
    transform .65s cubic-bezier(.16,.74,.18,1),
    opacity .65s ease,
    text-shadow .65s ease;
  will-change:transform,opacity;
}

.archive-material-section .archive-drawer:hover .drawer-ghost{
  transform:translate3d(4px,-3px,0) scale(1.012);
  opacity:.16;
  text-shadow:
    8px 0 rgba(224,160,0,.08),
    -6px 0 rgba(255,255,255,.05),
    0 0 34px rgba(238,232,221,.08);
}

.archive-material-section .archive-drawer:nth-child(even):hover .drawer-ghost{
  transform:translate3d(-4px,-2px,0) scale(1.012);
}

.archive-material-section .archive-side-note,
.archive-material-section .archive-note,
.archive-material-section .section-annotation,
.archive-material-section .archive-literary-note,
.archive-material-section .archive-manifesto-note{
  opacity:.34 !important;
}

.archive-material-section .section-head p{
  opacity:.52 !important;
}

.recovered-archives-section .record-meta::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:9px;
  transform:translateY(-1px);
  background:rgba(224,160,0,.68);
  box-shadow:0 0 10px rgba(224,160,0,.22);
  animation:archiveStatusPulse 3.8s steps(2,end) infinite;
}

.recovered-archives-section .archive-record:nth-child(2) .record-meta::before,
.recovered-archives-section .archive-record:nth-child(4) .record-meta::before{
  animation-duration:5.4s;
  opacity:.72;
}

@keyframes archiveStatusPulse{
  0%,72%,100%{opacity:.22}
  74%,82%{opacity:.88}
  84%{opacity:.36}
}

.recovered-archives-section .integrity{
  position:relative;
}

.recovered-archives-section .integrity::after{
  content:"";
  display:inline-block;
  width:26px;
  height:8px;
  margin-left:10px;
  background:
    linear-gradient(90deg,
      rgba(224,160,0,.65) 0 18%,
      transparent 18% 25%,
      rgba(238,232,221,.38) 25% 43%,
      transparent 43% 50%,
      rgba(238,232,221,.24) 50% 68%,
      transparent 68% 75%,
      rgba(224,160,0,.45) 75% 100%);
  opacity:.62;
  transform:translateY(1px);
}

.recovered-archives-section .archive-record:hover .integrity::after{
  animation:integrityBarsWake .7s steps(3,end) infinite;
}

@keyframes integrityBarsWake{
  0%{opacity:.38;filter:brightness(.9)}
  50%{opacity:.86;filter:brightness(1.25)}
  100%{opacity:.52;filter:brightness(1)}
}


/* ===== extracted stylesheet ===== */


/* Section 4 hierarchy correction: shorter than hero, tighter composition */
.recovery-video-section,
.recovery-projection-section,
#arquivos-recuperados{
  min-height:72vh !important;
  height:72vh !important;
  max-height:72vh !important;
  overflow:hidden !important;
}

.recovery-video-bg{
  height:72vh !important;
  object-fit:cover !important;
}

/* Pull the composition upward and reduce vertical spread */
.recovery-left{
  top:7vh !important;
  transform:scale(.88);
  transform-origin:top left;
}

.recovery-index{
  top:31vh !important;
}

.projected-archive-screen{
  top:6vh !important;
  height:32vh !important;
}

.recovery-info{
  top:10vh !important;
  transform:scale(.88);
  transform-origin:top right;
}

/* Cards closer to the bottom, but smaller so they don't dominate */
.archive-note-strip{
  bottom:2.6vh !important;
  left:5vw !important;
  right:5vw !important;
}

.note-strip-title{
  margin-bottom:10px !important;
  font-size:10px !important;
}

.image-card-row{
  grid-template-columns:repeat(5, minmax(170px, 1fr)) !important;
  gap:22px !important;
}

.paper-note.image-note:hover,
.paper-note.image-note.active{
  transform:translateY(-9px) rotate(0deg) scale(1.015) !important;
}

/* Keep responsive behavior sane */
@media(max-width:900px){
  .recovery-video-section,
  .recovery-projection-section,
  #arquivos-recuperados{
    min-height:120vh !important;
    height:auto !important;
    max-height:none !important;
  }

  .recovery-left,
  .recovery-info{
    transform:none !important;
  }

  .projected-archive-screen{
    height:30vh !important;
  }

  .image-card-row{
    grid-template-columns:1fr !important;
  }
}


/* ===== extracted stylesheet ===== */


/* Projection mapped to calibrated 2190x740 ultrawide coordinates:
   TL 955,110 | TR 1980,52 | BR 1964,475 | BL 954,455 */
.projected-archive-screen{
  position:absolute !important;

  left:43.562% !important;
  top:7.027% !important;

  width:46.849% !important;
  height:57.162% !important;

  overflow:hidden !important;
  border-radius:0 !important;

  clip-path:polygon(
    0.097% 13.712%,
    100% 0%,
    98.441% 100%,
    0% 95.272%
  ) !important;

  -webkit-clip-path:polygon(
    0.097% 13.712%,
    100% 0%,
    98.441% 100%,
    0% 95.272%
  ) !important;

  opacity:.70 !important;
  mix-blend-mode:screen !important;
  z-index:4 !important;
}

.projected-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center center !important;
  transform:none !important;
}

.projected-damage{
  inset:0 !important;
}

.recovery-info{
  z-index:8 !important;
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .projected-image{
  background-size:cover !important;
  background-position:center center !important;
  filter:grayscale(1) contrast(1.12) brightness(.82) sepia(.06) !important;
  transform:none !important;
}
.recovery-video-section .projected-archive-screen{
  overflow:hidden !important;
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .projected-archive-screen{
  position:absolute !important;
  left:44.2% !important;
  top:9.5% !important;
  width:39.2% !important;
  height:52.5% !important;
  transform:none !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  border-radius:12px !important;
  overflow:hidden !important;
  opacity:.82 !important;
  mix-blend-mode:screen !important;
}

.recovery-video-section .projected-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center center !important;
  transform:none !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .projected-archive-screen{
  left:44.2% !important;
  top:9.5% !important;
  width:42.0% !important;   /* right side extended */
  height:52.5% !important;
  transform:none !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  border-radius:12px !important;
  overflow:hidden !important;
}

.recovery-video-section .projected-image{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center center !important;
  transform:none !important;
}

/* actual right metadata panel */
.recovery-video-section .recovery-info{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.48) 34%,
    rgba(0,0,0,.76) 100%
  ) !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;
  padding:26px 34px !important;
  border-left:1px solid rgba(224,160,0,.24) !important;
  box-shadow:-34px 0 64px rgba(0,0,0,.50) !important;
}

.recovery-video-section .recovery-info,
.recovery-video-section .recovery-info *{
  text-shadow:0 2px 14px rgba(0,0,0,.9) !important;
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .projected-archive-screen{
  top:3.8% !important;
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .projected-archive-screen{
  overflow:visible !important;
}

.recovery-video-section .projected-image{
  position:absolute !important;
  top:-10% !important;
  left:-10% !important;
  right:auto !important;
  bottom:auto !important;
  width:120% !important;
  height:120% !important;
  min-width:120% !important;
  min-height:120% !important;
  background-size:cover !important;
  background-position:center center !important;
  transform:none !important;
}

/* keep film damage covering the expanded projection too */
.recovery-video-section .projected-damage{
  position:absolute !important;
  top:-10% !important;
  left:-10% !important;
  width:120% !important;
  height:120% !important;
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .projected-archive-screen{
    transform:scale(0.90) !important;
    transform-origin:center center !important;
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .recovery-index span{
  transition:color .22s ease, text-shadow .22s ease, opacity .22s ease;
}
.recovery-video-section .recovery-index span.hover-active{
  color:#e0a000 !important;
  text-shadow:0 0 12px rgba(224,160,0,.55) !important;
  opacity:1 !important;
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .recovery-index span.active,
.recovery-video-section .recovery-index .active{
    color:inherit !important;
    text-shadow:none !important;
    opacity:inherit !important;
}


/* ===== extracted stylesheet ===== */



/* Move original 01-05 column upward */
.recovery-video-section .recovery-index{
    transform:translateY(-60px) !important;
}

/* Default state */
.recovery-video-section .recovery-index span{
    color:inherit !important;
    text-shadow:none !important;
}

/* Hover state */
.recovery-video-section .recovery-index span.hover-active{
    color:#e0a000 !important;
    text-shadow:0 0 12px rgba(224,160,0,.55) !important;
}


/* ===== extracted stylesheet ===== */


/* Keep the projection photo size/bleed exactly as before */
.recovery-video-section .projected-archive-screen{
  overflow:visible !important;
}

.recovery-video-section .projected-image{
  position:absolute !important;
  top:-10% !important;
  left:-10% !important;
  width:120% !important;
  height:120% !important;
  min-width:120% !important;
  min-height:120% !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background-size:cover !important;
  background-position:center center !important;
  transform:none !important;
  filter:grayscale(1) contrast(1.18) brightness(.82) sepia(.06) !important;
}

/* Real moving grain: 300% layer clipped inside projected image only */
.recovery-video-section .projected-image::before{
  content:"";
  position:absolute;
  top:-100%;
  left:-100%;
  width:300%;
  height:300%;
  z-index:50;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.65' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .18 .52 .78'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:section4FilmGrain300 8s steps(10,end) infinite;
}

/* Subtle projector flicker, clipped to image only */
.recovery-video-section .projected-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:51;
  pointer-events:none;
  opacity:.14;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(255,255,255,.045) 3px,
      rgba(255,255,255,.045) 4px
    ),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.13), transparent 44%);
  animation:section4ProjectionFlicker .72s steps(4,end) infinite;
}

@keyframes section4FilmGrain300{
  0%,100% { transform:translate(0,0); }
  10% { transform:translate(-5%,-10%); }
  20% { transform:translate(-15%,5%); }
  30% { transform:translate(7%,-25%); }
  40% { transform:translate(-5%,25%); }
  50% { transform:translate(-15%,10%); }
  60% { transform:translate(15%,0%); }
  70% { transform:translate(0%,15%); }
  80% { transform:translate(3%,25%); }
  90% { transform:translate(-10%,10%); }
}

@keyframes section4ProjectionFlicker{
  0%{opacity:.10}
  25%{opacity:.18}
  50%{opacity:.12}
  75%{opacity:.20}
  100%{opacity:.14}
}


/* ===== extracted stylesheet ===== */


.recovery-video-section .archive-note-strip .paper-note.image-note,
.recovery-video-section .image-card-row .paper-note.image-note{
  transition:
    transform .28s cubic-bezier(.16,.74,.18,1),
    opacity .28s ease,
    filter .28s ease !important;
  transform-origin:center bottom !important;
  will-change:transform, opacity, filter !important;
}

/* When the card row is being interacted with, fade all cards */
.recovery-video-section .archive-note-strip:hover .paper-note.image-note,
.recovery-video-section .image-card-row:hover .paper-note.image-note{
  opacity:.42 !important;
  filter:grayscale(.55) brightness(.72) contrast(.92) !important;
  transform:scale(.94) translateY(8px) !important;
}

/* The hovered card becomes the focus */
.recovery-video-section .archive-note-strip .paper-note.image-note:hover,
.recovery-video-section .image-card-row .paper-note.image-note:hover{
  opacity:1 !important;
  filter:none !important;
  transform:scale(1.16) translateY(-18px) !important;
  z-index:9999 !important;
}


/* ===== extracted stylesheet ===== */


/* Bleed projection further into the top and right edges */
.recovery-video-section .projected-image{
    top:-16% !important;
    left:-10% !important;
    width:128% !important;
    height:126% !important;
}


/* ===== extracted stylesheet ===== */


.verkstudio-footer{
    padding:42px 20px 56px;
    text-align:center;
}
.verkstudio-signature{
    color:#d9a321;
    margin:0;
    font-size:14px;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.verkstudio-caption{
    margin:8px 0 0;
    color:rgba(255,255,255,.48);
    font-size:12px;
    letter-spacing:.08em;
}