/* anyachew.com — "Follow the Star" design system (shared by the hub and the video pages).
   Palette, type and motion come straight from the showreel: twilight night, cream type, rationed gold, springs. */

/* brand fonts, self-hosted (Latin subsets) — no third-party, no render-blocking font CSS */
@font-face { font-family: 'Fredoka'; src: url(../fonts/fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url(../fonts/quicksand.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Pacifico'; src: url(../fonts/pacifico.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* palette */
  --tw0: #1E1236; --tw1: #2D1B4E; --tw2: #4A2975; --dusk: #6A4296; --lavender: #A57BC8;
  --lilac: #C8A0E4; --pink: #FFB8D4; --sky-pink: #FF9AC1; --sky: #8FB8E8;
  --magenta: #D946A8; --magenta-soft: #F06FB8;
  --gold: #FFD54F; --gold-deep: #FFB300; --cream: #FFF4E0; --ink-soft: #5A4478;
  --glass: rgba(255, 244, 224, 0.08); --glass-2: rgba(255, 244, 224, 0.14); --line: rgba(255, 244, 224, 0.16);

  /* the night sky (same ramp as the showreel's TwilightSky) */
  --sky-ramp: linear-gradient(180deg, #1E1236 0%, #2D1B4E 34%, #4A2975 66%, #6A4296 83%, #A57BC8 93%, #FF9AC1 100%);

  /* motion — the showreel's easing dictionary */
  --snap: cubic-bezier(0.16, 1, 0.3, 1);
  --whip: cubic-bezier(0.5, 0, 0.75, 0);
  --swing: cubic-bezier(0.65, 0, 0.35, 1);
  --glide: cubic-bezier(0.37, 0, 0.63, 1);
  --windup: cubic-bezier(0.36, 0, 0.66, -0.56);
  /* springs (fallback first, analytic spring as linear() where supported) */
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --jelly: cubic-bezier(0.3, 1.9, 0.5, 1);
  --settle: cubic-bezier(0.22, 1, 0.36, 1);
  --soft: cubic-bezier(0.3, 1.3, 0.5, 1);

  --r-lg: 30px; --r-md: 22px; --r-sm: 14px;
  --shadow-deep: 0 30px 60px -20px rgba(10, 4, 24, 0.75), 0 12px 24px -12px rgba(10, 4, 24, 0.6);
  --font-display: 'Fredoka', 'Quicksand', system-ui, sans-serif;
  --font-ui: 'Quicksand', system-ui, sans-serif;
  --font-script: 'Pacifico', cursive;
  --safe-t: max(14px, env(safe-area-inset-top)); --safe-b: max(14px, env(safe-area-inset-bottom));
  --safe-l: max(16px, env(safe-area-inset-left)); --safe-r: max(16px, env(safe-area-inset-right));
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --pop: linear(0, 0.0431, 0.1532, 0.3033, 0.4705, 0.6366, 0.7882, 0.9167, 1.0178, 1.0905, 1.1364, 1.1589, 1.1624, 1.1516, 1.1313, 1.1056, 1.0781, 1.0516, 1.0279, 1.0082, 0.9931, 0.9826, 0.9763, 0.9736, 0.9738, 0.9761, 0.9798, 0.9841, 0.9886, 0.9928, 0.9965, 0.9995, 1.0017, 1.0032, 1.004, 1.0043, 1.0042, 1.0037, 1.0031, 1.0024, 1);
    --jelly: linear(0, 0.1206, 0.4102, 0.7569, 1.0661, 1.2769, 1.3675, 1.3496, 1.2564, 1.1295, 1.0072, 0.9161, 0.8687, 0.8642, 0.892, 0.937, 0.9844, 1.0226, 1.0453, 1.0516, 1.0443, 1.0289, 1.0109, 0.9954, 0.985, 0.9809, 0.9823, 0.9873, 0.9939, 1.0001, 1.0047, 1.0069, 1.0069, 1.0054, 1.003, 1.0006, 0.9987, 0.9976, 0.9973, 0.9978, 1);
    --settle: linear(0, 0.0176, 0.0623, 0.1239, 0.1951, 0.2705, 0.3462, 0.4197, 0.4892, 0.5537, 0.6126, 0.6657, 0.7131, 0.7551, 0.7919, 0.824, 0.8517, 0.8756, 0.8961, 0.9136, 0.9284, 0.9409, 0.9514, 0.9602, 0.9675, 0.9736, 0.9786, 0.9828, 0.9862, 0.989, 0.9913, 0.9931, 0.9946, 0.9958, 0.9968, 0.9975, 0.9981, 0.9986, 0.999, 0.9993, 1);
    --soft: linear(0, 0.0303, 0.1074, 0.2135, 0.3341, 0.4581, 0.5774, 0.6865, 0.7822, 0.8628, 0.928, 0.9785, 1.0157, 1.0413, 1.0572, 1.0652, 1.0671, 1.0647, 1.0592, 1.0519, 1.0438, 1.0355, 1.0275, 1.0203, 1.014, 1.0087, 1.0044, 1.0011, 0.9987, 0.9971, 0.9961, 0.9956, 0.9955, 0.9957, 0.9961, 0.9966, 0.9971, 0.9977, 0.9982, 0.9987, 1);
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.magic {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--font-ui); font-weight: 600; color: var(--cream);
  background: var(--tw1);
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
body.magic ::selection { background: rgba(255, 213, 79, 0.35); color: var(--cream); }
.magic :focus { outline: none; }
.magic :focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ sky stage (fixed, behind everything) */
.sky-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--sky-ramp); }
/* star layers are painted once; twinkle = opacity, parallax = transform (both composited, no repaint) */
.sky-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--glide); }
.sky-stars.on { opacity: 1; }
.sky-layer { position: absolute; left: -34px; top: -34px; will-change: opacity, transform; animation: sky-tw 5s var(--glide) infinite alternate; }
@keyframes sky-tw { from { opacity: var(--o0, 0.4); } to { opacity: 1; } }
.sky-gold { position: absolute; width: var(--s, 12px); height: var(--s, 12px); background: var(--gold); pointer-events: none;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: gold-tw 3.5s var(--glide) infinite alternate; }
@keyframes gold-tw { from { opacity: 0.3; transform: scale(0.75); } to { opacity: 1; transform: scale(1.05); } }
.sky-shoot { position: absolute; width: 190px; height: 2px; border-radius: 2px; opacity: 0; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(255, 244, 224, 0), rgba(255, 244, 224, 0.95)); animation: shoot 12s linear infinite; }
.sky-shoot::after { content: ''; position: absolute; right: -5px; top: -5px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #FFF8E8 0%, rgba(255, 244, 224, 0.6) 35%, rgba(255, 244, 224, 0) 70%); }
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(var(--ang, 30deg)) translateX(0) scaleX(0.25); }
  1.5% { opacity: 1; }
  6%   { opacity: 0; transform: rotate(var(--ang, 30deg)) translateX(560px) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--ang, 30deg)) translateX(560px) scaleX(1); }
}
.sky-paused, .sky-paused * { animation-play-state: paused !important; }
.sky-moon {
  position: absolute; top: max(9vh, 64px); right: 9vw; width: clamp(54px, 7vw, 96px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, #FFF9EC 0%, #FFE9B8 45%, rgba(255, 233, 184, 0) 71%);
  -webkit-mask: radial-gradient(circle at 70% 36%, transparent 42%, #000 43%); mask: radial-gradient(circle at 70% 36%, transparent 42%, #000 43%);
  filter: drop-shadow(0 0 22px rgba(255, 223, 150, 0.55));
  animation: moon-bob 9s var(--glide) infinite alternate;
}
@keyframes moon-bob { from { transform: translateY(-4px) rotate(-6deg); } to { transform: translateY(5px) rotate(4deg); } }
.sky-horizon {
  position: absolute; left: -10%; right: -10%; bottom: -1px; height: 34vh;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 154, 193, 0.45), rgba(165, 123, 200, 0.12) 55%, transparent 75%);
}
.fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ brand lock-up */
.brand {
  display: inline-flex; align-items: baseline; gap: 0.02em; text-decoration: none; color: var(--cream);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1;
  text-shadow: 0 2px 0 rgba(30, 18, 54, 0.35);
}
.brand .brand-com { color: var(--cream); }
.brand-star {
  width: 0.62em; height: 0.62em; margin: 0 0.04em; align-self: center; transform: translateY(0.2em);
  background: url(star-spin.webp) 0 0 / 2400% 100% no-repeat; filter: drop-shadow(0 0 0.18em rgba(255, 196, 70, 0.75));
}
.brand:hover .brand-star, .brand-star.spin { animation: star-spin 0.8s steps(24, jump-none) 1; }
@keyframes star-spin { to { background-position: 100% 0; } }

