/* =========================================================
   TBC — Per-page signature motion + loader continuity
   Additive layer. Loads after cinematic.css.
   ========================================================= */

/* ---------- Loader: quick-return variant (repeat visits) ---------- */
#preloader.is-quick .preloader-graphic { opacity: .35; }
#preloader.is-quick .preloader-tags,
#preloader.is-quick .preloader-skip { opacity: 0 !important; }
#preloader.is-quick .preloader-inner { transform: scale(.94); }

/* Loader exit curtain — brand wipe that hands over to the page intro */
.pm-curtain{
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: #05050a;
  transform-origin: top center;
  will-change: transform, opacity;
}
.pm-curtain.is-gone{ display: none; }

/* Loader label carries the page name through */
.preloader-page-label{
  margin-top: 10px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

/* ---------- Shared prep state ---------- */
html.pm-armed .pm-in { will-change: transform, opacity, filter; }

/* HOME — vertical curtain lift, letters rise */
body[data-page="home"] .pm-in { opacity: 0; transform: translateY(38px); }

/* SERVICES — horizontal slat wipe from the left */
body[data-page="services"] .pm-in { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-28px); }

/* PORTFOLIO — mosaic tiles pop from the centre */
body[data-page="portfolio"] .pm-in { opacity: 0; transform: scale(.9) translateY(18px); }

/* ABOUT — soft focus pull */
body[data-page="about"] .pm-in { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(1.02); }

/* CONTACT — cascade in from the right, one line at a time */
body[data-page="contact"] .pm-in { opacity: 0; transform: translateX(36px); }

@media (prefers-reduced-motion: reduce){
  body .pm-in { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .pm-curtain { display: none !important; }
}

/* Portfolio mosaic tiles used during intro */
.pm-mosaic{
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr);
}
.pm-mosaic span{ background: #05050a; }

/* Contact: field underline draw */
body[data-page="contact"] .field { position: relative; }
body[data-page="contact"] .field::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: var(--orange, #e0a45e); transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
body[data-page="contact"] .field:focus-within::after{ transform: scaleX(1); }

/* ---------- TDC hero split: video left, static text right ---------- */
.page-hero:has(.tdc-hero) .page-hero-bg{ display:none; }
.page-hero:has(.tdc-hero){ padding: 90px 0; }
.tdc-hero{
  position: relative; z-index: 2; flex: 1 1 100%; width: 100%;
  max-width: 1280px; margin: 0 auto; padding: 0 6vw;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.tdc-hero-media{
  position: relative; overflow: hidden; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.12);
  aspect-ratio: 4 / 5; background: #05050a;
}
.tdc-hero-media video{ width:100%; height:100%; object-fit: cover; display:block; }
.tdc-hero-copy{ max-width: 640px; }
.tdc-hero-copy .hero-link-arrow{ margin-top: 24px; }
/* right column stays completely static */
.tdc-hero-copy, .tdc-hero-copy *{
  animation: none !important; transition: none !important;
  opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important;
}
@media (max-width: 900px){
  .tdc-hero{ grid-template-columns: 1fr; }
  .tdc-hero-media{ aspect-ratio: 16 / 9; }
}

/* Banner: only TDC video + text — no running background film */
.page-hero .vs-hero-film{ display:none !important; }
.page-hero:has(.tdc-hero) .page-hero-bg{ display:none !important; }