/* ============================================================
   MP&P — AWWWARDS MOTION LAYER
   custom cursor · grain · preloader · page curtain · split text
   clip reveals · marquee · magnetic · cinematic hero · pinned gallery
   ============================================================ */

/* ---------- custom cursor ---------- */
@media (pointer:fine){
  html.has-cur, html.has-cur *{ cursor:none !important; }
  html.has-cur input, html.has-cur textarea, html.has-cur select, html.has-cur [contenteditable]{ cursor:text !important; }
}
.cur{ position:fixed; top:0; left:0; z-index:10000; pointer-events:none; will-change:transform; }
.cur__ring{
  position:fixed; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1.5px solid var(--accent); border-radius:50%;
  display:grid; place-items:center; will-change:transform;
  transition:width .32s var(--ease-expo), height .32s var(--ease-expo), margin .32s var(--ease-expo), background .3s ease, border-color .3s ease;
}
.cur__ring .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#fff; opacity:0; transform:scale(.6); transition:opacity .25s ease, transform .3s var(--ease-expo); }
.cur__dot{ position:fixed; top:0; left:0; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--accent); border-radius:50%; will-change:transform; transition:opacity .25s ease, transform .25s ease; }
html.cur-link .cur__ring{ width:58px; height:58px; margin:-29px 0 0 -29px; background:color-mix(in srgb, var(--accent) 12%, transparent); }
html.cur-link .cur__dot{ opacity:0; }
html.cur-view .cur__ring{ width:84px; height:84px; margin:-42px 0 0 -42px; background:var(--accent); border-color:var(--accent); }
html.cur-view .cur__ring .lbl{ opacity:1; transform:scale(1); }
html.cur-view .cur__dot{ opacity:0; }
html.cur-down .cur__ring{ transform:scale(.82); }

/* ---------- film grain ---------- */
.grain{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ---------- scroll progress ---------- */
.scrollbar{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:70; transform:scaleX(0); transform-origin:0 50%; background:var(--accent); will-change:transform; }

/* ---------- preloader ---------- */
.preload{ position:fixed; inset:0; z-index:10001; background:var(--steel); color:var(--on-steel); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(28px,5vw,64px); overflow:hidden; }
.preload__num{ font-family:var(--display); font-weight:800; font-size:clamp(80px,20vw,260px); line-height:.82; letter-spacing:-.04em; }
.preload__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.preload__lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-steel-2); }
.preload__track{ position:absolute; left:0; bottom:0; height:3px; background:var(--accent); width:0%; }
.preload__brand{ position:absolute; top:clamp(28px,5vw,64px); left:clamp(28px,5vw,64px); font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--on-steel-2); }
.preload__slab{ position:fixed; inset:0; z-index:10000; background:var(--steel); transform:translateY(0); }

/* ---------- page curtain transition ---------- */
.curtain{ position:fixed; inset:0; z-index:9500; pointer-events:none; display:flex; }
.curtain__panel{ flex:1; background:var(--steel); transform:translateY(100%); will-change:transform; }
.curtain__label{ position:fixed; inset:0; z-index:9501; display:grid; place-items:center; pointer-events:none; opacity:0;
  font-family:var(--display); font-weight:800; font-size:clamp(40px,9vw,140px); letter-spacing:-.03em; color:var(--on-steel); text-transform:uppercase; }

/* ---------- split text (CSS transition reveal) ---------- */
.line-mask{ display:block; overflow:hidden; }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.14em; margin-bottom:-0.14em; }
.word-in{ display:inline-block; transform:translateY(112%); will-change:transform; transition:transform .95s var(--ease-expo); }
.split.in .word-in{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .word-in{ transform:none; transition:none; } }

/* ---------- clip reveal images ---------- */
.creveal{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-expo); }
.creveal.in{ clip-path:inset(0 0 0% 0); }
.creveal img{ transform:scale(1.16); transition:transform 1.35s var(--ease-expo); }
.creveal.in img{ transform:scale(1); }
@media (prefers-reduced-motion:reduce){ .creveal{ clip-path:none; transition:none; } .creveal img{ transform:none; transition:none; } }

/* "Scroll reveals" tweak off → show everything immediately */
body.no-reveal .word-in{ transform:none !important; transition:none !important; }
body.no-reveal .creveal{ clip-path:none !important; transition:none !important; }
body.no-reveal .creveal img{ transform:none !important; transition:none !important; }

/* ---------- magnetic ---------- */
.mag{ display:inline-flex; will-change:transform; }

/* ============================================================
   CINEMATIC HERO
   ============================================================ */
