/* ============================================================
   PIKE — MOTION DESIGN SYSTEM
   ============================================================ */

/* === PAGE LOADER === */
.page-loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:30px;
  transition:opacity .8s var(--ease-out), visibility .8s;
}
.page-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-shield{
  width:90px;height:100px;
  position:relative;
  animation:loaderPulse 1.6s var(--ease-in-out) infinite;
}
.loader-shield svg{width:100%;height:100%}
.loader-letters{
  display:flex;gap:12px;
  font-family:var(--font-display);
  font-size:54px;letter-spacing:.18em;
  color:var(--cream);
}
.loader-letters span{
  display:inline-block;
  opacity:0;
  animation:loaderLetter .6s var(--ease-out) forwards;
}
.loader-letters span:nth-child(1){animation-delay:.2s}
.loader-letters span:nth-child(2){animation-delay:.35s}
.loader-letters span:nth-child(3){animation-delay:.5s}
.loader-letters span:nth-child(4){animation-delay:.65s}
.loader-tagline{
  font-family:var(--font-ui);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);opacity:0;
  animation:loaderLetter .6s var(--ease-out) .9s forwards;
}
.loader-bar{
  width:200px;height:1px;background:rgba(184,151,74,.2);
  position:relative;overflow:hidden;
}
.loader-bar::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:100%;
  background:var(--gold);
  transform:translateX(-100%);
  animation:loaderProgress 1.6s var(--ease-out) forwards;
}

