/* ==========================================================================
   ORBI Design System
   --------------------------------------------------------------------------
   A token-driven CSS system for the Orbi marketing site and (future) app.

   Structure:
     1. Tokens          — design primitives as CSS custom properties
     2. Themes          — light + dark overrides
     3. Reset           — minimal global reset
     4. Base            — html/body, focus, scroll, motion preferences
     5. Typography      — text utilities + display styles
     6. Layout          — .shell, .stack, .row, header, footer
     7. Surfaces        — .glass, .stage, .glow, .grain
     8. Components
        a. .logo, .logo-mark
        b. .pill (status, eyebrow share this)
        c. .indicator-dot (pulsing live dot)
        d. .icon-btn (theme toggle)
        e. .btn (primary)
        f. .field (input wrapper)
        g. .kbd (keycap)
        h. .mascot (+ excited state, .eye, .mouth)
        i. .sparkles (celebration burst)
        j. .fs-msg, .fs-field-error (form messages)
     9. Animations
    10. Responsive
   --------------------------------------------------------------------------
   Naming: BEM-lite. Components are single class names; modifiers stack.
   Future app code should consume tokens, not raw hex/px values.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* ---- Color · brand ----------------------------------------------------- */
  --color-cream:        #F6F4ED;
  --color-ink:          #1F1F1F;
  --color-teal:         #4FD1C5;
  --color-teal-deep:    #1A9C92;
  --color-teal-soft:    #8AE8DD;

  /* ---- Color · semantic (light theme defaults) -------------------------- */
  --bg:                 var(--color-cream);
  --ink:                var(--color-ink);
  --ink-2:              #3A3A3A;
  --muted:              #6B6B6B;
  --faint:              #A0A0A0;
  --teal:               var(--color-teal);
  --teal-ink:           var(--color-teal-deep);
  --line:               rgba(31,31,31,0.10);

  /* status / utility */
  --color-success:      #3DD167;
  --color-success-soft: rgba(61,209,103,0.6);
  --color-danger:       #C0392B;

  /* ---- Surfaces · glass ------------------------------------------------- */
  --glass-bg:           rgba(255,255,255,0.7);
  --glass-bg-strong:    rgba(255,255,255,0.85);
  --glass-shadow-1:     rgba(255,255,255,0.8);

  /* ---- Surfaces · ambient ----------------------------------------------- */
  --grain-blend:        multiply;
  --grain-opacity:      0.3;
  --glow-opacity:       0.5;

  /* ---- Button (primary) ------------------------------------------------- */
  --btn-bg:             var(--color-ink);
  --btn-bg-hover:       #2E2E2E;
  --btn-fg:             #fff;
  --btn-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(31,31,31,0.5),
    0 4px 10px rgba(31,31,31,0.22);

  /* ---- Form ------------------------------------------------------------- */
  --form-shadow:
    0 8px 24px -8px rgba(10,10,10,0.08),
    0 2px 6px rgba(10,10,10,0.04);
  --form-shadow-hover:
    0 0 0 4px rgba(79,209,197,0.18),
    0 12px 32px -8px rgba(10,10,10,0.14);

  /* ---- Mascot ----------------------------------------------------------- */
  --mascot-shadow:
    drop-shadow(0 32px 50px rgba(10,10,10,0.18))
    drop-shadow(0 6px 12px rgba(10,10,10,0.08));

  /* ---- Typography ------------------------------------------------------- */
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:  'Instrument Serif', 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', ui-monospace, monospace;

  /* type scale (clamps respond to viewport) */
  --fs-xs:       11px;
  --fs-sm:       12.5px;
  --fs-base:     14.5px;
  --fs-md:       16.5px;
  --fs-lg:       20px;
  --fs-xl:       28px;
  --fs-display:  clamp(48px, 7.4vw, 96px);
  --fs-display-sm: clamp(40px, 11vw, 60px);

  --lh-tight:    1;
  --lh-snug:     1.2;
  --lh-base:     1.55;

  --tracking-tight:  -0.045em;
  --tracking-base:  -0.01em;

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-2xl:  18px;
  --r-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --t-fast:  150ms;
  --t-base:  250ms;
  --t-slow:  300ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- z-index scale ---------------------------------------------------- */
  --z-bg:     0;
  --z-base:   1;
  --z-pop:    2;
  --z-modal:  10;
}


