/* Living details on brand pages: ambient breathing, staggered headline, sliding tab
   indicator, card glow and tilt, press feedback. refined.css already zeroes every
   animation and transition under prefers-reduced-motion. */

/* Headline words rise in one after another on load (spans added by brand-life.js). */
.nk-word { display:inline-block; }
.nk-words-ready .nk-word { animation:nk-word-in .7s cubic-bezier(.22,.7,.3,1) both; animation-delay:calc(.1s + var(--i,0) * .055s); }
@keyframes nk-word-in { from { opacity:0; transform:translateY(.45em); } to { opacity:1; transform:none; } }

/* Hero atmosphere: the tinted backdrop drifts and the glow behind the mark breathes. */
body.nk-refined .nk-hero.hx-fold { background-size:170% 170%; animation:nk-breathe 18s ease-in-out infinite alternate; }
@keyframes nk-breathe { from { background-position:32% 42%; } to { background-position:68% 58%; } }
body.nk-refined .ambient { animation:nk-ambient 9s ease-in-out infinite alternate; }
@keyframes nk-ambient { from { transform:scale(1) translate(0,0); opacity:.75; } to { transform:scale(1.2) translate(4%,-5%); opacity:1; } }
body.nk-refined .hx-photo img { will-change:transform; }

/* Static poster of the mark (a snapshot of the WebGL render) shows instantly and fades out
   on the first live frame, so the hero never opens with an empty canvas. */
body.nk-refined .sculpture-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none; transition:opacity .45s ease; }
body.nk-refined .playground.is-live .sculpture-poster { opacity:0; }
/* With a poster present the old CSS-drawn fallback N is redundant; it must never show alongside it. */
body.nk-refined .playground:has(.sculpture-poster) .fallback-art { display:none!important; }
/* No WebGL: the poster still breathes a little so the hero is not a dead image. */
body.nk-refined .playground:not(.is-live) .sculpture-poster { animation:nk-poster-float 7s ease-in-out infinite alternate; }
@keyframes nk-poster-float { from { translate:0 0; } to { translate:0 -8px; } }

/* Segmented controls: the white pill glides between buttons instead of blinking. */
.nk-has-ind { position:relative; isolation:isolate; }
.nk-ind { position:absolute; left:0; top:0; z-index:0; border-radius:12px; background:#fff; box-shadow:0 7px 20px #11113a0d; pointer-events:none; opacity:0; transition:transform .38s cubic-bezier(.22,.7,.3,1), width .38s cubic-bezier(.22,.7,.3,1), height .38s ease; }
.nk-has-ind > button { position:relative; z-index:1; transition:color .25s ease; }
body.nk-refined .nk-has-ind > button:is([aria-selected=true],[aria-pressed=true]) { background:transparent!important; box-shadow:none!important; }
@media (max-width:767px) { .nk-ind { border-radius:10px; } }

/* Cards answer the pointer: a soft blue glow follows it, large cards tilt a few degrees. */
body.nk-refined .nk-live-card { position:relative; isolation:isolate; }
body.nk-refined .nk-live-card::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:radial-gradient(340px circle at var(--glow-x,50%) var(--glow-y,0%), #4031ff14, transparent 70%); opacity:0; transition:opacity .35s ease; }
body.nk-refined .nk-live-card:hover::before { opacity:1; }
@media (hover:hover) and (pointer:fine) {
  body.nk-refined .nk-tilt { transform-style:preserve-3d; transition:transform .25s ease, box-shadow .3s ease!important; }
  body.nk-refined .nk-tilt:hover { transform:var(--tilt, none) translateY(-4px)!important; box-shadow:0 18px 42px #11113a12!important; }
}

/* Press feedback on anything tappable. */
body.nk-refined :is(.nk-hero-cta,.hx-cta,.kkx-cta,.ctx-cta,.nlx-submit,.nk-shelf-controls button,.nk-guide-tabs button,.nk-board-nav button,.nk-program-card,.svx-col,.fbx-letter-list a,.chx-link,.fbx-press-arrow,.nk-mobile-detail>summary):active { transform:scale(.985); transition:transform .08s ease; }