/* ===================== HOME — PREMIUM LAYER =====================
   Editorial / award-style polish layered over style.css for the home page
   only: intro choreography, custom cursor, magnetic buttons, film grain,
   split-text + media reveals, hero meta, section labels,
   and the page-exit curtain. Driven by home-premium.js. */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ink: #2b1512;
  --brown: #5a2d16;
  --cream: #fbf2e3;
  --paper: #fffdf7;
  --orange: #ee4d1f;
  interpolate-size: allow-keywords; /* lets the FAQ animate to height:auto */
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--orange); color: #fff8ef; }

/* ---------- custom scrollbar ---------- */
/* Firefox only: in Chrome, scrollbar-color would override the rounded
   ::-webkit-scrollbar styles below */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--orange) var(--cream);
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 999px;
  border: 2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--brown); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- film grain (composited layer, no blend mode) ---------- */

.grain {
  position: fixed;
  /* 120% box: enough bleed for the ±8% shift without a 4x-viewport layer */
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  z-index: 10002;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1s steps(5) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(5%, -7%); }
  60%  { transform: translate(-3%, 8%); }
  80%  { transform: translate(7%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- auto-hiding nav ---------- */

.nav { transition: transform 0.7s var(--ease-in-out-quart); }
.nav.nav--hidden { transform: translateY(-150%); }

/* ---------- custom cursor ---------- */

html.has-cursor,
html.has-cursor * { cursor: none !important; }

html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select { cursor: text !important; }

.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}

.cursor {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--orange);
  transition: opacity 0.3s ease, scale 0.3s ease;
}

.cursor-ring {
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(90, 45, 22, 0.42);
  transition:
    width 0.45s var(--ease-out-expo), height 0.45s var(--ease-out-expo),
    margin 0.45s var(--ease-out-expo), background 0.35s ease,
    border-color 0.35s ease, opacity 0.3s ease, scale 0.25s ease;
}

.has-cursor.cursor-ready .cursor,
.has-cursor.cursor-ready .cursor-ring { opacity: 1; }

.cursor-ring.is-link {
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  background: rgba(238, 77, 31, 0.1);
  border-color: rgba(238, 77, 31, 0.55);
}

.cursor-ring.is-view {
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  background: var(--orange);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(190, 60, 20, 0.3);
}

.cursor-ring.is-down { scale: 0.85; }

.cursor-ring__label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff8ef;
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.3s ease, scale 0.45s var(--ease-out-expo);
}

.cursor-ring.is-view .cursor-ring__label { opacity: 1; scale: 1; }

.has-cursor .cursor.is-hidden,
.has-cursor .cursor-ring.is-hidden { opacity: 0; }

/* ---------- magnetic buttons (offset set per-frame by JS) ---------- */

.nav__cta,
.nav__toggle,
.venture__cta,
.contact__submit,
.works-gallery__cta,
.about__mail,
.fab { translate: var(--mx, 0px) var(--my, 0px); }

.hero__cta { translate: calc(-50% + var(--mx, 0px)) var(--my, 0px); }

/* the CTA is already centred with `translate`; hovering also added
   translate(-50%) via `transform`, shifting it a further half-width left */
.hero__cta:hover { transform: translateY(-4px) scale(1.06); }
.hero__cta:active { transform: translateY(-1px) scale(0.96); }

/* ===================== HERO INTRO ===================== */
/* `js-intro` is set in <head> (motion allowed); every animation waits
   paused on its first frame until JS adds `intro-play` as the preloader
   curtain clears, then the classes are removed once it has all landed. */

@keyframes introScale   { from { scale: 0; } }
@keyframes introFade    { from { opacity: 0; } }
@keyframes introFadeUp  { from { opacity: 0; translate: 0 26px; } }
@keyframes introPop     { from { opacity: 0; scale: 0.7; } }
@keyframes introNav     { from { opacity: 0; translate: 0 -34px; } }
@keyframes introWipe {
  from { clip-path: inset(-20% 100% -20% 0); }
  to   { clip-path: inset(-20% -2% -20% 0); }
}
/* clip-path only on the gradient word itself: transforms on a
   background-clip:text element make Chromium blank it out (see style.css) */
@keyframes introRise {
  from { clip-path: inset(100% -5% -20% -5%); }
  to   { clip-path: inset(-20% -5% -20% -5%); }
}
@keyframes introLift { from { translate: 0 60px; } }
@keyframes introPhoto {
  from { clip-path: inset(100% -30% -30% -30%); scale: 1.14; }
  to   { clip-path: inset(-30% -30% -30% -30%); scale: 1; }
}

