/* WAPF Cinematic Motion System — GSAP-enhanced, progressive only.
   Important: no content is hidden by default. If JS/CDN fails, the site stays fully usable. */

:root{
  --motion-gold:#d8b66b;
  --motion-bg:#090a09;
}

/* GPU hints only for elements that actually animate. */
.motion-enhanced .hero-content,
.motion-enhanced .hero-footer,
.motion-enhanced .featured-film,
.motion-enhanced .manifesto-word,
.motion-enhanced .journal-card,
.motion-enhanced .collab h2,
.motion-enhanced .page-intro h1,
.motion-enhanced .film-detail-grid,
.motion-enhanced .parkour-card{
  backface-visibility:hidden;
}

/* Header remains the real image logo; animation never replaces it with text. */
.motion-enhanced #header .brand-image,
.motion-enhanced #header .brand-image img{transform-origin:50% 50%;}

/* Cinematic hero sheen — decorative only, never covers controls/content. */
.motion-enhanced .hero{overflow:hidden;}
.motion-enhanced .hero::before{
  transform:translate3d(0,var(--hero-parallax,0px),0) scale(var(--hero-intro-scale,1));
  transform-origin:50% 50%;
  will-change:transform;
}
.motion-enhanced .hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-18% -30%;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(216,182,107,.12) 49%,rgba(255,255,255,.08) 51%,transparent 62%);
  transform:translate3d(-55%,0,0) skewX(-9deg);
  opacity:.7;
}

/* Text masks used only when JS wraps a heading. */
.motion-line-mask{display:block;overflow:hidden;padding:.08em 0 .14em;}
.motion-line-inner{display:block;will-change:transform;}

/* Scroll progress is purely decorative. */
.wapf-scroll-progress{
  position:fixed;
  z-index:9998;
  left:0;
  top:0;
  width:100%;
  height:2px;
  pointer-events:none;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:linear-gradient(90deg,#806d3e,var(--motion-gold),#f2deb0);
  box-shadow:0 0 14px rgba(216,182,107,.32);
}

/* Internal-page exit wipe. It is created only after the user clicks a link. */
.wapf-page-wipe{
  position:fixed;
  z-index:10050;
  inset:0;
  pointer-events:none;
  transform:translate3d(0,101%,0);
  background:#080908;
  border-top:2px solid var(--motion-gold);
}

/* More dimensional hover states, limited to non-video visual cards. */
@media (hover:hover) and (pointer:fine){
  .motion-enhanced .poster-link,
  .motion-enhanced .journal-card:not(.journal-card--video),
  .motion-enhanced .poster-button-upgraded,
  .motion-enhanced .about-logo,
  .motion-enhanced .team-card-front{
    transform-style:preserve-3d;
    will-change:transform;
  }

  .motion-enhanced .poster-link::after,
  .motion-enhanced .journal-card:not(.journal-card--video)::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(125deg,transparent 28%,rgba(216,182,107,.11) 49%,transparent 70%);
    transition:opacity .25s ease;
  }
  .motion-enhanced .poster-link:hover::after,
  .motion-enhanced .journal-card:not(.journal-card--video):hover::after{opacity:1;}
  .motion-enhanced .journal-card:not(.journal-card--video){position:relative;}
}

/* Never animate or transform interactive video/player internals. */
.motion-enhanced video,
.motion-enhanced iframe,
.motion-enhanced .cms-stream-frame,
.motion-enhanced .paypal-box,
.motion-enhanced #paypal-button-container{
  transform:none!important;
}

/* Support page safety: keep all payment/input layout untouched. */
body[data-motion-page="support"] .payment-methods,
body[data-motion-page="support"] .support-amounts,
body[data-motion-page="support"] .direct-transfer,
body[data-motion-page="support"] .paypal-box,
body[data-motion-page="support"] .support-submit{
  transform:none!important;
}

@media(max-width:760px){
  .motion-enhanced .hero::after{opacity:.42;}
}

@media(prefers-reduced-motion:reduce){
  .wapf-scroll-progress,.wapf-page-wipe{display:none!important;}
  .motion-enhanced .hero::after{display:none!important;}
}
.motion-enhanced .hero::after{
  transform:translate3d(var(--sweep,-55%),0,0) skewX(-9deg);
}
/* Video-safe scan line: decorates the media box without transforming the video/player. */
.motion-media-scan{
  position:absolute;
  z-index:8;
  inset:0 auto 0 -24%;
  width:18%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(216,182,107,.22),rgba(255,255,255,.10),transparent);
  transform:skewX(-10deg);
  opacity:.8;
}

/* ===== WAPF seamless GSAP ticker loop ===== */
.motion-enhanced .ticker.ticker-loop{
  position:relative;
  display:block;
  overflow:hidden!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  padding-inline:0!important;
  white-space:nowrap;
  touch-action:pan-y;
  overscroll-behavior-x:none;
  scrollbar-width:none;
  isolation:isolate;
}
.motion-enhanced .ticker.ticker-loop::-webkit-scrollbar{display:none}
.motion-enhanced .ticker.ticker-loop .ticker-track{
  display:flex;
  width:max-content;
  min-width:max-content;
  align-items:center;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.motion-enhanced .ticker.ticker-loop .ticker-group{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(22px,2vw,34px);
  padding-inline:clamp(22px,3.2vw,58px);
}
.motion-enhanced .ticker.ticker-loop .ticker-group>span,
.motion-enhanced .ticker.ticker-loop .ticker-group>i{
  flex:0 0 auto;
}
.motion-enhanced .ticker.ticker-loop:before,
.motion-enhanced .ticker.ticker-loop:after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:min(9vw,120px);
  pointer-events:none;
}
.motion-enhanced .ticker.ticker-loop:before{
  left:0;
  background:linear-gradient(90deg,var(--bg),transparent);
}
.motion-enhanced .ticker.ticker-loop:after{
  right:0;
  background:linear-gradient(270deg,var(--bg),transparent);
}
@media(max-width:760px){
  .motion-enhanced .ticker.ticker-loop{padding-block:20px}
  .motion-enhanced .ticker.ticker-loop .ticker-group{
    gap:22px;
    padding-inline:24px;
  }
  .motion-enhanced .ticker.ticker-loop:before,
  .motion-enhanced .ticker.ticker-loop:after{width:38px}
}
/* ===== WAPF smooth cross-page transition =====
   No curtain, gate, logo overlay, or full-screen closing panels. */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}

::view-transition-old(root) {
  animation: wapf-page-out .20s cubic-bezier(.4,0,1,1) both;
}

::view-transition-new(root) {
  animation: wapf-page-in .34s cubic-bezier(.16,1,.3,1) both;
}

@keyframes wapf-page-out {
  from { opacity:1; transform:translateY(0) scale(1); filter:none; }
  to   { opacity:.18; transform:translateY(-5px) scale(.996); filter:none; }
}

@keyframes wapf-page-in {
  from { opacity:.20; transform:translateY(8px) scale(1.004); filter:none; }
  to   { opacity:1; transform:translateY(0) scale(1); filter:none; }
}

/* Keep page-title movement cinematic but horizontal, not top-to-bottom. */
.motion-enhanced .page-intro h1{
  transform-origin:100% 50%;
  will-change:transform,clip-path;
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none!important}
}