/* Lantern Mix site: Festival Night, as drawn on the design canvas (README "Website").
   Tailwind (CDN) does layout and spacing; this file holds the brand pieces: the night sky,
   outlined titles, glossy buttons, violet sheets, cream paper cards and the sky lanterns. */

/* Layered so Tailwind utilities (the last layer) override these. */
@layer theme, base, components, utilities;

@layer base {
  :root { color-scheme: dark; }
  html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
  body {
    margin: 0;
    background: #14063f;
    color: #fff;
    font-family: 'Baloo 2', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  :focus-visible { outline: 3px solid #ffc23d; outline-offset: 3px; border-radius: 12px; }
}

@layer components {
  /* Here, not in base: Tailwind's preflight (base) resets links to inherit. */
  a { color: #ffc23d; }
  a:hover { color: #ffe989; }

  /* Stars over the night gradient. */
  .night {
    background-color: #14063f;
    background-image:
      radial-gradient(1.6px 1.6px at 8% 14%, rgba(255, 255, 255, 0.85) 50%, transparent 52%),
      radial-gradient(1px 1px at 22% 58%, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
      radial-gradient(1.4px 1.4px at 41% 8%, rgba(255, 255, 255, 0.8) 50%, transparent 52%),
      radial-gradient(2px 2px at 79% 12%, rgba(255, 255, 255, 0.9) 50%, transparent 52%),
      radial-gradient(1px 1px at 92% 66%, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
      radial-gradient(130% 90% at 70% 10%, #4a1cb0 0%, #2a0f78 40%, #14063f 85%);
    background-size: 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 100% 100%;
  }

  /* Titles: cream and gold letters with a thick dark outline and a drop edge, like the store art. */
  .ol {
    text-shadow: 2px 0 #1c0850, -2px 0 #1c0850, 0 2px #1c0850, 0 -2px #1c0850, 2px 2px #1c0850,
      -2px 2px #1c0850, 2px -2px #1c0850, -2px -2px #1c0850, 0 5px #1c0850, 2px 5px #1c0850, -2px 5px #1c0850;
  }
  .ol-lg {
    text-shadow: 4px 0 #1c0850, -4px 0 #1c0850, 0 4px #1c0850, 0 -4px #1c0850, 3px 3px #1c0850,
      -3px 3px #1c0850, 3px -3px #1c0850, -3px -3px #1c0850, 0 9px #1c0850, 4px 9px #1c0850,
      -4px 9px #1c0850, 0 14px 28px rgba(0, 0, 0, 0.45);
  }
  .cap { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; text-transform: uppercase; font-weight: 800; line-height: 0.95; }
  .cap-s { font-size: 26px; color: #fff4dc; }
  .cap-b { font-size: 54px; color: #ffc23d; }
  @media (min-width: 768px) {
    .ol { text-shadow: 3px 0 #1c0850, -3px 0 #1c0850, 0 3px #1c0850, 0 -3px #1c0850, 2px 2px #1c0850, -2px 2px #1c0850, 2px -2px #1c0850, -2px -2px #1c0850, 0 7px #1c0850, 3px 7px #1c0850, -3px 7px #1c0850; }
    .ol-lg { text-shadow: 5px 0 #1c0850, -5px 0 #1c0850, 0 5px #1c0850, 0 -5px #1c0850, 4px 4px #1c0850, -4px 4px #1c0850, 4px -4px #1c0850, -4px -4px #1c0850, 0 12px #1c0850, 5px 12px #1c0850, -5px 12px #1c0850, 0 16px 30px rgba(0, 0, 0, 0.45); }
    .cap-s { font-size: 40px; }
    .cap-b { font-size: 88px; }
  }
  @media (min-width: 1024px) { .cap-left { align-items: flex-start; text-align: left; } }

  /* Glossy gold "go" button with a 3D edge; glass for secondary; teal for the Prism. */
  .btn-gold, .btn-glass, .btn-teal {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 18px; font-family: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
  }
  .btn-gold {
    min-height: 60px; padding: 0 26px; font-size: 19px; color: #6e2c00; border: 3px solid #1c0850;
    background: linear-gradient(180deg, #ffe989 0%, #ffc23d 45%, #ff9a1a 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.75), 0 6px 0 #a44d00, 0 9px 0 #1c0850, 0 16px 32px rgba(255, 154, 26, 0.28);
  }
  .btn-gold:hover { color: #6e2c00; filter: brightness(1.05); }
  .btn-gold-sm { min-height: 46px; padding: 0 16px; font-size: 16px; border-radius: 14px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.75), 0 4px 0 #a44d00, 0 6px 0 #1c0850; }
  .btn-glass { min-height: 60px; padding: 0 26px; font-size: 19px; color: #fff4dc; border: 2px solid rgba(255, 244, 220, 0.5); background: rgba(28, 8, 80, 0.55); }
  .btn-glass:hover { color: #fff; border-color: #ffc23d; }
  .btn-teal {
    min-height: 54px; padding: 0 24px; font-size: 18px; color: #053f3a; border: 3px solid #1c0850;
    background: linear-gradient(180deg, #8dfbe8 0%, #22d3b8 50%, #0fa594 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #08766c, 0 8px 0 #1c0850;
  }
  .btn-gold:active, .btn-teal:active { transform: translateY(4px); }

  /* Surfaces. */
  .sheet {
    border-radius: 28px; border: 2px solid #ffc23d;
    background: linear-gradient(180deg, #4e22bc 0%, #2c0f80 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 28px 56px rgba(0, 0, 0, 0.45);
  }
  @media (min-width: 768px) { .sheet { border-radius: 36px; } }
  .glass {
    border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, rgba(110, 64, 240, 0.38) 0%, rgba(52, 18, 150, 0.38) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .tile { background: radial-gradient(60% 45% at 50% 40%, rgba(255, 214, 140, 0.22), transparent 70%), linear-gradient(180deg, rgba(110, 64, 240, 0.38) 0%, rgba(52, 18, 150, 0.38) 100%); }
  /* A night backdrop for a lantern shown on a cream card (the white fanush disappears on cream). */
  .lantern-stage { background: radial-gradient(55% 55% at 50% 48%, rgba(255, 194, 61, 0.45), transparent 70%), linear-gradient(180deg, #3a1690, #1e0c5c); border: 2px solid #1c0850; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2); }
  .paper { background: #fff4dc; color: #2a1250; border: 3px solid #1c0850; border-radius: 22px; box-shadow: 0 6px 0 rgba(28, 8, 80, 0.55); }
  .medal {
    position: absolute; top: -24px; left: 22px; width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #6e2c00; font-weight: 800; font-size: 24px;
    background: linear-gradient(180deg, #ffe989 0%, #ffc23d 45%, #ff9a1a 100%); border: 3px solid #1c0850; box-shadow: 0 5px 0 #1c0850;
  }
  .ico { width: 56px; height: 56px; flex-shrink: 0; border-radius: 17px; display: flex; align-items: center; justify-content: center; border: 3px solid #1c0850; box-shadow: 0 5px 0 #1c0850; }
  .ico-gold { background: linear-gradient(180deg, #ffe989 0%, #ffc23d 45%, #ff9a1a 100%); color: #6e2c00; }
  .ico-teal { background: linear-gradient(180deg, #8dfbe8 0%, #22d3b8 50%, #0fa594 100%); color: #053f3a; }
  .disc { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #1c0850; color: #1c0850; font-weight: 800; line-height: 1; }

  /* The moon, the lake and the sky lanterns. */
  .moon { border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fffdf4 0%, #fff1cf 55%, #ffd98a 100%); box-shadow: 0 0 90px 36px rgba(255, 220, 150, 0.22), 0 0 260px 120px rgba(150, 100, 255, 0.28); opacity: 0.88; }
  .lake { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #1a0a50 0%, #0e0430 100%); }
  .lake::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 194, 61, 0.55), transparent); }
  .reflect { position: absolute; border-radius: 8px; filter: blur(4px); }
  .sl {
    position: absolute; width: 18px; height: 26px; border-radius: 8px 8px 6px 6px;
    background: radial-gradient(circle at 50% 78%, #fff3c4 0%, #ffb347 45%, #e8603c 100%);
    box-shadow: 0 0 24px 8px rgba(255, 170, 70, 0.32); animation: bob 7s ease-in-out infinite;
  }
  @keyframes bob { 50% { transform: translateY(-14px); } }
  .soft-edge { -webkit-mask-image: radial-gradient(ellipse farthest-side, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse farthest-side, #000 78%, transparent 100%); }

  /* The Prism vessel: a crystal trapezoid holding two bands. */
  .vessel { padding: 6px; background: #9ad1f5; clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
  .vessel > div { display: flex; width: 100%; height: 100%; background: #1b0b52; clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
  .vessel span { display: flex; align-items: center; justify-content: center; color: #1c0850; font-weight: 800; transition: background-color 0.25s ease; }
  .crystal { transform: rotate(45deg); border-radius: 6px; background: linear-gradient(135deg, #fff 0%, #cdebff 45%, #9ad1f5 100%); border: 2px solid #1c0850; box-shadow: 0 0 22px rgba(154, 209, 245, 0.7); }
  .fused { animation: fuse 0.48s ease-out; }
  @keyframes fuse { 0% { transform: scale(0.7); filter: brightness(1.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); filter: none; } }

  [x-cloak] { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sl, .fused { animation: none; }
  }
}