/* ==========================================================================
   GOLDEN DRAGON — Chinese Restaurant Corner-Table Layout
   
   CONCEPT:
   - Giant lazy susan circle anchored to BOTTOM-RIGHT corner, 1/4 visible.
   - 10 plates at 36° intervals around the table centre.
   - Only the plate in the top-left quadrant is visible; rest is clipped.
   - Table rotates SMOOTHLY & CONTINUOUSLY (never stops) + scroll adds more.
   - Left side shows matching dish description that cross-fades per plate.
   - Pure CSS: keyframe + scroll-driven animations, no JavaScript.
   ========================================================================== */

/* ======================== CUSTOM PROPERTIES ======================== */
:root {
  --clr-bg:           #1A0A0A;
  --clr-bg-alt:       #2A1215;
  --clr-text:         #F5E6D0;
  --clr-text-muted:   #B8946F;
  --clr-border:       #8B4513;
  --clr-white:        #FFF8F0;
  --clr-black:        #0A0505;
  --clr-red:          #C41E1E;
  --clr-red-dark:     #8B1A1A;
  --clr-gold:         #D4A853;
  --clr-gold-light:   #F0D48A;
  --clr-ember:        #FF6B35;

  --ff-heading: 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Reduce table size slightly from previous huge value, but keep it large enough for single dish focus */
  --table-size: 210vmin; 
}

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

html {
  font-size: 16px;
  /* Define timeline scope on root so siblings can share it */
  timeline-scope: --main-scroll;
  overflow-x: hidden;
}

body {
  font-family: var(--ff-body);
  /* Dark wood like texture with bg.webp */
  background-color: var(--clr-bg);
  background-image: 
    radial-gradient(circle at 80% 80%, rgba(61, 16, 16, 0.4), transparent 60%),
    radial-gradient(circle at 20% 30%, rgba(212, 168, 83, 0.03), transparent 50%),
    url('../images/bg.webp');
  background-size: auto, auto, cover;
  background-position: center;
  background-repeat: no-repeat, no-repeat, no-repeat;
    
  color: var(--clr-text);
  line-height: 1.5;
  overflow: hidden; /* Body no longer scrolls */
  height: 100vh;
}

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

/* ==========================================================================
   SCROLL-DRIVE WRAPPER
   
   Creates scrollable height that drives the scroll-spin layer.
   This becomes the scroll container.
   ========================================================================== */

.scroll-drive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  /* Make sure this is on top so we can scroll it */
  z-index: 500; 
  scroll-timeline: --main-scroll block;
}

/* ==========================================================================
   TOP NAVIGATION BAR
   ========================================================================== */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  /* Imperial lacquer base — deep layered red-black */
  background:
    /* Faint cloud/auspicious pattern overlay */
    radial-gradient(ellipse 60px 40px at 15% 60%, rgba(212,168,83,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 50px 35px at 45% 40%, rgba(212,168,83,0.04) 0%, transparent 100%),
    radial-gradient(ellipse 55px 38px at 75% 55%, rgba(212,168,83,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 45px 30px at 90% 35%, rgba(212,168,83,0.04) 0%, transparent 100%),
    /* Fine silk weave texture */
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 2px,
      rgba(212,168,83,0.015) 2px, rgba(212,168,83,0.015) 3px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0, transparent 2px,
      rgba(212,168,83,0.015) 2px, rgba(212,168,83,0.015) 3px
    ),
    /* Deep lacquer gradient */
    linear-gradient(180deg, #1E0808 0%, #280A0A 40%, #1A0505 100%);

  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);

  /* No border-bottom — we use the .topbar-line and keyline elements instead */
  border-bottom: none;

  transition: all 0.4s var(--ease);
  box-shadow:
    0 6px 40px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(212, 168, 83, 0.15) inset,
    inset 0 -1px 0 rgba(212, 168, 83, 0.1);
  overflow: hidden; /* prevent horizontal overflow from children */
}

/* ═══ Greek Key / 回紋 Meander Accent at top ═══ */
.topbar-top-accent {
  width: 100%;
  height: 6px;
  position: relative;
  /* Greek key meander via repeating gradients */
  background:
    repeating-linear-gradient(
      90deg,
      var(--clr-gold) 0px, var(--clr-gold) 6px,
      transparent 6px, transparent 8px,
      var(--clr-red-dark) 8px, var(--clr-red-dark) 14px,
      transparent 14px, transparent 16px
    );
  opacity: 0.7;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

/* Second sub-accent line directly under for layered border look */
.topbar-top-accent::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%, var(--clr-gold) 20%, var(--clr-gold-light) 50%, var(--clr-gold) 80%, transparent 100%
  );
  opacity: 0.5;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3.5rem;
  max-width: 1600px;
  margin: 0 auto;
}

.topbar-left,
.topbar-right {
  display: flex;
  gap: 2.5rem;
  flex: 1;
}

.topbar-right {
  justify-content: flex-end;
}

.topbar-link {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  transition: all 0.4s var(--ease);
  position: relative;
  padding: 0.6rem 1.2rem;
  overflow: hidden;
}

/* Ink-drop expanding background on hover */
.topbar-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(
    circle,
    rgba(139, 26, 26, 0.85) 0%,
    rgba(139, 26, 26, 0.4) 40%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s var(--ease), height 0.5s var(--ease);
  z-index: -1;
}

/* Gold underline with calligraphy brush taper */
.topbar-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 15%;
  width: 70%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--clr-gold) 15%,
    var(--clr-gold-light) 50%,
    var(--clr-gold) 85%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s var(--ease);
  border-radius: 50%;
}

.topbar-link:hover::before {
  width: 180%;
  height: 180%;
}

.topbar-link:hover::after {
  transform: scaleX(1);
}

.topbar-link:hover {
  color: var(--clr-gold-light);
  text-shadow:
    0 0 8px rgba(212, 168, 83, 0.6),
    0 0 20px rgba(212, 168, 83, 0.2);
  letter-spacing: 4px;
}

/* ═══ CTA Button — Chinese Window / 花窗 Frame Style ═══ */
.topbar-link--cta {
  padding: 0.55rem 1.8rem;
  border: 2px solid var(--clr-gold);
  /* Hexagonal / Chinese-window cut corners */
  clip-path: polygon(
    8% 0%, 92% 0%, 100% 30%, 100% 70%, 92% 100%, 8% 100%, 0% 70%, 0% 30%
  );
  background:
    linear-gradient(135deg, rgba(139, 26, 26, 0.3) 0%, transparent 50%, rgba(139, 26, 26, 0.3) 100%),
    linear-gradient(180deg, rgba(212, 168, 83, 0.08), transparent);
  color: var(--clr-gold);
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
  letter-spacing: 3px;
}

/* Animated shimmer sweep */
.topbar-link--cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(240, 212, 138, 0.3) 50%,
    transparent 100%
  );
  animation: ctaSweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ctaSweep {
  0%   { left: -120%; }
  100% { left: 120%; }
}

.topbar-link--cta::after {
  display: none;
}

.topbar-link--cta:hover {
  background:
    linear-gradient(135deg, rgba(212, 168, 83, 0.25) 0%, rgba(139, 26, 26, 0.4) 50%, rgba(212, 168, 83, 0.25) 100%);
  box-shadow:
    0 0 30px rgba(212, 168, 83, 0.3),
    0 0 60px rgba(212, 168, 83, 0.1),
    inset 0 0 20px rgba(212, 168, 83, 0.15);
  color: var(--clr-gold-light);
  text-shadow: 0 0 15px rgba(212, 168, 83, 0.7);
  border-color: var(--clr-gold-light);
  letter-spacing: 4px;
}

