/* ============================================================
   FENYX DYNAMICS — fenyx-intro.css
   Approved 3D wing-opening intro (source of truth:
   FENYX_3D_wing_opening_standalone_v3.html). Styles extracted
   verbatim and scoped under .fenyx-intro; only the overlay
   plumbing (fixed positioning, done/reduced states, skip
   control) is site-specific. Do not restyle the animation.
   ============================================================ */

/* ---- overlay plumbing (site integration) ---- */
.fenyx-intro{position:fixed;inset:0;z-index:1200;display:none}
.js .fenyx-intro{display:grid}
.fenyx-intro.is-done{
  opacity:0;visibility:hidden;
  transition:opacity .9s cubic-bezier(.65,.05,.36,1), visibility 0s linear .9s;
}
.fenyx-intro.reduced{animation:fxi-fade .5s linear both}
@keyframes fxi-fade{from{opacity:0}to{opacity:1}}

.fenyx-intro .intro-skip{
  position:absolute;right:1.4rem;bottom:1.3rem;z-index:32;
  background:rgba(4,5,6,.38);border:1px solid rgba(238,242,246,.14);border-radius:999px;
  color:rgba(238,242,246,.68);font-family:var(--font-mono);font-size:var(--fs-100);
  letter-spacing:.18em;text-transform:uppercase;padding:.8em 1.2em;cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;animation:fxi-fade .4s linear 1.1s both;min-height:44px;transition:.25s;
}
.fenyx-intro .intro-skip:hover,.fenyx-intro .intro-skip:focus-visible{
  opacity:1;border-color:rgba(226,118,46,.45);color:#fff;
}
.fenyx-intro.reduced .intro-skip{animation:none;opacity:.56}