/* ------------------------------------------------------------------ buttons */
.btn {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1;
  padding: 14px 24px; border-radius: 999px; color: var(--tw1);
  transition: transform 0.5s var(--pop), box-shadow 0.3s var(--snap), background-color 0.3s;
  user-select: none; -webkit-user-select: none;
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn:active { transform: scale(0.95); transition-duration: 0.12s; }
.btn-gold {
  background: linear-gradient(180deg, #FFE48A 0%, var(--gold) 45%, #FFB84D 100%);
  box-shadow: 0 10px 26px -8px rgba(255, 179, 0, 0.65), inset 0 2px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 rgba(200, 110, 0, 0.35);
}
.btn-gold:hover { box-shadow: 0 16px 34px -8px rgba(255, 179, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(200, 110, 0, 0.35); }
.btn-glass { color: var(--cream); background: rgba(58, 34, 98, 0.62); border: 1.5px solid var(--line); }
.btn-glass:hover { background: rgba(84, 50, 136, 0.7); }
.btn-magenta { color: #fff; background: linear-gradient(180deg, var(--magenta-soft), var(--magenta)); box-shadow: 0 10px 26px -8px rgba(217, 70, 168, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.btn-ghost { background: transparent; color: var(--ink-soft); font-weight: 600; }
.btn svg { width: 20px; height: 20px; flex: none; }

.icon-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cream);
  background: rgba(58, 34, 98, 0.62); border: 1.5px solid var(--line);
  transition: transform 0.5s var(--pop), background-color 0.3s;
}
.icon-btn:hover { background: rgba(84, 50, 136, 0.7); transform: rotate(-8deg) scale(1.06); }
.icon-btn:active { transform: scale(0.9); transition-duration: 0.1s; }
.icon-btn svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ kinetic type */
.kt { display: inline-block; }
.kt .ch { display: inline-block; white-space: pre; transform-origin: 50% 90%; }
.kt-in .ch { animation: ch-pop 0.62s var(--pop) both; animation-delay: calc(var(--d, 0s) + var(--i, 0) * 28ms); }
@keyframes ch-pop {
  from { opacity: 0; transform: translateY(0.55em) scale(0.4) rotate(calc(var(--r, 0) * 14deg)); }
  30% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ modals */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  background: radial-gradient(120% 90% at 50% 40%, rgba(45, 27, 78, 0.78), rgba(16, 8, 32, 0.93));
}
.modal-overlay.show { display: flex; animation: overlay-in 0.35s var(--snap) both; }
@keyframes overlay-in { from { opacity: 0; } }
.modal {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow: auto;
  color: var(--tw1); text-align: center;
  background: linear-gradient(180deg, #FFFBF3 0%, #FFEFE3 100%);
  border-radius: 30px; padding: 30px 26px 24px;
  box-shadow: 0 40px 80px -20px rgba(8, 3, 20, 0.8), 0 0 0 1.5px rgba(255, 213, 79, 0.55), inset 0 2px 0 #fff;
}
.modal-overlay.show .modal { animation: modal-in 0.62s var(--pop) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(0.86); } 40% { opacity: 1; } }
.modal h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--tw2); margin: 0 0 6px; }
.modal p { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; font-weight: 600; }
.modal .input {
  width: 100%; padding: 14px 16px; border-radius: 16px; border: 2px solid rgba(74, 41, 117, 0.2); background: #fff;
  font: 600 16px/1.3 var(--font-ui); color: var(--tw1); margin-bottom: 12px; transition: border-color 0.2s, box-shadow 0.2s;
}
.modal .input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 4px rgba(217, 70, 168, 0.18); }
.modal textarea.input { font-family: ui-monospace, Menlo, monospace; font-size: 12px; min-height: 96px; resize: vertical; text-align: left; }
.modal .field-label { display: block; text-align: left; font-weight: 700; font-size: 13px; color: var(--tw2); margin-bottom: 6px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.modal .btn-ghost { color: var(--ink-soft); }
.modal .err { color: #C42850; font-size: 14px; min-height: 20px; margin: -2px 0 8px; font-weight: 700; }
.modal details.migrate { text-align: left; margin-bottom: 14px; background: rgba(74, 41, 117, 0.06); border-radius: 14px; padding: 4px 14px; }
.modal details.migrate summary { cursor: pointer; font-weight: 700; color: var(--tw2); font-size: 13px; padding: 8px 2px; }
.modal details.migrate code { background: rgba(74, 41, 117, 0.1); padding: 2px 6px; border-radius: 5px; font-size: 11px; word-break: break-all; }
.modal .help-text { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.shake { animation: shake 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); } }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}