/* ==========================================================================
   styles.css — Patatje Oorlog landing page
   Sections:
     1. CSS custom properties (design tokens)
     2. Reset & base
     3. Noise grain overlay
     4. Typography helpers
     5. Navigation
     6. Buttons
     7. Email input
     8. Hero section
     9. Marquee band
    10. 3D canvas / scroll stage
    11. Ingredient pop labels
    12. Step text overlay
    13. Value prop cards
    14. Progress bar
    15. Toast notification
    16. Footer
    17. Keyframe animations
    18. Responsive tweaks
   ========================================================================== */


/* ── 1. Design tokens ──────────────────────────────────────────────────── */
:root {
    --parchment:   #FDF5E6;
    --parchmentDk: #F3E9D2;
    --terracotta:  #D26938;
    --terracottaDk:#C05C36;
    --rust:        #B84A29;
    --rustDk:      #A53F21;
    --ink:         #3A3532;
    --font-display: 'Balabeloo', 'Chewy', system-ui, sans-serif;
    --font-body:    'Chewy', system-ui, sans-serif;
    /* Typed user data only — see DESIGN.md §2. Never for display copy. */
    --font-ui:      ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }


  /* ── 2. Reset & base ───────────────────────────────────────────────────── */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background: var(--parchment);
    color: var(--ink);
    font-family: var(--font-body);
    overflow-x: hidden;
  }


  /* ── 3. Noise grain overlay ────────────────────────────────────────────── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: .25;
  }


  /* ── 4. Typography helpers ─────────────────────────────────────────────── */
  .font-display { font-family: var(--font-display); }
  .font-body    { font-family: var(--font-body); }


  /* ── 5. Navigation ─────────────────────────────────────────────────────── */
  #navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background .4s, box-shadow .4s;
  }

  #navbar.scrolled {
    background: rgba(253, 245, 230, .95);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 28px rgba(58, 53, 50, .10);
  }

  /* Brand lockup — the logo artwork, for the same reason as the hero title:
     Balabeloo isn't licensed for web, so set as text this renders in Chewy. */
  .nav-logo {
    display: flex;
    align-items: center;
    line-height: 0;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  }

  .nav-logo img {
    height: 1.75rem;
    width: auto;
    display: block;
  }

  .nav-logo:hover {
    transform: scale(1.04);
  }


  /* ── 6. Buttons ────────────────────────────────────────────────────────── */
  .btn-primary {
    background: var(--terracotta);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 50px;
    padding: .75rem 2rem;
    box-shadow: 0 6px 0 var(--terracottaDk), 0 10px 36px rgba(210, 105, 56, .45);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    cursor: pointer;
    border: none;
    outline: none;
    display: inline-block;
  }

  .btn-primary:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 9px 0 var(--terracottaDk), 0 16px 48px rgba(210, 105, 56, .55);
  }

  .btn-primary:active {
    transform: translateY(5px) scale(0.97);
    box-shadow: 0 1px 0 var(--terracottaDk), 0 4px 16px rgba(210, 105, 56, .3);
  }

  .btn-secondary {
    background: transparent;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 50px;
    padding: .65rem 1.5rem;
    border: 2.5px solid var(--terracotta);
    transition: background .2s cubic-bezier(.34,1.56,.64,1), color .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
    cursor: pointer;
  }

  .btn-secondary:hover {
    background: var(--ink);
    color: var(--parchment);
    transform: scale(1.03);
  }


  /* ── 7. Email input ────────────────────────────────────────────────────── */
  .email-wrap {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    background: var(--parchment);
    border: 2.5px solid var(--terracotta);
    border-radius: 50px;
    padding: .35rem .35rem .35rem 1.25rem;
    box-shadow: 0 5px 0 rgba(192, 92, 54, .15), 0 12px 32px rgba(58, 53, 50, .08);
    transition: border-color .2s, box-shadow .2s;
  }

  .email-wrap:focus-within {
    border-color: var(--terracotta);
    box-shadow: 0 5px 0 var(--terracottaDk), 0 12px 36px rgba(210, 105, 56, .25);
  }

  .email-wrap input {
    flex: 1;
    min-width: 180px;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-ui);
    font-size: .95rem;
    color: var(--ink);
  }

  .email-wrap input::placeholder {
    color: var(--ink);
    opacity: .55;
  }


  /* ── 8. Hero section ───────────────────────────────────────────────────── */

  /* 3D claymation title canvas */
  #title-canvas-wrap {
    width: 100%;
    max-width: 680px;
    line-height: 0;
  }

  #title-canvas { display: none; }

  /* The hero title is the logo artwork. Sized off the viewport so it scales
     with the rest of the hero, capped so it never outgrows its column. */
  .hero-title {
    line-height: 0;
  }

  .hero-title img {
    /* Floor matches the 640px rule's cap so the logo doesn't jump size as it
       crosses the breakpoint. */
    width: clamp(20rem, 42vw, 34rem);
    height: auto;
    display: block;
  }

  .hero-sub {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    max-width: 520px;
    line-height: 1.55;
  }

  /* Background blob decorations */
  .hero-blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }

  .hero-blob--mustard {
    top: -10%; right: -15%;
    width: 65vw; height: 65vw;
    max-width: 750px; max-height: 750px;
    background: radial-gradient(ellipse, rgba(210, 105, 56,.18) 0%, transparent 65%);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  }

  .hero-blob--accent {
    bottom: -5%; left: -10%;
    width: 45vw; height: 45vw;
    max-width: 540px; max-height: 540px;
    background: radial-gradient(ellipse, rgba(192, 92, 54,.08) 0%, transparent 65%);
    border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  }

  /* Eyebrow badge */
  .badge-pill {
    background: var(--terracotta);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .4rem 1.1rem;
    border-radius: 50px;
    box-shadow: 0 4px 0 var(--terracottaDk), 0 8px 24px rgba(210, 105, 56, .4);
  }

  /* Stagger-reveal base state */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
  }

  /* Floating emoji decorations */
  .float-emoji {
    position: absolute;
    pointer-events: none;
    animation: floaty 5s ease-in-out infinite;
    font-size: 2rem;
    user-select: none;
  }

  /* Scroll hint arrow */
  .scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    opacity: .4;
    transition: opacity .4s;
  }

  .scroll-hint__bar {
    width: 2px;
    height: 32px;
    background: var(--ink);
    border-radius: 2px;
    animation: scrollpulse 1.6s ease-in-out infinite;
  }







  /* ── 10. Scroll experience ─────────────────────────────────────────────── */
  #scroll-experience {
    position: relative;
    /* 100vh of sticky stage + 9 scroll beats of 50vh (BEATS in js/scene.js).
       One beat per reveal, so every gap between steps is the same length.
       Change the beat size here and the choreography stays proportional. */
    height: calc(100vh + 450vh);
  }

  #canvas-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  #three-canvas {
    position: absolute;
    inset: 0;
    width:  100% !important;
    height: 100% !important;
    z-index: 1;
  }

  /* Hero text/form overlay — fades out on scroll */
  #hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem 1.5rem 4rem;
    overflow: hidden;
    pointer-events: auto;
  }

  @media (min-width: 768px) {
    #hero-overlay { padding-left: 2.5rem; padding-right: 2.5rem; }
  }

  /* Scroll-progress pill */
  #scroll-pill {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(58, 53, 50, .07);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(58, 53, 50, .14);
    border-radius: 40px;
    padding: .4rem 1.1rem;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: .5rem;
    opacity: 0;
    transition: opacity .4s;
    z-index: 5;
    pointer-events: none;
  }

  /* Step text */
  #step-text {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s;
    z-index: 5;
  }

  #step-text.visible { opacity: 1; }

  #step-text h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--rust);
    letter-spacing: -.01em;
  }

  #step-text p {
    font-family: var(--font-body);
    font-size: clamp(.85rem, 2vw, 1.05rem);
    color: var(--ink);
    margin-top: .3rem;
  }


  /* ── 11. Ingredient pop labels ─────────────────────────────────────────── */
  .ing-label {
    position: absolute;
    z-index: 2;
    background: var(--ink);
    color: var(--parchment);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 40px;
    padding: .45rem 1.1rem;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: scale(.6) translateY(12px);
    transition: opacity .4s, transform .4s, box-shadow .2s;
    display: flex;
    align-items: center;
    gap: .45rem;
    user-select: none;
  }

  /* Arrow indicator — slides right on hover */
  .ing-label::after {
    content: '→';
    font-size: .85em;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
    margin-left: .1rem;
    color: var(--terracotta);
  }

  .ing-label:hover {
    background: var(--ink);
    box-shadow: 0 0 0 2.5px var(--terracotta), 0 8px 28px rgba(210, 105, 56,.25);
    transform: scale(1.06) translateY(-1px);
  }

  .ing-label:hover::after {
    opacity: 1;
    transform: translateX(0);
  }

  .ing-label:active {
    transform: scale(0.97) translateY(1px);
  }

  /* One-time attention pulse when the label first becomes visible */
  .ing-label.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: labelPulse 0.6s ease-out 0.4s 1;
  }

  @keyframes labelPulse {
    0%   { box-shadow: 0 0 0 0 rgba(210, 105, 56,.55); }
    60%  { box-shadow: 0 0 0 10px rgba(210, 105, 56,0); }
    100% { box-shadow: 0 0 0 0 rgba(210, 105, 56,0); }
  }

  .ing-label .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--terracotta);
    flex-shrink: 0;
  }


  /* ── 13. Value prop cards ──────────────────────────────────────────────── */
  .prop-card {
    background: var(--parchment);
    border: 2.5px solid var(--terracotta);
    border-radius: 28px;
    padding: 2rem 1.75rem;
    box-shadow:
      0 6px 0 rgba(192, 92, 54, .18),
      0 18px 48px rgba(58, 53, 50, .08);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    position: relative;
  }

  .prop-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
      0 16px 0 rgba(192, 92, 54, .15),
      0 36px 64px rgba(58, 53, 50, .12);
  }

  .prop-card--featured {
    border-color: var(--terracotta);
    box-shadow:
      0 6px 0 var(--terracottaDk),
      0 18px 48px rgba(210, 105, 56, .22);
  }

  .prop-card--featured:hover {
    box-shadow:
      0 16px 0 var(--terracottaDk),
      0 36px 64px rgba(210, 105, 56, .28);
  }

  .prop-card__badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--terracotta);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .25rem .9rem;
    border-radius: 0 0 12px 12px;
  }

  .prop-icon {
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: .75rem;
    display: block;
  }

  .prop-card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--rust);
    margin-bottom: .5rem;
    letter-spacing: -.01em;
  }

  .prop-card p {
    color: var(--ink);
    line-height: 1.6;
    font-size: .95rem;
  }

  .prop-card__footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--parchmentDk);
  }

  .prop-card__tag {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
  }


  /* ── 14. Progress bar ──────────────────────────────────────────────────── */
  #progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--terracotta), var(--rust), var(--terracottaDk));
    border-radius: 0 4px 4px 0;
    width: 0%;
    z-index: 200;
    transition: width .1s linear;
    box-shadow: 0 0 8px rgba(210, 105, 56, .5);
  }


  /* ── 15. Toast notification ────────────────────────────────────────────── */
  #toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--ink);
    color: var(--parchment);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    padding: .9rem 2.2rem;
    border-radius: 50px;
    box-shadow: 0 6px 0 rgba(58, 53, 50, .5), 0 16px 48px rgba(58, 53, 50, .3);
    z-index: 9998;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
  }

  #toast.show {
    transform: translateX(-50%) translateY(0);
  }


  /* ── 15b. How to Play ─────────────────────────────────────────────────── */
  #how-to-play {
    background: var(--parchment);
  }

  .htp-header {
    margin-bottom: 5rem;
  }

  .htp-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--terracotta);
    background: var(--ink);
    padding: .35rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.25rem;
  }

  .htp-heading {
    font-size: clamp(2.4rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -.03em;
  }

  /* Each step row */
  .htp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6rem;
    /* start hidden — JS animates these in */
    opacity: 0;
  }

  @media (max-width: 768px) {
    .htp-row {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    .htp-row--flip { direction: ltr; }
  }

  .htp-row--flip {
    direction: rtl;
  }
  .htp-row--flip > * {
    direction: ltr;
  }

  /* Step number */
  .htp-num {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 3px var(--terracotta);
    margin-bottom: .5rem;
    user-select: none;
  }

  .htp-step-title {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: .75rem;
    letter-spacing: -.02em;
  }

  /* Object wrapper — card stacked above description */
  .htp-obj-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .htp-step-desc {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    max-width: 360px;
    padding-left: .25rem;
  }

  .htp-obj-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 3rem;
    border-radius: 2rem;
    box-shadow: 0 8px 0 rgba(0,0,0,.15), 0 20px 60px rgba(0,0,0,.12);
    min-width: 200px;
    transform: rotate(-4deg);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    cursor: default;
  }

  .htp-obj-card:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 12px 0 rgba(0,0,0,.15), 0 32px 80px rgba(0,0,0,.14);
  }

  .htp-obj-card--fries  { background: var(--terracotta); }
  .htp-obj-card--sauce  { background: var(--ink); transform: rotate(3deg); }
  .htp-obj-card--sauce:hover { transform: rotate(0deg) scale(1.05); }
  .htp-obj-card--onion  { background: var(--parchmentDk); transform: rotate(-3deg); }
  .htp-obj-card--onion:hover { transform: rotate(0deg) scale(1.05); }

  .htp-obj-emoji {
    font-size: 5rem;
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.2));
  }

  /* Character art from /elements, standing in the object card */
  .htp-obj-art {
    width: 9rem;
    height: 9rem;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.25));
  }

  .htp-obj-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .55;
    color: var(--ink);
  }

  .htp-obj-card--sauce .htp-obj-label { color: var(--parchment); }

  /* Step 3 pull-left modifier — narrows the row and anchors it left */
  .htp-row--pull-left {
    max-width: 75%;
    margin-right: auto;
  }

  /* CTA block under step 3's card */
  .htp-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .htp-cta-title {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.03em;
  }


  /* ── 16. Footer ────────────────────────────────────────────────────────── */
  footer {
    background: var(--ink);
    color: var(--parchment);
  }

  footer .email-wrap {
    background: rgba(253, 245, 230, .07);
    border-color: rgba(253, 245, 230, .15);
  }

  footer .email-wrap input { color: var(--parchment); }
  footer .email-wrap input::placeholder { color: rgba(253, 245, 230, .4); }
  footer .email-wrap:focus-within { border-color: var(--terracotta); }

  .footer-link {
    font-family: var(--font-body);
    font-size: .875rem;
    color: rgba(253, 245, 230, .45);
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .2s;
  }

  .footer-link:hover { color: var(--terracotta); }


  /* ── 17. Why-cards overlay (page 1, after 3rd ingredient) ─────────────── */
  #why-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    /* shift cards toward the right half; model sits on the left */
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 2rem 5% 2rem 0;
    flex-wrap: nowrap;
    opacity: 0;
    pointer-events: none;
  }

  .why-card {
    background: var(--parchment);
    border: 2.5px solid var(--terracotta);
    border-radius: 2rem;
    padding: 2.5rem 2rem;
    /* fixed equal size — all three cards identical */
    width: 260px;
    min-height: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 0 rgba(0,0,0,.1), 0 24px 56px rgba(58, 53, 50,.16);
    opacity: 0;
    transform: translateY(30px) scale(0.88);
  }

  .why-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    line-height: 1;
  }

  .why-title {
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    font-weight: 700;
    color: var(--rust);
    margin-bottom: .6rem;
    letter-spacing: -.02em;
    line-height: 1.2;
  }

  .why-body {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ink);
  }


  /* ── 17a. Page overlay system ─────────────────────────────────────────── */

  #navbar { z-index: 300; }

  /* Single content view — slides in over the 3D experience */
  #content-view {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 200;
    background: var(--parchment);
    transform: translateY(100%);
    will-change: transform;
  }

  /* Vertical page nav dots */
  #page-nav {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 350;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center;
  }

  .page-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(58, 53, 50,.35);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .25s, transform .3s cubic-bezier(.34,1.56,.64,1),
                border-color .25s, box-shadow .25s;
  }

  .page-dot:hover:not(.active) {
    background: rgba(58, 53, 50,.18);
    transform: scale(1.3);
  }

  .page-dot.active {
    background: var(--terracotta);
    border-color: var(--terracotta);
    transform: scale(1.4);
    box-shadow: 0 0 0 3px rgba(210, 105, 56,.25);
  }

  #page-nav.on-dark .page-dot        { border-color: rgba(253, 245, 230,.3); }
  #page-nav.on-dark .page-dot.active { background: var(--terracotta); border-color: var(--terracotta); }
  #page-nav.on-dark .page-dot:hover:not(.active) { background: rgba(253, 245, 230,.12); }

  /* "How to Play" advance button at end of 3D experience */
  #page-next-btn {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    background: var(--ink);
    color: var(--parchment);
    border: none;
    border-radius: 50px;
    padding: .8rem 2.2rem;
    font-size: .85rem;
    letter-spacing: .04em;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease, box-shadow .2s,
                background .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 12px 32px rgba(58, 53, 50,.3);
  }

  #page-next-btn.visible {
    opacity: 1;
    pointer-events: auto;
  }

  #page-next-btn:hover {
    background: var(--ink);
    transform: translateX(-50%) translateY(-3px) scale(1.05);
    box-shadow: 0 9px 0 rgba(0,0,0,.25), 0 18px 48px rgba(58, 53, 50,.4);
  }

  #page-next-btn:active {
    transform: translateX(-50%) translateY(2px) scale(0.97);
  }

  .page-next-btn__arrow {
    font-size: 1rem;
    animation: bounceDown 1.6s ease-in-out infinite;
  }

  @keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
  }


  /* ── 17b. Card modal ───────────────────────────────────────────────────── */

  /* Overlay wrapper — always present, captures events only when open */
  #card-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    pointer-events: none;
    overflow: hidden;
  }

  #card-modal.open {
    pointer-events: auto;
  }

  /* Sliding panel */
  .card-modal__panel {
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    /* subtle noise layer matching the rest of the site */
    background-image:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"),
      linear-gradient(160deg, var(--terracottaDk) 0%, var(--ink) 100%);
  }

  .card-modal__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 6rem 2.5rem 2.5rem;
    border-bottom: 1px solid rgba(253, 245, 230,.08);
    flex-shrink: 0;
  }

  .card-modal__subtitle {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(253, 245, 230,.4);
    margin-bottom: .5rem;
  }

  .card-modal__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--terracotta);
    letter-spacing: -.03em;
    line-height: 1;
  }

  .card-modal__close {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: rgba(253, 245, 230,.07);
    border: 1.5px solid rgba(253, 245, 230,.15);
    color: var(--parchment);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .35s cubic-bezier(.34,1.56,.64,1), border-color .2s;
    margin-bottom: .25rem;
  }

  .card-modal__close:hover {
    background: rgba(210, 105, 56,.15);
    border-color: var(--terracotta);
    transform: rotate(90deg) scale(1.1);
  }

  /* Card grid — centred, wrapping flex */
  .card-modal__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 2.5rem;
    padding-bottom: 5rem;
  }

  /* ── Game cards ─────────────────────────────────────── */
  .game-card {
    perspective: 1000px;
    cursor: pointer;
    width: 290px;
    height: 420px;
    flex-shrink: 0;
    outline: none;
  }

  /* ── Per-deck card sizes ──────────────────────────────── */

  /* label-obj1 — exactly 5 ingredient cards in one row */
  .card-modal__grid--obj1 {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 2.5rem;
  }
  .card-modal__grid--obj1 .game-card {
    width:  216px;
    height: 312px;
  }
  .card-modal__grid--obj1 .game-card__image-emoji { font-size: 4.6rem; }
  .card-modal__grid--obj1 .game-card__meta        { padding: .85rem 1rem; }
  .card-modal__grid--obj1 .game-card__name        { font-size: .9rem; }
  .card-modal__grid--obj1 .game-card__back        { padding: 1.2rem 1rem; gap: .7rem; }
  .card-modal__grid--obj1 .game-card__back-emoji  { font-size: 2.4rem; }
  .card-modal__grid--obj1 .game-card__back-art    { width: 3.9rem; height: 3.9rem; }
  .card-modal__grid--obj1 .game-card__desc        { font-size: .82rem; }

  /* label-obj2 — exactly 4+4 action cards */
  .card-modal__grid--obj2 {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 2.5rem;
  }
  .card-modal__grid--obj2 .game-card {
    width:  242px;
    height: 350px;
  }
  .card-modal__grid--obj2 .game-card__image-emoji { font-size: 4.2rem; }
  .card-modal__grid--obj2 .game-card__meta        { padding: .75rem 1rem; }
  .card-modal__grid--obj2 .game-card__type        { font-size: .52rem; }
  .card-modal__grid--obj2 .game-card__name        { font-size: .88rem; }
  .card-modal__grid--obj2 .game-card__back        { padding: 1.15rem 1rem; gap: .65rem; }
  .card-modal__grid--obj2 .game-card__back-emoji  { font-size: 2.3rem; }
  .card-modal__grid--obj2 .game-card__back-art    { width: 3.6rem; height: 3.6rem; }
  .card-modal__grid--obj2 .game-card__desc        { font-size: .8rem; }
  .card-modal__grid--obj2 .game-card__back-badge  { font-size: .5rem; }

  .game-card:focus-visible .game-card__inner {
    outline: 3px solid var(--terracotta);
    outline-offset: 4px;
    border-radius: 1.25rem;
  }

  .game-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.34,1.56,.64,1);
  }

  .game-card.flipped .game-card__inner {
    transform: rotateY(180deg);
  }

  .game-card__front,
  .game-card__back {
    position: absolute;
    inset: 0;
    border-radius: 1.25rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
  }

  /* Front face */
  .game-card__front {
    display: flex;
    flex-direction: column;
    background: var(--parchment);
    border: 2.5px solid rgba(58, 53, 50,.12);
    box-shadow: 0 8px 0 rgba(0,0,0,.18), 0 20px 48px rgba(0,0,0,.22);
    transition: box-shadow .2s, transform .2s;
  }

  .game-card:hover:not(.flipped) .game-card__front {
    box-shadow: 0 12px 0 rgba(0,0,0,.2), 0 28px 64px rgba(0,0,0,.28);
    transform: translateY(-4px);
  }

  .game-card__image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .game-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    /* DESIGN.md §3: the illustration sits on the parchment card, not on a
       colored block. The warm beige (rather than flat --parchment) keeps the
       cream subjects — the mayo blob, the seagull, the onion — from washing
       out, and holds all card text on --parchment where rust clears AA at any
       size. No gradient: the artwork supplies the color. */
    background: var(--parchmentDk);
  }

  .game-card__image-emoji {
    position: relative;
    z-index: 1;
    font-size: 5.5rem;
    line-height: 1;
    filter: drop-shadow(0 6px 16px rgba(58,53,50,.38));
  }

  /* Card artwork — transparent PNGs from /elements, sat on the gradient */
  .game-card__image-art {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .35rem;
    filter: drop-shadow(0 8px 18px rgba(58,53,50,.34));
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  }

  .game-card:hover:not(.flipped) .game-card__image-art {
    transform: scale(1.06) translateY(-3px);
  }

  .game-card__meta {
    padding: .8rem 1rem;
    background: var(--parchment);
    /* Terracotta rule separates illustration from title now that both blocks
       are parchment-family and no gradient edge divides them. */
    border-top: 2px solid rgba(210, 105, 56,.35);
  }

  .game-card__type {
    font-family: var(--font-display);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: .2rem;
  }

  .game-card__name {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--rust);
    line-height: 1.2;
  }

  /* Back face */
  .game-card__back {
    transform: rotateY(180deg);
    /* Branded card-back art, dimmed under an ink wash so text stays legible */
    background:
      linear-gradient(rgba(58, 53, 50,.88), rgba(58, 53, 50,.94)),
      url('../elements/web/background.webp') center / cover no-repeat,
      var(--ink);
    border: 2.5px solid rgba(210, 105, 56,.25);
    box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 20px 48px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    text-align: center;
    gap: .85rem;
  }

  .game-card__back-badge {
    font-family: var(--font-display);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--terracotta);
    background: rgba(210, 105, 56,.12);
    padding: .25rem .75rem;
    border-radius: 50px;
    border: 1px solid rgba(210, 105, 56,.25);
  }

  .game-card__back-emoji {
    font-size: 2.8rem;
    filter: drop-shadow(0 0 16px rgba(210, 105, 56,.4));
  }

  .game-card__back-art {
    width: 4.6rem;
    height: 4.6rem;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 18px rgba(210, 105, 56,.35));
  }

  .game-card__desc {
    font-family: var(--font-body);
    font-size: .9rem;
    line-height: 1.65;
    color: rgba(253, 245, 230,.85);
  }

  .game-card__hint {
    font-family: var(--font-display);
    font-size: .55rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(210, 105, 56,.35);
    margin-top: auto;
  }


  /* ── 17. Keyframe animations ───────────────────────────────────────────── */
  @keyframes floaty {
    0%, 100% { transform: translateY(0)     rotate(-4deg) scale(1); }
    40%       { transform: translateY(-20px) rotate(7deg)  scale(1.1); }
    55%       { transform: translateY(-17px) rotate(5deg)  scale(1.08); }
  }

  @keyframes scrollpulse {
    0%, 100% { opacity: .4; transform: scaleY(.8); }
    50%       { opacity: 1;  transform: scaleY(1); }
  }


  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-6px); }
    75%       { transform: translateX(6px); }
  }


  /* ── 18. Responsive tweaks ─────────────────────────────────────────────── */
  @media (max-width: 640px) {
    .email-wrap {
      padding: .3rem .3rem .3rem 1rem;
    }

    .email-wrap input {
      font-size: .85rem;
    }

    .btn-primary {
      font-size: .9rem;
      padding: .65rem 1.5rem;
    }

    .hero-title img {
      width: min(78vw, 20rem);
    }
  }