.topbar-brand {
  font-family: 'Cinzel Decorative', var(--ff-heading);
  font-size: 1.6rem; /* Increased size */
  font-weight: 700;
  letter-spacing: 4px; /* Slightly reduced spacing to keep it compact with larger font */
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.4s var(--ease);
  position: relative;
  padding: 0.2rem 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.brand-text {
  background: linear-gradient(
    to bottom,
    #F0D48A 0%,
    #D4A853 50%,
    #B88A32 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 5px rgba(212, 168, 83, 0.4));
}

.topbar-brand:hover .brand-text {
  filter: drop-shadow(0 0 15px rgba(212, 168, 83, 0.8));
}

.brand-ornament {
  font-size: 1.2rem; /* Larger ornaments */
  color: var(--clr-gold);
  opacity: 0.6;
  letter-spacing: 1px;
  transition: opacity 0.4s var(--ease);
}

.topbar-brand:hover .brand-ornament {
  opacity: 1;
}

.brand-icon {
  font-size: 2.2rem;
  background: linear-gradient(180deg, #FFE8B0, #D4A853, #B88A32);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(212, 168, 83, 0.6));
  animation: dragonPulse 3s ease-in-out infinite;
}

@keyframes dragonPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(212, 168, 83, 0.4)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 18px rgba(212, 168, 83, 0.8)); transform: scale(1.08); }
}

/* ======================== BRAND LAMP (Chinese Lantern) ======================== */
.brand-lamp {
  height: 3.2rem;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.6))
          drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
  transition: all 0.4s var(--ease);
  animation: lampSway 3s ease-in-out infinite;
  transform-origin: top center;
}

.brand-lamp--left {
  animation-delay: 0s;
}

.brand-lamp--right {
  animation-delay: 1.5s;
}

.topbar-brand:hover .brand-lamp {
  filter: drop-shadow(0 0 15px rgba(212, 168, 83, 0.9))
          drop-shadow(0 0 30px rgba(255, 107, 53, 0.5))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

@keyframes lampSway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ═══ Bottom Ornamental Line — Double-line with center gem ═══ */
.topbar-line {
  width: 100%;
  height: 4px;
  position: relative;
  /* Double gold line separated by dark gap */
  background:
    linear-gradient(
      to bottom,
      transparent 0px,
      var(--clr-gold) 0px, var(--clr-gold) 1px,
      transparent 1px, transparent 3px,
      var(--clr-gold) 3px, var(--clr-gold) 4px
    );
  opacity: 0.45;
  mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
  animation: lineShimmer 5s ease-in-out infinite;
}

/* Center 壽 longevity gem ornament */
.topbar-line::after {
  content: '壽';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E0808, #1A0505);
  border: 1.5px solid var(--clr-gold);
  color: var(--clr-gold-light);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 10px rgba(212, 168, 83, 0.5),
    inset 0 0 4px rgba(212, 168, 83, 0.2);
  opacity: 1;
  animation: gemPulse 4s ease-in-out infinite;
  z-index: 2;
}

@keyframes gemPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(212,168,83,0.4); transform: translate(-50%,-50%) scale(1); }
  50% { box-shadow: 0 0 18px rgba(212,168,83,0.8), 0 0 30px rgba(212,168,83,0.3); transform: translate(-50%,-50%) scale(1.1); }
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes lineShimmer {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.5; }
}

.scroll-step {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 3.5rem;
  padding-top: 5rem;
}

/* ==========================================================================
   FIXED TABLE — Bottom-Right Corner (1/4 Visible)
   ========================================================================== */

.table-corner {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 100;
  pointer-events: none;
}

/* --- The wooden table circle --- */
.wooden-table {
  position: absolute;
  bottom: calc(var(--table-size) / -2);
  right: calc(var(--table-size) / -2);
  width: var(--table-size);
  height: var(--table-size);
  border-radius: 50%;
  transform-origin: center center;

  /* Luxurious Chinese deeply lacquered redwood */
  background:
    /* High-gloss lacquer reflection */
    radial-gradient(
      ellipse at 30% 30%,
      rgba(255, 230, 200, 0.1) 0%,
      transparent 40%
    ),
    /* Subtle concentric ring grooves (lazy susan rings) */
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0px, transparent 55px,
      rgba(212, 168, 83, 0.05) 55px, rgba(212, 168, 83, 0.08) 57px,
      transparent 57px, transparent 110px,
      rgba(0,0,0,0.05) 110px, rgba(0,0,0,0.08) 112px
    ),
    /* Chinese carved decorative pattern (simulated with conic gradient) */
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(139, 69, 19, 0.06) 0deg,
      transparent 3deg,
      transparent 33deg,
      rgba(139, 69, 19, 0.06) 36deg,
      transparent 39deg,
      transparent 69deg,
      rgba(139, 69, 19, 0.06) 72deg,
      transparent 75deg,
      transparent 105deg,
      rgba(139, 69, 19, 0.06) 108deg,
      transparent 111deg,
      transparent 141deg,
      rgba(139, 69, 19, 0.06) 144deg,
      transparent 147deg,
      transparent 177deg,
      rgba(139, 69, 19, 0.06) 180deg,
      transparent 183deg,
      transparent 213deg,
      rgba(139, 69, 19, 0.06) 216deg,
      transparent 219deg,
      transparent 249deg,
      rgba(139, 69, 19, 0.06) 252deg,
      transparent 255deg,
      transparent 285deg,
      rgba(139, 69, 19, 0.06) 288deg,
      transparent 291deg,
      transparent 321deg,
      rgba(139, 69, 19, 0.06) 324deg,
      transparent 327deg,
      transparent 357deg,
      rgba(139, 69, 19, 0.06) 360deg
    ),
    /* Primary wood grain — fine lines */
    repeating-linear-gradient(
      93deg,
      transparent 0px, transparent 18px,
      rgba(80, 20, 20, 0.1) 18px, rgba(80, 20, 20, 0.1) 19px
    ),
    /* Deep radial rosewood gradient - Darker and richer */
    radial-gradient(
      circle at 35% 35%,
      #5E1B1B 0%,
      #4A1212 25%,
      #360A0A 50%,
      #240505 75%,
      #120202 100%
    );

  box-shadow:
    /* Inner depth */
    inset 0 0 150px rgba(0,0,0,0.5),
    
    /* Intricate Chinese-style rim (Gold + Lacquer layers) */
    0 0 0 4px #1a0505,                 /* Inner black lacquer */
    0 0 0 8px rgba(184, 134, 11, 0.4), /* Antique Gold */
    0 0 0 12px #2a0a0a,                /* Red wood */
    0 0 0 14px #D4A853,                /* Bright Gold Thread */
    0 0 0 20px #2a0a0a,                /* Wide wood band */
    0 0 0 22px rgba(184, 134, 11, 0.5),/* Outer Gold */
    0 0 0 26px #0d0202,                /* Outer black rim */

    /* Dramatic drop shadow for floating effect */
    -30px -30px 100px rgba(0,0,0,0.7),
    
    /* Outer golden aura */
    0 0 60px rgba(212, 168, 83, 0.25);

  animation: scrollSpin linear both;
  animation-timeline: --main-scroll;
}

@keyframes scrollSpin {
  from { transform: rotate(-45deg); }
  to   { transform: rotate(-369deg); } 
}

/* Ambient warm red/gold light on the wood */
.table-light {
  position: absolute;
  bottom: calc(var(--table-size) / -2 - 2px); 
  right: calc(var(--table-size) / -2 - 2px);
  width: calc(var(--table-size) + 4px);
  height: calc(var(--table-size) + 4px);
  
  border-radius: 50%;
  pointer-events: none;
  z-index: 150;
  
  box-shadow: 
    -6px -6px 60px rgba(255, 200, 100, 0.5),
    -3px -3px 25px rgba(255, 220, 130, 0.35),
    inset 3px 3px 30px rgba(255, 200, 100, 0.2);
              
  border: 1px solid rgba(255, 215, 0, 0.5);
  animation: tableLightPulse 6s ease-in-out infinite;
}

