/* Hero button "Ignition": smoked liquid glass, live chrome ring, starter-switch icon.
   Built from design-lab/hero-cta (concept A + chrome material). Behaviour lives in hero-cta.js.
   Layers inside .lit-cta: core (smoked glass) · shine · sweep · heat · touch · label · pod · ring canvas. */

.hero .lit-cta {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px;
  height: 54px; min-height: 0; padding: 0 7px 0 26px; border: 0; border-radius: 999px;
  color: #f4f4f7; text-decoration: none; white-space: nowrap; text-shadow: 0 1px 1px #00000066;
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.012em;
  background: #0000001a;
  -webkit-backdrop-filter: blur(6px) saturate(1.9) brightness(1.18);
  backdrop-filter: blur(6px) saturate(1.9) brightness(1.18);
  box-shadow: 0 16px 34px -12px #000000d9, 0 3px 9px #00000066, inset 0 0 0 .5px #ffffff2e;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: scale .6s var(--spring), translate .45s var(--spring), box-shadow .35s ease;
}
@supports (transition-timing-function: linear(0, 1)) {
  .hero .lit-cta { --spring: linear(0, .06 2%, .24 5%, .53 9%, .84 14%, 1.03 19%, 1.09 23%, 1.08 28%, 1.03 35%, .995 44%, .99 52%, 1 65%, 1); }
}
.hero .lit-cta:focus-visible { outline: 2px solid #ddb88d; outline-offset: 5px; }

/* specular hotspot: still at rest, follows the mouse on hover (no idle animation = no constant repaint) */
.lit-cta::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: .55;
  background: radial-gradient(110px 50px at var(--mx, 28%) var(--my, 0%), #ffffffa6, #ffffff00 70%); mix-blend-mode: soft-light; }

.lit-cta .lg-core { position: absolute; inset: 3px; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, #2c2c31b3 0%, #16161ac2 55%, #0b0b0dd1 100%);
  box-shadow: inset 0 1px 0 #ffffff24, inset 0 -6px 12px #00000059, inset 0 0 0 .5px #ffffff14;
  transition: filter .3s; }
.lit-cta .lg-shine { position: absolute; inset: 3px; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, #ffffff1f 0%, #ffffff05 45%, #fff0 55%), radial-gradient(55% 90% at 50% 125%, #c8d0ff1f, #c8d0ff00 70%); }
.lit-cta .lg-sweep { position: absolute; inset: 3px; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lit-cta .lg-sweep::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; translate: -150% 0;
  background: linear-gradient(100deg, #fff0, #ffffff26 42%, #ffffff40 50%, #ffffff26 58%, #fff0); transform: skewX(-20deg); filter: blur(1.5px); }
.lit-cta.is-sweep .lg-sweep::before { animation: lit-cta-sweep .95s cubic-bezier(.3, .6, .2, 1); }
@keyframes lit-cta-sweep { from { translate: -150% 0; } to { translate: 360% 0; } }
.lit-cta .lg-touch { position: absolute; inset: 0; z-index: 3; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lit-cta .lg-touch i { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: radial-gradient(circle, #ffffffb3, #fff0 70%); mix-blend-mode: soft-light; animation: lit-cta-touch .65s ease-out forwards; }
@keyframes lit-cta-touch { from { transform: scale(.3); opacity: 1; } to { transform: scale(15); opacity: 0; } }

.lit-cta .cta-label { position: relative; z-index: 2; }
.lit-cta .pod { position: relative; z-index: 2; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #2d2925, #100f0e 72%);
  box-shadow: inset 0 1px 1px #ffffff2e, inset 0 -2px 5px #000000a6, 0 0 0 1px #ffffff1a, 0 2px 6px #00000073;
  transition: scale .5s var(--spring), box-shadow .3s; }
.lit-cta .pod svg { width: 24px; height: 24px; overflow: visible; }

/* chrome ring, drawn by hero-cta.js */
.lit-cta .ring { position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); z-index: 3; pointer-events: none;
  filter: drop-shadow(0 0 2.5px #dfe3ff59); }

/* liquid press */
.hero .lit-cta.is-pressed { scale: .965 .92; transition-duration: .12s, .45s, .35s; transition-timing-function: cubic-bezier(.3, .7, .4, 1), var(--spring), ease; }
.lit-cta.is-pressed .pod { scale: .9; }

/* starter switch */
.lit-cta .ign { color: #ffae42; transition: color .25s, filter .25s; filter: drop-shadow(0 0 2.5px #ffae4299); }
.lit-cta .ign-arc { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; opacity: .6; }
.lit-cta .ign-head { fill: currentColor; opacity: .6; }
.lit-cta .ign-bolt { fill: currentColor; }
.lit-cta .heat { position: absolute; z-index: 1; right: -6px; top: 50%; width: 150px; height: 120px; translate: 0 -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #ffae4280, #ffae4200); mix-blend-mode: soft-light; opacity: 0; transition: opacity .35s; }

@media (hover: hover) {
  .hero .lit-cta:hover { translate: 0 -2px; box-shadow: 0 20px 40px -12px #000000e6, 0 10px 34px -12px #c8d0ff52, inset 0 0 0 .5px #ffffff2e; }
  .lit-cta:hover .pod { box-shadow: inset 0 1px 1px #ffffff47, inset 0 -2px 5px #000000a6, 0 0 0 2px #ffae4247, 0 0 18px #ffae4280; }
  .lit-cta:hover .ign { color: #ffd08a; filter: drop-shadow(0 0 4px #ffae42e6); animation: lit-cta-rumble .14s steps(2) infinite; }
  .lit-cta:hover .heat { opacity: 1; animation: lit-cta-idle .9s ease-in-out infinite; }
}
.lit-cta:focus-visible .heat { opacity: 1; }
@keyframes lit-cta-rumble { 0% { translate: .35px -.25px; } 50% { translate: -.35px .3px; } 100% { translate: .2px .35px; } }
@keyframes lit-cta-idle { 0%, 100% { scale: .92; } 50% { scale: 1.06; } }

/* idle crank: the starter turns over */
.lit-cta.is-crank .pod { animation: lit-cta-crank .8s steps(1) 1; }
.lit-cta.is-crank .ign-bolt { animation: lit-cta-flicker .8s linear 1; }
@keyframes lit-cta-crank { 0%{translate:0 0} 8%{translate:.8px 0} 16%{translate:-.8px .4px} 24%{translate:.6px -.4px} 32%{translate:-.6px 0} 40%{translate:.8px .3px} 48%{translate:-.5px -.3px} 56%{translate:0 0} }
@keyframes lit-cta-flicker { 0%{opacity:1} 10%{opacity:.35} 18%{opacity:1} 26%{opacity:.45} 34%{opacity:1} 60%{opacity:.8} 100%{opacity:1} }

/* fire: switch pressed, engine catches */
.lit-cta.is-fire .pod { animation: lit-cta-catch .55s cubic-bezier(.2, .7, .3, 1) 1; }
.lit-cta.is-fire .ign { color: #fff; filter: drop-shadow(0 0 6px #ffd08a) drop-shadow(0 0 14px #ffae42); }
.lit-cta.is-fire .lg-core { filter: brightness(1.25); }
@keyframes lit-cta-catch { 0%{scale:.84} 30%{scale:1.08; translate:.6px 0} 40%{translate:-.6px 0} 50%{translate:.5px 0} 60%{translate:-.4px 0} 100%{scale:1; translate:0 0} }
.lit-cta .shock { position: absolute; z-index: 5; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none;
  border: 2px solid #ffc06e; box-shadow: 0 0 12px #ffae4299, inset 0 0 8px #ffae4266; animation: lit-cta-shock .7s cubic-bezier(.15, .6, .3, 1) forwards; }
@keyframes lit-cta-shock { from { scale: .5; opacity: 1; } to { scale: 5.5; opacity: 0; border-width: .5px; } }

@media (prefers-reduced-motion: reduce) {
  .lit-cta *, .lit-cta::after, .hero .lit-cta { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hero .lit-cta.is-pressed { scale: .98; }
}