/* FENYX Dynamics holding page — v4.2.4 intro, live abstract flame field, animated mobile fallback, and ember cursor. */
:root{
  --ink-950:#020304;
  --ink-900:#0A0C10;
  --ink-800:#11151C;
  --steel-300:#C7D0DA;
  --steel-400:#AEB9C5;
  --steel-500:#8A97A6;
  --steel-600:#6F7C89;
  --titanium:#EEF2F6;
  --ember-300:#F5A467;
  --ember-400:#E98A45;
  --ember-500:#E2762E;
  --ember-600:#B94F18;
  --signal-500:#4E7B96;
  --text:#C7D0DA;
  --text-2:#8A97A6;
  --head:#EEF2F6;
  --font-body:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --fs-100:.69rem;
  --fs-200:.78rem;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-1:.28s;
  --mx:50vw;
  --my:50vh;
  color-scheme:dark;
  accent-color:var(--ember-500);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--ink-950)}
html,body{width:100%;min-height:100%}
body{
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:var(--ink-900);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
::selection{background:var(--ember-600);color:var(--titanium)}

/* Fine analog grain over the complete composition. */
body::after{
  content:"";
  position:fixed;
  inset:-50%;
  z-index:2147483000;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.03;
  mix-blend-mode:overlay;
}

:focus-visible{
  outline:2px solid var(--ember-400);
  outline-offset:4px;
  border-radius:3px;
}

/* Full-viewport holding hero and the same WebGL field used by v4.2. */
.hero{
  position:relative;
  z-index:0;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink-950);
}

/* Keep the flame layers inside the hero stacking context. Negative z-index
   canvases can fall behind an opaque parent in mobile Safari. */
.hero__fallback{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(60rem 28rem at 52% 105%,rgba(226,118,46,.24),transparent 62%),
    radial-gradient(34rem 18rem at 25% 92%,rgba(175,55,12,.15),transparent 66%),
    radial-gradient(38rem 20rem at 78% 96%,rgba(255,145,62,.11),transparent 68%),
    radial-gradient(70rem 40rem at 18% -10%,rgba(78,123,150,.08),transparent 55%),
    var(--ink-950);
}
.hero__fallback::before{
  content:"";
  position:absolute;
  inset:-30%;
  transform-origin:50% 100%;
  background:
    radial-gradient(34rem 22rem at 62% 76%,rgba(226,118,46,.18),transparent 64%),
    radial-gradient(22rem 28rem at 38% 96%,rgba(184,66,18,.14),transparent 66%);
  filter:blur(4px);
  animation:ember-drift 22s var(--ease-in-out) infinite alternate;
}
.hero__fallback::after{
  content:"";
  position:absolute;
  inset:18% -24% -30%;
  transform-origin:50% 100%;
  background:
    radial-gradient(ellipse at 15% 100%,rgba(181,64,16,.24),transparent 48%),
    radial-gradient(ellipse at 37% 104%,rgba(240,126,47,.25),transparent 43%),
    radial-gradient(ellipse at 61% 102%,rgba(226,118,46,.28),transparent 46%),
    radial-gradient(ellipse at 84% 100%,rgba(153,48,12,.20),transparent 48%);
  filter:blur(20px) saturate(1.12);
  opacity:.84;
  animation:ember-breathe 16s var(--ease-in-out) infinite alternate;
}
@keyframes ember-drift{
  from{transform:translate3d(-4%,3%,0) scale(1)}
  to{transform:translate3d(5%,-4%,0) scale(1.12)}
}
@keyframes ember-breathe{
  from{transform:translate3d(-2%,2%,0) scale(.96,.92);opacity:.64}
  to{transform:translate3d(3%,-2%,0) scale(1.08,1.12);opacity:.92}
}
.hero__motion,
.hero__gl{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  pointer-events:none;
  opacity:0;
  transform:translateZ(0);
  transition:opacity .32s linear;
}
.hero__motion{
  z-index:1;
  filter:blur(8px) saturate(1.18) contrast(1.04);
  transform:scale(1.045) translateZ(0);
  transform-origin:50% 76%;
}
.hero__gl{z-index:2}
.hero--fallback-animated .hero__motion{opacity:.92}
.hero--webgl-ready .hero__gl{opacity:1}
.hero--webgl-ready .hero__motion{opacity:0}
.hero--static .hero__motion,
.hero--static .hero__gl,
.no-js .hero__motion,
.no-js .hero__gl{display:none;opacity:0}
.hero__vignette{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 44%,transparent 22%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(2,3,4,.52),transparent 29%,transparent 64%,rgba(2,3,4,.8) 100%);
}

/* Holding composition. The brand geometry remains laid out while hidden so
   the intro's live mark and wordmark can move into these exact target slots. */
