/* ============================================================
   NOUNDER — scenes.css
   hub / drift / archive / thoughts / wings / signal / secrets
   ============================================================ */

.scene{position:relative;width:100%;padding:0 var(--pad)}
.scene--hub,.scene--drift,.scene--thoughts,.scene--signal{
  min-height:100dvh;display:grid;place-items:center;
}


/* ============================================================
   01 · HUB
   ============================================================ */
.hub__stage{
  position:relative;width:min(1100px,100%);
  min-height:min(76dvh,680px);display:grid;place-items:center;
  transform:translate3d(calc(var(--nx) * -10px),calc(var(--ny) * -8px),0);
  transition:transform .5s var(--ease);
}
.hub__name{
  font-size:clamp(40px,13vw,120px);font-weight:400;letter-spacing:.2em;text-indent:.2em;
  line-height:1;user-select:none;
}
.hub__line{
  position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  width:min(420px,84vw);text-align:center;
  font-size:11px;line-height:2;letter-spacing:.06em;color:var(--w45);
}

/* floating labels */
.tag{
  position:absolute;font-size:10px;letter-spacing:.18em;text-transform:lowercase;
  color:var(--w45);white-space:nowrap;user-select:none;
  padding:4px 6px;transition:color .25s,transform .25s var(--ease),letter-spacing .25s;
  animation:tagDrift var(--tdur,9s) ease-in-out infinite alternate;
  animation-delay:var(--tdel,0s);
  will-change:transform;
}
.tag[data-swap],.tag[data-jump],.tag[data-secret]{cursor:pointer}
.tag:hover{color:#fff;letter-spacing:.26em}
.tag.is-shaking{animation:tagShake .32s steps(3,end) 2}
.tag b{font-weight:400}
@keyframes tagDrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--tx,6px),var(--ty,-8px),0)}
}
@keyframes tagShake{
  0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}
  50%{transform:translate(3px,-2px)}75%{transform:translate(-1px,-1px)}100%{transform:none}
}
.tag--a{top:14%;left:9%;  --tx:8px;  --ty:-6px; --tdur:11s}
.tag--b{top:26%;right:11%;--tx:-7px; --ty:7px;  --tdur:13s;--tdel:-3s}
.tag--c{top:63%;left:15%; --tx:5px;  --ty:9px;  --tdur:9s; --tdel:-5s;color:var(--w70)}
.tag--d{top:8%;right:26%; --tx:-9px; --ty:-4px; --tdur:15s;--tdel:-2s}
.tag--e{bottom:24%;right:8%;--tx:6px;--ty:-7px; --tdur:12s;--tdel:-7s}
.tag--f{bottom:12%;left:6%; --tx:-6px;--ty:-9px;--tdur:14s;--tdel:-1s}
.tag--g{top:44%;right:4%;  --tx:4px; --ty:6px;  --tdur:8s; --tdel:-4s}
.tag--h{top:37%;left:2%;   --tx:-5px;--ty:-5px; --tdur:16s;--tdel:-6s}

/* scroll cue */
.scrollcue{
  position:absolute;left:50%;bottom:calc(var(--padb) + 26px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--w25);
}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,#fff,transparent);
  animation:cueDrop 2.4s var(--ease) infinite}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top;opacity:0}
  30%{opacity:1}60%{transform:scaleY(1);transform-origin:top}
  61%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom;opacity:0}}


/* ============================================================
   02 · DRIFT
   ============================================================ */