/* ==========================================================================
   2. Themes
   ========================================================================== */
:root[data-theme="dark"] {
  --bg:               #141414;
  --ink:              var(--color-cream);
  --ink-2:            #C9C6BE;
  --muted:            #908A82;
  --faint:            #5E5A55;
  --line:             rgba(246,244,237,0.10);

  --glass-bg:         rgba(255,255,255,0.04);
  --glass-bg-strong:  rgba(255,255,255,0.06);
  --glass-shadow-1:   rgba(255,255,255,0.03);

  --form-shadow:
    0 8px 24px -8px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.3);
  --form-shadow-hover:
    0 0 0 4px rgba(79,209,197,0.22),
    0 12px 32px -8px rgba(0,0,0,0.6);

  --btn-bg:           var(--color-cream);
  --btn-bg-hover:     #FFFFFF;
  --btn-fg:           #1F1F1F;
  --btn-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 0 0 1px rgba(246,244,237,0.2),
    0 4px 12px rgba(0,0,0,0.4);

  --grain-blend:    overlay;
  --grain-opacity:  0.18;
  --glow-opacity:   0.22;

  --mascot-shadow:
    drop-shadow(0 32px 60px rgba(0,0,0,0.6))
    drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}


/* ==========================================================================
   3. Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   4. Base
   ========================================================================== */
html,
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--t-slow) ease, color var(--t-slow) ease;
}

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


/* ==========================================================================
   5. Typography
   ========================================================================== */
h1 {
  font-size: var(--fs-display);
  font-weight: 450;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--ink);
}
h1 .name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  margin-top: var(--space-6);
  max-width: 520px;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--muted);
  font-weight: 400;
}


/* ==========================================================================
   6. Layout
   ========================================================================== */
.shell {
  position: relative;
  z-index: var(--z-base);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-7) var(--space-7);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5) 0;
  position: relative;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--faint);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
footer .f-links {
  display: flex;
  gap: 22px;
}
footer a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-base) ease;
}
footer a:hover { color: var(--ink); }


/* ==========================================================================
   7. Surfaces
   ========================================================================== */

/* Glass utility — applied to any pill, card, or panel */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Ambient stage — fixed background layer for glows + grain */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: var(--z-bg);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: var(--glow-opacity);
  animation: drift 20s ease-in-out infinite;
  will-change: transform;
  transition: opacity var(--t-slow) ease;
}
.glow.g1 { width: 540px; height: 540px; background: #B8EDE6; top: -140px; left: -140px; }
.glow.g2 { width: 460px; height: 460px; background: #F6D9E4; bottom: -160px; right: -120px; animation-delay: -7s; }

.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}


/* ==========================================================================
   8. Components
   ========================================================================== */

/* ---- 8a. Logo ------------------------------------------------------------ */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--tracking-base);
  color: var(--ink);
  text-decoration: none;
  transition: opacity var(--t-base) ease;
}
.logo:hover { opacity: 0.7; }

.logo-mark {
  display: block;
  border-radius: 7px;
  transition: transform 400ms ease;
}
.logo:hover .logo-mark {
  transform: rotate(45deg);
}

/* ---- 8b. Pill ------------------------------------------------------------ */
/* Used for status, eyebrow, badges. Compose with .glass for glassmorphism. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
}

.status      { /* alias */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3) 6px var(--space-3);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
}

.eyebrow {   /* alias */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: var(--space-6);
}

/* ---- 8c. Indicator dot --------------------------------------------------- */
.dot,
.status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 var(--color-success-soft);
  animation: pulse 2s infinite;
}