.holding__content{
  width:min(92vw,680px);
  padding:clamp(1.5rem,4vw,3rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:4;
  pointer-events:none;
}
.hero.play .holding__content,
.no-js .holding__content{pointer-events:auto}
body.intro-playing .holding__content{pointer-events:none}
body.intro-playing .holding__brand{transform:none!important;filter:none!important}

.holding__brand-shell{
  display:flex;
  justify-content:center;
  width:100%;
}
.holding__brand{
  appearance:none;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1rem,2.5vh,1.55rem);
  width:min(78vw,390px);
  max-width:100%;
  padding:.7rem 1rem 1rem;
  color:var(--ember-500);
  cursor:pointer;
  border-radius:12px;
  opacity:0;
  visibility:hidden;
  transition:filter .35s ease,transform .35s var(--ease-out);
}
.hero.play .holding__brand,
.no-js .holding__brand{
  opacity:1;
  visibility:visible;
}
.holding__brand:hover{
  filter:drop-shadow(0 0 24px rgba(226,118,46,.28));
  transform:translateY(-2px);
}
.holding__brand:active{transform:translateY(0) scale(.99)}

.holding__mark-slot,
.holding__wordmark-slot{
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
}
.holding__mark-slot{
  width:clamp(92px,18vmin,150px);
  aspect-ratio:3410/2925;
}
.holding__wordmark-slot{
  width:min(100%,360px);
  aspect-ratio:3/1;
}
.holding__mark{
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 12px 28px rgba(226,118,46,.2));
}
.holding__wordmark{
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}
.js .holding__brand-fallback{display:none}

/* The intro's original elements are re-parented into the target slots when
   the movement finishes; no duplicate logo is faded over them. */
.holding__mark-slot > .logo-wrap{
  position:relative;
  width:100%;
  height:100%;
  aspect-ratio:3410/2925;
  transform:none;
  transform-style:preserve-3d;
  filter:drop-shadow(0 12px 28px rgba(226,118,46,.2));
}
.holding__mark-slot .logo-layer{
  position:absolute;
  inset:0;
  opacity:1;
  transform:none;
  transform-style:preserve-3d;
  clip-path:none;
  filter:none;
}
.holding__mark-slot .logo-layer svg{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  overflow:visible;
}
.holding__mark-slot .wing path:not(.edge-path){filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.holding__mark-slot .logo-path{fill:url(#emberGradient)}
.holding__mark-slot .edge-path{opacity:0}
.holding__wordmark-slot > .wordmark{
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  height:auto;
  opacity:1;
  transform:none;
  clip-path:none;
  filter:drop-shadow(0 0 12px rgba(226,118,46,.06));
}
.holding__wordmark-slot > .wordmark img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

.holding__details{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}
.hero.play .holding__details,
.no-js .holding__details{pointer-events:auto}
.holding__rule,
.holding__status,
.holding__contact,
.holding__replay-hint{
  opacity:0;
  transform:translateY(9px);
  transition:opacity .5s var(--ease-out),transform .65s var(--ease-out);
}
.holding__rule{
  width:78px;
  height:1px;
  margin-top:clamp(.65rem,2vh,1.15rem);
  background:linear-gradient(90deg,transparent,var(--ember-500),transparent);
  box-shadow:0 0 14px rgba(226,118,46,.22);
  transform:scaleX(.18);
}
.hero.play .holding__rule,
.no-js .holding__rule{
  opacity:1;
  transform:scaleX(1);
  transition-delay:.08s;
}
.holding__status{
  margin-top:1.05rem;
  color:var(--steel-500);
  font-family:var(--font-mono);
  font-size:clamp(.7rem,.66rem + .16vw,.8rem);
  font-weight:500;
  letter-spacing:.31em;
  text-transform:uppercase;
}
.hero.play .holding__status,
.no-js .holding__status{
  opacity:1;
  transform:none;
  transition-delay:.17s;
}
.holding__contact{
  margin-top:1.5rem;
  color:var(--steel-600);
  font-size:clamp(.78rem,.73rem + .15vw,.88rem);
  letter-spacing:.025em;
}
.hero.play .holding__contact,
.no-js .holding__contact{
  opacity:1;
  transform:none;
  transition-delay:.29s;
}
.holding__contact a{
  position:relative;
  display:inline-block;
  color:var(--ember-300);
  text-decoration:none;
  padding:.25rem .1rem;
}
.holding__contact a::after{
  content:"";
  position:absolute;
  left:.1rem;
  right:.1rem;
  bottom:.15rem;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ember-500),transparent);
  transform:scaleX(0);
  transition:transform .35s var(--ease-out);
}
.holding__contact a:hover::after,.holding__contact a:focus-visible::after{transform:scaleX(1)}
.holding__replay-hint{
  margin-top:.9rem;
  color:rgba(138,151,166,.55);
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero.play .holding__replay-hint,
.no-js .holding__replay-hint{
  opacity:1;
  transform:none;
  transition-delay:.42s;
}
body.intro-playing .holding__rule,
body.intro-playing .holding__status,
body.intro-playing .holding__contact,
body.intro-playing .holding__replay-hint{
  opacity:0;
  transition:none;
}

/* v4.2 ember reticle cursor. */
.cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:2147483200;
  pointer-events:none;
  mix-blend-mode:screen;
}
.cursor__ring{
  position:absolute;
  width:34px;
  height:34px;
  translate:-50% -50%;
  border:1px solid color-mix(in srgb,var(--ember-400) 75%,transparent);
  border-radius:50%;
  transition:width .25s var(--ease-out),height .25s var(--ease-out),border-color .25s linear,opacity .2s linear;
}
.cursor__ring::before,.cursor__ring::after{
  content:"";
  position:absolute;
  background:var(--ember-400);
  opacity:.75;
}
.cursor__ring::before{
  left:50%;
  top:-5px;
  width:1px;
  height:4px;
  translate:-50% 0;
  box-shadow:0 40px 0 var(--ember-400);
}
.cursor__ring::after{
  top:50%;
  left:-5px;
  width:4px;
  height:1px;
  translate:0 -50%;
  box-shadow:40px 0 0 var(--ember-400);
}
.cursor__dot{
  position:absolute;
  width:3px;
  height:3px;
  translate:-50% -50%;
  border-radius:50%;
  background:var(--ember-300);
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--ember-500) 55%,transparent);
}
.cursor.is-active .cursor__ring{width:52px;height:52px;border-color:var(--ember-300)}
.cursor.is-hidden{opacity:0}
html.has-cursor body,html.has-cursor a,html.has-cursor button,html.has-cursor [data-magnetic]{cursor:none}