@keyframes tableLightPulse {
  0%, 100% { 
    box-shadow: 
      -6px -6px 60px rgba(255, 200, 100, 0.45),
      -3px -3px 25px rgba(255, 220, 130, 0.3),
      inset 3px 3px 30px rgba(255, 200, 100, 0.15);
  }
  50% { 
    box-shadow: 
      -8px -8px 80px rgba(255, 200, 100, 0.6),
      -4px -4px 35px rgba(255, 220, 130, 0.45),
      inset 4px 4px 40px rgba(255, 200, 100, 0.25);
  }
}

/* The sharp golden boundary line */
.table-light::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  
  /* Visible gold arc on top-left quadrant */
  border: 3px solid rgba(255, 215, 0, 0.55); 
  border-bottom-color: transparent;
  border-right-color: transparent;
  
  /* Intense glow on the golden arc */
  filter: drop-shadow(0 0 10px rgba(255, 230, 150, 0.9))
          drop-shadow(0 0 25px rgba(255, 200, 100, 0.4));
  
  transform: rotate(-15deg);
  animation: arcGlow 5s ease-in-out infinite;
}

@keyframes arcGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 8px rgba(255, 230, 150, 0.8)) 
            drop-shadow(0 0 20px rgba(255, 200, 100, 0.3));
    border-top-color: rgba(255, 215, 0, 0.5);
    border-left-color: rgba(255, 215, 0, 0.5);
  }
  50% { 
    filter: drop-shadow(0 0 14px rgba(255, 230, 150, 1)) 
            drop-shadow(0 0 35px rgba(255, 200, 100, 0.5));
    border-top-color: rgba(255, 225, 50, 0.7);
    border-left-color: rgba(255, 225, 50, 0.7);
  }
}

/* ==========================================================================
   PLATES — 10 Dishes at 36° Intervals Around the Table
   ========================================================================== */

.plate {
  position: absolute;
  width: 20%; 
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 5;
  overflow: visible;
}

/* Porcelain rim ring around each plate */
.plate::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 2px solid rgba(212, 168, 83, 0.2);
  box-shadow:
    inset 0 0 10px rgba(200, 180, 150, 0.1),
    0 0 12px rgba(212, 168, 83, 0.08);
  pointer-events: none;
  z-index: -1;
}

/* Warm spotlight glow behind the plate */
.plate::after {
  content: '';
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 200, 100, 0.08) 0%,
    rgba(255, 180, 80, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -2;
}

/* 
   We want ONLY the top-left-most dish to be visible.
   With 36 degree separation (360/10), we need to ensure the "visible zone" 
   (the viewport corner) only encompasses ~30 degrees of arc.
   
   Original positions were at radius ~38% from center.
   If table size is 220vmin, radius is 110vmin.
   Viewport is ~100vmin. 
   Distance from corner to plate needs to be manageable.
   
   Previous logic: 
   Radius ~33-38%.
   Let's keep the relative positions the same for now as they are calculated 
   for a circle. The larger --table-size will push them further out.
*/

/* 10 positions around the circle at 36° intervals, radius 38% from centre */
/* R = 38% (Increased gap) */
/* Plate 1: 0° */
.plate-1  { top: 12.0%; left: 50.0%; transform: translate(-50%, -50%); }
/* Plate 2: 36° */
.plate-2  { top: 19.3%; left: 72.3%; transform: translate(-50%, -50%); }
/* Plate 3: 72° */
.plate-3  { top: 38.3%; left: 86.1%; transform: translate(-50%, -50%); }
/* Plate 4: 108° */
.plate-4  { top: 61.7%; left: 86.1%; transform: translate(-50%, -50%); }
/* Plate 5: 144° */
.plate-5  { top: 80.7%; left: 72.3%; transform: translate(-50%, -50%); }
/* Plate 6: 180° */
.plate-6  { top: 88.0%; left: 50.0%; transform: translate(-50%, -50%); }
/* Plate 7: 216° */
.plate-7  { top: 80.7%; left: 27.7%; transform: translate(-50%, -50%); }
/* Plate 8: 252° */
.plate-8  { top: 61.7%; left: 13.9%; transform: translate(-50%, -50%); }
/* Plate 9: 288° */
.plate-9  { top: 38.3%; left: 13.9%; transform: translate(-50%, -50%); }
/* Plate 10: 324° */
.plate-10 { top: 19.3%; left: 27.7%; transform: translate(-50%, -50%); }

/* --- Dish photo inside plate --- */

@keyframes counterRotate {
  from { transform: rotate(45deg); }
  to   { transform: rotate(369deg); } 
}

/* --- Plate drop-shadow on wood --- */
.plate-shadow {
  position: absolute;
  bottom: -10%;
  left: 6%;
  width: 88%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    transparent 70%
  );
  filter: blur(8px);
  z-index: -1;
}

/* ==========================================================================
   LEFT-SIDE CONTENT OVERLAY
   ========================================================================== */


