/* deckhaus — premium layer for home-v6. Additive only: no structural or layout changes. */

/* 1 · intro curtain ------------------------------------------------------- */
.dhc{position:fixed;inset:0;z-index:9999;background:#08080A;display:flex;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.dhc.up{transform:translateY(-101%)}
.dhc__in{display:flex;flex-direction:column;align-items:center;gap:22px}
.dhc__in img{width:clamp(140px,14vw,210px);height:auto;opacity:0;transform:translateY(8px);animation:dhc-mark .7s cubic-bezier(.16,1,.3,1) .05s both}
.dhc__line{display:block;width:clamp(140px,14vw,210px);height:1px;background:rgba(244,244,239,.14);overflow:hidden}
.dhc__line i{display:block;height:100%;width:0;background:var(--lime-500);animation:dhc-line .85s cubic-bezier(.16,1,.3,1) .18s forwards}
.dhc__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#6E6E78;opacity:0;animation:dhc-mark .6s ease .3s both}
@keyframes dhc-mark{to{opacity:1;transform:none}}
@keyframes dhc-line{to{width:100%}}

/* 2 · scroll progress hairline -------------------------------------------- */
.dhp{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--lime-500);z-index:120;pointer-events:none}

/* 3 · section index rail --------------------------------------------------- */
.dhr{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;gap:11px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s,translate .5s cubic-bezier(.16,1,.3,1);translate:-8px 0}
.dhr.ready{opacity:1;visibility:visible;pointer-events:auto;translate:0 0}
.dhr button{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8E8E98;background:none;border:0;padding:0;cursor:pointer;transition:color .3s ease}
.dhr i{display:block;width:12px;height:1px;background:currentColor;opacity:.5;transition:width .4s cubic-bezier(.16,1,.3,1),opacity .3s}
.dhr .lbl{opacity:0;transform:translateX(-4px);transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.dhr:hover .lbl{opacity:.75;transform:none}
.dhr button.on i{width:26px;opacity:1;background:var(--lime-500)}
.dhr button.on{color:var(--paper)}
.dhr button.on .lbl{opacity:1;transform:none}
.dhr[data-on="light"] button{color:#6E6E78}
.dhr[data-on="light"] button.on{color:var(--ink-900)}
@media (min-width:1460px){.dhr{display:flex}}

/* 4 · word-level reveal on display headings -------------------------------- */
.dhw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.dhw>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.dhw.in>span{transform:none}

/* 5 · image reveal --------------------------------------------------------- */
.dhi{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1)}
.dhi.in{clip-path:inset(0 0 0 0)}

/* 6 · cursor label over work cards ----------------------------------------- */
.dhcur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--lime-500);color:var(--ink-900);font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.dhcur.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(max-width:980px){.dhcur{display:none}}

/* 7 · grain ---------------------------------------------------------------- */
.dhg{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}

/* 8 · finer hover physics --------------------------------------------------- */
.btn,.pill{transition:background .25s ease,color .25s ease,transform .5s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.btn:hover{box-shadow:0 14px 30px -18px rgba(8,8,10,.7)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--lime-500);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover::after{transform:scaleX(1)}
.ghostlink span{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ghostlink:hover span{transform:translateX(5px)}
a.bcard{transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .5s ease}
a.bcard:hover{box-shadow:0 30px 60px -40px rgba(8,8,10,.6)}

/* 9 · selection + scrollbar ------------------------------------------------- */
::selection{background:var(--lime-500);color:var(--ink-900)}
@media (prefers-reduced-motion:reduce){
  .dhw>span{transform:none;transition:none}
  .dhi{clip-path:none;transition:none}
  .dhc{display:none}
  .dhcur{display:none}
}

/* ===== POWER LAYER ===================================================== */

/* hero — slow camera settle + parallax hooks */
#top .hwall{transform-origin:50% 40%;animation:dh-settle 22s cubic-bezier(.16,1,.3,1) forwards;will-change:transform}
@keyframes dh-settle{from{transform:scale(1.18)}to{transform:scale(1.02)}}
#top .dh-par{will-change:transform}

/* hero rotor */
#top .rotorw{position:relative}

/* section top rule draws in */
#view-home>section{position:relative}
#view-home>section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--lime-500);opacity:.5;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s cubic-bezier(.16,1,.3,1);z-index:6;pointer-events:none}
#view-home>section.dhs::before{transform:scaleX(1)}

/* pointer light over dark sections */
.dhl{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s ease;background:radial-gradient(circle,color-mix(in srgb,var(--lime-500) 13%,transparent) 0%,transparent 62%)}
.dhl.on{opacity:1}

/* view transition */
@keyframes dh-view{from{opacity:0}to{opacity:1}}
.dhv{animation:dh-view .5s ease both}

/* ===== 06 WORK — one idea, every format ================================ */
#cases .two-col h2{font-size:clamp(40px,6.2vw,92px);line-height:1.02;max-width:13ch}
#cases .cgal{position:relative}
#cases .cgal figure{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),border-color .4s ease}
#cases .cgal figure.in{opacity:1;transform:none}
#cases .cgal figure:hover{border-color:color-mix(in srgb,var(--lime-500) 60%,transparent)}
#cases .cgal img{transform:scale(1.04);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
#cases .cgal figure.in img{transform:scale(1)}
#cases .cgal figure:hover img{transform:scale(1.05)}
#cases .chain figcaption{left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(8,8,10,.94),rgba(8,8,10,.62) 58%,transparent);padding:34px 16px 13px;font-size:11px;letter-spacing:.16em;transform:translateY(6px);opacity:.9;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease}
#cases .cgal figure:hover figcaption{transform:none;opacity:1}
#cases .chain figcaption b{font-size:13px;letter-spacing:.12em}
#cases .cgal figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime-500);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.16,1,.3,1);z-index:2}
#cases .cgal figure:hover::after{transform:scaleX(1)}
#cases .cgal figure:first-child figcaption{padding-bottom:18px;font-size:12.5px}
#cases .cgrid3 .ck{font-size:11.5px}
#cases .cgrid3 .cv{font-size:16px;line-height:1.6;color:#C2C2CB;max-width:34ch}
#cases .cgrid3>div{position:relative;padding-top:18px;border-top:1px solid rgba(244,244,239,.16)}
#cases .cgrid3>div::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--lime-500)}

/* home — full-bleed link into the work page */
.hrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,40px);margin-top:clamp(34px,4vw,60px);padding:clamp(22px,2.8vw,44px) clamp(16px,3vw,44px);border-top:1px solid rgba(244,244,239,.16);border-bottom:1px solid rgba(244,244,239,.16);color:var(--paper);transition:background .45s cubic-bezier(.16,1,.3,1),padding-left .5s cubic-bezier(.16,1,.3,1),color .3s}
.hrow__n{font-family:var(--font-mono);font-size:16px;color:var(--lime-500);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.hrow__t{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(24px,3.2vw,48px);line-height:1}
.hrow__m{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8E8E98;white-space:nowrap}
.hrow:hover{background:var(--paper);color:var(--ink-900);padding-left:clamp(26px,4vw,72px)}
.hrow:hover .hrow__m{color:rgba(10,10,11,.6)}
.hrow:hover .hrow__n{transform:translate(6px,-6px)}
@media (max-width:760px){.hrow{grid-template-columns:auto minmax(0,1fr)}.hrow__m{display:none}}

/* perf: keep full-screen overlays on their own layer */
.dhg,.dhp,.dhl{will-change:transform}
.dhg{transform:translateZ(0)}