/* Cinematic neon ignition: dark glass, one intense catch, then a smooth settle.
   LEVEL UP retains its sharp white digital glitch. The sign stays steadily lit afterward. */

/* ---------- LEVEL UP: unchanged behaviour (the effective rules from hero-glow.css v7, deduplicated) ---------- */
.hero h1 { color:#fff; background:none; filter:none; text-shadow:none; }
/* z-index keeps LEVEL UP above the neon's light, so it stays pure white. */
.digital-title { position:relative; z-index:1; display:inline-block; color:#fff; }
.digital-core { position:relative; color:#fff; }
.digital-slice {
  position:absolute; inset:0; color:#fff; opacity:0;
  white-space:nowrap; pointer-events:none; user-select:none;
  text-shadow:none; filter:none;
}
.slice-one { clip-path:inset(20% 0 62%); animation:la-white-cut-one 6s steps(1,end) 4.7s infinite; }
.slice-two { clip-path:inset(60% 0 21%); animation:la-white-cut-two 6s steps(1,end) 4.7s infinite; }
@keyframes la-white-cut-one {
  0%, 10%, 100% { opacity:0; transform:translateX(0); }
  1% { opacity:1; transform:translateX(.12em); }
  3% { opacity:1; transform:translateX(-.085em); }
  5% { opacity:1; transform:translateX(.055em); }
  7% { opacity:1; transform:translateX(-.025em); }
}
@keyframes la-white-cut-two {
  0%, 10%, 100% { opacity:0; transform:translateX(0); }
  1.5% { opacity:1; transform:translateX(-.095em); }
  3.5% { opacity:1; transform:translateX(.075em); }
  5.5% { opacity:1; transform:translateX(-.04em); }
  8% { opacity:1; transform:translateX(.02em); }
}
/* Letters lock in by 1.1s. */
.digital-letter {
  display:inline-block;
  animation:la-letter-lock .7s steps(1,end) calc(var(--letter) * .055s) both;
}
@keyframes la-letter-lock {
  0% { opacity:0; transform:translate(.13em,-.12em); clip-path:inset(40% 0 35%); }
  18% { opacity:1; transform:translate(-.06em,.045em); clip-path:inset(12% 0 28%); }
  40% { opacity:.4; transform:translate(.035em,-.035em); clip-path:inset(57% 0 0); }
  60% { opacity:1; transform:translate(-.025em,0); clip-path:inset(0); }
  80% { opacity:1; transform:translate(.015em,0); clip-path:inset(0); }
  100% { opacity:1; transform:none; clip-path:none; }
}

/* ---------- YOUR BUSINESS: neon ---------- */
@property --la  { syntax:'<number>'; inherits:true; initial-value:1; }
@property --lb  { syntax:'<number>'; inherits:true; initial-value:1; }
@property --sa  { syntax:'<number>'; inherits:true; initial-value:0; }
@property --sb  { syntax:'<number>'; inherits:true; initial-value:0; }
@property --lw  { syntax:'<number>'; inherits:true; initial-value:1; }
@property --glow-level { syntax:'<number>'; inherits:true; initial-value:.5; }
@property --hum { syntax:'<number>'; inherits:true; initial-value:1; }

.business-title {
  position:relative; display:inline-block; isolation:isolate; white-space:nowrap;
  --glass:#29242f;  /* unlit tube: visible glass, zero emitted light */
}
/* Warm peach light blends into the existing pink and violet bloom. */
.tube-a { --core:#ffe0c7; --c1:#ffb486; --c2:#ed78bd; }
.tube-b { --core:#f5eeff; --c1:#c4a3ff; --c2:#8657ff; }

/* Overlapping light takes the brighter value per channel. A later span's glow can neither stain its
   neighbours' glass nor double up into a hot spot. */
.neon-tube, .neon-weak { mix-blend-mode:lighten; }
/* Static lit sign: the fallback for browsers without color-mix(), and for Motion off / reduced motion.
   The text-shadow sets a paint area well past the glyphs, so the final S always paints in full. */
.neon-tube {
  color:var(--core);
  text-shadow:
    0 0 .012em #ffffffb3,
    0 0 .05em var(--c1),
    0 0 .12em var(--c1),
    0 0 .28em var(--c2),
    0 0 .62em color-mix(in srgb, var(--c2) 42%, transparent);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .tube-a { --l:calc(var(--la) * var(--hum)); --s:var(--sa); }
  .tube-b { --l:calc(var(--lb) * var(--hum)); --s:var(--sb); }
  .neon-weak { --l:calc(var(--lb) * var(--lw) * var(--hum)); --s:var(--sb); }
  .neon-tube, .neon-weak {
    --on:clamp(0, var(--l), 1);
    --hot:clamp(0, var(--l) - 1, 1);
    color:color-mix(in oklab,
      color-mix(in oklab, #fff calc(var(--hot) * 100%), var(--core)) calc(var(--on) * 100%),
      color-mix(in oklab, #fff calc(var(--s) * 100%), var(--glass)));
    text-shadow:
      0 0 calc(.012em + .02em * var(--hot)) color-mix(in srgb, #fff calc(var(--on) * var(--glow-level) * 70%), transparent),
      0 0 calc(.05em + .04em * var(--hot)) color-mix(in srgb, var(--c1) calc(var(--on) * var(--glow-level) * 100%), transparent),
      0 0 calc(.12em + .12em * var(--hot)) color-mix(in srgb, var(--c1) calc(var(--on) * var(--glow-level) * 100%), transparent),
      0 0 calc(.28em + .3em * var(--hot)) color-mix(in srgb, var(--c2) calc(var(--on) * var(--glow-level) * 100%), transparent),
      0 0 calc(.62em + .7em * var(--hot)) color-mix(in srgb, var(--c2) calc(var(--on) * var(--glow-level) * 42%), transparent),
      0 0 .3em color-mix(in srgb, #fff calc(var(--hot) * 55%), transparent);
  }

  /* Light the sign throws on the wall behind it: one pool per tube, driven only by light, never by
     strike. Steady at about 40% of the pool colour, full at peak overdrive. The falloff is eased, with
     no linear ramp, so there's no visible rim. */
  .business-aura {
    position:absolute; z-index:-1; inset:-95% -20% -80%; pointer-events:none;
    --pa:color-mix(in srgb, #ffab8666 clamp(0%, calc(var(--la) * var(--hum) * var(--glow-level) * 60% - 20%), 100%), transparent);
    --pb:color-mix(in srgb, #7d55ff70 clamp(0%, calc(var(--lb) * var(--hum) * var(--glow-level) * 60% - 20%), 100%), transparent);
    background:
      radial-gradient(ellipse 32% 36% at 27% 51%, var(--pa), color-mix(in srgb, var(--pa) 55%, transparent) 30%, color-mix(in srgb, var(--pa) 20%, transparent) 60%, color-mix(in srgb, var(--pa) 5%, transparent) 82%, transparent),
      radial-gradient(ellipse 44% 38% at 64% 51%, var(--pb), color-mix(in srgb, var(--pb) 55%, transparent) 30%, color-mix(in srgb, var(--pb) 20%, transparent) 60%, color-mix(in srgb, var(--pb) 5%, transparent) 82%, transparent);
  }

  /* Anamorphic streak: exists only above normal power, so only during the initial catch. */
  .business-title::after {
    content:""; position:absolute; z-index:2; left:-38%; right:-38%; top:52%; height:.15em;
    transform:translateY(-50%); pointer-events:none; mix-blend-mode:screen;
    background:radial-gradient(closest-side, #fffaff 0%, #e6c4ffcc 16%, #9a6bff4d 52%, transparent 100%);
    opacity:clamp(0, max(var(--la), var(--lb)) - 1, 1);
  }

  .business-title {
    animation:la-neon-ignite 3.6s linear 1.1s both;
  }
}

/* Wait for the white headline to lock in, ignite hard, hold the flare briefly,
   then let the light fall to its steady running level. No recurring flicker. */
@keyframes la-neon-ignite {
  0% { --glow-level:1; --sa:0; --sb:0; --la:0; --lb:0; }
  8% { --glow-level:1; --sa:0; --sb:0; --la:2; --lb:2; }
  20% { --glow-level:1; --sa:0; --sb:0; --la:2; --lb:2; animation-timing-function:cubic-bezier(.18,.55,.25,1); }
  100% { --glow-level:.5; --sa:0; --sb:0; --la:1; --lb:1; }
}

@media(max-width:560px) {
  .business-title { display:block; line-height:.94; }
}
/* Contain the wall light; glyph glow stays inside the hero. */
.hero { overflow:hidden; overflow:clip; }

/* Motion off and reduced motion: the steady, fully lit sign. No strikes, no streak, no glitch. */
.motion-paused .hero .digital-slice { animation:none; opacity:0; }
.motion-paused .hero .digital-letter { animation:none; opacity:1; transform:none; clip-path:none; }
.motion-paused .hero .business-title,
.motion-paused .hero .neon-weak { animation:none; }
@media(prefers-reduced-motion:reduce) {
  .hero .digital-slice { animation:none; opacity:0; }
  .hero .digital-letter { animation:none; opacity:1; transform:none; clip-path:none; }
  .hero .business-title, .hero .neon-weak { animation:none; }
}
@media(forced-colors:active) {
  .hero .digital-slice, .hero .business-aura, .hero .business-title::after { display:none; }
  .hero .digital-core, .hero .neon-tube, .hero .neon-weak { background:none; color:CanvasText; text-shadow:none; mix-blend-mode:normal; }
}

/* One continuous color field with moving white-hot bands across both words, above the glyph glow.
   Paint padding protects the final S without changing headline layout. */
.business-face {
  position:absolute; inset:-.12em; padding:.12em;
  pointer-events:none; user-select:none; white-space:nowrap;
  color:#e5b5ee;
  background-image:linear-gradient(105deg,#ffe1b9 0%,#ffddd0 12%,#fffef8 24%,#fffaff 32%,#dfcaff 46%,#ffffff 60%,#fff5df 72%,#ffd3df 86%,#ffe1b9 100%);
  background-size:180% 100%; background-position:0% 50%;
  background-clip:text; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; text-shadow:none;
  /* Let the existing white-hot core show through at the flare peak. */
  opacity:calc(clamp(0,var(--la),1) * clamp(0,2 - var(--la),1));
  animation:la-color-flow 16s ease-in-out 4.7s infinite alternate both;
}
@keyframes la-color-flow {
  from { background-position:0% 50%; }
  to { background-position:100% 50%; }
}
.motion-paused .hero .business-face { animation:none; }
@media(prefers-reduced-motion:reduce) { .hero .business-face { animation:none; } }
@media(forced-colors:active) { .hero .business-face { display:none; } }