/* ======================== HEADING ======================== */
.main-heading {
  font-family: 'Cinzel Decorative', 'Chinese Shangai', serif;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  max-width: 65vw;
  position: relative;

  /* Enhanced Imperial Gold Gradient */
  background: linear-gradient(
    105deg,
    #8B6914 0%,
    #B88A32 15%,
    #D4A853 30%,
    #F0D48A 42%,
    #FFF5D6 50%,
    #F0D48A 58%,
    #D4A853 70%,
    #B88A32 85%,
    #8B6914 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Removed heavy drop-shadow that caused a dark box */
  /* Added a subtle text-shadow for readability */
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  
  /* Charming, elegant floating animation */
  animation: titleCharm 6s ease-in-out infinite;
  /* Ink texture overlay for calligraphic feel */
  -webkit-text-stroke: 0.3px rgba(139, 26, 26, 0.2);
}

/* Decorative ornament under heading */
.main-heading::after {
  content: '── ❖ ──';
  display: block;
  font-size: 0.8rem;
  letter-spacing: 6px;
  margin-top: 0.8rem;
  color: var(--clr-gold);
  opacity: 0.5;
  filter: none;
  -webkit-text-fill-color: var(--clr-gold);
}

@keyframes titleCharm {
  0%, 100% { 
    background-position: 0% center; 
    transform: translateY(0);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }
  50% { 
    background-position: 100% center; 
    transform: translateY(-5px);
    text-shadow: 0 8px 25px rgba(212, 168, 83, 0.2), 0 4px 15px rgba(0, 0, 0, 0.4);
  }
}

/* ==========================================================================
   INFO CARD — Traditional Chinese Hanging Scroll / 掛軸 (FLIPPABLE)
   ========================================================================== */

/* The flip container */
.info-card-container {
  max-width: 500px;
  perspective: 1200px;
  cursor: pointer;
  /* Floating animation */
  animation: cardFloat 6s ease-in-out infinite;
}

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

/* The flippable wrapper */
.info-card {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

/* Flip trigger */
.info-card-container:hover .info-card {
  transform: rotateY(180deg);
}

/* Shared Face Styles — 卷軸 (Hanging Scroll) with 水墨 (Water-Ink) Painting Aesthetic */
.info-card-front,
.info-card-back {
  /* Aged xuan rice paper with ink-wash landscape wisps */
  background-color: #f3e9cc;
  background-image:
    /* Misty mountain ink-wash layers */
    radial-gradient(ellipse 120px 50px at 15% 85%, rgba(45, 30, 15, 0.07) 0%, transparent 100%),
    radial-gradient(ellipse 100px 60px at 80% 10%, rgba(45, 30, 15, 0.06) 0%, transparent 100%),
    radial-gradient(ellipse 70px 35px at 50% 45%, rgba(45, 30, 15, 0.04) 0%, transparent 100%),
    radial-gradient(ellipse 90px 40px at 25% 20%, rgba(75, 50, 30, 0.03) 0%, transparent 100%),
    radial-gradient(ellipse 60px 80px at 85% 70%, rgba(60, 40, 20, 0.04) 0%, transparent 100%),
    /* Fine paper-fiber noise */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");

  /* Triple-layer scroll frame: dark wood > gold inlay > inner dark */
  border: none;
  border-radius: 2px;
  outline: 12px solid #2f150a;
  outline-offset: -12px;

  box-shadow:
    /* Inner gold inlay channel */
    inset 0 0 0 14px #f3e9cc,
    inset 0 0 0 16px var(--clr-gold),
    inset 0 0 0 17px rgba(139, 26, 26, 0.4),
    inset 0 0 0 19px #2f150a,
    /* Inner warm glow */
    inset 0 0 40px rgba(200, 165, 100, 0.08),
    /* Depth & floating shadow */
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 100px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    /* Subtle outer gold aura */
    0 0 25px rgba(212, 168, 83, 0.08);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #1e0c02;
  padding: 2.8rem 2.2rem;
  position: relative;
  /* Subtle parchment edge aging */
  border-image: linear-gradient(
    to bottom,
    rgba(80, 50, 20, 0.15) 0%,
    rgba(80, 50, 20, 0.05) 10%,
    transparent 20%,
    transparent 80%,
    rgba(80, 50, 20, 0.05) 90%,
    rgba(80, 50, 20, 0.15) 100%
  ) 1;
}

.info-card-front {
  position: relative;
  z-index: 2;
}

/* ═══ Chinese Red Seal Stamp (印章) — Large & Prominent ═══ */
.info-card-front::after {
  content: '美\A味';
  white-space: pre;
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #cc0000 0%, #a80000 60%, #880000 100%);
  color: #fff;
  font-family: 'Noto Serif SC', 'SimSun', serif;
  font-weight: 900;
  font-size: 0.9rem;
  line-height: 1.15;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 4px;
  border: 3px solid rgba(180, 0, 0, 0.7);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.4),
    inset 0 0 2px rgba(255, 255, 255, 0.1),
    3px 3px 10px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(180, 0, 0, 0.15);
  transform: rotate(-10deg);
  opacity: 0.88;
  pointer-events: none;
  filter: contrast(1.2) saturate(1.4);
  /* Aged stamp ink eroded edges */
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  transition: transform 0.4s ease;
}

.info-card-container:hover .info-card-front::after {
  transform: rotate(-6deg) scale(1.05);
}

/* ═══ Inner 回紋 (Greek Key Meander) border + corner calligraphy marks ═══ */
.info-card-front::before {
  content: '';
  position: absolute;
  top: 20px; left: 20px; right: 20px; bottom: 20px;
  /* Double inner border */
  border: 1px solid rgba(58, 26, 10, 0.12);
  outline: 1px solid rgba(58, 26, 10, 0.06);
  outline-offset: 4px;
  pointer-events: none;
  /* Large decorative corner L-brackets + gold dots */
  background:
    /* Top-left L-bracket */
    linear-gradient(to right, rgba(139, 26, 26, 0.35) 0, rgba(139, 26, 26, 0.35) 20px, transparent 20px) 0 0 / 20px 1.5px no-repeat,
    linear-gradient(to bottom, rgba(139, 26, 26, 0.35) 0, rgba(139, 26, 26, 0.35) 20px, transparent 20px) 0 0 / 1.5px 20px no-repeat,
    /* Top-right L-bracket */
    linear-gradient(to left, rgba(139, 26, 26, 0.35) 0, rgba(139, 26, 26, 0.35) 20px, transparent 20px) 100% 0 / 20px 1.5px no-repeat,
    linear-gradient(to bottom, rgba(139, 26, 26, 0.35) 0, rgba(139, 26, 26, 0.35) 20px, transparent 20px) 100% 0 / 1.5px 20px no-repeat,
    /* Bottom-left L-bracket */
    linear-gradient(to right, rgba(139, 26, 26, 0.35) 0, rgba(139, 26, 26, 0.35) 20px, transparent 20px) 0 100% / 20px 1.5px no-repeat,
    linear-gradient(to top, rgba(139, 26, 26, 0.35) 0, rgba(139, 26, 26, 0.35) 20px, transparent 20px) 0 100% / 1.5px 20px no-repeat,
    /* Bottom-right L-bracket */
    linear-gradient(to left, rgba(139, 26, 26, 0.35) 0, rgba(139, 26, 26, 0.35) 20px, transparent 20px) 100% 100% / 20px 1.5px no-repeat,
    linear-gradient(to top, rgba(139, 26, 26, 0.35) 0, rgba(139, 26, 26, 0.35) 20px, transparent 20px) 100% 100% / 1.5px 20px no-repeat,
    /* Gold corner dots */
    radial-gradient(circle at 0% 0%, var(--clr-gold) 2.5px, transparent 2.5px),
    radial-gradient(circle at 100% 0%, var(--clr-gold) 2.5px, transparent 2.5px),
    radial-gradient(circle at 0% 100%, var(--clr-gold) 2.5px, transparent 2.5px),
    radial-gradient(circle at 100% 100%, var(--clr-gold) 2.5px, transparent 2.5px);
}


.info-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  z-index: 1;
  /* Dark imperial reverse — deep lacquer with 花窗 lattice */
  background-color: #120404;
  background-image:
    /* Central glowing aura */
    radial-gradient(ellipse 50% 50% at 50% 40%, rgba(212, 168, 83, 0.04) 0%, transparent 100%),
    /* Chinese lattice window pattern */
    repeating-linear-gradient(0deg, rgba(212,168,83,0.05) 0px, rgba(212,168,83,0.05) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(212,168,83,0.05) 0px, rgba(212,168,83,0.05) 1px, transparent 1px, transparent 18px),
    /* Diamond cross-hatch */
    repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(212,168,83,0.025) 12px, rgba(212,168,83,0.025) 13px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 12px, rgba(212,168,83,0.025) 12px, rgba(212,168,83,0.025) 13px),
    /* Silk weave micro-texture */
    repeating-linear-gradient(0deg, rgba(139, 26, 26, 0.02) 0, rgba(139, 26, 26, 0.02) 1px, transparent 1px, transparent 4px);
  outline-color: var(--clr-gold);
  color: #F5E6D0;
  box-shadow:
    inset 0 0 0 14px #120404,
    inset 0 0 0 16px var(--clr-gold),
    inset 0 0 0 17px rgba(139, 26, 26, 0.5),
    inset 0 0 0 19px #2f150a,
    inset 0 0 50px rgba(0, 0, 0, 0.25),
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 25px rgba(212, 168, 83, 0.1);
}

.info-card-header {
  padding-bottom: 1.4rem;
  margin-bottom: 1.5rem;
  width: 100%;
  text-align: center;
  position: relative;
  border-bottom: none;
}

/* Brush-stroke divider — ink splatter fade with center 山水 dot */
.info-card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  width: 84%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 26, 26, 0.25) 8%,
    rgba(139, 26, 26, 0.6) 25%,
    rgba(139, 26, 26, 0.9) 40%,
    rgba(212, 168, 83, 0.8) 50%,
    rgba(139, 26, 26, 0.9) 60%,
    rgba(139, 26, 26, 0.6) 75%,
    rgba(139, 26, 26, 0.25) 92%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(0.3px);
}

/* Center ornament on header divider */
.info-card-header::before {
  content: '❖';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  color: var(--clr-gold);
  background: #f3e9cc;
  padding: 0 8px;
  z-index: 2;
  letter-spacing: 0;
}