.js-intro .hero__circle            { animation: introScale 1.5s var(--ease-out-expo) 0s both paused; }
.js-intro .hero__photo             { animation: introPhoto 1.6s var(--ease-in-out-quart) 0.1s both paused; }
.js-intro .hero__bgtext-line--name { animation: introWipe 1.2s var(--ease-in-out-quart) 0.55s both paused; }
.js-intro .hero__bgtext-line--role { animation: introRise 1.4s var(--ease-in-out-quart) 0.3s both paused; }
.js-intro .hero__bgtext-inner      { animation: introLift 1.8s var(--ease-out-expo) 0.3s both paused; }
.js-intro .hero__grid,
.js-intro .hero__deco              { animation: introFade 1.4s ease 0.6s both paused; }
.js-intro .hero__roleicons         { animation: introPop 0.9s var(--ease-out-expo) 1.15s both paused; }
.js-intro .hero__meta--left        { animation: introFadeUp 1s var(--ease-out-expo) 1s both paused; }
.js-intro .hero__meta--right       { animation: introFadeUp 1s var(--ease-out-expo) 1.1s both paused; }
.js-intro .hero__cta               { animation: introPop 0.9s var(--ease-out-expo) 1.2s both paused; }
.js-intro .hero__dots              { animation: introFade 0.9s ease 1.3s both paused; }
.js-intro .nav                     { animation: introNav 1s var(--ease-out-expo) 0.8s both paused; }

.intro-play .hero__circle,
.intro-play .hero__photo,
.intro-play .hero__bgtext-line--name,
.intro-play .hero__bgtext-line--role,
.intro-play .hero__bgtext-inner,
.intro-play .hero__grid,
.intro-play .hero__deco,
.intro-play .hero__roleicons,
.intro-play .hero__meta,
.intro-play .hero__cta,
.intro-play .hero__dots,
.intro-play .nav { animation-play-state: running; }

/* ===================== HERO META (editorial corners) ===================== */

.hero__meta {
  position: absolute;
  z-index: 6;
  bottom: clamp(1.3rem, 3.6vh, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
}

.hero__meta--left  { left: clamp(1rem, 3vw, 2.4rem); }
.hero__meta--right { right: clamp(1rem, 3vw, 2.4rem); align-items: flex-end; text-align: right; }

.hero__meta-label { opacity: 0.55; }
.hero__meta-value { font-weight: 600; }

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  align-self: flex-start;
  margin-bottom: 0.55rem;
  padding: 0.5em 1em 0.5em 0.8em;
  border-radius: 999px;
  border: 1px solid rgba(90, 45, 22, 0.16);
  background: rgba(255, 253, 247, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.hero__status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fbf71;
}

.hero__status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: statusPing 2s var(--ease-out-expo) infinite;
}

@keyframes statusPing {
  from { transform: scale(1); opacity: 0.6; }
  to   { transform: scale(3.2); opacity: 0; }
}

.hero__clock-colon { animation: colonBlink 1s steps(1) infinite; }

@keyframes colonBlink { 50% { opacity: 0.2; } }

.hero__count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Anton', sans-serif;
  letter-spacing: 0;
  line-height: 1;
}

.hero__count-cur {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  color: var(--accent);
  transition: color 0.8s ease;
}

.hero__count-roll {
  display: block;
  animation: countRoll 0.9s var(--ease-out-expo) both;
}

@keyframes countRoll { from { transform: translateY(105%); } }

.hero__count-sep {
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.hero__count-total { font-size: 0.95rem; opacity: 0.4; }

.hero__scrollcue {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.4rem;
  opacity: 0.7;
}

.hero__scrollcue i {
  position: relative;
  width: 44px;
  height: 1px;
  overflow: hidden;
  background: rgba(90, 45, 22, 0.25);
}

.hero__scrollcue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: cueSweep 2.2s var(--ease-in-out-quart) infinite;
}

@keyframes cueSweep {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@media (max-width: 760px) {
  .hero__meta { display: none; }
}

/* ===================== SECTION LABELS ===================== */

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
}

.sec-label__num { color: var(--orange); font-variant-numeric: tabular-nums; }

.sec-label__line {
  width: 46px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.sec-label--block {
  display: flex;
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
}

.faq__head .sec-label {
  display: flex;
  justify-content: center;
  margin-bottom: 0.9rem;
}


@media (max-width: 900px) {
  .sec-label--block { justify-content: center; }
}

/* ---------- bigger, tighter editorial headings ---------- */

.faq__title {
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
}

.faq__kicker { margin-bottom: 0.7rem; }

/* ===================== SPLIT-TEXT REVEALS ===================== */

.split-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0.02em;
  margin: -0.12em -0.02em;
}