@keyframes loaderPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.06);opacity:.8}
}
@keyframes loaderLetter{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes loaderProgress{
  from{transform:translateX(-100%)}
  to{transform:translateX(0)}
}

/* === SCROLL REVEAL === */
.reveal{
  opacity:0;
  transform:translateY(50px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in{opacity:1;transform:translateY(0)}

.reveal-fade{opacity:0;transition:opacity 1.2s var(--ease-out)}
.reveal-fade.in{opacity:1}

.reveal-up{opacity:0;transform:translateY(80px);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal-up.in{opacity:1;transform:translateY(0)}

.reveal-left{opacity:0;transform:translateX(-60px);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal-left.in{opacity:1;transform:translateX(0)}

.reveal-right{opacity:0;transform:translateX(60px);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal-right.in{opacity:1;transform:translateX(0)}

.reveal-scale{opacity:0;transform:scale(.9);transition:opacity 1s var(--ease-out), transform 1.2s var(--ease-out)}
.reveal-scale.in{opacity:1;transform:scale(1)}

/* Stagger children */
.stagger > *{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.stagger.in > *{opacity:1;transform:translateY(0)}
.stagger.in > *:nth-child(1){transition-delay:0s}
.stagger.in > *:nth-child(2){transition-delay:.1s}
.stagger.in > *:nth-child(3){transition-delay:.2s}
.stagger.in > *:nth-child(4){transition-delay:.3s}
.stagger.in > *:nth-child(5){transition-delay:.4s}
.stagger.in > *:nth-child(6){transition-delay:.5s}
.stagger.in > *:nth-child(7){transition-delay:.6s}
.stagger.in > *:nth-child(8){transition-delay:.7s}
.stagger.in > *:nth-child(9){transition-delay:.8s}
.stagger.in > *:nth-child(10){transition-delay:.9s}
.stagger.in > *:nth-child(11){transition-delay:1s}
.stagger.in > *:nth-child(12){transition-delay:1.1s}
.stagger.in > *:nth-child(13){transition-delay:1.2s}
.stagger.in > *:nth-child(14){transition-delay:1.3s}
.stagger.in > *:nth-child(15){transition-delay:1.4s}
.stagger.in > *:nth-child(16){transition-delay:1.5s}

/* === SPLIT TEXT (per word/line reveal) === */
.split-line{display:block;overflow:hidden}
.split-line .line-inner{
  display:inline-block;
  transform:translateY(105%);
  transition:transform 1s var(--ease-out);
}
.split-line.in .line-inner{transform:translateY(0)}
.split-line:nth-child(1) .line-inner{transition-delay:.1s}
.split-line:nth-child(2) .line-inner{transition-delay:.25s}
.split-line:nth-child(3) .line-inner{transition-delay:.4s}
.split-line:nth-child(4) .line-inner{transition-delay:.55s}

/* === IMAGE REVEAL (mask slide) === */
.img-reveal{
  position:relative;
  overflow:hidden;
}
.img-reveal::after{
  content:"";position:absolute;inset:0;
  background:var(--navy);
  transform:translateX(0);
  transition:transform 1.2s var(--ease-in-out);
  z-index:2;
}
.img-reveal.in::after{transform:translateX(101%)}
.img-reveal img{
  transform:scale(1.15);
  transition:transform 1.6s var(--ease-out);
}
.img-reveal.in img{transform:scale(1)}

.img-reveal.from-left::after{transform:translateX(0)}
.img-reveal.from-left.in::after{transform:translateX(-101%)}

/* Cream mask variant */
.img-reveal.cream::after{background:var(--cream)}

/* === KEN BURNS HERO === */
.kenburns{
  position:absolute;inset:0;overflow:hidden;
}
.kenburns img{
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 22s var(--ease-in-out) infinite alternate;
  transform-origin:center center;
}
@keyframes kenburns{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.12) translate(-1.5%,-1.5%)}
}

/* === PARALLAX === */
[data-parallax]{will-change:transform;transition:transform .1s linear}

.parallax-layer{
  position:absolute;inset:0;
  will-change:transform;
}

/* === MARQUEE === */
.marquee{
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.marquee-track{
  display:inline-flex;
  animation:marquee 40s linear infinite;
  gap:60px;
  align-items:center;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  display:inline-flex;align-items:center;gap:28px;
  font-family:var(--font-display);
  font-size:clamp(60px,9vw,140px);
  letter-spacing:.04em;
  white-space:nowrap;
}
.marquee-item .m-diamond{
  width:14px;height:14px;
  background:var(--gold);transform:rotate(45deg);
  flex-shrink:0;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Slow marquee */
.marquee-slow .marquee-track{animation-duration:60s}

/* === COUNTERS === */
.counter{
  font-family:var(--font-display);
  font-size:clamp(56px,9vw,128px);
  line-height:.9;
  color:var(--navy);
  display:inline-block;
}
.dark .counter{color:var(--cream)}

/* === CARD TILT === */
.tilt{
  transition:transform .4s var(--ease-out);
  transform-style:preserve-3d;
}
.tilt-inner{
  transition:transform .4s var(--ease-out);
}

/* === MAGNETIC CTA === */
.magnetic{
  display:inline-block;
  transition:transform .3s var(--ease-out);
}

/* === CUSTOM CURSOR === */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;
  pointer-events:none;
  z-index:9000;
  border-radius:50%;
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
}
.cursor-dot{
  width:6px;height:6px;
  background:var(--cream);
  transition:width .25s var(--ease-out),height .25s var(--ease-out),background .2s;
}
.cursor-ring{
  width:32px;height:32px;
  border:1px solid var(--cream);
  transition:width .35s var(--ease-out), height .35s var(--ease-out), opacity .3s;
}
.cursor-ring.hover{width:60px;height:60px}
.cursor-dot.hover{width:0;height:0}
@media(max-width:980px){.cursor-dot,.cursor-ring{display:none}}

/* === PAGE TRANSITION === */
.page-transition{
  position:fixed;inset:0;z-index:5000;
  background:var(--navy);
  transform:translateY(100%);
  pointer-events:none;
}
.page-transition.in{
  transform:translateY(0);
  transition:transform .6s var(--ease-in-out);
}
.page-transition.out{
  transform:translateY(-100%);
  transition:transform .6s var(--ease-in-out);
}

/* === SCROLL INDICATOR === */
.scroll-indicator{
  position:absolute;bottom:32px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-family:var(--font-ui);
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(242,236,216,.6);
  z-index:5;
}
.scroll-indicator-line{
  width:1px;height:60px;
  background:rgba(184,151,74,.5);
  position:relative;overflow:hidden;
}
.scroll-indicator-line::before{
  content:"";position:absolute;top:0;left:0;right:0;height:30%;
  background:var(--gold);
  animation:scrollLine 2s var(--ease-in-out) infinite;
}
@keyframes scrollLine{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(333%)}
}

/* === HOVER GROW === */
.hover-grow{transition:transform .5s var(--ease-out)}
.hover-grow:hover{transform:scale(1.02)}

.hover-img{overflow:hidden}
.hover-img img{transition:transform .8s var(--ease-out)}
.hover-img:hover img{transform:scale(1.06)}

/* === TEXT GRADIENT === */
.gradient-text{
  background:linear-gradient(135deg, var(--gold) 0%, var(--cream-deep) 50%, var(--gold-soft) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* === CORNER FRAMES === */
.corner-frame{position:relative}
.corner-frame::before,
.corner-frame::after{
  content:"";position:absolute;
  width:30px;height:30px;
  border:1px solid var(--gold);
  pointer-events:none;
}
.corner-frame::before{top:14px;left:14px;border-right:0;border-bottom:0}
.corner-frame::after{bottom:14px;right:14px;border-left:0;border-top:0}

.corner-frame-inv::before,
.corner-frame-inv::after{
  content:"";position:absolute;
  width:30px;height:30px;
  border:1px solid var(--gold);
  pointer-events:none;
}
.corner-frame-inv::before{top:14px;right:14px;border-left:0;border-bottom:0}
.corner-frame-inv::after{bottom:14px;left:14px;border-right:0;border-top:0}

/* === ROTATING SHIELD ON SCROLL === */
.spin-on-scroll{
  transition:transform .3s linear;
  will-change:transform;
}

/* === FLOATING BADGE === */
.float{
  animation:float 6s var(--ease-in-out) infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* === SHIELD GLOW === */
.shield-glow{
  filter:drop-shadow(0 0 24px rgba(184,151,74,.35));
}

/* === LIGHT BEAM (background atmospheric effect) === */
.light-beam{
  position:absolute;
  width:280px;height:600px;
  background:radial-gradient(ellipse at center, rgba(184,151,74,.18) 0%, transparent 70%);
  filter:blur(40px);
  pointer-events:none;
  animation:beamMove 14s var(--ease-in-out) infinite alternate;
}
@keyframes beamMove{
  from{transform:translate(0,0) rotate(-12deg)}
  to{transform:translate(60px,40px) rotate(8deg)}
}

/* === GRAIN OVERLAY === */
.grain::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.4'/></svg>");
  pointer-events:none;
  opacity:.6;
  mix-blend-mode:overlay;
  z-index:1;
}