.info-card-back .info-card-header::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 83, 0.2) 10%,
    rgba(212, 168, 83, 0.7) 35%,
    rgba(255, 248, 224, 0.9) 50%,
    rgba(212, 168, 83, 0.7) 65%,
    rgba(212, 168, 83, 0.2) 90%,
    transparent 100%
  );
}

.info-card-back .info-card-header::before {
  color: var(--clr-gold-light);
  background: #1a0808;
}

.info-card-label {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #8B1A1A;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.1),
    0 0 20px rgba(139, 26, 26, 0.08);
  position: relative;
  padding: 0 0.5rem;
  /* Subtle ink stroke feel */
  -webkit-text-stroke: 0.2px rgba(58, 26, 10, 0.15);
}

/* Chinese characters in label get special treatment */
.info-card-label::first-line {
  font-size: 1.1em;
}

.info-card-back .info-card-label {
  color: var(--clr-gold-light);
  text-shadow:
    0 0 20px rgba(212, 168, 83, 0.45),
    0 0 40px rgba(212, 168, 83, 0.15);
  -webkit-text-stroke: 0.2px rgba(212, 168, 83, 0.2);
}

.info-card-body {
  padding: 0.5rem 1.2rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Giant faint watermark character behind the description */
.info-card-front .info-card-body::before {
  content: '品'; /* "Taste/Savor" */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Noto Serif SC', serif;
  font-size: 10rem;
  color: rgba(139, 26, 26, 0.03);
  z-index: -1;
  pointer-events: none;
}

.info-card-text {
  font-family: var(--ff-heading);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 2.2;
  color: #2c1810;
  letter-spacing: 1px;
  text-align: center;
  position: relative;
  padding: 1rem 2.5rem;
}

/* Vertical Chinese text on the left (Traditional Delicacies) */
.info-card-text::before {
  content: '傳\A統\A佳\A餚';
  white-space: pre;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.75rem;
  line-height: 1.8;
  color: rgba(139, 26, 26, 0.5);
  letter-spacing: 4px;
  border-right: 1px solid rgba(139, 26, 26, 0.2);
  padding-right: 0.6rem;
}

/* Vertical Chinese text on the right (Imperial Famous Dishes) */
.info-card-text::after {
  content: '御\A膳\A名\A菜';
  white-space: pre;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.75rem;
  line-height: 1.8;
  color: rgba(139, 26, 26, 0.5);
  letter-spacing: 4px;
  border-left: 1px solid rgba(139, 26, 26, 0.2);
  padding-left: 0.6rem;
}

/* Ink drop-cap effect on first letter of description */
.info-card-text::first-letter {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.8em;
  font-weight: 900;
  color: #8B1A1A;
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  margin-top: 4px;
  font-style: normal;
  text-shadow: 2px 2px 0px rgba(212, 168, 83, 0.4);
}

.info-card-text strong {
  display: inline-block;
  font-family: 'Cinzel Decorative', serif;
  font-style: normal;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 1.5rem;
  color: #8B1A1A;
  text-transform: uppercase;
  position: relative;
  padding: 0 1.5rem 0.8rem;
  /* Ink brush calligraphy stroke */
  -webkit-text-stroke: 0.3px rgba(58, 26, 10, 0.1);
  text-shadow: 0 2px 4px rgba(139, 26, 26, 0.15);
  
  /* Brush stroke underline */
  background-image: linear-gradient(90deg, transparent, rgba(139, 26, 26, 0.6), transparent);
  background-size: 80% 2px;
  background-position: bottom center;
  background-repeat: no-repeat;
}

/* Side quote marks for poetic framing */
.info-card-text strong::before {
  content: '『';
  position: absolute;
  left: -0.2rem;
  top: -0.2rem;
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem;
  color: rgba(139, 26, 26, 0.4);
  font-weight: 400;
}

.info-card-text strong::after {
  content: '』';
  position: absolute;
  right: -0.2rem;
  bottom: 0.4rem;
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem;
  color: rgba(139, 26, 26, 0.4);
  font-weight: 400;
}

/* ======================== PRICE STYLES — Back of Card ======================== */

.price-display {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.8rem;
  font-weight: 900;
  margin: 1rem 0;
  position: relative;
  /* Rich embossed gold with crimson highlight */
  background: linear-gradient(
    170deg,
    #8B6914 0%,
    #D4A853 20%,
    #FFE8B0 35%,
    #FFF8E0 50%,
    #FFE8B0 65%,
    #D4A853 80%,
    #8B6914 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.7))
          drop-shadow(0 0 20px rgba(212, 168, 83, 0.5));
  letter-spacing: 3px;
  animation: priceGlow 3s ease-in-out infinite alternate;
}

@keyframes priceGlow {
  0% { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.7)) drop-shadow(0 0 15px rgba(212, 168, 83, 0.3)); }
  100% { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.7)) drop-shadow(0 0 30px rgba(212, 168, 83, 0.6)); background-position: 100% 100%; }
}

/* Price value side ornaments */
.price-display::before {
  content: '《';
  font-family: 'Noto Serif SC', serif;
  margin-right: 0.3rem;
  font-size: 0.7em;
  opacity: 0.5;
}

.price-display::after {
  content: '》';
  font-family: 'Noto Serif SC', serif;
  margin-left: 0.3rem;
  font-size: 0.7em;
  opacity: 0.5;
}

.price-desc {
  color: rgba(245, 230, 208, 0.85);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1.7;
  font-family: var(--ff-heading);
  font-style: italic;
}

.price-decoration-top,
.price-decoration-bottom {
  height: 2px;
  width: 55%;
  margin: 0.4rem auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 26, 26, 0.3) 15%,
    var(--clr-gold) 35%,
    var(--clr-gold-light) 50%,
    var(--clr-gold) 65%,
    rgba(139, 26, 26, 0.3) 85%,
    transparent 100%
  );
  opacity: 0.7;
  position: relative;
}

/* Center diamond ornament */
.price-decoration-top::after {
  content: '◆';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  color: var(--clr-gold-light);
  background: #1a0808;
  padding: 0 6px;
  font-size: 0.8rem;
}

/* ═══ ORDER BUTTON — Imperial Jade Seal / 玉璽 Style ═══ */
.order-btn {
  display: inline-block;
  padding: 1.1rem 2.8rem;
  border: 2px solid var(--clr-gold);
  color: var(--clr-gold);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.45s var(--ease);
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(139, 26, 26, 0.35) 0%,
    rgba(26, 8, 8, 0.5) 50%,
    rgba(139, 26, 26, 0.25) 100%
  );
  box-shadow:
    0 6px 20px rgba(0,0,0,0.6),
    inset 0 0 15px rgba(0,0,0,0.25),
    0 0 0 1px rgba(212, 168, 83, 0.15);
  /* Chinese window octagon shape */
  clip-path: polygon(
    8% 0%, 92% 0%, 100% 25%, 100% 75%, 92% 100%, 8% 100%, 0% 75%, 0% 25%
  );
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.order-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--clr-gold-light), var(--clr-gold));
  transition: width 0.4s var(--ease);
  z-index: -1;
}

.order-btn:hover {
  color: #1a0505;
  border-color: var(--clr-gold-light);
  box-shadow: 
    0 0 30px rgba(212, 168, 83, 0.5),
    0 0 60px rgba(212, 168, 83, 0.2),
    inset 0 0 15px rgba(255, 255, 255, 0.25);
  text-shadow: none;
  letter-spacing: 7px;
}

.order-btn:hover::before {
  width: 100%;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --table-size: 130vmin;
  }
}