.split-item {
  display: inline-block;
  translate: 0 115%;
  rotate: 4deg;
  transition:
    translate 1.1s var(--ease-out-expo) calc(var(--i, 0) * 55ms),
    rotate 1.1s var(--ease-out-expo) calc(var(--i, 0) * 55ms);
}

.is-split-in .split-item { translate: 0 0; rotate: 0deg; }

/* ===================== MEDIA REVEALS ===================== */

.media-reveal {
  clip-path: inset(100% var(--mr-out, 0%) var(--mr-out, 0%) var(--mr-out, 0%) round var(--mr-radius, 0px));
  transition: clip-path 1.4s var(--ease-in-out-quart);
}

.media-reveal.is-in {
  clip-path: inset(var(--mr-out, 0%) var(--mr-out, 0%) var(--mr-out, 0%) var(--mr-out, 0%) round var(--mr-radius, 0px));
}

.media-reveal > img,
.media-reveal > video {
  scale: 1.28;
  transition: scale 1.8s var(--ease-out-expo), transform 0.4s ease;
}

.media-reveal.is-in > img,
.media-reveal.is-in > video { scale: 1; }

.venture__frame.media-reveal { --mr-radius: clamp(16px, 2vw, 28px); }

.works-gallery__img.media-reveal { --mr-radius: 12px; }

/* ===================== WORK GALLERY META ===================== */

.works-gallery__item,
.works-gallery__quote { transform: skewX(var(--skew, 0deg)); }

.works-gallery__meta {
  position: absolute;
  z-index: 2;
  left: 8vw;
  right: 8vw;
  bottom: clamp(1.4rem, 5vh, 2.6rem);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  pointer-events: none;
}

.works-gallery__progress {
  flex: 1;
  max-width: 320px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(90, 45, 22, 0.14);
}

.works-gallery__progress span {
  display: block;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ===================== FAQ: smooth open ===================== */

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.5s var(--ease-out-expo), content-visibility 0.5s allow-discrete;
}

.faq__item[open]::details-content { block-size: auto; }

.faq__item { transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, translate 0.4s var(--ease-out-expo); }
.faq__item:hover { translate: 0 -2px; background: var(--paper); }

/* ===================== PAGE-EXIT CURTAIN ===================== */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
}

.curtain.is-active { visibility: visible; pointer-events: auto; }

.curtain__panel {
  position: absolute;
  inset: 0;
  translate: 0 calc(100% + 12vh);
  transition: translate 0.75s var(--ease-in-out-quart);
}

/* curved leading edge, mirroring the preloader's trailing edge */
.curtain__panel::before {
  content: "";
  position: absolute;
  left: -2%;
  bottom: 100%;
  width: 104%;
  height: 12vh;
  background: inherit;
  border-radius: 50% 50% 0 0;
}

.curtain__panel--lilac  { z-index: 1; background: #9b5bb5; }
.curtain__panel--gold   { z-index: 2; background: #e8940e; transition-delay: 0.07s; }
.curtain__panel--pink   { z-index: 3; background: #e85a9b; transition-delay: 0.14s; }
.curtain__panel--orange { z-index: 4; background: #ee4d1f; transition-delay: 0.21s; }
.curtain__panel--cream  {
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--cream);
  transition-delay: 0.28s;
}

.curtain.is-active .curtain__panel { translate: 0 0; }

.curtain__label {
  font-family: 'Anton', sans-serif;
  font-size: clamp(3rem, 12vw, 10rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--brown);
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.5s ease 0.7s, translate 0.8s var(--ease-out-expo) 0.7s;
}

.curtain.is-active .curtain__label { opacity: 1; translate: 0 0; }

.curtain--instant .curtain__panel,
.curtain--instant .curtain__label { transition: none !important; }

/* ===================== REDUCED MOTION ===================== */

@media (prefers-reduced-motion: reduce) {
  .grain,
  .hero__status-dot::after,
  .hero__clock-colon,
  .hero__scrollcue i::after,
  .hero__count-roll { animation: none; }
  .split-item { translate: none; rotate: none; transition: none; }
  .works-gallery__item,
  .works-gallery__quote { transform: none; }
  .curtain__panel,
  .curtain__label { transition: opacity 0.3s ease; }
}