/* cocktails — page-specific styles. Shared fonts/colors/reset live in base.css. */

  :root {
    /* Premium dark charcoal + warm cream + muted copper.
       Boutique hotel bar meets premium editorial spirits brand. */
    --transition-slow: 950ms cubic-bezier(0.7, 0, 0.2, 1);

    /* === Stage placement (tweak these if alignment looks off) === */
    --table-bottom: 5%;        /* table image distance from floor */
    --bottle-bottom: 53%;      /* raise/lower so bottle base sits on wood top */
    --cocktail-bottom: 51%;    /* raise/lower so glass base sits on wood top */
    --bottle-anchor: 40%;      /* shift bottle (smaller = bottle moves screen-RIGHT) */
    --cocktail-anchor: 37%;    /* desktop cocktail anchor (smaller = moves screen-LEFT). Pulled in from 52% so the glass doesn't drift toward the table's right edge on desktop while still leaving room next to the bottle. */
  }

  html, body {
    height: 100%;
    overflow: hidden;
    background: #000;
    color: var(--cream);
    font-family: 'Choplin', 'Inter', sans-serif;
    font-weight: 200;
    -webkit-font-smoothing: antialiased;
  }

  /* ================ STAGE ================ */
  .stage {
    position: relative;
    width: 100%;
    height: 100vh;
    background:
      radial-gradient(ellipse at 35% 45%, rgba(216, 184, 138, 0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 60%, rgba(216, 184, 138, 0.05) 0%, transparent 45%),
      linear-gradient(180deg, #050403 0%, #0d0a07 60%, #000 100%);
    overflow: hidden;
  }

  /* Film grain — adds tactile boutique-bar character */
  .texture-grain {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.18;
    mix-blend-mode: screen;
    background-image: url('../images/texture-grain.png');
    background-size: 256px 256px;
    background-repeat: repeat;
  }

  .dust {
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(216, 184, 138, 0.5), transparent),
      radial-gradient(1px 1px at 80% 70%, rgba(216, 184, 138, 0.35), transparent),
      radial-gradient(1px 1px at 60% 20%, rgba(216, 184, 138, 0.4), transparent),
      radial-gradient(1px 1px at 40% 80%, rgba(216, 184, 138, 0.3), transparent),
      radial-gradient(1px 1px at 90% 40%, rgba(216, 184, 138, 0.4), transparent);
    opacity: 0.55;
    animation: drift 22s linear infinite;
  }
  @keyframes drift {
    0%, 100% { transform: translate3d(0,0,0); }
    50%      { transform: translate3d(-10px, -8px, 0); }
  }

  /* ================ HEADER ================ */
  header {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 32px 56px;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 30;
  }
  .brand {
    height: 36px;
    width: auto;
    display: block;
    /* the logo is white text on black — lighten knocks out the black bg */
    mix-blend-mode: lighten;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
  }
  .header-tagline {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--cream-dim);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gold);
  }

  /* ================ MAIN LAYOUT ================ */
  .scene {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 60% 40%;
    z-index: 5;
  }

  /* ============ VISUAL STAGE (table + bottle + cocktail) ============ */
  .visual-stage {
    position: relative;
    overflow: visible;
    height: 100%;
  }

  /*
    POSITIONING NOTES — every value is relative to the visual-stage height.
    The table image is square; the wooden top sits at ~35% from the TOP of the image,
    or ~65% up from the bottom of the image.

    Layout from bottom of stage:
      0% .................. floor
      5% .................. table image starts (gold base)
      ~44% ................ wooden table-top surface (bottle/cocktail land here)
      63% ................. table image ends (top of bottle's neck region)
  */

  /* Table — anchors everything */
  .table {
    position: absolute;
    left: 50%;
    bottom: var(--table-bottom);
    transform: translateX(-50%);
    width: clamp(380px, 58%, 580px);
    aspect-ratio: 1 / 1;
    max-height: 58%;
    z-index: 2;
    pointer-events: none;
  }
  .table img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    mix-blend-mode: lighten;
    filter: drop-shadow(0 30px 30px rgba(0,0,0,0.7));
  }
  /* Soft halo behind the table */
  .table-halo {
    position: absolute;
    left: 50%;
    bottom: var(--table-bottom);
    transform: translateX(-50%);
    width: clamp(440px, 68%, 700px);
    height: 55%;
    background: radial-gradient(ellipse at center 60%,
      rgba(216, 184, 138, 0.14) 0%,
      rgba(216, 184, 138, 0.05) 30%,
      transparent 65%);
    z-index: 1;
    filter: blur(12px);
    pointer-events: none;
  }

  /* Bottle — sits on the LEFT half of the table top.
     Width clamp tuned for the new portrait-crop bottle WebP (1:3.92). The
     previous clamp was sized for a 1:1 image where ~64% of the canvas was
     empty space; with the new image filling the frame, the same container
     would render the bottle ~3x larger. These values bring it back close
     to the old visual size while keeping the new image's proper proportions. */
  .bottle {
    position: absolute;
    bottom: var(--bottle-bottom);
    right: var(--bottle-anchor);
    width: clamp(60px, 10%, 100px);
    aspect-ratio: 1 / 2.4;
    z-index: 5;
    pointer-events: none;
    /* Idle float removed — was drawing the eye to the bottle's edge alignment
       on the table. Bottle stays still. To bring it back, add:
         animation: bottleIdle 7s ease-in-out infinite;
       (keyframes preserved below). */
  }
  @keyframes bottleIdle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
  .bottle img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    /* mix-blend-mode removed: the new bottle WebP has a real alpha channel and
       'lighten' would draw a faint box around the image bounds. */
    filter: drop-shadow(0 18px 14px rgba(0,0,0,0.65));
  }

  /* Cocktail frames — sit on the RIGHT half of the table top, animated */
  .cocktail-stack {
    position: absolute;
    /* lower than bottle to compensate for empty space below glass in photos */
    bottom: var(--cocktail-bottom);
    left: var(--cocktail-anchor);
    width: clamp(160px, 26%, 240px);
    aspect-ratio: 1 / 1.6;
    z-index: 6;
    pointer-events: none;
  }
  .cocktail-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(60px) scale(0.92);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
  }
  .cocktail-frame.active {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  .cocktail-frame.exit-left {
    opacity: 0;
    transform: translateX(-60px) scale(0.92);
  }
  .cocktail-frame img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    mix-blend-mode: lighten;
    filter: drop-shadow(0 18px 18px rgba(0,0,0,0.65));
  }

  /* ============ TEXT STAGE (right side) ============ */
  .text-stage {
    position: relative;
    overflow: hidden;
    padding: 130px 80px 100px 0;
    display: flex;
    align-items: center;
  }

  .slides-wrap {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateX(70px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    pointer-events: none;
  }
  .slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .slide.exit-left {
    opacity: 0;
    transform: translateX(-70px);
  }

  .step-label {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.5em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 14px;
  }
  .step-label::before {
    content: '';
    width: 36px; height: 1px;
    background: var(--gold);
  }
  .cocktail-name {
    font-family: 'Whiskey Jill', 'Neue Haas Grotesk Display Pro', serif;
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1.0;
    font-weight: 400;
    margin-bottom: 14px;
    letter-spacing: 0.005em;
  }
  .cocktail-name em {
    font-family: 'Whiskey Jill', 'Neue Haas Grotesk Display Pro', serif;
    font-style: normal;
    font-weight: 400;
    color: var(--gold);
  }
  .cocktail-name em {
    font-style: italic;
    font-weight: 700;
    color: var(--gold);
  }
  .tagline {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-size: 18px;
    color: var(--cream-dim);
    margin-bottom: 26px;
    font-weight: 300;
    letter-spacing: 0.005em;
  }
  .description {
    font-family: 'Choplin', sans-serif;
    font-weight: 200;
    font-size: 14px;
    line-height: 1.75;
    color: var(--cream-dim);
    margin-bottom: 26px;
    max-width: 440px;
  }
  .ingredients { list-style: none; margin-bottom: 22px; }
  .ingredients li {
    font-family: 'Choplin', sans-serif;
    font-weight: 200;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 9px 0;
    border-bottom: 1px solid rgba(244, 239, 230, 0.08);
    display: flex; justify-content: space-between;
    color: var(--cream);
  }
  .ingredients li span:last-child {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    color: var(--gold);
    font-size: 15px;
    letter-spacing: 0;
  }
  .recipe-toggle {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 12px 26px;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 200ms;
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    align-self: flex-start;
    margin-top: 6px;
  }
  .recipe-toggle:hover {
    background: var(--gold);
    color: #0d0a07;
  }

  /* ============ NAV CONTROLS ============ */
  .nav-controls {
    position: absolute;
    bottom: 5vh;
    right: 60px;
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 25;
  }
  .arrow-btn {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(244, 239, 230, 0.25);
    background: rgba(0,0,0,0.3);
    color: var(--cream);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 250ms;
    backdrop-filter: blur(4px);
  }
  .arrow-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: scale(1.06);
  }
  .arrow-btn:disabled { opacity: 0.25; cursor: not-allowed; }
  .arrow-btn svg { width: 17px; height: 17px; }

  .progress {
    display: flex; align-items: center; gap: 8px;
    margin-right: 4px;
  }
  .progress-current {
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    font-style: italic;
    font-size: 32px;
    color: var(--gold);
    font-weight: 700;
    line-height: 1;
  }
  .progress-divider {
    width: 28px; height: 1px;
    background: var(--cream-dim);
    margin: 0 4px;
  }
  .progress-total {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: var(--cream-dim);
  }

  /* ============ DOT NAV ============ */
  .dot-nav {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 20;
  }
  .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(244, 239, 230, 0.2);
    border: none;
    cursor: pointer;
    transition: all 300ms;
    position: relative;
  }
  .dot::after {
    content: attr(data-label);
    position: absolute;
    left: 22px; top: 50%;
    transform: translateY(-50%);
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cream-dim);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
  }
  .dot:hover::after { opacity: 1; }
  .dot:hover { background: var(--gold); }
  .dot.active {
    background: var(--gold);
    transform: scale(1.4);
    box-shadow: 0 0 0 4px rgba(216, 184, 138, 0.15);
  }

  /* ============ MODAL ============ */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms;
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 60px;
  }
  .modal-backdrop.open { opacity: 1; pointer-events: auto; }
  .modal {
    max-width: 560px; width: 100%;
    background: linear-gradient(180deg, #1a140e 0%, #0a0807 100%);
    border: 1px solid rgba(216, 184, 138, 0.3);
    padding: 60px 56px;
    position: relative;
    transform: translateY(30px);
    opacity: 0;
    transition: all 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .modal-backdrop.open .modal {
    transform: translateY(0); opacity: 1;
  }
  .modal-close {
    position: absolute;
    top: 18px; right: 18px;
    width: 36px; height: 36px;
    border: none; background: transparent;
    color: var(--cream-dim);
    font-size: 24px; cursor: pointer;
  }
  .modal-close:hover { color: var(--gold); }
  .modal h3 {
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    font-size: 38px;
    margin-bottom: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .modal h3 em {
    color: var(--gold);
    font-style: italic;
    font-weight: 700;
  }
  .modal ol { list-style: none; counter-reset: step; }
  .modal ol li {
    counter-increment: step;
    padding: 16px 0 16px 50px;
    position: relative;
    border-top: 1px solid rgba(244, 239, 230, 0.08);
    font-family: 'Choplin', sans-serif;
    font-weight: 200;
    font-size: 14px;
    line-height: 1.7;
  }
  .modal ol li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0; top: 14px;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    font-style: italic;
    font-size: 22px;
    color: var(--gold);
    font-weight: 500;
  }

  /* ============ DEBUG ALIGNMENT GUIDES (press D to toggle) ============ */
  .debug-guide {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    z-index: 50;
    pointer-events: none;
    display: none;
  }
  .debug-guide::after {
    content: attr(data-label);
    position: absolute;
    right: 8px; top: -16px;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 2px;
  }
  .debug-guide.bottle {
    bottom: var(--bottle-bottom);
    background: #ff5757;
  }
  .debug-guide.bottle::after {
    background: #ff5757; color: #000;
  }
  .debug-guide.cocktail {
    bottom: var(--cocktail-bottom);
    background: #57c8ff;
  }
  .debug-guide.cocktail::after {
    background: #57c8ff; color: #000;
  }
  body.debug .debug-guide { display: block; }

  /* ============ HINT ============ */
  .hint {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--cream-dim);
    z-index: 6;
    animation: hintBlink 2.4s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes hintBlink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1100px) {
    .scene { grid-template-columns: 55% 45%; }
    .text-stage { padding: 130px 40px 100px 0; }
  }
  @media (max-width: 860px) {
    :root {
      /* Override placement so bottle/glass sit on the WOOD surface of the
         (now smaller) mobile table. Switching to vh keeps everything locked
         together — the table is sized in vh below, so percentages don't
         drift across phone sizes. */
      --bottle-bottom: 27.5vh;
      --cocktail-bottom: 27vh;
      /* Mobile-only horizontal anchors. The table is only 30vh wide and
         centered, but the visual-stage is full viewport width — so the
         desktop anchor percentages (which assumed a 60%-width visual-stage)
         pushed both items past the table edges. Pulling both anchors
         toward 50% lands them on the actual centered table. Tune both
         numbers in small steps (1-2 percentage points) if either is off. */
      --bottle-anchor: 40%;   /* bottle's distance from RIGHT edge; smaller = more right */
      --cocktail-anchor: 42%; /* cocktail's distance from LEFT edge; bigger = more right */
    }

    .scene {
      grid-template-columns: 1fr;
      grid-template-rows: 44vh 1fr;
      /* Push the grid down so the visual-stage (table + bottle + cocktail)
         starts BELOW the header instead of being obscured by the logo at
         the top. ~64px = header padding (14+28) + brand image height (26). */
      padding-top: 64px;
    }

    /* Header gets a soft black-to-transparent fade so the bottle
       behind it gets masked instead of awkwardly cropped by the logo. */
    header {
      padding: 14px 18px 28px 18px;
      background: linear-gradient(to bottom,
        rgba(0,0,0,0.92) 0%,
        rgba(0,0,0,0.7) 55%,
        rgba(0,0,0,0) 100%);
      z-index: 30;
    }
    .brand { height: 26px; }
    .header-tagline { display: none; }

    /* Stage props sized in vh so they scale together with the visual-stage.
       min-width: 0 overrides desktop clamp() floors that are wider than
       phone viewports. */
    .table {
      width: 30vh;
      min-width: 0;
      max-width: 88vw;
      bottom: 2vh;
      max-height: none;
    }
    .table-halo {
      width: 36vh;
      min-width: 0;
      max-width: 96vw;
    }
    .bottle {
      /* Shrunk to match the new portrait-crop bottle WebP — see the desktop
         .bottle rule above for context. */
      width: 6vh;
      min-width: 0;
      max-width: 55px;
    }
    .cocktail-stack {
      width: 12vh;
      min-width: 0;
      max-width: 100px;
    }

    /* Text panel anchored to the top so the cocktail name is the first
       thing visible — was being centered and pushed off-screen. */
    .text-stage {
      padding: 18px 24px 90px 24px;
      align-items: flex-start;
      overflow-y: auto;
    }
    .slide { justify-content: flex-start; }

    .step-label { margin-bottom: 10px; font-size: 9px; }
    .cocktail-name { font-size: 36px; margin-bottom: 8px; }
    .tagline { font-size: 16px; margin-bottom: 14px; }
    .description {
      font-size: 13px;
      max-width: none;
      margin-bottom: 16px;
      line-height: 1.6;
    }
    .ingredients { margin-bottom: 14px; }
    .ingredients li { padding: 7px 0; font-size: 12px; }
    .ingredients li span:last-child { font-size: 14px; }
    .recipe-toggle { padding: 11px 22px; font-size: 9px; }

    /* Compact nav controls so they don't crowd the small viewport */
    /* Move dot-nav to bottom-center on mobile so it doesn't crowd the
       headline/cards on the left edge. Hide the hover labels (touch can't
       hover, and they were overlapping the drink title text). */
    .dot-nav {
      left: 50%;
      top: auto;
      bottom: 86px;
      transform: translateX(-50%);
      flex-direction: row;
      gap: 16px;
    }
    .dot::after { display: none; }
    /* Lift the arrows further off the viewport bottom so they clear iOS home
       indicator / mobile browser chrome instead of feeling cut off. */
    .nav-controls {
      right: 16px;
      bottom: calc(48px + env(safe-area-inset-bottom, 0px));
      gap: 14px;
    }
    .arrow-btn { width: 40px; height: 40px; }
    .progress-current { font-size: 22px; }
    .progress-divider { width: 22px; }

    .hint { font-size: 9px; bottom: 70px; }
  }