/* Frontier Scripts — optional atmosphere / motion layer.
   This file intentionally does not change layout geometry or typography. */

/* very light film texture */
.frontier-film-grain{position:fixed;inset:-40%;z-index:90;pointer-events:none;opacity:.024;mix-blend-mode:soft-light;background-image:repeating-radial-gradient(circle at 18% 23%,#fff 0 1px,transparent 1px 4px),repeating-radial-gradient(circle at 78% 61%,#000 0 1px,transparent 1px 5px);background-size:7px 7px,9px 9px;animation:frontierGrain .48s steps(2,end) infinite}
@keyframes frontierGrain{0%{transform:translate3d(-1.2%,.8%,0)}25%{transform:translate3d(.9%,-1%,0)}50%{transform:translate3d(.35%,1.1%,0)}75%{transform:translate3d(-.7%,-.35%,0)}100%{transform:translate3d(1%,.7%,0)}}

/* internal page fade only */
body.local-site{transition:opacity .18s ease,filter .18s ease}
body.local-site.page-leaving{opacity:.16;filter:brightness(.62)}

/* hero atmosphere */
.local-hero{--hero-x:0px;--hero-y:0px;--haze-x:0px}
.local-hero-bg{transform:scale(1.025) translate3d(var(--hero-x),var(--hero-y),0);transition:transform .7s cubic-bezier(.2,.75,.2,1);will-change:transform}
.frontier-atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.frontier-light-haze{position:absolute;left:21%;top:-12%;width:58%;height:78%;background:linear-gradient(112deg,transparent 13%,rgba(247,199,109,.035) 39%,rgba(247,199,109,.095) 49%,rgba(247,199,109,.03) 61%,transparent 83%);filter:blur(22px);transform:translate3d(var(--haze-x),0,0) rotate(-3deg);animation:frontierHaze 10s ease-in-out infinite alternate;transition:transform .8s ease}
@keyframes frontierHaze{from{opacity:.38}to{opacity:.78}}
.frontier-lantern-glow{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,169,63,.16),rgba(255,138,34,.055) 29%,transparent 68%);filter:blur(10px);mix-blend-mode:screen;animation:frontierLantern 5.8s ease-in-out infinite}
.frontier-lantern-glow.glow-one{left:16%;top:25%;animation-delay:-1.2s}.frontier-lantern-glow.glow-two{left:31%;top:23%;width:105px;height:105px;animation-delay:-3.7s}.frontier-lantern-glow.glow-three{right:8%;top:28%;width:135px;height:135px;animation-delay:-2.4s}
@keyframes frontierLantern{0%,100%{opacity:.34;transform:scale(.96)}12%{opacity:.59}27%{opacity:.42;transform:scale(1.03)}44%{opacity:.64}62%{opacity:.45;transform:scale(.98)}78%{opacity:.60}}
.frontier-dust,.frontier-ember{position:absolute;left:var(--x);top:var(--y);display:block;border-radius:50%;pointer-events:none}
.frontier-dust{width:var(--size);height:var(--size);background:#f1d09a;opacity:var(--opacity);box-shadow:0 0 7px rgba(246,198,121,.22);animation:frontierDust var(--duration) linear var(--delay) infinite}
@keyframes frontierDust{0%{transform:translate3d(0,30px,0);opacity:0}10%{opacity:var(--opacity)}72%{opacity:calc(var(--opacity) * .78)}100%{transform:translate3d(var(--drift),-150px,0);opacity:0}}
.frontier-ember{width:2px;height:2px;background:#e89a43;box-shadow:0 0 8px rgba(237,134,45,.68);opacity:.32;animation:frontierEmber var(--duration) ease-in var(--delay) infinite}
@keyframes frontierEmber{0%{transform:translate3d(0,16px,0) scale(.55);opacity:0}18%{opacity:.34}65%{opacity:.18}100%{transform:translate3d(var(--drift),-120px,0) scale(1.1);opacity:0}}

/* carousel feedback — preserves the existing positioning transforms */
.local-carousel.motion-carousel-change .local-feature{animation:frontierCarouselPulse .4s cubic-bezier(.2,.75,.2,1)}
.local-carousel.motion-category-change .local-feature{animation:frontierCategorySwap .46s cubic-bezier(.2,.75,.2,1)}
@keyframes frontierCarouselPulse{0%{filter:brightness(.8) saturate(.84)}48%{filter:brightness(1.08) saturate(1.04)}100%{filter:brightness(1) saturate(1)}}
@keyframes frontierCategorySwap{0%{opacity:.62;filter:blur(1.2px) brightness(.74)}55%{opacity:1;filter:blur(0) brightness(1.07)}100%{opacity:1;filter:none}}
.local-feature.center:before{content:"";position:absolute;inset:-1px;z-index:3;pointer-events:none;border:1px solid transparent;box-shadow:inset 0 0 0 1px rgba(234,190,109,.035),0 0 0 rgba(218,163,78,0);transition:box-shadow .28s ease,border-color .28s ease}
.local-feature.center:hover:before{border-color:rgba(231,187,105,.25);box-shadow:inset 0 0 22px rgba(218,163,78,.05),0 0 34px rgba(218,163,78,.075)}
.local-feature-art{transition:transform 1.1s cubic-bezier(.2,.75,.2,1),filter .35s ease}
.local-feature:hover .local-feature-art{transform:scale(1.028)}

/* product art micro-parallax: card geometry remains unchanged */
.local-product{--motion-x:0;--motion-y:0;transform-style:preserve-3d}
.local-product-art{transition:transform .9s cubic-bezier(.2,.75,.2,1),filter .35s ease;transform:scale(1) translate3d(calc(var(--motion-x) * 2.5px),calc(var(--motion-y) * 2.5px),0)}
.local-product:hover .local-product-art{transform:scale(1.035) translate3d(calc(var(--motion-x) * 3px),calc(var(--motion-y) * 3px),0);filter:saturate(.9) brightness(1.025)}
.local-product-shade{transition:background .3s ease}.local-product:hover .local-product-shade{background:linear-gradient(to top,#070503 7%,rgba(7,5,3,.035) 67%)}

/* filter and media swaps */
[data-all-grid].motion-grid-swap .local-product{animation:frontierGridSwap .39s cubic-bezier(.2,.75,.2,1) both}
[data-all-grid].motion-grid-swap .local-product:nth-child(2){animation-delay:35ms}[data-all-grid].motion-grid-swap .local-product:nth-child(3){animation-delay:70ms}[data-all-grid].motion-grid-swap .local-product:nth-child(4){animation-delay:105ms}[data-all-grid].motion-grid-swap .local-product:nth-child(5){animation-delay:140ms}
@keyframes frontierGridSwap{from{opacity:.38;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
.local-media-main.motion-media-swap{animation:frontierMediaSwap .4s ease}
@keyframes frontierMediaSwap{0%{opacity:.62;transform:scale(.992)}48%{opacity:1;transform:scale(1.008)}100%{opacity:1;transform:none}}

/* scroll reveals */
.motion-reveal-target{opacity:0;transform:translateY(14px);transition:opacity .62s ease var(--reveal-delay,0ms),transform .62s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms)}
.motion-reveal-target.is-revealed{opacity:1;transform:none}

/* nav polish */
.fsx-nav>a:not(.fsx-discord-nav){position:relative}
.fsx-nav>a:not(.fsx-discord-nav):before{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:#d2a34e;transition:left .2s ease,right .2s ease;opacity:.75}
.fsx-nav>a:not(.fsx-discord-nav):hover:before{left:0;right:0}
.fsx-discord-nav{box-shadow:0 0 0 rgba(88,101,242,0);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.fsx-discord-nav:hover{box-shadow:0 0 24px rgba(88,101,242,.11)}

/* basket feedback */
.fsx-basket{position:relative;overflow:visible}
.fsx-basket.basket-pop{animation:frontierBasketPop .56s cubic-bezier(.2,.8,.2,1)}
.basket-spark{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#efc77d;box-shadow:-16px -9px 0 rgba(239,199,125,.55),17px -7px 0 rgba(239,199,125,.42),-13px 12px 0 rgba(239,199,125,.38),15px 11px 0 rgba(239,199,125,.48);pointer-events:none;animation:frontierBasketSpark .58s ease-out forwards}
@keyframes frontierBasketPop{0%{transform:scale(1)}38%{transform:scale(1.075);border-color:rgba(224,179,96,.72)}100%{transform:scale(1)}}
@keyframes frontierBasketSpark{from{opacity:1;transform:translate(-50%,-50%) scale(.65)}to{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
.local-toast.show{box-shadow:0 12px 36px rgba(0,0,0,.48),0 0 22px rgba(210,163,78,.09)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  body.local-site{opacity:1!important;filter:none!important}.local-hero-bg{transform:none!important}.frontier-atmosphere,.frontier-film-grain{display:none!important}.motion-reveal-target{opacity:1!important;transform:none!important}
}

/* ===============================
   CINEMATIC MOTION V3
   Stronger atmosphere + true carousel travel
   =============================== */

/* Make the hero copy readable without changing its placement or typeface. */
.local-hero-title{position:relative;isolation:isolate;padding:10px 22px 14px}
.local-hero-title::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(980px,112vw);height:235px;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(ellipse at center,rgba(5,3,2,.76) 0%,rgba(6,4,2,.52) 38%,rgba(7,5,3,.20) 64%,transparent 78%);filter:blur(10px)}
.local-hero-title h1{text-shadow:0 3px 0 rgba(0,0,0,.20),0 9px 28px rgba(0,0,0,.90),0 0 18px rgba(0,0,0,.46)}
.local-hero-title h1 span{text-shadow:0 3px 0 rgba(20,4,3,.32),0 10px 30px rgba(0,0,0,.92),0 0 15px rgba(0,0,0,.42)}
.local-hero-title p{color:#eee2cf;text-shadow:0 2px 4px #000,0 0 13px rgba(0,0,0,.95);font-weight:500}
.local-hero-title .fsx-kicker{text-shadow:0 2px 6px #000,0 0 10px rgba(0,0,0,.9)}

/* Atmosphere is still restrained, but now visible at ordinary monitor brightness. */
.frontier-light-haze{background:linear-gradient(112deg,transparent 12%,rgba(247,199,109,.055) 36%,rgba(247,199,109,.16) 49%,rgba(247,199,109,.05) 62%,transparent 84%);filter:blur(18px)}
.frontier-lantern-glow{background:radial-gradient(circle,rgba(255,189,84,.34),rgba(255,143,40,.12) 26%,rgba(255,112,20,.045) 48%,transparent 70%);filter:blur(8px);animation-duration:4.7s}
@keyframes frontierLantern{0%,100%{opacity:.38;transform:scale(.94)}9%{opacity:.78;transform:scale(1.02)}18%{opacity:.48}31%{opacity:.72;transform:scale(1.06)}43%{opacity:.44}58%{opacity:.82;transform:scale(.98)}72%{opacity:.52}86%{opacity:.73;transform:scale(1.04)}}
.frontier-dust{box-shadow:0 0 8px rgba(247,207,144,.42);filter:blur(.15px)}
.frontier-ember{width:3px;height:3px;box-shadow:0 0 11px rgba(239,147,55,.88);opacity:.5}

/* More obvious, still elegant, viewport reveals. */
.motion-reveal-target{opacity:0;transform:translateY(28px) scale(.992);filter:blur(2px);transition:opacity .78s ease var(--reveal-delay,0ms),transform .82s cubic-bezier(.16,.78,.18,1) var(--reveal-delay,0ms),filter .72s ease var(--reveal-delay,0ms)}
.motion-reveal-target.is-revealed{opacity:1;transform:none;filter:none}

/* True spatial carousel movement. Cards actually travel between slots. */
.local-feature{transition:transform var(--carousel-speed,.58s) cubic-bezier(.18,.8,.18,1),opacity var(--carousel-speed,.42s) ease,filter var(--carousel-speed,.42s) ease,border-color .2s ease,width var(--carousel-speed,.58s) cubic-bezier(.18,.8,.18,1),height var(--carousel-speed,.58s) cubic-bezier(.18,.8,.18,1);will-change:transform,opacity,width,height}
.local-feature.exit-left{left:50%;width:300px;height:340px;z-index:1;opacity:0;filter:blur(2px) brightness(.58);transform:translateX(-690px) rotateY(32deg) translateZ(-180px) scale(.72);pointer-events:none}
.local-feature.exit-right{left:50%;width:300px;height:340px;z-index:1;opacity:0;filter:blur(2px) brightness(.58);transform:translateX(390px) rotateY(-32deg) translateZ(-180px) scale(.72);pointer-events:none}
.local-feature.enter-right{left:50%;width:300px;height:340px;z-index:2;opacity:0;filter:blur(2px) brightness(.65);transform:translateX(450px) rotateY(-26deg) translateZ(-150px) scale(.78);pointer-events:none}
.local-feature.enter-left{left:50%;width:300px;height:340px;z-index:2;opacity:0;filter:blur(2px) brightness(.65);transform:translateX(-650px) rotateY(26deg) translateZ(-150px) scale(.78);pointer-events:none}
.local-carousel.rotate-next .local-feature.center,.local-carousel.rotate-prev .local-feature.center{box-shadow:0 30px 85px #000c,0 0 30px rgba(206,154,73,.08)}
.local-carousel.carousel-settle .local-feature.center{animation:frontierCenterSettle .52s cubic-bezier(.18,.8,.18,1)}
@keyframes frontierCenterSettle{0%{filter:brightness(.74);opacity:.72;transform:translateX(-50%) scale(.96)}100%{filter:brightness(1);opacity:1;transform:translateX(-50%) scale(1)}}
.local-carousel.category-fade .local-feature{opacity:.26;filter:blur(3px) brightness(.62);transform:translateX(-50%) scale(.94)}

@media(max-width:900px){
  .local-feature.exit-left{transform:translateX(-520px) rotateY(28deg) translateZ(-140px) scale(.70)}
  .local-feature.exit-right{transform:translateX(270px) rotateY(-28deg) translateZ(-140px) scale(.70)}
  .local-feature.enter-left{transform:translateX(-500px) rotateY(24deg) translateZ(-120px) scale(.74)}
  .local-feature.enter-right{transform:translateX(260px) rotateY(-24deg) translateZ(-120px) scale(.74)}
}

/* V4 carousel continuity: a temporary fourth card enters concurrently with the other three. */
.local-feature.enter-right,
.local-feature.enter-left{
  visibility:visible!important;
  display:block!important;
}
.local-feature.enter-right{opacity:.18}
.local-feature.enter-left{opacity:.18}

/* V5 — keep the CTA attached to every physical carousel card.
   Only the card occupying the center position exposes it. */
.local-feature .local-btn{
  opacity:0;
  transform:translateY(7px) scale(.96);
  pointer-events:none;
  transition:opacity .28s ease .08s,transform .36s cubic-bezier(.18,.8,.18,1) .05s;
}
.local-feature.center .local-btn{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.local-feature.left .local-btn,
.local-feature.right .local-btn,
.local-feature.exit-left .local-btn,
.local-feature.exit-right .local-btn,
.local-feature.enter-left .local-btn,
.local-feature.enter-right .local-btn{
  opacity:0;
  transform:translateY(7px) scale(.96);
  pointer-events:none;
}


/* ===== V5.17: precise fixture-sized lantern flicker ===== */

.frontier-lantern-glow{display:none!important}

.frontier-lantern-field{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform:scale(1.025) translate3d(var(--hero-x),var(--hero-y),0);
  transform-origin:50% 50%;
  transition:transform .7s cubic-bezier(.2,.75,.2,1);
  will-change:transform;
  overflow:visible;
}

/* V5.19 cinematic pass: stronger flame, wider atmospheric bloom,
   still feathered so there is no hard circular edge. */
.frontier-lantern-hotspot{
  position:absolute;
  width:calc(var(--lantern-size) * 1.08);
  height:calc(var(--lantern-size) * 1.22);
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:.84;
  animation:frontierAnchoredLantern var(--lantern-speed,5s) ease-in-out var(--lantern-delay,0s) infinite;
  will-change:opacity,filter,transform;
  filter:drop-shadow(0 0 8px rgba(255,166,70,.16));
}

/* Brighter inner flame / glowing glass. */
.frontier-lantern-hotspot::before{
  content:"";
  position:absolute;
  left:27%;
  right:27%;
  top:15%;
  bottom:15%;
  border-radius:48%;
  background:
    radial-gradient(ellipse at 50% 42%,
      rgba(255,255,236,.98) 0%,
      rgba(255,235,175,.94) 21%,
      rgba(255,199,105,.80) 42%,
      rgba(255,152,48,.46) 63%,
      rgba(255,107,18,.14) 78%,
      transparent 91%);
  filter:blur(3.8px);
  box-shadow:
    0 0 12px rgba(255,219,145,.38),
    0 0 26px rgba(255,160,55,.24);
}

/* Larger cinematic bloom with two feathered layers.
   The edges fully disappear rather than reading as a circle. */
.frontier-lantern-hotspot::after{
  content:"";
  position:absolute;
  inset:-90% -105%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 44%,
      rgba(255,207,113,.30) 0%,
      rgba(255,174,72,.20) 21%,
      rgba(255,137,43,.11) 40%,
      rgba(255,106,24,.045) 58%,
      rgba(255,89,15,.012) 70%,
      transparent 84%),
    radial-gradient(ellipse at 50% 50%,
      rgba(255,193,92,.12) 0%,
      rgba(255,144,44,.055) 35%,
      transparent 76%);
  filter:blur(20px);
  transform:scale(1.06,1.13);
}

/* Uneven peak values keep it from looking like a simple opacity pulse. */
@keyframes frontierAnchoredLantern{
  0%,100%{
    opacity:.64;
    filter:brightness(1.02) saturate(1.02)
           drop-shadow(0 0 7px rgba(255,159,54,.12));
  }
  7%{
    opacity:.84;
    filter:brightness(1.12) saturate(1.08)
           drop-shadow(0 0 12px rgba(255,170,62,.20));
  }
  15%{
    opacity:.70;
    filter:brightness(1.05) saturate(1.03)
           drop-shadow(0 0 8px rgba(255,158,49,.13));
  }
  27%{
    opacity:.96;
    filter:brightness(1.23) saturate(1.13)
           drop-shadow(0 0 18px rgba(255,180,73,.28));
  }
  38%{
    opacity:.73;
    filter:brightness(1.07) saturate(1.04)
           drop-shadow(0 0 9px rgba(255,157,48,.15));
  }
  51%{
    opacity:.89;
    filter:brightness(1.16) saturate(1.10)
           drop-shadow(0 0 14px rgba(255,172,66,.23));
  }
  63%{
    opacity:.68;
    filter:brightness(1.04) saturate(1.02)
           drop-shadow(0 0 8px rgba(255,151,44,.12));
  }
  76%{
    opacity:.92;
    filter:brightness(1.19) saturate(1.11)
           drop-shadow(0 0 16px rgba(255,177,70,.25));
  }
  88%{
    opacity:.72;
    filter:brightness(1.06) saturate(1.03)
           drop-shadow(0 0 9px rgba(255,158,49,.14));
  }
}

@media (prefers-reduced-motion:reduce){
  .frontier-lantern-field{
    transform:none!important;
    transition:none!important;
  }
  .frontier-lantern-hotspot{
    animation:none!important;
    opacity:.68!important;
  }
}