@media (max-width:600px){
  .holding__content{padding:1.25rem}
  .holding__brand{width:min(82vw,340px)}
  .holding__replay-hint{display:none}

  /* A stronger portrait underlay stays visible while WebGL initializes and
     remains the flame field on devices that decline or lose a GL context. */
  .hero__fallback,
  body.intro-playing .hero__fallback{
    background:
      radial-gradient(32rem 20rem at 50% 104%,rgba(245,139,57,.16),transparent 64%),
      radial-gradient(18rem 26rem at 15% 98%,rgba(175,55,12,.16),transparent 68%),
      radial-gradient(20rem 29rem at 86% 101%,rgba(245,139,57,.14),transparent 68%),
      linear-gradient(180deg,rgba(2,3,4,.82) 0%,rgba(2,3,4,.68) 43%,rgba(2,3,4,.50) 100%),
      url("../assets/visuals/ember-field-mobile.png") center bottom/cover no-repeat,
      radial-gradient(34rem 30rem at 50% 15%,rgba(78,123,150,.08),transparent 63%),
      var(--ink-950);
  }
  .hero__fallback::before{opacity:.98;filter:blur(2px)}
  .hero__fallback::after{opacity:.96;filter:blur(15px) saturate(1.16)}
  /* Once WebGL has drawn successfully, show it as the full moving field.
     The animated Canvas 2D layer remains the fail-safe rather than a static
     image dominating the live shader. */
  .hero--fallback-animated .hero__motion{opacity:1}
  .hero--webgl-ready .hero__gl{opacity:1;mix-blend-mode:normal}
  .hero--webgl-ready .hero__motion{opacity:0}
  .hero__vignette{
    background:
      radial-gradient(ellipse at 50% 44%,transparent 22%,rgba(0,0,0,.10) 54%,rgba(0,0,0,.52) 100%),
      linear-gradient(180deg,rgba(2,3,4,.42),transparent 30%,transparent 67%,rgba(2,3,4,.62) 100%);
  }
}

@media (pointer:coarse),(prefers-reduced-motion:reduce){
  .cursor{display:none!important}
  html.has-cursor body,html.has-cursor a,html.has-cursor button{cursor:auto}
}
@media (prefers-reduced-motion:reduce){
  .hero__motion,.hero__gl{display:none}
  .hero__fallback{display:block}
  .hero__fallback::before,.hero__fallback::after{animation:none}
  .holding__rule,.holding__status,.holding__contact,.holding__replay-hint,
  .hero.play .holding__rule,.hero.play .holding__status,.hero.play .holding__contact,.hero.play .holding__replay-hint{
    transition:none;transform:none;
  }
  .hero.play .holding__rule,.hero.play .holding__status,.hero.play .holding__contact,.hero.play .holding__replay-hint{opacity:1}
}
@media (prefers-reduced-transparency:reduce){body::after{display:none}}