.scene--drift{padding-block:18dvh}
.drift__grid{position:relative;width:min(1000px,100%);display:grid;gap:clamp(48px,14dvh,140px)}
.drift__line{
  font-size:clamp(15px,3.6vw,26px);line-height:1.7;letter-spacing:.02em;color:#fff;
  max-width:22ch;
  /* reveal uses `translate`, parallax uses `transform` — they compose,
     so the per-frame parallax never fights the one-off reveal transition */
  opacity:0;filter:blur(10px);
  translate:0 24px;
  transform:translate3d(0,var(--par,0px),0);
  transition:opacity .9s var(--ease),filter .9s var(--ease),translate .9s var(--ease);
  will-change:transform,opacity;
}
.drift__line.is-in{opacity:1;filter:blur(0);translate:0 0}
.drift__line--r{justify-self:end;text-align:right}
.drift__line--s{justify-self:center;text-align:center;color:var(--w45)}
.drift__stamp{
  position:absolute;right:0;top:-6%;
  font-size:10px;letter-spacing:.24em;color:var(--w25);
  transform:translate3d(0,var(--par,0px),0);
}
.drift__stamp b{font-weight:400}


/* ============================================================
   03 · ARCHIVE
   ============================================================ */
.scene--archive{padding-block:14dvh 18dvh;overflow:hidden}
.archive__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:0 auto 26px;width:min(1200px,100%);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
}
.archive__title{color:#fff}
.archive__meta{color:var(--w25)}

.archive__stage{
  position:relative;width:min(1200px,100%);margin:0 auto;
  height:clamp(520px,74dvh,760px);
  border:1px solid var(--w06);
  touch-action:pan-y;
}
.ph{
  position:absolute;width:var(--pw,190px);
  transform:translate3d(var(--x,0),var(--y,0),0) rotate(var(--r,0deg));
  transition:box-shadow .3s,filter .3s;
  will-change:transform;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:pan-y;      /* vertical swipe still scrolls the page… */
  cursor:grab;
}
.ph.is-drag{cursor:grabbing;transition:none;touch-action:none} /* …until it's picked up */
.ph:focus-visible{outline:1px solid #fff;outline-offset:6px}
.ph__in{
  position:relative;padding:7px 7px 26px;background:#0a0a0a;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 18px 42px rgba(0,0,0,.85);
  transition:box-shadow .3s,transform .3s var(--ease);
}
@media (hover:hover){
  .ph:hover .ph__in{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 22px 50px rgba(0,0,0,.9)}
}
.ph.is-drag .ph__in{box-shadow:0 0 0 1px rgba(255,255,255,.5),0 34px 70px rgba(0,0,0,.95)}
.ph img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#111;
  filter:grayscale(1) contrast(1.08) brightness(1.08);
  pointer-events:none;-webkit-user-drag:none;
}
.ph__cap{
  position:absolute;left:7px;right:7px;bottom:8px;
  display:flex;justify-content:space-between;gap:8px;
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--w45);
}
.ph__cap b,.ph__cap span{
  font-weight:400;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ph__cap b{color:var(--w70);flex:0 0 auto}
.ph__cap span{flex:1 1 auto;text-align:right}
.ph::after{ /* fake camera timestamp burnt into the corner */
  content:attr(data-stamp);position:absolute;right:12px;bottom:32px;
  font-size:8px;letter-spacing:.1em;color:rgba(255,255,255,.75);
  text-shadow:0 0 6px rgba(255,255,255,.5);pointer-events:none;
}
.archive__hint{
  width:min(1200px,100%);margin:14px auto 0;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--w25);text-align:right;
}


/* ============================================================
   04 · THOUGHTS
   ============================================================ */
.think{position:relative;text-align:center;width:min(640px,100%)}
.think__orb{
  position:relative;width:96px;height:96px;margin:0 auto 42px;display:block;
  transform:translate3d(calc(var(--nx)*8px),calc(var(--ny)*8px),0);
}
.think__ring{
  position:absolute;inset:0;border:1px solid var(--w25);border-radius:50%;
  animation:orbPulse 3.6s var(--ease) infinite;
}
.think__ring:nth-child(2){animation-delay:1.8s}
.think__core{
  position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  background:#fff;border-radius:50%;box-shadow:0 0 24px 4px rgba(255,255,255,.5);
  transition:transform .3s var(--ease);
}
.think__orb:hover .think__core{transform:scale(1.6)}
.think__orb:active .think__core{transform:scale(.7)}
@keyframes orbPulse{
  0%{transform:scale(.55);opacity:0}
  30%{opacity:.7}
  100%{transform:scale(1.5);opacity:0}
}
.think__text{
  min-height:5.4em;font-size:clamp(14px,3.4vw,20px);line-height:1.8;letter-spacing:.01em;
  transition:opacity .28s,filter .28s,transform .28s;
}
.think__text.is-swap{opacity:0;filter:blur(7px);transform:translateY(6px)}
.think__count{
  display:block;margin-top:28px;font-size:9px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--w25);
}


