/* ============================================================
   AVOLCA HOUSE
   One pinned canvas. Vertical scroll drives a camera through four
   scenes; the page is not a stack of sections. Drag moves laterally,
   destinations are real links, and reduced motion swaps travel for
   crossfades without losing anything.
   ============================================================ */

:root{
  --cobalt:#0B3FD9;
  --cobalt-deep:#062A96;
  --blue-el:#077AFF;
  --blue-lt:#5AA0FF;
  --ivory:#F2EFE9;
  --black:#06080F;
  --black-blue:#080C18;
  --muted:#7E8AA0;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Inter,system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --pad:clamp(20px,3.4vw,56px);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--black);color:var(--ivory);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;margin:0;
}

/* ---------- persistent house navigation ---------- */
.hn{position:fixed;top:0;left:0;right:0;z-index:90;padding:20px var(--pad);
  display:flex;align-items:center;gap:20px;pointer-events:none}
.hn > *{pointer-events:auto}
/* the fixed nav flips ink when the room behind it is light */
.hn,.hn .toggle{transition:color .35s}
.hn.ink,.hn.ink .toggle{color:#14161C}
.hn.ink .mk img{filter:invert(1)}
/* the mark the arch contracts into — hidden until then, so it never
   collides with the descriptor in scene one */
.hn .mk{opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s}
.hn.solid .mk{opacity:1;transform:none}
.hn .mk img{height:16px;width:auto}
.hn .toggle{
  margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ivory);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;padding:6px 0;
}
.hn .toggle i{font-style:normal;color:inherit;transition:transform .3s}
.hn.open .toggle i{transform:rotate(45deg)}

.house-menu{
  position:fixed;inset:0;z-index:85;background:rgba(4,6,12,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;
  display:flex;align-items:center;padding:0 var(--pad);
}
.house-menu.open{opacity:1;visibility:visible}
.house-menu ol{list-style:none;margin:0;padding:0;width:100%;max-width:900px}
.house-menu li{border-bottom:1px solid rgba(255,255,255,.1)}
.house-menu a{display:grid;grid-template-columns:14ch 1fr;gap:18px;align-items:baseline;padding:14px 0}
.house-menu a i{
  font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.34);transition:color .25s;
}
.house-menu a b{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.6px;
  font-size:clamp(26px,4vw,50px);line-height:1;color:rgba(255,255,255,.72);transition:color .25s;
}
.house-menu .row{display:flex;align-items:baseline;gap:14px}
.house-menu a:hover b,.house-menu a:focus-visible b{color:var(--ivory)}
.house-menu a:hover i,.house-menu a:focus-visible i{color:var(--blue-lt)}
.house-menu a[aria-disabled="true"]{cursor:default}
.house-menu a[aria-disabled="true"] b{color:rgba(255,255,255,.24)}
.house-menu em{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-lt);opacity:.5;
}

/* ---------- the canvas ---------- */
.house{position:relative;height:520vh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--black)}
.scene{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:0 var(--pad);will-change:opacity,transform;
}
.scene-in{width:100%;max-width:1400px;margin:0 auto;position:relative}