/* ---- 8d. Icon button (theme toggle) ------------------------------------- */
.icon-btn,
.theme-toggle {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--ink-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color var(--t-base), background var(--t-base), transform var(--t-base);
}
.icon-btn:hover,
.theme-toggle:hover {
  color: var(--ink);
  transform: rotate(15deg);
}
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }

/* ---- 8e. Button (primary) ----------------------------------------------- */
.btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px var(--space-5);
  border-radius: var(--r-lg);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--btn-shadow);
  transition: transform var(--t-fast), background var(--t-base), color var(--t-base);
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ---- 8f. Field (glass form wrapper) ------------------------------------- */
.field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 6px 6px 6px var(--space-2);
  width: min(440px, 92vw);
  box-shadow:
    0 1px 0 var(--glass-shadow-1) inset,
    var(--form-shadow);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.field:focus-within {
  border-color: var(--ink-2);
  box-shadow: var(--form-shadow-hover);
  transform: translateY(-1px);
}
.field-icon,
.notify-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--faint);
  flex-shrink: 0;
}
.field input,
.notify input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  padding: 6px 4px;
  letter-spacing: var(--tracking-base);
}
.field input::placeholder,
.notify input::placeholder { color: var(--faint); }
.field input[aria-invalid="true"],
.notify input[aria-invalid="true"] { color: var(--color-danger); }

/* legacy alias for the existing markup */
.notify { /* alias of .field */
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 6px 6px 6px var(--space-2);
  width: min(440px, 92vw);
  box-shadow:
    0 1px 0 var(--glass-shadow-1) inset,
    var(--form-shadow);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.notify:focus-within {
  border-color: var(--ink-2);
  box-shadow: var(--form-shadow-hover);
  transform: translateY(-1px);
}
.notify button { /* applies primary button styling inside .notify */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px var(--space-5);
  border-radius: var(--r-lg);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--btn-shadow);
  transition: transform var(--t-fast), background var(--t-base), color var(--t-base);
}
.notify button:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.notify button:active { transform: translateY(0); }
.notify button:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.form-wrap {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* ---- 8g. Keycap --------------------------------------------------------- */
.kbd,
.notify .kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.12);
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: 0.8;
}
:root[data-theme="dark"] .kbd,
:root[data-theme="dark"] .notify .kbd {
  background: rgba(31,31,31,0.12);
}

/* ---- 8h. Mascot --------------------------------------------------------- */
.mascot-wrap {
  position: relative;
  width: 280px; height: 280px;
  margin-bottom: var(--space-9);
  display: grid; place-items: center;
}
.mascot-wrap::before { /* ambient halo */
  content: '';
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: conic-gradient(from 90deg,
    transparent 0deg,
    rgba(79,209,197,0.22) 60deg,
    transparent 120deg,
    rgba(246,217,228,0.28) 200deg,
    transparent 260deg,
    rgba(184,237,230,0.22) 330deg,
    transparent 360deg);
  filter: blur(28px);
  animation: spin 22s linear infinite;
}

.mascot {
  width: 240px;
  height: 240px;
  position: relative;
  z-index: var(--z-base);
  animation: float 4.2s ease-in-out infinite;
  filter: var(--mascot-shadow);
}

.pupils {
  transition: transform 120ms var(--ease-out);
  will-change: transform;
}
.mascot.excited .pupils { transform: none !important; }

.eye {
  transform-origin: center;
  animation: blink 5.4s infinite;
}
.eye.r { animation-delay: 0.04s; }

.eye-happy {
  opacity: 0;
  transition: opacity var(--t-base) ease;
}

.mouth {
  opacity: 0;
  transform-origin: 60px 78px;
  transform: scale(0);
  transition:
    opacity var(--t-base) ease,
    transform var(--t-slow) var(--ease-spring);
}

/* Excited state: bouncing body + happy curved eyes + smile */
.mascot.excited {
  animation: bounce 0.6s var(--ease-spring) infinite;
}
.mascot.excited .eye {
  opacity: 0;
  animation: none;
}
.mascot.excited .eye-happy { opacity: 1; }
.mascot.excited .mouth { opacity: 1; transform: scale(1); }

/* ---- 8i. Sparkles ------------------------------------------------------- */
.sparkles {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: var(--z-pop);
  opacity: 0;
  transition: opacity var(--t-slow) ease;
}
.sparkles.active { opacity: 1; }

.sparkle {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 700;
  color: #FFC857;
  text-shadow: 0 0 12px rgba(255,200,87,0.6);
  user-select: none;
  animation: sparkle-pop 0.9s ease-out forwards;
  opacity: 0;
}
.sparkles.active .sparkle.s1 { top:  8%; left: 12%; font-size: 22px; animation-delay: 0s;    color: #FFC857; }
.sparkles.active .sparkle.s2 { top: 22%; right: 6%; font-size: 28px; animation-delay: 0.1s;  color: #4FD1C5; }
.sparkles.active .sparkle.s3 { bottom: 14%; left: 4%; font-size: 18px; animation-delay: 0.2s; color: #F6A1B8; }
.sparkles.active .sparkle.s4 { bottom: 4%; right: 18%; font-size: 24px; animation-delay: 0.3s; color: #FFC857; }
.sparkles.active .sparkle.s5 { top: 50%; left: -2%; font-size: 16px; animation-delay: 0.15s; color: #4FD1C5; }
.sparkles.active .sparkle.s6 { top: 60%; right: -2%; font-size: 20px; animation-delay: 0.25s; color: #F6A1B8; }

/* ---- 8j. Form messages (Formspree) ------------------------------------- */
.fs-msg {
  font-size: 13px;
  line-height: 1.4;
  min-height: 1em;
  text-align: center;
  max-width: 440px;
}
.fs-msg[data-fs-success]:not(:empty) {
  color: var(--teal-ink);
  background: rgba(79,209,197,0.12);
  border: 1px solid rgba(79,209,197,0.3);
  padding: 10px var(--space-4);
  border-radius: var(--r-lg);
}
.fs-msg[data-fs-error]:not(:empty) {
  color: var(--color-danger);
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.2);
  padding: 10px var(--space-4);
  border-radius: var(--r-lg);
}
.fs-field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-danger);
  text-align: left;
  padding-left: var(--space-2);
}
.fs-field-error:empty { display: none; }

/* ---- 8k. Misc ----------------------------------------------------------- */
.hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--faint);
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.hint .kbd {
  background: var(--glass-bg);
  color: var(--ink-2);
  border: 1px solid var(--line);
  opacity: 1;
}

.made-by {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.made-by a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(10,10,10,0.2);
  transition: border-color var(--t-base) ease;
}
.made-by a:hover { border-color: var(--ink); }


/* ==========================================================================
   9. Animations
   ========================================================================== */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.06); }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,209,103,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(61,209,103,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,209,103,0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97%           { transform: scaleY(0.08); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0)   rotate(-3deg) scale(1); }
  50%      { transform: translateY(-22px) rotate( 3deg) scale(1.06); }
}

@keyframes sparkle-pop {
  0%   { transform: scale(0)   rotate(0deg);   opacity: 0; }
  30%  { transform: scale(1.3) rotate(120deg); opacity: 1; }
  100% { transform: scale(0.6) rotate(360deg) translateY(-10px); opacity: 0; }
}


/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 720px) {
  .shell { padding: var(--space-5) var(--space-5); }
  .mascot-wrap { width: 200px; height: 200px; margin-bottom: var(--space-7); }
  .mascot { width: 170px; height: 170px; }
  h1 { font-size: var(--fs-display-sm); }
  .sub { font-size: 15px; }
  footer { flex-direction: column; gap: var(--space-3); text-align: center; }
}

@media (max-width: 480px) {
  .notify,
  .field { flex-wrap: wrap; padding: var(--space-2); }
  .notify input,
  .field input { min-width: 0; width: 100%; padding: var(--space-2); }
  .notify button,
  .field button { width: 100%; justify-content: center; }
  .notify-icon,
  .field-icon { display: none; }
}