/* ============================================================
   05 · WINGS
   ============================================================ */
.scene--wings{height:300dvh;padding:0}
.wings{
  position:sticky;top:0;height:100dvh;
  display:grid;place-items:center;overflow:hidden;
  --open:0;      /* 0..1 unfold, driven by scroll */
  --dissolve:0;  /* 0..1 fade into noise */
}
.wing{
  position:absolute;top:50%;left:50%;width:min(52vw,620px);
  opacity:calc(var(--open) * (1 - var(--dissolve)));
  filter:blur(calc(1px + var(--dissolve) * 14px)) contrast(calc(1 + var(--dissolve)));
  will-change:transform,opacity;
}
.wing svg{width:100%;height:auto;display:block}

/* ── взмах: быстрый мах вниз, долгое возвращение вверх ─────────────────── */
.wing--r svg{
  transform-origin:6% 70%;
  animation:beatR var(--beat,5.4s) cubic-bezier(.42,0,.28,1) infinite;
  animation-play-state:var(--play,running);
  will-change:transform;
}
.wing--l svg{
  transform-origin:94% 70%;
  animation:beatL var(--beat,5.4s) cubic-bezier(.42,0,.28,1) infinite;
  animation-play-state:var(--play,running);
  animation-delay:-.18s;           /* крылья не идеально синхронны — так живее */
  will-change:transform;
}
@keyframes beatR{
  0%  {transform:rotate(0deg)      translateY(0)     scaleY(1)}
  9%  {transform:rotate(7deg)      translateY(10px)  scaleY(.93)}
  26% {transform:rotate(-5.5deg)   translateY(-12px) scaleY(1.05)}
  44% {transform:rotate(2.6deg)    translateY(4px)   scaleY(.98)}
  62% {transform:rotate(-1.6deg)   translateY(-4px)  scaleY(1.02)}
  80% {transform:rotate(.8deg)     translateY(1px)   scaleY(.995)}
  100%{transform:rotate(0deg)      translateY(0)     scaleY(1)}
}
@keyframes beatL{
  0%  {transform:rotate(0deg)      translateY(0)     scaleY(1)}
  9%  {transform:rotate(-7deg)     translateY(10px)  scaleY(.93)}
  26% {transform:rotate(5.5deg)    translateY(-12px) scaleY(1.05)}
  44% {transform:rotate(-2.6deg)   translateY(4px)   scaleY(.98)}
  62% {transform:rotate(1.6deg)    translateY(-4px)  scaleY(1.02)}
  80% {transform:rotate(-.8deg)    translateY(1px)   scaleY(.995)}
  100%{transform:rotate(0deg)      translateY(0)     scaleY(1)}
}
/* при наведении взмах ускоряется */
.wings.is-near .wing svg{--beat:3.2s}
.ghostwing svg{animation:beatR 6.4s cubic-bezier(.42,0,.28,1) infinite;transform-origin:50% 70%}
/* anchored by the shoulder: 6% / 70% inside the svg (94% when mirrored) */
.wing--l{
  transform:
    translate3d(calc(-100% + 4vw + var(--nx) * 16px),calc(-70% + 24px + var(--ny) * 12px),0)
    rotate(calc(-9deg + (1 - var(--open)) * 22deg))
    scale(calc(.74 + var(--open) * .26));
  transform-origin:94% 70%;
}
.wing--r{
  transform:
    translate3d(calc(-4vw + var(--nx) * 16px),calc(-70% + 24px + var(--ny) * 12px),0)
    rotate(calc(9deg - (1 - var(--open)) * 22deg))
    scale(calc(.74 + var(--open) * .26));
  transform-origin:6% 70%;
}
/* every feather drifts on its own — animated custom property, no JS per frame */
.fea{
  transform-box:fill-box;transform-origin:50% 0%;
  opacity:var(--op,.7);
  transform:rotate(calc(var(--sway,0deg) + var(--open,0) * var(--k,0) * 1deg));
  animation:featherSway var(--dur,5s) ease-in-out infinite alternate;
  animation-delay:var(--del,0s);
  animation-play-state:var(--play,running);
}
@keyframes featherSway{
  from{--sway:calc(var(--amp,1deg) * -1)}
  to  {--sway:var(--amp,1deg)}
}
.fea-shaft{stroke:rgba(0,0,0,.32);stroke-width:.8;fill:none;opacity:.45}
.wg-down{filter:blur(7px);fill:#fff}
.wg-massg{filter:blur(16px)}
.wg-mass{fill:#fff;opacity:.30}

/* hover → the wings open a little wider */
.wings .wing{transition:rotate .9s var(--ease)}
.wings.is-near .wing--l{rotate:-6deg}
.wings.is-near .wing--r{rotate:6deg}

.wings__core{
  position:relative;z-index:3;text-align:center;
  transform:translate3d(calc(var(--nx) * -6px),calc(var(--ny) * -6px),0);
}
/* a soft hole in the feathers so the name stays readable */
.wings__core::before{
  content:"";position:absolute;left:50%;top:50%;
  width:min(78vw,470px);height:min(34vh,190px);transform:translate(-50%,-42%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 74%);
  opacity:calc(.45 + var(--open,0) * .55);
  pointer-events:none;z-index:-1;
}
.wings__name{
  display:block;font-size:clamp(22px,6vw,46px);letter-spacing:.3em;text-indent:.3em;
  text-shadow:0 0 28px rgba(0,0,0,.95),0 0 60px rgba(0,0,0,.8);
}
.wings__still{
  display:block;margin-top:22px;font-size:10px;letter-spacing:.3em;
  text-transform:lowercase;color:var(--w45);
  opacity:calc(var(--open) * .9);transition:opacity .4s;
}
.wings__dust{position:absolute;inset:0;pointer-events:none;z-index:2}
.wings__dust i{
  position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;
  opacity:calc(var(--o,.4) * var(--open));
  animation:dust var(--d,14s) linear infinite;animation-delay:var(--dl,0s);
  filter:blur(.4px);
}
@keyframes dust{
  0%{transform:translate3d(0,20px,0);opacity:0}
  20%{opacity:.5}80%{opacity:.35}
  100%{transform:translate3d(14px,-90px,0);opacity:0}
}
.wings__noise{
  position:absolute;inset:0;pointer-events:none;z-index:4;
  background-size:220px 220px;mix-blend-mode:screen;
  opacity:calc(var(--dissolve,0) * .55);
  animation:grainMove 1.1s steps(9,end) infinite;
}


/* ============================================================
   06 · SIGNAL
   ============================================================ */
.signal__box{text-align:center;transform:translate3d(calc(var(--nx)*-8px),calc(var(--ny)*-8px),0)}
.signal__q{font-size:clamp(12px,3vw,15px);letter-spacing:.16em;color:var(--w45)}
.signal__tg{
  display:inline-block;margin-top:26px;
  font-size:clamp(28px,9vw,64px);letter-spacing:.12em;
  border-bottom:1px solid var(--w25);padding-bottom:6px;
  transition:border-color .3s,letter-spacing .4s var(--ease);
}
.signal__tg:hover{border-color:#fff;letter-spacing:.2em}
.signal__note{margin-top:34px;font-size:10px;letter-spacing:.1em;color:var(--w25);line-height:2}
.signal__foot{
  position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--padb) + 46px);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--w25);
}
.signal__found{opacity:0;transition:opacity .5s}
body.found-any .signal__found{opacity:1}
.signal__found b{font-weight:400;color:var(--w70)}


/* ============================================================
   HIDDEN OBJECTS
   ============================================================ */
.secret{
  position:absolute;z-index:5;color:var(--w12);
  font-size:11px;line-height:1;padding:10px;
  transition:color .35s,transform .35s var(--ease),opacity .35s;
}
.secret:hover{color:#fff;transform:scale(1.35) rotate(6deg)}
.secret.is-found{opacity:.14;pointer-events:none}
.secret svg{width:22px;height:auto;fill:none;stroke:currentColor;stroke-width:1}
.secret--feather{right:6%;bottom:16%;width:26px;height:34px;padding:0}
.secret--feather::before{
  content:"";position:absolute;inset:0;
  background:currentColor;
  -webkit-mask:var(--feather-mask) center/contain no-repeat;
          mask:var(--feather-mask) center/contain no-repeat;
  transform:rotate(24deg);
}
.secret--cross{left:4%;top:12%;font-size:13px}
.secret--star{right:3%;top:8%;font-size:14px}
.secret--eye{left:7%;bottom:18%}
.secret--glyph{left:5%;bottom:12%;font-size:9px;letter-spacing:.2em}


/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:760px){
  body{font-size:14px}
  .hub__stage{min-height:78dvh}
  .hub__name{letter-spacing:.16em;text-indent:.16em}
  .hub__line{bottom:6%;font-size:10px}
  .tag{font-size:9px;padding:6px}
  .tag--a{top:12%;left:2%}
  .tag--b{top:22%;right:2%}
  .tag--c{top:66%;left:6%}
  .tag--d{top:5%;right:14%}
  .tag--e{bottom:28%;right:3%}
  .tag--f{bottom:19%;left:2%}
  .tag--g{top:44%;right:1%}
  .tag--h{top:34%;left:1%}

  .drift__line{max-width:100%;font-size:clamp(14px,4.4vw,20px);line-height:1.75}
  .drift__line--r{justify-self:stretch;text-align:right}
  .drift__stamp{top:-4%;font-size:9px}

  .scene--archive{padding-block:10dvh 14dvh}
  /* высоту на телефоне выставляет archive.js — ровно под сетку карточек */
  .archive__stage{height:auto;min-height:420px}
  .ph{cursor:default}
  .archive__head{margin-bottom:18px}
  .archive__meta{font-size:8px}

  .scene--wings{height:260dvh}
  .wing{width:64vw}
  .wing--l{transform:
    translate3d(calc(-100% + 3vw + var(--nx) * 10px),calc(-70% + 18px + var(--ny) * 8px),0)
    rotate(calc(-11deg + (1 - var(--open)) * 22deg)) scale(calc(.74 + var(--open) * .26))}
  .wing--r{transform:
    translate3d(calc(-3vw + var(--nx) * 10px),calc(-70% + 18px + var(--ny) * 8px),0)
    rotate(calc(11deg - (1 - var(--open)) * 22deg)) scale(calc(.74 + var(--open) * .26))}
  .wings__core::before{width:86vw;height:24vh}

  .term__win{max-height:78dvh}
  .term__out{font-size:11.5px}
  .signal__foot{bottom:calc(var(--padb) + 52px);font-size:8px}
  .secret{padding:14px} /* bigger tap target */
  .secret--feather{right:8%;bottom:20%}
}

@media (max-width:400px){
  .tag--d,.tag--h{display:none}
}

/* landscape phones: don't let 100dvh scenes squeeze */
@media (max-height:520px) and (orientation:landscape){
  .scene--hub,.scene--drift,.scene--thoughts,.scene--signal{min-height:auto;padding-block:16vh}
  .hub__stage{min-height:70vh}
}