/* chandellelabs.com — static landing page. No JavaScript; CSP-clean (no inline style or script). */
/* Layout: the intro film's end card, held still. One centred lock-up (B tile | hairline | wordmark + spark),
   one line under it, one action. The spark's ember is the only colour. */
:root {
  --ground: #F7F6F3;
  --lift: #FFFFFF;
  --ink: #121214;
  --ink-2: #5B5A57;
  --hair: rgba(18,18,20,.42);
  --ember: rgba(255,178,46,.30);
  --ember-2: rgba(255,194,74,.10);
  --btn-bg: #121214;
  --btn-fg: #F7F6F3;
  --btn-hover: #2A2A2D;
  --focus: #C98A12;
  --select: rgba(255,194,74,.35);
  --core: rgba(255,226,170,.95);
  --sheen: rgba(255,206,120,.34);
  --ring: rgba(255,194,74,.18);
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #060607; --lift: #141312; --ink: #F4F1EC; --ink-2: #A6A29B; --hair: rgba(244,241,236,.55);
    --ember: rgba(255,194,74,.26); --ember-2: rgba(255,170,70,.08);
    --btn-bg: #F4F1EC; --btn-fg: #0B0B0C; --btn-hover: #FFFFFF; --focus: #FFC24A; --select: rgba(255,194,74,.30); --core: #FFF6E6; --sheen: rgba(255,194,74,.5); --ring: rgba(255,194,74,.16);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #060607; --lift: #141312; --ink: #F4F1EC; --ink-2: #A6A29B; --hair: rgba(244,241,236,.55);
  --ember: rgba(255,194,74,.26); --ember-2: rgba(255,170,70,.08);
  --btn-bg: #F4F1EC; --btn-fg: #0B0B0C; --btn-hover: #FFFFFF; --focus: #FFC24A; --select: rgba(255,194,74,.30); --core: #FFF6E6; --sheen: rgba(255,194,74,.5); --ring: rgba(255,194,74,.16);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(120% 90% at 50% 45%, var(--lift) 0%, var(--ground) 62%) var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--select); color: var(--ink); }

.page {
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow-x: clip;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: max(24px, env(safe-area-inset-top, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 48px);
  padding-block: clamp(32px, 8vh, 96px);
}

.lockup { position: relative; width: min(880px, 100%); }
.lockup > svg { display: block; width: 100%; height: auto; overflow: visible; position: relative; }
/* the ember behind the spark: star centre sits at 89.2% / 36.6% of the lock-up */
.ember {
  position: absolute; left: 89.2%; top: 36.6%;
  width: 78%; aspect-ratio: 1; max-width: 100vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--ember) 0%, var(--ember-2) 32%, transparent 64%);
  pointer-events: none;
}
/* the ignition flash: a small white-gold core on the star, seen only during the entrance */
.core {
  position: absolute; left: 89.2%; top: 36.6%;
  width: 22%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--core) 0%, var(--ember) 18%, transparent 62%);
  pointer-events: none;
  opacity: 0;
}
.lockup { margin: 0; }
.divider { color: var(--hair); }
.wordmark { color: var(--ink); }
.tile { filter: drop-shadow(0 18px 40px rgba(0,0,0,.28)); }

.line {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.signin {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px 0 26px;
  border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 16px/1 var(--font); letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 28px -12px rgba(0,0,0,.35);
  transition: background-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.signin { position: relative; overflow: hidden; isolation: isolate; }
.signin svg { transition: transform .25s cubic-bezier(.16,1,.3,1); }
/* hover: a gold sheen crosses the button once, like the sheen over the end-card tile */
.signin::after {
  content: ""; position: absolute; inset: -40% auto -40% 0; width: 46px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  transform: translateX(-80px) rotate(16deg);
  pointer-events: none;
}
.signin:hover::after { transform: translateX(220px) rotate(16deg); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.signin:hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 14px 32px -12px rgba(0,0,0,.4), 0 0 0 4px var(--ring); }
.signin:hover svg { transform: translateX(3px); }
.signin:active { transform: translateY(0); }
.signin:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  font-size: 13px; line-height: 1.4; color: var(--ink-2);
}
footer b { font-weight: 600; color: var(--ink); }

/* The entrance replays the film's end card in 2.8 s, then only the ember moves:
   0.10 spark ignites (core flash + arms open from the star) · 0.45-1.8 letters write in, C to e ·
   1.55 hairline grows · 1.65 B tile slides in · 2.0 line rises · 2.15 Sign in rises.
   Reduced motion: none of this runs; the page is the still end frame. */
@media (prefers-reduced-motion: no-preference) {
  .lockup > svg { animation: settle 2.6s cubic-bezier(.16,1,.3,1) both; transform-origin: 70% 40%; }

  .spark { animation: ignite .9s .1s cubic-bezier(.16,1,.3,1) both; }
  .core  { animation: flash 1.1s .1s cubic-bezier(.16,1,.3,1) both; }
  .ember { animation: emberIn 1.4s .1s cubic-bezier(.16,1,.3,1) both,
                      breathe 7s 1.5s ease-in-out infinite,
                      drift 26s 1.5s ease-in-out infinite; }

  .letters path {
    stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    fill-opacity: 0;
    animation: write .75s cubic-bezier(.65,0,.35,1) both, ink .45s ease-out both;
  }
  .letters path:nth-child(1) { animation-delay: .45s, .80s; }
  .letters path:nth-child(2) { animation-delay: .52s, .87s; }
  .letters path:nth-child(3) { animation-delay: .59s, .94s; }
  .letters path:nth-child(4) { animation-delay: .66s, 1.01s; }
  .letters path:nth-child(5) { animation-delay: .73s, 1.08s; }
  .letters path:nth-child(6) { animation-delay: .80s, 1.15s; }
  .letters path:nth-child(7) { animation-delay: .87s, 1.22s; }
  .letters path:nth-child(8) { animation-delay: .94s, 1.29s; }
  .letters path:nth-child(9) { animation-delay: 1.01s, 1.36s; }

  .divider { transform-box: fill-box; transform-origin: 50% 50%; animation: grow .45s 1.55s cubic-bezier(.16,1,.3,1) both; }
  .tile    { transform-box: fill-box; animation: slideIn .6s 1.65s cubic-bezier(.16,1,.3,1) both; }

  .line   { animation: rise .7s 2.0s cubic-bezier(.16,1,.3,1) both; }
  .signin { animation: rise .7s 2.15s cubic-bezier(.16,1,.3,1) both; }
}
@media (prefers-reduced-motion: reduce) { .signin::after { display: none; } }

@keyframes settle  { from { transform: scale(1.025); } to { transform: none; } }
@keyframes ignite  { from { clip-path: circle(0% at 73.8% 34.7%); } to { clip-path: circle(150% at 73.8% 34.7%); } }
@keyframes flash   { 0% { opacity: 0; scale: .4; } 18% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.6; } }
@keyframes emberIn { from { opacity: 0; scale: .6; } to { opacity: .85; scale: 1; } }
@keyframes breathe { 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes drift   { 0%, 100% { translate: 0 0; } 33% { translate: -1.6% .9%; } 66% { translate: 1.1% -1.2%; } }
@keyframes write   { to { stroke-dashoffset: 0; } }
@keyframes ink     { from { fill-opacity: 0; stroke-opacity: 1; } to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes grow    { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideIn { from { transform: translateX(-46px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise    { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }