/* The public page for restaurant managers: near-black, lavender light, a serif headline over glass cards. The purple is
   the POS's. Plain HTML and CSS, with no build step and no script. */
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #050507;
  --card: #0D0C12;
  --line: rgba(255, 255, 255, 0.13);
  --text: #F6F4FB;
  --soft: #ABA7B7;
  --violet: #894DD1;
  --lavender: #CDB2FF;
  --periwinkle: #B3BEFF;
  --grad: linear-gradient(95deg, var(--lavender), var(--periwinkle));
  --green: #4FC585;
  --amber: #ECA437;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; background: var(--bg); }

body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font: 400 1.0625rem / 1.55 var(--sans); -webkit-font-smoothing: antialiased; }

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }

h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; }
h1 em, h2 em { color: var(--lavender); }
h2 { font-size: clamp(2.5rem, 1.7rem + 3vw, 4.25rem); line-height: 1.04; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 30; padding: 0.6rem 1rem; border-radius: 99px; background: var(--lavender); color: var(--bg); }
.skip:focus { top: 0.75rem; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0.4rem 1.15rem; border-radius: 99px;
  background: var(--grad); color: #0B0A10;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pill:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(179, 190, 255, 0.35); }
.pill-soft { margin-top: 1.5rem; }
.pill-big { min-height: 56px; padding-inline: 2rem; font-size: 1.0625rem; }

/* Floating pill navigation */
.nav-wrap { position: sticky; top: 0.75rem; z-index: 20; padding-inline: var(--gutter); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 62rem; margin: 0.75rem auto 0; padding: 0.4rem 0.45rem 0.4rem 0.9rem;
  border: 1px solid var(--line); border-radius: 99px;
  background: rgba(16, 15, 22, 0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 0.9688rem; text-decoration: none; }
.brand img { border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.links { display: flex; gap: 1.75rem; font-size: 0.9063rem; }
.links a, .nav-login { color: var(--soft); text-decoration: none; transition: color 0.2s; }
.links a:hover, .nav-login:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-login { font-size: 0.9063rem; }

/* Hero */
.hero { position: relative; isolation: isolate; display: grid; justify-items: center; padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) 0; text-align: center; overflow: clip; }
.aurora { position: absolute; z-index: -1; inset: -20% -10% auto; height: 62rem; background: radial-gradient(40% 46% at 28% 42%, rgba(137, 77, 209, 0.5), transparent), radial-gradient(38% 42% at 74% 58%, rgba(179, 190, 255, 0.3), transparent), radial-gradient(30% 30% at 52% 82%, rgba(205, 178, 255, 0.3), transparent); -webkit-mask: linear-gradient(#000 62%, transparent); mask: linear-gradient(#000 62%, transparent); }
.tag { padding: 0.3rem 0.85rem; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.05); color: var(--lavender); font-size: 0.8438rem; font-weight: 500; }
h1 { margin-top: 1.4rem; font-size: clamp(3.25rem, 1.5rem + 7vw, 6.5rem); line-height: 1; }
h1 .w { display: inline-block; }
.lead { max-width: 37rem; margin-top: 1.4rem; color: var(--soft); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }

.ask-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(100%, 30rem); margin-top: 2rem; padding: 0.35rem 0.35rem 0.35rem 1.25rem;
  border: 1px solid rgba(205, 178, 255, 0.4); border-radius: 99px;
  background: rgba(13, 12, 18, 0.8);
  text-decoration: none; text-align: left;
  transition: border-color 0.3s, box-shadow 0.4s var(--ease);
}
.ask-bar:hover { border-color: var(--lavender); box-shadow: 0 0 40px rgba(137, 77, 209, 0.45); }
.ask-window { height: 1.55em; overflow: clip; color: var(--soft); }
.ask-lines { display: block; }
.ask-lines span { display: block; height: 1.55em; line-height: 1.55; white-space: nowrap; }
.ask-button { flex: none; padding: 0.65rem 1.3rem; border-radius: 99px; background: var(--grad); color: #0B0A10; font-size: 0.9375rem; font-weight: 600; }
.quiet { margin-top: 0.9rem; color: var(--soft); font-size: 0.9063rem; }
.quiet:hover { color: var(--text); }

/* The scene: the real app's phone on a turning floor plan */
.stage { position: relative; width: min(100%, 70rem); height: clamp(31rem, 52vw, 38rem); margin-top: 2.5rem; }
.stage::after { content: ""; position: absolute; inset: auto -50vw 0; height: 9rem; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.rings { position: absolute; left: 50%; top: 0; width: min(54rem, 165vw); translate: -50% 0; overflow: visible; }
.ring { transform-box: view-box; transform-origin: 50% 50%; fill: none; stroke: rgba(205, 178, 255, 0.28); stroke-width: 1.5; }
.ring > circle:first-child { stroke-dasharray: 3 12; }
.ring rect, .ring .seat { fill: rgba(137, 77, 209, 0.5); stroke: rgba(205, 178, 255, 0.7); }

.phone { position: absolute; left: 50%; top: 1.5rem; width: 17.5rem; margin-left: -8.75rem; padding: 0.45rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 2.5rem; background: #17151F; box-shadow: 0 40px 90px rgba(137, 77, 209, 0.55); }
.screen { display: flex; flex-direction: column; gap: 0.7rem; min-height: 31rem; padding: 0.95rem 0.85rem; border-radius: 2.1rem; background: #141414; font-size: 0.875rem; line-height: 1.45; text-align: left; }
.screen-top { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid #262626; font-weight: 600; }
.screen-top img { border-radius: 50%; }
.me { align-self: flex-end; max-width: 85%; padding: 0.45rem 0.75rem; border-radius: 15px 15px 4px 15px; background: #66458D; }
.it { color: #CCCCCC; }
.it b { color: #FFFFFF; font-weight: 600; }
.typing { display: none; gap: 0.25rem; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8D8D8D; }
.screen-input { margin-top: auto; padding: 0.55rem 0.85rem; border: 1px solid #404040; border-radius: 1.2rem; color: #8D8D8D; }

.bubble {
  position: absolute; max-width: 14rem; padding: 0.55rem 0.8rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(20, 18, 28, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.9063rem; line-height: 1.35; text-align: left;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.bubble small { display: block; color: var(--soft); font-size: 0.75rem; }
.bubble.is-ai { border-color: rgba(205, 178, 255, 0.5); }
.bubble.is-ai small { color: var(--lavender); }
.b-1 { left: 11%; top: 24%; }
.b-2 { right: 8%; top: 42%; }
.b-3 { left: 17%; top: 62%; }
.fine { position: absolute; z-index: 1; inset: auto 0 1rem; color: var(--soft); font-size: 0.8125rem; }

/* Glass */
.glass {
  position: relative; overflow: clip;
  border: 1px solid var(--line); border-radius: 22px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(137, 77, 209, 0.2), transparent), var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Split sections */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); max-width: 68rem; margin-inline: auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); }
.split-copy p { margin-top: 1rem; color: var(--soft); }

.rows { display: grid; gap: 0.7rem; padding: 1.25rem; }
.row { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 2.25rem 2.5rem; align-items: center; gap: 0.5rem; }
.who { display: grid; place-items: center; width: 2.1rem; aspect-ratio: 1; border-radius: 50%; background: rgba(205, 178, 255, 0.16); color: var(--lavender); font-size: 0.8125rem; font-weight: 600; }
.q { padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.45); font-size: 0.9375rem; line-height: 1.3; }
.link-dots { height: 2px; background: radial-gradient(circle, var(--lavender) 1px, transparent 1.3px) 0 0 / 7px 2px repeat-x; opacity: 0.7; }
.tool { display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.45); }
.tool svg { width: 1.2rem; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.states { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; font-size: 0.875rem; font-weight: 500; }
.states li { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: 99px; }
.states li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-wait { color: var(--amber); }
.s-done { color: var(--green); }
.s-no { color: #FF8FA3; }

.arcs { display: grid; place-items: center; min-height: 24rem; padding: 2rem 1.25rem; }
.arc { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid rgba(205, 178, 255, 0.3); border-radius: 50%; translate: -50% -50%; }
.arc-1 { width: 20rem; }
.arc-2 { width: 29rem; border-color: rgba(205, 178, 255, 0.2); }
.arc-3 { width: 38rem; border-color: rgba(205, 178, 255, 0.12); }
.ticket { position: relative; width: min(100%, 19rem); overflow: hidden; border-radius: 14px; background: #FFFFFF; color: #141414; box-shadow: 0 24px 60px rgba(137, 77, 209, 0.45); }
.ticket-state { padding: 0.4rem 0.9rem; background: var(--amber); font-size: 0.8125rem; font-weight: 600; }
.ticket-text { padding: 0.85rem 0.9rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.ticket-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 0.4rem; padding: 0 0.9rem 0.9rem; font-size: 0.875rem; font-weight: 600; text-align: center; }
.ticket-actions span { padding: 0.6rem 0.25rem; border-radius: 9px; background: #F1F1F1; }
.ticket-actions .yes { background: #29824D; color: #FFFFFF; }

/* Bento */
.built { max-width: 68rem; margin-inline: auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); text-align: center; }
.built-lead { max-width: 36rem; margin: 1rem auto 0; color: var(--soft); }
.bento { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2.75rem; text-align: left; }
.tile { display: flex; flex-direction: column; padding: 1.25rem; transition: border-color 0.3s, transform 0.5s var(--ease); }
.tile:hover { border-color: rgba(205, 178, 255, 0.45); transform: translateY(-4px); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.tile h3 { margin-top: auto; padding-top: 1rem; font-size: 1.125rem; font-weight: 600; }
.tile p { margin-top: 0.25rem; color: var(--soft); font-size: 0.9688rem; line-height: 1.45; }
.art { position: relative; height: 11rem; }

.art-chart svg { width: 100%; height: 100%; overflow: visible; }
.spark { fill: none; stroke: url(#line); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chip-total { position: absolute; right: 0.5rem; top: 0; padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.6); font-size: 0.875rem; font-weight: 600; }

.art-orbit { display: grid; place-items: center; }
.orbit { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px dashed rgba(205, 178, 255, 0.35); border-radius: 50%; translate: -50% -50%; }
.o-1 { width: 7.5rem; }
.o-2 { width: 15rem; }
.core { position: relative; z-index: 1; border-radius: 50%; box-shadow: 0 0 40px 8px rgba(137, 77, 209, 0.7); }
.core img { border-radius: 50%; }
.node { position: absolute; z-index: 1; padding: 0.2rem 0.65rem; border: 1px solid var(--line); border-radius: 99px; background: #17151F; font-size: 0.8125rem; }
.n-1 { left: 16%; top: 22%; }
.n-2 { right: 14%; top: 34%; }
.n-3 { left: 34%; bottom: 3%; }

.art-doc { display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; }
.doc-q { align-self: flex-end; padding: 0.4rem 0.75rem; border-radius: 14px 14px 4px 14px; background: #66458D; font-size: 0.9063rem; }
.doc { display: grid; gap: 0.45rem; width: min(100%, 17rem); padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.45); }
.doc b { font-size: 0.875rem; font-weight: 600; }
.doc i { height: 6px; border-radius: 3px; background: rgba(205, 178, 255, 0.3); }
.doc i:nth-of-type(2) { width: 82%; }
.doc i:nth-of-type(3) { width: 58%; }

.art-voice { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.art-voice i { width: 5px; height: 4.5rem; border-radius: 3px; background: var(--grad); transform: scaleY(0.45); }
.art-voice i:nth-child(3n) { transform: scaleY(0.8); }
.art-voice i:nth-child(4n+1) { transform: scaleY(0.25); }

.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; border: 1px solid var(--line); border-radius: 22px; background: var(--card); text-align: left; }
.figures div { display: flex; flex-direction: column; padding: 1.25rem; border-left: 1px solid var(--line); }
.figures div:first-child { border-left: 0; }
.figures dd { order: -1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font: 400 3.5rem / 1 var(--serif); }
.figures dt { margin-top: 0.3rem; color: var(--soft); font-size: 0.9375rem; line-height: 1.35; }

/* Privacy and limits */
.vault { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 68rem; margin-inline: auto; padding: 0 var(--gutter) clamp(3.5rem, 7vw, 6rem); }
.panel { padding: clamp(1.5rem, 3vw, 2.25rem); }
.panel h2 { font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); }
.panel-lead { margin-top: 0.75rem; color: var(--soft); }
.promises { margin-top: 1.25rem; }
.promises div { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.promises dt { font-weight: 600; }
.promises dd { color: var(--soft); font-size: 0.9688rem; line-height: 1.45; }
.never { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.never li { padding: 0.35rem 0.85rem; border: 1px solid var(--line); border-radius: 99px; color: var(--soft); font-size: 0.9375rem; text-decoration: line-through; text-decoration-color: rgba(205, 178, 255, 0.75); }

/* Close */
.finale { position: relative; display: grid; justify-items: center; gap: 1.75rem; max-width: 68rem; margin: 0 auto clamp(3rem, 6vw, 5rem); padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; width: calc(100% - 2 * var(--gutter)); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(70% 90% at 50% 110%, rgba(137, 77, 209, 0.75), transparent), var(--card); text-align: center; }
.finale h2 { font-size: clamp(3rem, 1.6rem + 5.5vw, 5.75rem); }
.foot { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 1.5rem; padding: 1.75rem var(--gutter); border-top: 1px solid var(--line); color: var(--soft); font-size: 0.9063rem; }
.foot .brand { color: var(--text); }
.foot address { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; font-style: normal; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 58rem) {
  .links { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
  .vault { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures div:nth-child(3) { border-left: 0; }
  .figures div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .b-1 { left: 2%; top: 41%; }
  .b-2 { right: 2%; top: 44%; }
  .b-3 { left: 2%; top: 68%; }
  .bubble { max-width: 9.5rem; font-size: 0.8125rem; }
}

@media (max-width: 40rem) {
  .nav-login { display: none; }
  .foot { grid-template-columns: 1fr; }
  .foot address { flex-direction: column; }
  .ask-window { font-size: 0.9375rem; }
  .row { grid-template-columns: 2rem minmax(0, 1fr) 2.5rem; }
  .link-dots { display: none; }
}

/* Motion. Everything above is the finished page: these only add starting states, so reduced motion shows it complete. */
@media (prefers-reduced-motion: no-preference) {
  h1 .w, .tag, .lead, .ask-bar, .quiet { animation: focus-in 1.1s var(--ease) backwards; }
  h1 .w:nth-of-type(2) { animation-delay: 0.05s; }
  h1 .w:nth-of-type(3) { animation-delay: 0.1s; }
  h1 .w:nth-of-type(4) { animation-delay: 0.15s; }
  h1 em .w:nth-of-type(1) { animation-delay: 0.3s; }
  h1 em .w:nth-of-type(2) { animation-delay: 0.36s; }
  h1 em .w:nth-of-type(3) { animation-delay: 0.42s; }
  h1 em .w:nth-of-type(4) { animation-delay: 0.48s; }
  h1 em .w:nth-of-type(5) { animation-delay: 0.54s; }
  .lead { animation-delay: 0.6s; }
  .ask-bar { animation-delay: 0.72s; }
  .quiet { animation-delay: 0.84s; }
  @keyframes focus-in { from { opacity: 0; filter: blur(14px); transform: translateY(18px); } }

  .aurora { animation: aurora 18s ease-in-out infinite alternate; }
  @keyframes aurora { to { transform: translate3d(-5%, 5%, 0) scale(1.14) rotate(5deg); } }

  .ask-lines { animation: cycle 11s var(--ease) infinite; }
  @keyframes cycle {
    0%, 20% { transform: translateY(0); }
    25%, 45% { transform: translateY(-1.55em); }
    50%, 70% { transform: translateY(-3.1em); }
    75%, 95% { transform: translateY(-4.65em); }
    100% { transform: translateY(-6.2em); }
  }

  .ring-1 { animation: turn 60s linear infinite; }
  .ring-2 { animation: turn 95s linear infinite reverse; }
  .ring-3 { animation: turn 140s linear infinite; }
  @keyframes turn { to { transform: rotate(360deg); } }

  .phone { animation: phone-in 1.3s var(--ease) 0.5s backwards, float 7s ease-in-out 1.8s infinite alternate; }
  @keyframes phone-in { from { opacity: 0; transform: translateY(5rem) scale(0.94); } }
  @keyframes float { to { transform: translateY(-12px); } }

  /* The conversation in the phone plays over and over: question, typing, answer. */
  .me { animation: say 10s var(--ease) infinite; }
  .typing { display: flex; height: 0; opacity: 0; animation: typing 10s step-end infinite; }
  .typing i { animation: blink 1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: 0.15s; }
  .typing i:nth-child(3) { animation-delay: 0.3s; }
  .it { animation: answer 10s var(--ease) infinite; }
  @keyframes say { 0%, 4% { opacity: 0; transform: translateY(10px); } 10%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes typing { 0%, 12% { opacity: 0; height: 0; } 13%, 28% { opacity: 1; height: 1rem; } 29%, 100% { opacity: 0; height: 0; } }
  @keyframes blink { 50% { opacity: 0.25; transform: translateY(-2px); } }
  @keyframes answer { 0%, 28% { opacity: 0; transform: translateY(10px); } 35%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

  .bubble { animation: pop 0.9s var(--ease) backwards, bob 6s ease-in-out infinite alternate; }
  .b-1 { animation-delay: 1.1s, 2s; }
  .b-2 { animation-delay: 1.4s, 2.6s; animation-duration: 0.9s, 7.5s; }
  .b-3 { animation-delay: 1.7s, 3.1s; animation-duration: 0.9s, 6.8s; }
  @keyframes pop { from { opacity: 0; transform: scale(0.8) translateY(14px); filter: blur(6px); } }
  @keyframes bob { to { transform: translateY(-14px); } }

  /* One question at a time lights up and runs along its dots to the tool. */
  .link-dots { animation: flow 0.9s linear infinite; }
  @keyframes flow { to { background-position: 7px 0; } }
  .q, .tool { animation: light 8s ease-in-out infinite; }
  .row:nth-child(2) .q, .row:nth-child(2) .tool { animation-delay: 2s; }
  .row:nth-child(3) .q, .row:nth-child(3) .tool { animation-delay: 4s; }
  .row:nth-child(4) .q, .row:nth-child(4) .tool { animation-delay: 6s; }
  .tool { animation-name: light-tool; }
  @keyframes light { 0%, 22%, 100% { border-color: var(--line); box-shadow: none; } 8%, 14% { border-color: var(--lavender); box-shadow: 0 0 24px rgba(137, 77, 209, 0.7); } }
  @keyframes light-tool { 0%, 6%, 28%, 100% { border-color: var(--line); box-shadow: none; } 14%, 20% { border-color: var(--periwinkle); box-shadow: 0 0 24px rgba(179, 190, 255, 0.6); } }

  .arc { animation: ripple 5s ease-in-out infinite; }
  .arc-2 { animation-delay: 0.5s; }
  .arc-3 { animation-delay: 1s; }
  @keyframes ripple { 50% { opacity: 0.35; scale: 1.06; } }
  .ticket-actions .yes { animation: invite 2.5s ease-in-out infinite; }
  @keyframes invite { 50% { box-shadow: 0 0 0 7px rgba(41, 130, 77, 0.28); } }

  .o-1 { animation: spin 22s linear infinite; }
  .o-2 { animation: spin 40s linear infinite reverse; }
  @keyframes spin { to { rotate: 360deg; } }
  .core { animation: glow 3.5s ease-in-out infinite; }
  @keyframes glow { 50% { box-shadow: 0 0 60px 16px rgba(179, 190, 255, 0.55); } }

  .art-voice i { animation: wave 1.15s ease-in-out infinite alternate; }
  .art-voice i:nth-child(2n) { animation-duration: 0.85s; }
  .art-voice i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -0.4s; }
  .art-voice i:nth-child(4n+1) { animation-duration: 0.95s; animation-delay: -0.7s; }
  @keyframes wave { to { transform: scaleY(1); } }

  /* shortcut: browsers without scroll-driven animations get the static page, add a polyfill if their visitors matter. */
  @supports (animation-timeline: view()) {
    .reveal { animation: focus-in linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .spark { stroke-dasharray: 1; animation: draw linear both; animation-timeline: view(); animation-range: entry 25% cover 45%; }
    @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    .hero .stage { animation: stage-out linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    @keyframes stage-out { to { opacity: 0.3; scale: 0.94; } }
  }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }