/* ============================================================
   VR ANYWHERE — Design System v2.0
   Modern CSS: @layer, native nesting, container queries,
   view transitions, custom properties
   
   Architecture:
   Layer 1: reset      — Box model, margins, defaults
   Layer 2: tokens     — Custom properties (colors, spacing, type)
   Layer 3: base       — Element-level styles (body, a, img, etc.)
   Layer 4: layout     — Containers, grids, navigation, footer
   Layer 5: components — Cards, buttons, badges, forms, modals
   Layer 6: utilities  — One-off helpers (.hidden, .sr-only, etc.)
   
   Why @layer? It makes the cascade predictable. A utility class
   will ALWAYS beat a component style, which ALWAYS beats a base
   style — regardless of source order or specificity. This means
   you can move CSS around without things breaking.
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

/* ============================================================
   LAYER 1: RESET
   Normalize browser defaults so every element starts clean.
   ============================================================ */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  ul, ol {
    list-style: none;
  }

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

/* ============================================================
   LAYER 2: TOKENS
   Every visual decision lives here. Change a token, change
   the entire site. Nothing is hardcoded anywhere else.
   
   ELI5: Think of tokens like a TV remote with labeled buttons.
   --color-bg-deep controls the darkest background everywhere.
   Change it once here, and every dark section updates instantly.
   ============================================================ */
@layer tokens {
  :root {
    /* ---- COLOR: BACKGROUNDS ---- */
    /* Dark palette (hero, cards, immersive sections) */
    --color-bg-deep:    #080e1e;
    --color-bg-base:    #0f172a;
    --color-bg-raised:  #1e293b;
    --color-bg-surface: #273548;

    /* Light palette (forms, trust content, info sections) */
    --color-bg-light:      #f8fafc;
    --color-bg-light-card: #ffffff;

    /* ---- COLOR: BRAND ---- */
    --color-cyan:        #22d3ee;
    --color-cyan-bright: #67e8f9;
    --color-cyan-dark:   #06b6d4;
    --color-cyan-deep:   #0891b2;
    --color-cyan-ghost:  rgba(34, 211, 238, 0.08);
    --color-cyan-glow:   rgba(34, 211, 238, 0.35);

    /* ---- COLOR: CATEGORY SYSTEM ---- */
    /* Each experience type gets a distinct color so users
       can visually sort at a glance without reading labels */
    --color-cat-competitive: #22d3ee;  /* Cyan — action/energy */
    --color-cat-escape:      #a78bfa;  /* Violet — mystery/puzzle */
    --color-cat-horror:      #f472b6;  /* Pink — danger/thrill */
    --color-cat-party:       #34d399;  /* Emerald — fun/family */
    --color-cat-adventure:   #fbbf24;  /* Amber — exploration */
    --color-cat-arcade:      #60a5fa;  /* Blue — classic/retro */

    /* ---- COLOR: TEXT ---- */
    --color-text-hi:    #f8fafc;
    --color-text-md:    #e2e8f0;
    --color-text-lo:    #94a3b8;
    --color-text-muted: #64748b;

    /* Dark-on-light (for light sections) */
    --color-text-dark:       #0f172a;
    --color-text-dark-muted: #475569;

    /* ---- COLOR: BORDERS ---- */
    --color-border-subtle:  rgba(255, 255, 255, 0.06);
    --color-border-default: rgba(255, 255, 255, 0.10);
    --color-border-strong:  rgba(255, 255, 255, 0.18);
    --color-border-light:   #e2e8f0;

    /* ---- COLOR: SEMANTIC ---- */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger:  #ef4444;

    /* ---- TYPOGRAPHY ---- */
    /* Sora: geometric, futuristic — perfect for a VR brand.
       Inter: clean, highly legible body text.
       Both from Google Fonts. */
    --font-display: 'Sora', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Type scale (mobile-first, scales up at breakpoints) */
    --text-xs:      0.75rem;   /* 12px — badges, captions */
    --text-sm:      0.875rem;  /* 14px — meta info, labels */
    --text-base:    1rem;      /* 16px — body text */
    --text-lg:      1.125rem;  /* 18px — lead paragraphs */
    --text-xl:      1.25rem;   /* 20px — card titles */
    --text-2xl:     1.5rem;    /* 24px — section intros */
    --text-3xl:     2rem;      /* 32px — section headings */
    --text-4xl:     2.5rem;    /* 40px — page titles */
    --text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem); /* Hero */

    /* Line heights */
    --leading-tight:  1.1;
    --leading-snug:   1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* ---- SPACING ---- */
    /* 4px base unit. Use multiples: 8, 12, 16, 24, 32, 48, 64, 96 */
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-24: 6rem;     /* 96px */
    --space-section: clamp(4rem, 8vw, 8rem);

    /* ---- BORDERS & RADIUS ---- */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 100px;  /* Pills and circles */

    /* ---- SHADOWS ---- */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px var(--color-cyan-glow);

    /* ---- LAYOUT ---- */
    --container-max:  1200px;
    --container-pad:  clamp(1rem, 4vw, 2rem);
    --nav-height:     72px;

    /* ---- TRANSITIONS ---- */
    --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-normal: 300ms;
    --duration-slow:   500ms;

    /* ---- GLASS EFFECTS ---- */
    /* Glassmorphism: frosted glass look using backdrop-filter.
       ELI5: Imagine putting a frosted shower door in front of
       your content. The background blurs through, giving depth
       without blocking the view entirely. */
    --glass-bg:     rgba(15, 23, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur:   blur(12px);
  }
}

/* ============================================================
   LAYER 3: BASE
   Element-level styles. No classes — just HTML tags.
   ============================================================ */
@layer base {
  body {
    font-family: var(--font-body);
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    line-height: var(--leading-normal);
    overflow-x: hidden;
  }

  /* Display font for all headings */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
  }

  h1 { font-size: var(--text-display); font-weight: 800; }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-xl); }

  p {
    max-width: 65ch; /* Optimal reading line length */
  }

  img {
    border-radius: var(--radius-md);
  }

  /* Focus styles — accessible and on-brand */
  :focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::selection {
    background: var(--color-cyan);
    color: var(--color-bg-deep);
  }

  /* Scrollbar styling (Chromium + Firefox) */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: var(--color-bg-deep); }
  ::-webkit-scrollbar-thumb {
    background: var(--color-bg-surface);
    border-radius: var(--radius-full);
  }
  * { scrollbar-width: thin; scrollbar-color: var(--color-bg-surface) var(--color-bg-deep); }
}

/* ============================================================
   LAYER 4: LAYOUT
   Containers, sections, navigation, footer.
   These are structural — they don't carry visual "style."
   ============================================================ */
@layer layout {
  /* Container — centers content with responsive padding */
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  /* Section spacing */
  .section {
    padding-block: var(--space-section);
  }

  /* Section on dark background */
  .section--dark {
    background-color: var(--color-bg-base);
    color: var(--color-text-md);
  }

  /* Section on light background */
  .section--light {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
  }

  /* Section header — centered intro block */
  .section-header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-block-end: var(--space-12);

    & h2 {
      margin-block-end: var(--space-4);
    }

    & p {
      font-size: var(--text-lg);
      color: var(--color-text-lo);
      margin-inline: auto;
    }
  }

  /* When section-header is inside a light section */
  .section--light .section-header p {
    color: var(--color-text-dark-muted);
  }

  /* ---- NAVIGATION ---- */
  .navbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: var(--nav-height);
    z-index: 1000;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-block-end: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    transition: background var(--duration-normal) var(--ease-out);
  }

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .brand-logo {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text-hi);
    letter-spacing: -0.03em;

    & .dot {
      color: var(--color-cyan);
    }
  }

  .brand-logo-icon {
    display: inline-block;
    height: 36px;
    width: auto;
    vertical-align: middle;
    margin-inline-end: var(--space-2);
  }

  /* Mobile menu toggle */
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    z-index: 1001;

    & .bar {
      width: 24px;
      height: 2px;
      background: var(--color-text-hi);
      border-radius: 2px;
      transition: transform var(--duration-normal) var(--ease-out),
                  opacity var(--duration-fast);
    }
  }

  /* Nav links — mobile: slide-down panel */
  .nav-links {
    display: none;
    position: absolute;
    inset-block-start: var(--nav-height);
    inset-inline: 0;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-block-end: 1px solid var(--glass-border);
    flex-direction: column;
    padding: var(--space-6);
    gap: var(--space-4);

    &.active {
      display: flex;
    }

    & a {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--text-base);
      color: var(--color-text-lo);
      transition: color var(--duration-fast);
      padding-block: var(--space-1);

      &:hover {
        color: var(--color-cyan);
      }
    }
  }

  .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cyan);
    color: var(--color-bg-deep) !important;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: background var(--duration-fast),
                transform var(--duration-fast);

    &:hover {
      background: var(--color-cyan-bright);
      transform: translateY(-1px);
    }
  }

  /* ---- FOOTER ---- */
  .footer {
    background: var(--color-bg-deep);
    color: var(--color-text-lo);
    padding-block: var(--space-16) var(--space-12);
    font-size: var(--text-sm);

    & h3, & h4 {
      color: var(--color-text-hi);
      margin-block-end: var(--space-4);
    }

    & a:hover {
      color: var(--color-cyan);
    }

    /* Mobile tap targets — 44px minimum for footer links */
    @media (max-width: 768px) {
      & a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
    }
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* ---- DESKTOP LAYOUT (768px+) ---- */
  @media (min-width: 768px) {
    .mobile-menu-btn {
      display: none;
    }

    .nav-links {
      display: flex;
      position: static;
      flex-direction: row;
      align-items: center;
      background: transparent;
      backdrop-filter: none;
      padding: 0;
      border: none;
      gap: var(--space-8);
    }

    .footer-grid {
      grid-template-columns: 2fr 1fr 1fr;
    }
  }
}