.xhero{ position:relative; padding-top:clamp(28px,4vw,52px); padding-bottom:clamp(28px,4vw,48px); overflow:clip; }
.xhero__spec{ display:flex; justify-content:space-between; align-items:center; gap:18px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.xhero__spec span{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.xhero__grid{ display:grid; grid-template-columns:1fr auto; gap:clamp(20px,3vw,48px); align-items:end; margin-top:clamp(28px,4vw,56px); }
.xhead{ font-family:var(--display); font-weight:800; line-height:.86; letter-spacing:-.04em;
  font-size:clamp(56px, 13.5vw, 220px); text-transform:uppercase; margin:0; }
.xhead .accentword{ color:var(--accent); font-style:italic; }
.xhero__side{ display:flex; flex-direction:column; align-items:flex-end; gap:22px; padding-bottom:10px; }
.xhero__media{ position:relative; width:clamp(180px,22vw,340px); aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; background:var(--bg-2); }
.xhero__media img{ width:100%; height:100%; object-fit:cover; }
.xhero__media .badge{ position:absolute; left:12px; top:12px; z-index:2; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:#fff; padding:6px 10px; border-radius:2px; }
.xhero__lead{ max-width:38ch; }
.xhero__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:clamp(28px,4vw,52px); flex-wrap:wrap; }

/* rotating circular badge */
.spinner{ width:clamp(92px,9vw,128px); height:clamp(92px,9vw,128px); position:relative; flex:0 0 auto; }
.spinner svg{ width:100%; height:100%; animation:spin 14s linear infinite; }
.spinner__arrow{ position:absolute; inset:0; display:grid; place-items:center; color:var(--accent); font-size:20px; }
.spinner text{ font-family:var(--mono); font-size:9.2px; letter-spacing:.28em; fill:var(--ink-2); text-transform:uppercase; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spinner svg{ animation:none; } }

/* ---------- marquee ---------- */
.marquee{ overflow:hidden; white-space:nowrap; display:flex; user-select:none; }
.marquee__track{ display:flex; align-items:center; gap:0; flex:0 0 auto; animation:marq var(--marq-dur,28s) linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ font-family:var(--display); font-weight:800; font-size:clamp(28px,4.6vw,72px); letter-spacing:-.03em; text-transform:uppercase; padding:0 28px; display:inline-flex; align-items:center; gap:36px; color:var(--ink); }
.marquee__item .dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.marquee--rev .marquee__track{ animation-direction:reverse; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee--dark{ background:var(--steel); padding-block:clamp(18px,2.4vw,30px); }
.marquee--dark .marquee__item{ color:var(--on-steel); }
.marquee--line .marquee__item{ -webkit-text-stroke:1.4px var(--ink); color:transparent; }
.marquee--dark.marquee--line .marquee__item{ -webkit-text-stroke:1.4px var(--on-steel); }

/* ============================================================
   HORIZONTAL PINNED GALLERY
   ============================================================ */
.hpin{ position:relative; background:var(--steel); color:var(--on-steel); }
.hpin__sticky{ height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hpin__head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:0 clamp(20px,5vw,72px) clamp(20px,3vw,40px); }
.hpin__head h2{ color:var(--on-steel); }
.hpin__track{ display:flex; gap:22px; padding:0 clamp(20px,5vw,72px); will-change:transform; }
.hcard{ flex:0 0 auto; width:clamp(280px,32vw,440px); }
.hcard__media{ aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:var(--steel-2); position:relative; }
.hcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-expo); }
.hcard:hover .hcard__media img{ transform:scale(1.06); }
.hcard__n{ position:absolute; left:14px; top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#fff; background:rgba(20,18,12,.5); backdrop-filter:blur(5px); padding:5px 9px; border-radius:2px; }
.hcard__body{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:16px 2px 0; border-top:1px solid rgba(237,234,224,.16); margin-top:16px; }
.hcard__body h4{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--on-steel); }
.hcard__body span{ font-family:var(--mono); font-size:12px; color:var(--on-steel-2); }
.hpin__progress{ height:2px; background:rgba(237,234,224,.16); margin:clamp(20px,3vw,40px) clamp(20px,5vw,72px) 0; position:relative; }
.hpin__progress i{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--accent); }

@media (max-width: 920px){
  .xhero__grid{ grid-template-columns:1fr; }
  .xhero__side{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  .xhero__media{ width:clamp(150px,38vw,220px); }
  /* horizontal gallery falls back to normal scroll on small screens */
  .hpin__sticky{ height:auto; padding-block:clamp(48px,9vw,84px); }
  .hpin__track{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; -webkit-overflow-scrolling:touch; }
  .hcard{ scroll-snap-align:start; width:78vw; }
}
@media (pointer:coarse){
  .cur, .cur__ring, .cur__dot{ display:none !important; }
}