/* ====== TABLET ====== */
@media (max-width: 768px) {
  :root {
    --table-size: 140vmin; /* Slightly smaller so less overlap */
  }

  .topbar-inner {
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
  }

  .topbar-left, .topbar-right {
    gap: 0.8rem;
    justify-content: center;
    flex: unset;
  }

  .topbar-brand {
    order: -1;
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: 1rem;
    padding-bottom: 0.2rem;
    gap: 0.5rem;
    letter-spacing: 2px;
  }

  /* Hide decorative ornaments on tablet to reduce width */
  .brand-ornament {
    display: none;
  }

  .brand-lamp {
    height: 2.2rem;
  }

  .scroll-step {
    padding-left: 1.5rem;
    padding-right: 1rem;
    padding-top: 6rem;
    align-items: flex-start;
  }

  .main-heading {
    font-size: clamp(2rem, 10vw, 3.5rem);
    margin-bottom: 1rem;
    max-width: 55vw;
  }

  .info-card-container {
    max-width: 85vw;
  }

  .info-card-front,
  .info-card-back {
    min-height: 380px;
    padding: 2rem 1.5rem;
  }
}

/* ====== MOBILE ====== */
@media (max-width: 480px) {
  :root {
    --table-size: 90vmin; /* Small enough so the table arc stays away from card */
  }

  .topbar-inner {
    padding: 0.4rem 0.6rem;
    gap: 0.2rem;
  }

  .topbar-left, .topbar-right {
    gap: 0.4rem;
  }

  .topbar-brand {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    gap: 0.35rem;
  }

  /* Hide lamps on smallest screens too */
  .brand-lamp {
    height: 1.8rem;
  }

  .brand-icon {
    font-size: 1.5rem;
  }

  .topbar-link {
    font-size: 0.5rem;
    letter-spacing: 0.5px;
    padding: 0.35rem 0.5rem;
  }

  .topbar-link--cta {
    padding: 0.35rem 0.7rem;
    clip-path: polygon(
      6% 0%, 94% 0%, 100% 25%, 100% 75%, 94% 100%, 6% 100%, 0% 75%, 0% 25%
    );
  }

  /* Stack content vertically on small phones */
  .scroll-step {
    padding-left: 0.8rem;
    /* Push content away from the rotating table (bottom-right corner) */
    padding-right: 1rem;
    padding-top: 5.5rem;
    padding-bottom: 1rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }

  .desc-section {
    /* Explicit width: leave room so card never reaches the table */
    width: calc(100% - 0.4rem);
    padding: 0.5rem 0;
    overflow: hidden; /* clip any text that runs past the right edge */
  }

  .main-heading {
    /* Small enough that even 'BROCCOLI' fits on one line without mid-word break */
    font-size: clamp(1.1rem, 6vw, 1.8rem);
    max-width: 100%;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    letter-spacing: 0;
    /* Do NOT use word-break:break-word — it causes single letters on new lines */
    word-break: normal;
    overflow-wrap: normal;
    /* Hard-clip so text never visually bleeds past its box */
    overflow: hidden;
  }

  /* Prevent main heading ornament from overflowing */
  .main-heading::after {
    font-size: 0.6rem;
    letter-spacing: 2px;
  }

  /* ── CARD: make it narrower so it doesn't touch the table arc ── */
  .info-card-container {
    /* 88vw leaves a clear gap on the right away from the table */
    max-width: 88vw;
    width: 88vw;
    animation: none; /* disable float animation — reduces layout shift on mobile */
  }

  .info-card-front,
  .info-card-back {
    padding: 1.2rem 0.9rem;
    min-height: 260px;
    outline: 6px solid #2f150a;
    outline-offset: -6px;
    box-shadow:
      inset 0 0 0 8px #f3e9cc,
      inset 0 0 0 10px var(--clr-gold),
      inset 0 0 0 11px rgba(139, 26, 26, 0.4),
      inset 0 0 0 13px #2f150a,
      0 12px 35px rgba(0, 0, 0, 0.8);
  }

  /* Reduce label size */
  .info-card-label {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
  }

  .info-card-text {
    padding: 0.35rem 1.2rem;
    font-size: 0.82rem;
    line-height: 1.6;
  }

  .info-card-text strong {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    padding: 0 0.4rem 0.4rem;
    margin-bottom: 0.5rem;
  }

  /* Shrink side vertical text — keep them out of card body space */
  .info-card-text::before,
  .info-card-text::after {
    font-size: 0.5rem;
    line-height: 1.4;
    letter-spacing: 1.5px;
  }

  .info-card-text::before {
    padding-right: 0.35rem;
  }

  .info-card-text::after {
    padding-left: 0.35rem;
  }

  /* Shrink red seal stamp */
  .info-card-front::after {
    width: 44px;
    height: 44px;
    bottom: 14px;
    right: 14px;
    font-size: 0.75rem;
  }

  /* Shrink price display */
  .price-display {
    font-size: 2rem;
  }

  .order-btn {
    padding: 0.85rem 1.8rem;
    font-size: 0.75rem;
    letter-spacing: 3px;
  }

  .music-toggle {
    bottom: 0.6rem;
    right: 0.6rem;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* Reduce decorative elements that may overlap on mobile */
  .cloud-top-left {
    width: 55vw;
    opacity: 0.5;
  }

  .branch-bottom-left {
    width: 60vw;
    opacity: 0.5;
  }

  .cloud-middle-right {
    display: none; /* Hide middle cloud on very small screens */
  }

  .dragon-top-center {
    width: 35vw;
    opacity: 0.3;
  }

  .dragon-bottom-left {
    display: none;
  }
}

/* ====== VERY SMALL SCREENS (iPhone SE etc.) ====== */
@media (max-width: 375px) {
  :root {
    --table-size: 80vmin; /* Very small table for tiny screens */
  }

  .topbar-brand {
    font-size: 0.7rem;
  }

  .brand-lamp {
    display: none;
  }

  .main-heading {
    font-size: clamp(1.4rem, 8vw, 2rem);
    letter-spacing: 1px;
  }

  .info-card-front,
  .info-card-back {
    min-height: 270px;
    padding: 1.2rem 0.8rem;
  }

  .info-card-label {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
  }

  .info-card-text {
    font-size: 0.82rem;
    padding: 0.3rem 1.2rem;
  }

  /* Drop initial letter on very small screens (too large) */
  .info-card-text::first-letter {
    font-size: 1.8em;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .table-corner, .topbar { display: none; }
  .desc-section { position: static; opacity: 1 !important; transform: none !important; animation: none !important; margin-bottom: 3rem; }
  .scroll-drive { display: none; }
  .wooden-table { animation: none !important; }
  body { overflow: visible; height: auto; }
}

/* ======================== STEAM EFFECT ======================== */

.steam-container {
  position: fixed;
  right: -45vmin; 
  bottom: -45vmin;
  width: 40vmin;
  height: 40vmin;
  pointer-events: none;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 
   Each particle is a blurry wisp moving up.
   We have 4 particles offset slightly.
*/
.steam-particle {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(
    circle, 
    rgba(255,255,255,0.45) 0%, 
    rgba(255,240,220,0.2) 30%,
    rgba(255,255,255,0) 60%
  );
  filter: blur(22px);
  opacity: 0;
  animation: steamRise 4s infinite ease-out;
}

.steam-particle:nth-child(1) { animation-delay: 0s; transform: translate(-10%, 10%); width: 50%; height: 50%; }
.steam-particle:nth-child(2) { animation-delay: 1.5s; transform: translate(15%, -5%); width: 70%; height: 70%; }
.steam-particle:nth-child(3) { animation-delay: 2.8s; transform: translate(0, 5%); width: 40%; height: 40%; }
.steam-particle:nth-child(4) { animation-delay: 0.5s; transform: translate(-5%, -15%); width: 60%; height: 60%; }

@keyframes steamRise {
  0% {
    transform: translateY(20%) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.5;
  }
  40% {
    transform: translateY(-15%) scale(1.15);
    opacity: 0.3;
  }
  70% {
    transform: translateY(-40%) scale(1.3);
    opacity: 0.1;
  }
  100% {
    transform: translateY(-70%) scale(1.6);
    opacity: 0;
  }
}

/* ======================== DECORATIVE DRAGONS ======================== */

/* Shared base styles for all dragons */
.dragon {
  position: fixed;
  pointer-events: none;
  z-index: 90;
}

.dragon-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- Dragon 1: Top-Center --- */
.dragon-top-center {
  top: 5vh;
  left: 60%; 
  width: 25vw;
  height: auto;
  transform: translateX(-50%) rotate(0deg);
  opacity: 0.6;
  z-index: 50; /* Behind table content but visible */
}

.dragon-top-center .dragon-img {
  filter: 
    brightness(1.5) 
    sepia(1) 
    saturate(2) 
    hue-rotate(5deg)
    drop-shadow(0 0 10px rgba(212, 168, 83, 0.5));
}

/* --- Dragon 2: Bottom-Left --- */
.dragon-bottom-left {
  bottom: -5vh;
  left: 58%; 
  width: 20vw;
  height: auto;
  transform: translateX(-70%) rotate(0deg); /* Pointing towards the table */
  opacity: 0.4;
  z-index: 50;
}

.dragon-bottom-left .dragon-img {
  filter: 
    brightness(1.5) 
    sepia(1) 
    saturate(1.5) 
    hue-rotate(1deg);
  transform: scaleX(2) scaleY(2);
}


/* --- Dragon 3: Bottom-Right (Large, background watermark) --- */
.dragon-bottom-right {
  bottom: -10vh;
  right: -25vw;
  width: 50vw;  
  height: auto;
  opacity: 0.8; /* Make it more visible */
  pointer-events: none;
  z-index: 101; 
  mix-blend-mode: screen; /* Makes the gold shine against the dark bg */
}

.dragon-bottom-right .dragon-img {
  filter: 
    brightness(1.1) 
    sepia(1) 
    saturate(3) /* Deep rich gold */
    hue-rotate(5deg)
    drop-shadow(0 0 15px rgba(212, 168, 83, 0.4)); /* Golden glow */
  transform: scaleX(1) rotate(0deg); 
}

/* ==========================================================================
   DECORATIVE ELEMENTS (CLOUD & BRANCH)
   ========================================================================== */

.cloud-top-left {
  position: fixed;
  top: -5vh;
  left: -5vw;
  width: 35vw;
  max-width: 500px;
  z-index: 80;
  pointer-events: none;
  opacity: 0.8;
}

.cloud-top-left .cloud-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.branch-bottom-left {
  position: fixed;
  bottom: -5vh;
  left: -5vw;
  width: 45vw;
  max-width: 600px;
  z-index: 80;
  pointer-events: none;
  opacity: 0.9;
}

.branch-bottom-left .branch-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.cloud-middle-right {
  position: fixed;
  top: 35vh;
  right: 40vw;
  width: 30vw;
  max-width: 450px;
  z-index: 80;
  pointer-events: none;
  opacity: 0.7;
}

.cloud-middle-right .cloud-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ==========================================================================
   FLOATING GOLD PARTICLES — Ambient atmosphere
   ========================================================================== */

.particles {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.9), rgba(212, 168, 83, 0));
  box-shadow: 0 0 6px rgba(212, 168, 83, 0.4);
  opacity: 0;
  animation: particleFloat linear infinite;
}

.particle:nth-child(1)  { left:  5%; animation-duration: 18s; animation-delay:  0s;   width: 2px; height: 2px; }
.particle:nth-child(2)  { left: 12%; animation-duration: 22s; animation-delay:  2s;   width: 3px; height: 3px; }
.particle:nth-child(3)  { left: 20%; animation-duration: 16s; animation-delay:  4s;   width: 2px; height: 2px; }
.particle:nth-child(4)  { left: 28%; animation-duration: 24s; animation-delay:  1s;   width: 4px; height: 4px; }
.particle:nth-child(5)  { left: 35%; animation-duration: 20s; animation-delay:  6s;   width: 2px; height: 2px; }
.particle:nth-child(6)  { left: 42%; animation-duration: 19s; animation-delay:  3s;   width: 3px; height: 3px; }
.particle:nth-child(7)  { left: 15%; animation-duration: 25s; animation-delay:  5s;   width: 2px; height: 2px; }
.particle:nth-child(8)  { left: 55%; animation-duration: 21s; animation-delay:  7s;   width: 3px; height: 3px; }
.particle:nth-child(9)  { left:  8%; animation-duration: 17s; animation-delay:  8s;   width: 2px; height: 2px; }
.particle:nth-child(10) { left: 38%; animation-duration: 23s; animation-delay:  0.5s; width: 4px; height: 4px; }
.particle:nth-child(11) { left: 48%; animation-duration: 19s; animation-delay:  9s;   width: 2px; height: 2px; }
.particle:nth-child(12) { left: 25%; animation-duration: 26s; animation-delay:  1.5s; width: 3px; height: 3px; }
.particle:nth-child(13) { left: 33%; animation-duration: 20s; animation-delay: 10s;   width: 2px; height: 2px; }
.particle:nth-child(14) { left: 18%; animation-duration: 22s; animation-delay:  3.5s; width: 3px; height: 3px; }
.particle:nth-child(15) { left: 45%; animation-duration: 18s; animation-delay: 11s;   width: 2px; height: 2px; }
.particle:nth-child(16) { left: 10%; animation-duration: 24s; animation-delay:  4.5s; width: 4px; height: 4px; }
.particle:nth-child(17) { left: 52%; animation-duration: 21s; animation-delay: 12s;   width: 2px; height: 2px; }
.particle:nth-child(18) { left: 30%; animation-duration: 19s; animation-delay:  6.5s; width: 3px; height: 3px; }
.particle:nth-child(19) { left: 40%; animation-duration: 23s; animation-delay: 13s;   width: 2px; height: 2px; }
.particle:nth-child(20) { left: 22%; animation-duration: 20s; animation-delay:  2.5s; width: 3px; height: 3px; }

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
    transform: translateY(80vh) translateX(10px) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: translateY(40vh) translateX(-15px) scale(0.8);
  }
  90% {
    opacity: 0.1;
    transform: translateY(5vh) translateX(20px) scale(0.5);
  }
  100% {
    transform: translateY(-5vh) translateX(0) scale(0);
    opacity: 0;
  }
}