/* ============================================================
   LAYER 5: COMPONENTS
   Reusable UI pieces: buttons, cards, badges, forms.
   ============================================================ */
@layer components {

  /* ---- BUTTONS ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: all var(--duration-normal) var(--ease-out);
    white-space: nowrap;
    /* Minimum touch target for mobile (48px) */
    min-height: 48px;
    padding: var(--space-3) var(--space-8);
  }

  .btn--primary {
    background: var(--color-cyan);
    color: var(--color-bg-deep);
    font-size: var(--text-base);
    box-shadow: var(--shadow-glow);

    &:hover {
      background: var(--color-cyan-bright);
      transform: translateY(-2px);
      box-shadow: 0 0 30px var(--color-cyan-glow);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .btn--primary-lg {
    background: var(--color-cyan);
    color: var(--color-bg-deep);
    font-size: var(--text-lg);
    padding: var(--space-4) var(--space-12);
    min-height: 56px;
    box-shadow: var(--shadow-glow);

    &:hover {
      background: var(--color-cyan-bright);
      transform: translateY(-2px);
      box-shadow: 0 0 40px var(--color-cyan-glow);
    }
  }

  .btn--ghost {
    background: transparent;
    color: var(--color-text-md);
    border: 1px solid var(--color-border-default);
    font-size: var(--text-sm);

    &:hover {
      border-color: var(--color-border-strong);
      color: var(--color-text-hi);
      background: rgba(255, 255, 255, 0.04);
    }
  }

  .btn--ghost-cyan {
    background: var(--color-cyan-ghost);
    color: var(--color-cyan);
    border: 1px solid rgba(34, 211, 238, 0.2);

    &:hover {
      background: rgba(34, 211, 238, 0.15);
      border-color: rgba(34, 211, 238, 0.35);
    }
  }

  /* ---- CATEGORY BADGES ---- */
  /* Each experience type gets its own color-coded badge.
     Usage: <span class="badge badge--horror">Horror</span> */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
  }

  .badge--competitive {
    background: rgba(34, 211, 238, 0.12);
    color: var(--color-cat-competitive);
    border-color: rgba(34, 211, 238, 0.25);
  }
  .badge--escape-room {
    background: rgba(167, 139, 250, 0.12);
    color: var(--color-cat-escape);
    border-color: rgba(167, 139, 250, 0.25);
  }
  .badge--horror {
    background: rgba(244, 114, 182, 0.12);
    color: var(--color-cat-horror);
    border-color: rgba(244, 114, 182, 0.25);
  }
  .badge--party-game {
    background: rgba(52, 211, 153, 0.12);
    color: var(--color-cat-party);
    border-color: rgba(52, 211, 153, 0.25);
  }
  .badge--story-adventure {
    background: rgba(251, 191, 36, 0.12);
    color: var(--color-cat-adventure);
    border-color: rgba(251, 191, 36, 0.25);
  }
  .badge--arcade {
    background: rgba(96, 165, 250, 0.12);
    color: var(--color-cat-arcade);
    border-color: rgba(96, 165, 250, 0.25);
  }

  /* ---- 3D GAME CARDS ---- */
  /*
    ELI5 of the 3D effect:
    `perspective` on the parent tells the browser "pretend you're
    looking at this from 800px away." Then `rotateX` and `rotateY`
    on the card tilt it in 3D space. The closer the perspective
    value, the more dramatic the tilt looks — like holding a
    playing card close to your face vs. far away.
    
    `transform-style: preserve-3d` tells child elements to
    participate in the 3D space instead of flattening.
  */
  .game-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    color: var(--color-text-hi);
    background-color: var(--color-bg-deep);
    border: 1px solid var(--color-border-subtle);
    transform-style: preserve-3d;
    transition: transform var(--duration-fast) ease-out,
                box-shadow var(--duration-normal) var(--ease-out);
    will-change: transform;
    container-type: inline-size;

    &:hover {
      box-shadow: var(--shadow-lg);
    }

    /* Background image */
    & .card-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform var(--duration-slow) var(--ease-out);
    }

    &:hover .card-bg {
      transform: scale(1.06);
    }

    /* Gradient overlay for text legibility */
    & .card-overlay {
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      height: 65%;
      background: linear-gradient(
        to top,
        rgba(8, 14, 30, 0.95) 0%,
        rgba(8, 14, 30, 0.6) 50%,
        transparent 100%
      );
      z-index: 1;
    }

    /* Text content area */
    & .card-content {
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      padding: var(--space-6);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    & h3 {
      font-size: var(--text-xl);
      font-weight: 800;
      margin-block: var(--space-2) var(--space-3);
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      line-height: var(--leading-snug);
    }

    /* Responsive card title using container queries */
    @container (min-width: 350px) {
      & h3 {
        font-size: 1.5rem;
      }
    }
  }

  /* Card metadata row */
  .card-meta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-lo);
    font-weight: 500;
  }

  /* Games grid */
  .games-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (min-width: 540px) {
    .games-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .games-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-8);
    }
  }

  /* ---- EVENT TYPE CARDS ---- */
  /* For the new events.html page — glass-effect cards */
  .event-card {
    background: var(--color-bg-light-card);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-light);
    padding: var(--space-8);
    text-align: center;
    transition: all var(--duration-normal) var(--ease-out);

    &:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: var(--color-cyan);
    }

    & .icon-box {
      width: 80px;
      height: 80px;
      margin-inline: auto;
      margin-block-end: var(--space-6);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--color-bg-light);
      border: 1px solid var(--color-border-light);
      font-size: 2.5rem;
    }

    & h3 {
      font-size: var(--text-xl);
      color: var(--color-text-dark);
      margin-block-end: var(--space-3);
    }

    & p {
      color: var(--color-text-dark-muted);
      font-size: var(--text-base);
      line-height: var(--leading-relaxed);
      margin-inline: auto;
    }
  }

  /* Dark variant event card (for events.html hero area) */
  .event-card--dark {
    background: var(--color-bg-raised);
    border-color: var(--color-border-default);
    color: var(--color-text-md);

    & .icon-box {
      background: var(--color-bg-surface);
      border-color: var(--color-border-default);
    }

    & h3 {
      color: var(--color-text-hi);
    }

    & p {
      color: var(--color-text-lo);
    }
  }

  .events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (min-width: 540px) {
    .events-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .events-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* ---- GLASS CARD ---- */
  /* Reusable glassmorphism surface for overlays, nav, popups */
  .glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
  }

  /* ---- EVENT DETAIL SECTIONS (events.html) ---- */
  /* Two-column alternating layout: text + visual image.
     On mobile, stacks single-column with visual on top. */
  .event-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
  }

  /* Visual goes on top on mobile */
  .event-detail-visual { order: -1; }
  .event-detail-content { order: 1; }

  @media (min-width: 992px) {
    .event-detail-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
    }

    .event-detail-visual { order: 2; }
    .event-detail-content { order: 1; }

    /* Reversed layout — image on left, text on right */
    .event-detail-grid--reverse .event-detail-visual { order: 1; }
    .event-detail-grid--reverse .event-detail-content { order: 2; }
  }

  .event-detail-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-lo);
    margin-block-end: var(--space-8);
    max-width: 100%;
  }

  /* Event highlight items — icon + title + subtitle */
  .event-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (min-width: 540px) {
    .event-highlights {
      grid-template-columns: 1fr 1fr;
    }
  }

  .event-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-raised);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    transition: border-color var(--duration-fast),
                transform var(--duration-normal) var(--ease-out);

    &:hover {
      border-color: var(--color-border-default);
      transform: translateY(-2px);
    }

    & .highlight-icon {
      font-size: 1.25rem;
      flex-shrink: 0;
      line-height: 1.4;
    }

    & strong {
      display: block;
      color: var(--color-text-hi);
      font-size: var(--text-sm);
      font-weight: 600;
      margin-block-end: var(--space-1);
    }

    & span:last-child {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      line-height: var(--leading-normal);
    }
  }

  /* Game recommendation pills — clickable links to detail pages */
  .recommended-games {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .game-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-md);
    transition: all var(--duration-fast);
    white-space: nowrap;

    &:hover {
      border-color: var(--color-cyan);
      color: var(--color-cyan);
      background: var(--color-cyan-ghost);
      transform: translateY(-1px);
    }
  }

  .game-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* Event visual card — image container with pricing overlay */
  .event-visual-card {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-subtle);
    aspect-ratio: 4 / 3;
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);

    &:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: var(--shadow-lg);
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
    }
  }

  .event-visual-overlay {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(to top, rgba(8, 14, 30, 0.85), transparent);
  }

  .event-visual-tag {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-hi);
  }

  /* ---- FEATURE / HOW-IT-WORKS CARDS ---- */
  /*
    ELI5: Each card sits inside an invisible "stage" that has
    perspective (like looking at a table from above). When you
    hover, the card tilts slightly in 3D — just like the game
    cards on the experiences page. The gradient border appears
    on hover using a pseudo-element behind the card.
  */
  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (min-width: 768px) {
    .features-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .feature-card {
    position: relative;
    padding: var(--space-8);
    background: var(--color-bg-light-card);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-light);
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out);
    overflow: hidden;

    /* Subtle gradient shimmer on hover — sits behind content */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius-2xl);
      background: linear-gradient(
        135deg,
        rgba(34, 211, 238, 0.0) 0%,
        rgba(34, 211, 238, 0.04) 50%,
        rgba(167, 139, 250, 0.04) 100%
      );
      opacity: 0;
      transition: opacity var(--duration-normal) var(--ease-out);
      z-index: 0;
    }

    &:hover {
      transform: translateY(-8px) rotateX(2deg) rotateY(-1deg);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08),
                  0 0 0 1px rgba(34, 211, 238, 0.15);
      border-color: rgba(34, 211, 238, 0.3);
    }

    &:hover::before {
      opacity: 1;
    }

    /* Icon container with gradient background */
    & .icon-box {
      position: relative;
      z-index: 1;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(167, 139, 250, 0.1));
      border: 1px solid rgba(34, 211, 238, 0.15);
      font-size: 1.75rem;
      margin-block-end: var(--space-6);
      transition: transform var(--duration-normal) var(--ease-spring),
                  box-shadow var(--duration-normal) var(--ease-out);
    }

    &:hover .icon-box {
      transform: scale(1.1) translateY(-2px);
      box-shadow: 0 8px 20px rgba(34, 211, 238, 0.15);
    }

    & h3 {
      position: relative;
      z-index: 1;
      font-size: var(--text-xl);
      margin-block-end: var(--space-3);
    }

    & p {
      position: relative;
      z-index: 1;
      color: var(--color-text-dark-muted);
      font-size: var(--text-sm);
      line-height: var(--leading-relaxed);
    }

    /* Step number accent */
    & .step-number {
      position: absolute;
      inset-block-start: var(--space-6);
      inset-inline-end: var(--space-6);
      font-family: var(--font-display);
      font-size: 3.5rem;
      font-weight: 800;
      color: rgba(34, 211, 238, 0.06);
      line-height: 1;
      z-index: 0;
      transition: color var(--duration-normal) var(--ease-out);
    }

    &:hover .step-number {
      color: rgba(34, 211, 238, 0.12);
    }
  }

  /* ---- FILTER BAR ---- */
  .filter-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-block-start: var(--space-8);
  }

  .filter-btn {
    background: transparent;
    border: 1px solid var(--color-border-default);
    color: var(--color-text-lo);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: all var(--duration-normal) var(--ease-out);

    &:hover {
      border-color: var(--color-cyan);
      color: var(--color-cyan);
    }

    &.active {
      background: var(--color-cyan);
      color: var(--color-bg-deep);
      border-color: var(--color-cyan);
      box-shadow: var(--shadow-glow);
    }
  }

  /* ---- HERO SECTION ---- */
  .hero {
    position: relative;
    color: var(--color-text-hi);
    padding-block-start: calc(var(--nav-height) + var(--space-16));
    padding-block-end: var(--space-24);
    min-height: 95dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-deep);
    overflow: hidden;

    /* Mobile background */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('/assets/global/hero-mobile.webp');
      background-size: cover;
      background-position: center;
      z-index: 1;
    }

    /* Legibility shield */
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(8, 14, 30, 0.4) 0%,
        rgba(8, 14, 30, 0.7) 50%,
        rgba(8, 14, 30, 0.95) 100%
      );
      z-index: 2;
    }
  }

  @media (min-width: 768px) {
    .hero::before {
      background-image: url('/assets/global/hero-desktop.webp');
    }
  }

  .hero-container {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin-inline: auto;
    width: 100%;
  }

  .hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero h1 {
    font-size: var(--text-display);
    font-weight: 800;
    line-height: var(--leading-tight);
    margin-block-end: var(--space-6);
    letter-spacing: -0.03em;
  }

  .hero .highlight {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-cat-escape));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero-sub {
    font-size: clamp(var(--text-lg), 1vw + 1rem, var(--text-2xl));
    color: var(--color-text-lo);
    max-width: 700px;
    margin-inline: auto;
    margin-block-end: var(--space-8);
    line-height: var(--leading-relaxed);
  }

  .hero-actions {
    margin-block-end: var(--space-12);
  }

  /* ---- BOOKING FORM ---- */
  .booking-section {
    background: var(--color-bg-light);
    padding-block: var(--space-section);
  }

  .form-container {
    background: var(--color-bg-light-card);
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    max-width: 650px;
    margin-inline: auto;
  }

  @media (min-width: 768px) {
    .form-container {
      padding: var(--space-8) var(--space-12);
    }
  }

  .form-group {
    margin-block-end: var(--space-4);
    display: flex;
    flex-direction: column;

    & label {
      font-size: var(--text-sm);
      font-weight: 600;
      margin-block-end: var(--space-1);
      color: var(--color-text-dark);
    }

    & .req { color: var(--color-danger); }
  }

  input, select, textarea {
    width: 100%;
    height: 52px;
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    background: var(--color-bg-light);
    transition: border-color var(--duration-fast);

    &:focus {
      border-color: var(--color-cyan-dark);
      outline: none;
      box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
    }
  }

  textarea {
    height: auto;
    padding-block: var(--space-3);
    resize: vertical;
  }

  .grid-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
  }

  @media (min-width: 768px) {
    .grid-row {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Radio cards for form selections */
  .radio-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  @media (min-width: 768px) {
    .radio-cards {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .radio-card {
    position: relative;
    cursor: pointer;

    & input {
      position: absolute;
      opacity: 0;
      height: 0;
      width: 0;
    }

    & .card-content {
      border: 2px solid var(--color-border-light);
      border-radius: var(--radius-md);
      padding: var(--space-4);
      text-align: center;
      transition: all var(--duration-fast);
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    & input:checked + .card-content {
      border-color: var(--color-cyan-dark);
      background-color: rgba(6, 182, 212, 0.05);
    }
  }

  .progress-bar-track {
    height: 4px;
    background: var(--color-border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-cyan-dark), var(--color-cyan));
    transition: width var(--duration-slow) var(--ease-out);
    border-radius: var(--radius-full);
  }

  .btn-submit {
    width: 100%;
    min-height: 56px;
    background: var(--color-cyan);
    color: var(--color-bg-deep);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    cursor: pointer;
    margin-block-start: var(--space-4);
    transition: all var(--duration-normal) var(--ease-out);

    &:hover {
      background: var(--color-cyan-bright);
      transform: translateY(-1px);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }
  }

  /* Form validation */
  .form-group.invalid {
    & input, & select {
      border-color: var(--color-danger);
    }

    & .error-msg {
      display: block;
    }
  }

  .error-msg {
    color: var(--color-danger);
    font-size: var(--text-xs);
    margin-block-start: var(--space-1);
    display: none;
  }

  /* ---- FAQ ACCORDION ---- */
  .faq-grid {
    max-width: 800px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .faq-item {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-light);
    transition: all var(--duration-normal) var(--ease-out);

    &.active {
      background: var(--color-bg-light-card);
      border-color: var(--color-cyan-dark);
      box-shadow: var(--shadow-md);
    }
  }

  .faq-trigger {
    width: 100%;
    text-align: start;
    padding: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
  }

  .faq-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-dark);
  }

  .faq-icon {
    font-size: 1.25rem;
    color: var(--color-cyan-dark);
    transition: transform var(--duration-normal) var(--ease-out);
    line-height: 1;
    flex-shrink: 0;
  }

  .faq-item.active .faq-icon {
    transform: rotate(45deg);
  }

  .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-out);
  }

  .faq-item.active .faq-content {
    grid-template-rows: 1fr;
  }

  .faq-inner {
    overflow: hidden;

    & p {
      padding: 0 var(--space-6) var(--space-6);
      color: var(--color-text-dark-muted);
      line-height: var(--leading-relaxed);
    }
  }

  /* ---- DETAIL PAGE ---- */

  /* === HERO === */
  .detail-hero {
    min-height: 100dvh;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding-block-end: var(--space-16);
    overflow: hidden;
    background-color: var(--color-bg-base);
  }

  /* Parallax background image — absolutely positioned <img> element.
     Taller than the hero (120%) so it has room to translate on scroll.
     JS applies translateY for the parallax effect on desktop only. */
  .detail-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    will-change: transform;
  }

  .detail-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to top,
      var(--color-bg-base) 0%,
      rgba(15, 23, 42, 0.65) 50%,
      rgba(15, 23, 42, 0.3) 100%
    );
  }

  @keyframes heroReveal {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .detail-content {
    position: relative;
    z-index: 2;
    color: var(--color-text-hi);
    animation: heroReveal 0.9s var(--ease-out) both;
  }

  .detail-content h1 {
    font-size: var(--text-display);
    line-height: var(--leading-tight);
    margin-block-start: 0;
  }

  .game-stats {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-lo);
    margin-block-start: var(--space-6);
  }

  /* === INFO SECTION (dark theme, stacked layout) === */
  .detail-info {
    background: var(--color-bg-base);
    padding-block: var(--space-section);
  }

  .info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  /* Media comes first visually at all sizes */
  .info-media { order: -1; }
  .info-text  { order: 1; }

  /* Visual separator between hero and info content */
  .detail-info::before {
    content: "";
    display: block;
    height: 1px;
    margin-inline: auto;
    margin-block-end: var(--space-8);
    background: var(--color-border-default);
  }

  /* === MEDIA VIEWER === */
  .media-wrapper {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-border-default);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-raised);

    & img, & iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      display: block;
    }
  }

  /* === MISSION BRIEFING TEXT === */
  .info-text h2 {
    font-size: var(--text-3xl);
    margin-block-end: var(--space-6);
    color: var(--color-text-hi);
  }

  .info-text > p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-lo);
    max-width: 100ch;
  }

  /* === HIGHLIGHTS / INTEL REPORT === */
  .highlights-section {
    margin-block-start: var(--space-12);
  }

  .highlights-section h3 {
    font-size: var(--text-2xl);
    margin-block-end: var(--space-6);
    color: var(--color-text-hi);
  }

  .highlights-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    max-width: 100%;
  }

  .highlight-item {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    transition: border-color var(--duration-fast);

    &:hover {
      border-color: var(--color-cyan);
    }
  }

  .highlight-icon {
    color: var(--color-cyan);
    font-weight: 700;
    font-size: var(--text-lg);
    flex-shrink: 0;
    line-height: 1.4;
  }

  .highlight-text {
    color: var(--color-text-lo);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
  }

  /* === GAME MODES — Horizontal Scroll Carousel === */
  .modes-section {
    margin-block-start: var(--space-12);
  }

  .modes-section h3 {
    font-size: var(--text-2xl);
    margin-block-end: var(--space-6);
    color: var(--color-text-hi);
  }

  .modes-list {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-3);
    -webkit-overflow-scrolling: touch;
    max-width: 100%;

    /* Thin dark scrollbar for the carousel */
    scrollbar-width: thin;
    scrollbar-color: var(--color-bg-surface) transparent;
  }

  .mode-item {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transform-style: preserve-3d;
    transition: border-color var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);

    &:hover {
      border-color: var(--color-cyan);
      box-shadow: 0 0 20px var(--color-cyan-ghost);
    }
  }

  .mode-image {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    object-position: top;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-base);
  }

  .mode-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .mode-header h4 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-hi);
    text-align: center;
  }

  .mode-type-badge {
    background: rgba(34, 211, 238, 0.1);
    color: var(--color-cyan);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
  }

  .mode-description {
    color: var(--color-text-lo);
    font-size: var(--text-xs);
    margin: 0;
    line-height: var(--leading-relaxed);
    text-align: center;
  }

  /* === GALLERY THUMBNAILS — Horizontal Scroll === */
  .gallery-section {
    margin-block-start: var(--space-4);
  }

  .gallery-scroll {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-bg-surface) transparent;
    max-width: 100%;
  }

  .gallery-thumb {
    height: 72px;
    width: 72px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    scroll-snap-align: start;
    border: 2px solid transparent;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color var(--duration-fast),
                transform var(--duration-fast);

    &:hover {
      transform: scale(1.08);
      border-color: var(--color-border-strong);
    }

    &.active {
      border-color: var(--color-cyan);
    }
  }

  /* === ACTION AREA (CTA) === */
  .action-area {
    margin-block-start: var(--space-12);
    border-block-start: 1px solid var(--color-border-default);
    padding-block-start: var(--space-8);
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
  }

  /* === SCROLL REVEAL ANIMATIONS ===
     Uses .js-reveal-ready so elements are visible by default (no-JS fallback).
     detail.js adds .js-reveal-ready to <html> before observing. */
  .js-reveal-ready .reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }

  .js-reveal-ready .reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* === RESPONSIVE OVERRIDES === */
  @media (max-width: 768px) {
    .highlights-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    .highlights-grid {
      grid-template-columns: 1fr;
    }

    .mode-item {
      flex: 0 0 240px;
    }

    .gallery-thumb {
      height: 56px;
      width: 56px;
    }
  }

  /* === LOADING / ERROR STATES === */
  .detail-loading {
    text-align: center;
    color: var(--color-text-lo);
    padding-block-start: calc(var(--nav-height) + var(--space-24));
    padding-block-end: var(--space-24);
    background: var(--color-bg-base);
    min-height: 60dvh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .detail-error {
    text-align: center;
    color: var(--color-text-hi);
    padding-block-start: calc(var(--nav-height) + var(--space-24));
    padding-block-end: var(--space-24);
    background: var(--color-bg-base);
    min-height: 60dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);

    & p {
      color: var(--color-text-lo);
      margin-inline: auto;
    }
  }
}

/* ============================================================
   LAYER 6: UTILITIES
   Single-purpose helpers. These always win the cascade.
   ============================================================ */
@layer utilities {
  .hidden { display: none !important; }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: -999px;
    inset-block-start: var(--space-2);
    background: var(--color-bg-deep);
    color: var(--color-text-hi);
    padding: var(--space-2) var(--space-4);
    z-index: 2000;
    border-radius: var(--radius-md);

    &:focus {
      inset-inline-start: var(--space-2);
    }
  }

  /* Text color utilities */
  .text-cyan { color: var(--color-cyan); }
  .text-muted { color: var(--color-text-muted); }
  .text-hi { color: var(--color-text-hi); }

  /* Gradient text */
  .text-gradient {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-cat-escape));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Form step visibility */
  .form-step {
    display: none;
    border: none;
    padding: 0;

    &.active {
      display: block;
      animation: fadeUp var(--duration-slow) var(--ease-out);
    }
  }

  /* Animations */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

}