/* ---- approved stage (verbatim, scoped) ---- */
.fenyx-intro{
  place-items:center;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(226,118,46,.035) 0%,rgba(226,118,46,.012) 31%,transparent 67%),
    #020304;
  isolation:isolate;
  perspective:1450px;
  perspective-origin:50% 48%;
}
.fenyx-intro .vignette{position:absolute;inset:-2px;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 24%,rgba(0,0,0,.24) 58%,rgba(0,0,0,.82) 100%);z-index:30}
.fenyx-intro .grain{position:absolute;inset:0;pointer-events:none;opacity:.021;mix-blend-mode:soft-light;z-index:29;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E")}
.fenyx-intro .thermal{position:absolute;inset:-12%;opacity:0;filter:blur(52px) saturate(.92);z-index:1;pointer-events:none;transform:scale(.92)}
.fenyx-intro .thermal::before,.fenyx-intro .thermal::after{content:"";position:absolute;border-radius:50%;mix-blend-mode:screen}
.fenyx-intro .thermal::before{width:38vw;height:21vw;left:31vw;top:42vh;background:radial-gradient(ellipse,rgba(226,118,46,.10),rgba(165,55,10,.02) 48%,transparent 73%);transform:rotate(-5deg)}
.fenyx-intro .thermal::after{width:27vw;height:15vw;left:37vw;top:31vh;background:radial-gradient(ellipse,rgba(255,173,104,.055),transparent 72%);transform:rotate(8deg)}
.fenyx-intro .aura{position:absolute;width:min(54vw,820px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(226,118,46,.09),rgba(226,118,46,.021) 34%,transparent 70%);filter:blur(22px);opacity:0;z-index:2;pointer-events:none}
.fenyx-intro .logo-wrap{
  position:relative;width:min(43vw,630px);aspect-ratio:3410/2925;
  transform-style:preserve-3d;z-index:8;will-change:transform,filter;
  transform:translateZ(0);
}
.fenyx-intro .logo-layer{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform,opacity,filter}
.fenyx-intro .logo-layer svg{display:block;width:100%;height:100%;max-width:none;overflow:visible;transform-style:preserve-3d}
.fenyx-intro .wing{
  opacity:0;
  backface-visibility:visible;
  transform-style:preserve-3d;
  clip-path:inset(0 50% 0 50%);
}
.fenyx-intro .wing.left{transform-origin:50% 51.5%}
.fenyx-intro .wing.right{transform-origin:50% 51.5%}
.fenyx-intro .wing svg{backface-visibility:visible}
.fenyx-intro .wing path:not(.edge-path){filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.fenyx-intro .head{transform-origin:50% 34%;transform:translateZ(2px) scale(.94);opacity:0}
.fenyx-intro .logo-path{fill:url(#emberGradient)}
.fenyx-intro .edge-path{fill:none;stroke:rgba(255,209,166,.80);stroke-width:7;vector-effect:non-scaling-stroke;opacity:0;mix-blend-mode:screen;filter:drop-shadow(0 0 7px rgba(255,175,104,.75))}
.fenyx-intro .weld{position:absolute;left:50%;top:50%;width:1.5px;height:min(57vh,675px);transform:translate(-50%,-50%) scaleY(0);transform-origin:center;z-index:16;opacity:0;background:linear-gradient(to bottom,rgba(255,255,255,.08),#fff 21%,#FFD7B3 46%,#fff 58%,rgba(255,255,255,.08));box-shadow:0 0 3px #fff,0 0 10px rgba(255,172,103,.82),0 0 30px rgba(226,118,46,.24)}
.fenyx-intro .weld-tip{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;transform:translate(-50%,-50%);opacity:0;z-index:18;background:#fff;box-shadow:0 0 5px #fff,0 0 11px #FFC391,0 0 24px rgba(226,118,46,.66)}
.fenyx-intro .weld-tip.up,.fenyx-intro .weld-tip.down{will-change:transform}
.fenyx-intro .spark-layer{position:absolute;inset:0;z-index:17;pointer-events:none}
.fenyx-intro .spark{position:absolute;width:1px;height:10px;border-radius:999px;background:linear-gradient(to top,transparent,#F6A05A 45%,#fff);transform-origin:50% 100%;opacity:0;filter:drop-shadow(0 0 2px rgba(245,154,84,.55))}
.fenyx-intro .line-bloom{display:none !important} /* approved: no circular end burst */
.fenyx-intro .wordmark{position:absolute;left:50%;top:calc(50% + min(28vh,270px));width:min(43vw,630px);transform:translate(-50%,12px);opacity:0;clip-path:inset(0 50% 0 50%);filter:drop-shadow(0 0 12px rgba(226,118,46,.06));z-index:9}
.fenyx-intro .wordmark img{display:block;width:100%;height:auto;user-select:none}
@media (max-width:700px){
  .fenyx-intro .logo-wrap{width:min(74vw,510px)}
  .fenyx-intro .wordmark{width:min(74vw,510px);top:calc(50% + min(23vh,220px))}
}

/* v4.2 preview: intro and hero share the same live WebGL flame field. */
.fenyx-intro{background:transparent}
.fenyx-intro .thermal{display:none}
.fenyx-intro .intro-blackout{
  position:absolute;inset:0;z-index:0;background:#020304;opacity:1;pointer-events:none;will-change:opacity;
}
body.intro-playing .site-head{opacity:0;pointer-events:none}
.site-head{transition:opacity .55s var(--ease-out),height var(--dur-1) var(--ease-out),background-color var(--dur-1) linear,border-color var(--dur-1) linear,backdrop-filter var(--dur-1) linear}
body.intro-playing .hero .blueprint{opacity:0}
body.intro-playing .hero__fallback .hero__phx{display:none}

/* Continuous brand handoff: the original animated elements float into the
   final responsive slots. Only the cinematic treatment fades away. */
.fenyx-intro.is-handoff .intro-blackout,
.fenyx-intro.is-handoff .thermal,
.fenyx-intro.is-handoff .aura,
.fenyx-intro.is-handoff .weld,
.fenyx-intro.is-handoff .weld-tip,
.fenyx-intro.is-handoff .spark-layer,
.fenyx-intro.is-handoff .grain,
.fenyx-intro.is-handoff .vignette,
.fenyx-intro.is-handoff .intro-skip{
  opacity:0!important;
  transition:opacity .48s linear!important;
}
.fenyx-intro.is-handoff .intro-skip{pointer-events:none;animation:none}

/* The two resolved brand elements are temporarily placed in fixed wrappers
   while they travel to the holding-page slots. The wrappers carry the FLIP
   transform so the approved logo/wordmark animation styles remain intact. */
.fenyx-intro .brand-handoff-float{
  position:fixed;
  margin:0;
  max-width:none;
  transform-origin:0 0;
  will-change:transform;
  backface-visibility:hidden;
  pointer-events:none;
}
.fenyx-intro .brand-handoff-float--logo{z-index:8}
.fenyx-intro .brand-handoff-float--wordmark{z-index:9}
.fenyx-intro .brand-handoff-float--logo > .logo-wrap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
}
.fenyx-intro .brand-handoff-float--wordmark > .wordmark{
  position:absolute;
  inset:0;
  left:0;
  top:0;
  width:100%;
  height:100%;
  max-width:none;
  transform:none!important;
}
.fenyx-intro .brand-handoff-float--wordmark > .wordmark img{
  width:100%;
  height:100%;
  object-fit:contain;
}
@media (prefers-reduced-motion:reduce){
  .fenyx-intro .brand-handoff-float{will-change:auto}
}