/* ==========================================================================
   CINEMATIC VIGNETTE OVERLAY
   ========================================================================== */

.vignette {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  background: 
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(10, 5, 5, 0.4) 80%, rgba(10, 5, 5, 0.85) 100%),
    linear-gradient(180deg, rgba(10, 5, 5, 0.3) 0%, transparent 15%, transparent 85%, rgba(10, 5, 5, 0.4) 100%);
}

/* ==========================================================================
   SCROLL PROGRESS BAR — left edge
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  z-index: 1100;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--clr-gold) 0%,
    var(--clr-gold-light) 50%,
    var(--clr-gold) 100%
  );
  transform-origin: top center;
  animation: scrollProgress linear both;
  animation-timeline: --main-scroll;
  box-shadow: 0 0 10px rgba(212, 168, 83, 0.6), 0 0 3px rgba(212, 168, 83, 0.4);
  border-radius: 0 2px 2px 0;
}

@keyframes scrollProgress {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ==========================================================================
   ENHANCED PLATE GLOW — Active dish gets a golden aura
   ========================================================================== */

.plate-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  box-shadow:
    /* Depth shadow */
    0 10px 35px rgba(0,0,0,0.5),
    0 3px 8px rgba(0,0,0,0.35),
    /* Inner ceramic highlight */
    inset 0 2px 6px rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    /* Golden ambient glow — layered */
    0 0 20px rgba(212, 168, 83, 0.2),
    0 0 45px rgba(212, 168, 83, 0.1),
    0 0 80px rgba(212, 168, 83, 0.05);
  animation: counterRotate auto linear both;
  animation-timeline: --main-scroll;
  transition: box-shadow 0.5s var(--ease);
  /* Slight warm tint to make food pop */
  filter: contrast(1.04) saturate(1.08);
}