.lightfield{position:absolute;inset:0;z-index:0;overflow:hidden}
.lightfield span{
  position:absolute;border-radius:50%;filter:blur(110px);
  background:radial-gradient(circle,rgba(120,180,255,.4),transparent 66%);
  width:76%;height:76%;left:10%;top:-6%;
  animation:pool 22s ease-in-out infinite alternate;
}
@keyframes pool{to{transform:translate3d(4%,6%,0) scale(1.06)}}
.grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- scene 01 arrival ---------- */
.s1{background:linear-gradient(170deg,var(--cobalt) 0%,#0A38C4 46%,var(--cobalt-deep) 100%)}
.s1 .scene-in{z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.s1 .desc{color:rgba(255,255,255,.88);line-height:2}
.arch{margin:clamp(24px,4vh,44px) 0 clamp(22px,3.6vh,38px);line-height:0;width:100%;display:flex;justify-content:center}
.arch img{
  width:clamp(250px,54vw,760px);height:auto;
  clip-path:inset(0 0 100% 0);opacity:0;
  transition:clip-path 1100ms cubic-bezier(.19,1,.22,1),opacity .6s ease;
}
.ready .arch img{clip-path:inset(0 0 0 0);opacity:1}
.s1 h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.7px;
  font-size:clamp(20px,2.1vw,32px);line-height:1;margin:0 0 clamp(26px,4vh,44px);
  color:rgba(255,255,255,.94);
}
.enter{
  display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  width:min(270px,78vw);font-family:var(--mono);text-align:left;
  color:#fff;border:0;border-top:1px solid rgba(255,255,255,.38);border-bottom:1px solid rgba(255,255,255,.38);
  background:none;cursor:pointer;padding:14px 2px;transition:border-color .25s,gap .25s;
}
.enter span{display:grid;gap:6px}
.enter small{font:8px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.enter b{font:500 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.enter:hover,.enter:focus-visible{border-color:rgba(255,255,255,.85);gap:32px}
.enter i{font-style:normal;color:inherit;font-size:18px;animation:enterCue 1.8s ease-in-out infinite}
@keyframes enterCue{50%{transform:translateY(5px);opacity:.5}}

/* ---------- scene 02 the record ---------- */
.s2{background:var(--ivory);color:#14161C}
.s2 .warm{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 50% at 50% 50%,rgba(150,20,30,.14),transparent 70%);
}
.s2 .scene-in{z-index:2;height:74vh}
.sleeve{
  position:absolute;left:50%;top:50%;width:min(36vw,400px);z-index:2;
  transform:translate(calc(-50% + var(--px,0px)),calc(-50% + var(--py,0px)));
}
.sleeve img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  box-shadow:0 40px 90px -30px rgba(20,10,10,.55),0 8px 24px -8px rgba(20,10,10,.3);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.sleeve a:hover img{transform:translateY(-6px)}
.credit-block{
  position:absolute;left:0;bottom:0;max-width:30ch;z-index:3;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
}
.credit-block .meta{color:#6A7183;margin-bottom:14px}
.s2 h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.6px;
  font-size:clamp(30px,3.6vw,54px);line-height:1;margin:0 0 6px;color:#14161C;
}
.s2 .track{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,2.5vw,36px);
  line-height:1;color:#5B6376;margin:0 0 18px;letter-spacing:.6px;
}
.s2 .cred{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.8;color:#454C5D;margin:0;
}
.s2 .cred a{border-bottom:1px solid rgba(20,22,28,.3);transition:color .2s,border-color .2s}
.s2 .cred a:hover{color:var(--cobalt);border-color:var(--cobalt)}
/* proof at different depths, not in a column */
.stat{position:absolute;z-index:3;transform:translate3d(var(--px,0px),var(--py,0px),0)}
.stat b{
  display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.5px;
  font-size:clamp(30px,3.4vw,52px);line-height:.92;color:var(--cobalt);
}
.stat span{
  display:block;margin-top:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#6A7183;line-height:1.55;
}
.stat-a{left:0;top:6%}
.stat-b{right:0;top:18%}
.stat-c{right:8%;bottom:4%}

/* ---------- scene 03 inside ---------- */
.s3{background:var(--black-blue)}
.s3 .plane{position:absolute;right:0;top:0;bottom:0;width:54%;z-index:0;overflow:hidden}
.s3 .plane img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.7,.3,1);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 100%);
}
.s3 .plane img.on{opacity:.6;transform:none}
.s3 .scene-in{z-index:3}
.dests{position:relative;height:66vh;margin:0;padding:0;list-style:none}
.dests li{position:absolute}
.dests b{
  display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.7px;
  line-height:.92;color:#4A566C;transition:color .4s;
}
.dests em{
  display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .45s cubic-bezier(.2,.7,.3,1),opacity .35s,margin-top .45s;
}
.dests .go{
  display:inline-flex;align-items:center;gap:8px;margin-top:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-lt);max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.7,.3,1),opacity .35s,margin-top .45s;
}
.dests a.on b{color:var(--ivory)}
.dests a.on em{max-height:60px;opacity:1;margin-top:12px}
.dests a.on .go{max-height:40px;opacity:1;margin-top:14px}
.dests a:hover b{color:#94A2B8}
.dests a.on:hover b{color:var(--ivory)}
.dests a:focus-visible{outline:2px solid var(--blue-lt);outline-offset:8px}
/* size and position carry the hierarchy — talent closest, studio furthest */
.d-talent{left:0;top:24%}
.d-talent b{font-size:clamp(40px,6.2vw,96px)}
.d-creative{left:5%;bottom:4%}
.d-creative b{font-size:clamp(28px,4.2vw,64px)}
.d-euro{left:36%;top:0}
.d-euro b{font-size:clamp(26px,3.8vw,56px)}
.d-studio{left:29%;top:50%}
.d-studio b{font-size:clamp(28px,4.2vw,64px)}

/* ---------- scene 04 the door ---------- */
.s4{background:var(--black-blue)}
.s4 .door{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,var(--cobalt) 0%,#0A38C4 52%,var(--cobalt-deep) 100%);
  clip-path:inset(0 100% 0 0);
}
.s4 .scene-in{z-index:2}
.s4 .meta{color:rgba(255,255,255,.72);margin-bottom:18px}
.s4 h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.7px;
  font-size:clamp(50px,9vw,150px);line-height:.86;margin:0 0 26px;color:#fff;
}
.s4 .lines{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  line-height:2;color:rgba(255,255,255,.82);margin:0 0 34px;
}
.s4 .go{
  display:inline-flex;align-items:center;gap:11px;color:#fff;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:8px;transition:gap .25s,border-color .25s;
}
.s4 .go:hover{gap:18px;border-color:#fff}
.s4 .go i{font-style:normal;color:inherit}

/* ---------- footer ---------- */
footer{background:var(--black);padding:34px var(--pad) 40px;position:relative;z-index:2}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;max-width:1400px;margin:0 auto}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{font-size:13px;color:#8A94A8;transition:color .2s}
.foot a:hover{color:var(--blue-lt)}
.foot .meta{color:#5C6679}

/* ---------- mobile: natural scroll, with a lighter version of the house ---------- */
@media (max-width:900px){
  .house{height:auto}
  .stage{position:static;height:auto;overflow:visible}
  .scene{position:relative;inset:auto;min-height:100svh;
    padding-top:96px;padding-bottom:56px}
  .s2 .scene-in,.dests{height:auto}
  .sleeve{position:relative;left:auto;top:auto;transform:none;width:min(74vw,360px);margin:0 auto 30px}
  .credit-block{position:relative;bottom:auto;max-width:none;margin-bottom:24px}
  .stat{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:inline-block;margin:0 26px 18px 0}
  .s3{isolation:isolate;overflow:hidden}
  .s3 .plane{display:block;inset:0 -18% 0 auto;width:92%;z-index:0;pointer-events:none}
  .s3 .plane:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--black-blue) 0%,transparent 52%),linear-gradient(0deg,var(--black-blue) 0%,transparent 32%,transparent 72%,var(--black-blue) 100%)}
  .s3 .plane img{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%,#000 100%);mask-image:linear-gradient(to right,transparent 0%,#000 28%,#000 100%)}
  .s3 .plane img.on{opacity:.3;transform:scale(1)}
  .dests li{position:relative;margin-bottom:26px}
  .d-talent,.d-creative,.d-euro,.d-studio{left:auto;top:auto;bottom:auto}
  .dests b{font-size:clamp(32px,9vw,50px)!important;color:var(--ivory)}
  .dests em{max-height:none;opacity:1;margin-top:10px}
  .dests .go{max-height:none;opacity:1;margin-top:12px}
  .s4 .door{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
  .s4.mobile-in .door{clip-path:inset(0 0 0 0)}
  /* Critical copy remains normal HTML. Motion is enabled only after the
     script is ready, so failure never hides the page. */
  .arch img{transition:clip-path 900ms cubic-bezier(.19,1,.22,1),opacity .5s ease}
  .lightfield span{filter:blur(58px);animation:mobilePool 11s ease-in-out infinite alternate}
  .grain{display:none}
  .warm{background:radial-gradient(60% 45% at 50% 44%,rgba(150,20,30,.09),transparent 72%)}
  .sleeve img{box-shadow:0 22px 55px -26px rgba(20,10,10,.48)}
  .house-menu{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,6,12,.985)}

  body.mobile-motion .scene .scene-in{opacity:0;transform:translate3d(0,34px,0);transition:opacity .72s ease,transform .9s cubic-bezier(.22,1,.36,1)}
  body.mobile-motion .scene.mobile-in .scene-in{opacity:1;transform:none}
  body.mobile-motion .s2 .sleeve{opacity:0;transform:translate3d(0,30px,0) rotate(-1.5deg);transition:opacity .7s .1s ease,transform 1s .1s cubic-bezier(.22,1,.36,1)}
  body.mobile-motion .s2.mobile-in .sleeve{opacity:1;transform:none}
  body.mobile-motion .s2 .stat{opacity:0;transform:translate3d(0,14px,0);transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1)}
  body.mobile-motion .s2.mobile-in .stat{opacity:1;transform:none}
  body.mobile-motion .s2.mobile-in .stat-b{transition-delay:.12s}
  body.mobile-motion .s2.mobile-in .stat-c{transition-delay:.22s}
  body.mobile-motion .dests li{opacity:.42;transform:translate3d(0,12px,0);transition:opacity .5s,transform .65s cubic-bezier(.22,1,.36,1)}
  body.mobile-motion .dests li.mobile-active{opacity:1;transform:none}
  body.mobile-motion .dests li.mobile-active b{color:var(--ivory)}
}
@keyframes mobilePool{to{transform:translate3d(7%,5%,0) scale(1.08)}}

/* ---------- reduced motion: crossfade, never travel ---------- */
@media (prefers-reduced-motion:reduce){
  body:not(.force-motion) .lightfield span{animation:none}
  /* the wipe reveal becomes a plain fade; the scroll camera stays, damped in JS */
  body:not(.force-motion) .arch img{clip-path:inset(0 0 0 0);transition:opacity .5s ease}
  body:not(.force-motion) .sleeve a:hover img{transform:none}
  body:not(.force-motion) .scene .scene-in,
  body:not(.force-motion) .s2 .sleeve,
  body:not(.force-motion) .s2 .stat,
  body:not(.force-motion) .dests li{opacity:1!important;transform:none!important;transition:none!important}
  body:not(.force-motion) .s4 .door{clip-path:inset(0 0 0 0)!important;transition:none!important}
}