/* ==========================================================================
   ENHANCED SCROLL SECTION TRANSITIONS
   ========================================================================== */

.desc-section {
  position: relative;
  top: auto; 
  left: auto;
  opacity: 1;
  transform: translateY(0);
  animation: appear-on-scroll linear both;
  animation-timeline: view();
  animation-range: entry 20% cover 50%, exit 0% exit 80%;
  /* Atmospheric ink-wash aura */
  padding: 2rem 0;
}

/* Chinese atmosphere — misty ink wash vignette around each section */
.desc-section::before {
  content: '';
  position: absolute;
  top: -5%;
  left: -10%;
  right: -10%;
  bottom: -5%;
  background:
    /* Side glow from gold lantern light */
    radial-gradient(ellipse 30% 40% at 20% 50%, rgba(212, 168, 83, 0.03) 0%, transparent 100%),
    radial-gradient(ellipse 30% 40% at 80% 50%, rgba(212, 168, 83, 0.03) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Floating Chinese character watermark behind each dish */
.desc-section::after {
  content: '香';  /* 香 = "fragrant" */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Noto Serif SC', serif;
  font-size: 15rem;
  font-weight: 900;
  color: rgba(212, 168, 83, 0.02);
  pointer-events: none;
  z-index: -1;
  line-height: 1;
}

@keyframes appear-on-scroll {
  entry 0% { opacity: 0; transform: translateY(40px) scale(0.97); filter: blur(4px); }
  entry 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  exit 0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  exit 100% { opacity: 0; transform: translateY(-40px) scale(0.97); filter: blur(4px); }
}

/* ==========================================================================
   EMBER SPARKS — Tiny glowing particles near the active dish
   ========================================================================== */

.ember-container {
  position: fixed;
  right: -40vmin;
  bottom: -40vmin;
  width: 50vmin;
  height: 50vmin;
  pointer-events: none;
  z-index: 190;
}

.ember {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--clr-gold-light);
  box-shadow: 0 0 4px var(--clr-gold), 0 0 10px rgba(255, 107, 53, 0.5);
  opacity: 0;
  animation: emberFloat ease-out infinite;
}

.ember:nth-child(1) { left: 40%; bottom: 45%; animation-duration: 3.5s; animation-delay: 0s;   width: 2px; height: 2px; }
.ember:nth-child(2) { left: 55%; bottom: 50%; animation-duration: 4.2s; animation-delay: 0.8s; width: 3px; height: 3px; }
.ember:nth-child(3) { left: 45%; bottom: 55%; animation-duration: 3.8s; animation-delay: 1.5s; width: 2px; height: 2px; }
.ember:nth-child(4) { left: 50%; bottom: 48%; animation-duration: 4.5s; animation-delay: 0.3s; width: 4px; height: 4px; }
.ember:nth-child(5) { left: 38%; bottom: 52%; animation-duration: 3.2s; animation-delay: 2.0s; width: 2px; height: 2px; }
.ember:nth-child(6) { left: 52%; bottom: 42%; animation-duration: 4.0s; animation-delay: 1.2s; width: 3px; height: 3px; }
.ember:nth-child(7) { left: 48%; bottom: 58%; animation-duration: 3.6s; animation-delay: 0.5s; width: 2px; height: 2px; }
.ember:nth-child(8) { left: 42%; bottom: 46%; animation-duration: 4.8s; animation-delay: 1.8s; width: 3px; height: 3px; }

/* ==========================================================================
   MUSIC TOGGLE BUTTON — Traditional Chinese Ornamental Style
   ========================================================================== */

.music-toggle {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 9999;
  width: 52px;
  height: 52px;
  border: 2px solid var(--clr-gold);
  border-radius: 4px;
  /* Red lacquer background with depth */
  background:
    radial-gradient(circle at 30% 30%, rgba(220, 50, 50, 0.25), transparent 60%),
    linear-gradient(145deg, #5C1010 0%, #2E0808 50%, #1A0505 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--clr-gold);
  font-family: 'Cinzel Decorative', 'Noto Serif SC', 'SimSun', serif;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--ease);
  box-shadow:
    /* Ornate multi-layer border like the table rim */
    0 0 0 1px #2E0C0C,
    0 0 0 3px rgba(212, 168, 83, 0.3),
    0 0 0 4px #2E0C0C,
    /* Golden glow */
    0 0 15px rgba(212, 168, 83, 0.2),
    0 0 30px rgba(212, 168, 83, 0.08),
    /* Depth shadow */
    0 4px 12px rgba(0, 0, 0, 0.5);
  /* Subtle rotation for Chinese diamond/rhombus feel */
  overflow: hidden;
}

/* Inner decorative corner marks (Chinese window frame motif) */
.music-toggle::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(212, 168, 83, 0.35);
  border-radius: 2px;
  pointer-events: none;
}

/* Animated gold shimmer sweep */
.music-toggle::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 168, 83, 0.08),
    rgba(240, 212, 138, 0.15),
    rgba(212, 168, 83, 0.08),
    transparent
  );
  animation: musicBtnShimmer 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes musicBtnShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.music-toggle:hover {
  border-color: var(--clr-gold-light);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 80, 80, 0.3), transparent 60%),
    linear-gradient(145deg, #7A1515 0%, #3D0C0C 50%, #2A0808 100%);
  box-shadow:
    0 0 0 1px #2E0C0C,
    0 0 0 3px rgba(240, 212, 138, 0.5),
    0 0 0 4px #2E0C0C,
    0 0 20px rgba(212, 168, 83, 0.35),
    0 0 45px rgba(212, 168, 83, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
  color: var(--clr-gold-light);
  text-shadow: 0 0 12px rgba(212, 168, 83, 0.6);
}

.music-toggle:active {
  transform: scale(0.96);
}

.music-toggle.muted {
  border-color: rgba(184, 148, 111, 0.25);
  background:
    linear-gradient(145deg, #1A0A0A 0%, #0A0505 100%);
  box-shadow:
    0 0 0 1px #1A0A0A,
    0 0 0 3px rgba(184, 148, 111, 0.1),
    0 0 0 4px #1A0A0A,
    0 0 8px rgba(0, 0, 0, 0.3);
  color: rgba(184, 148, 111, 0.4);
  opacity: 0.7;
}

.music-toggle.muted::after {
  animation: none;
  display: none;
}

.music-toggle.muted:hover {
  opacity: 1;
  border-color: rgba(212, 168, 83, 0.4);
  color: rgba(212, 168, 83, 0.7);
  box-shadow:
    0 0 0 1px #1A0A0A,
    0 0 0 3px rgba(212, 168, 83, 0.2),
    0 0 0 4px #1A0A0A,
    0 0 12px rgba(212, 168, 83, 0.1);
}

.music-icon {
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(212, 168, 83, 0.3);
  transition: text-shadow 0.3s ease, transform 0.3s ease;
}

.music-toggle:hover .music-icon {
  text-shadow: 0 0 14px rgba(212, 168, 83, 0.6), 0 0 4px rgba(255, 200, 100, 0.3);
}

.music-icon--off {
  font-size: 1.1rem;
  opacity: 0.7;
}

@keyframes emberFloat {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
    transform: translate(5px, -10px) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translate(-8px, -35px) scale(0.7);
    background: var(--clr-ember);
  }
  100% {
    opacity: 0;
    transform: translate(10px, -70px) scale(0.2);
  }
}