/* Ember & Oak — motion layer styles (pairs with js/motion.js)
   Everything motion-only is scoped under html.has-motion, which motion.js adds.
   Without it (reduced motion, or JS/GSAP missing) the site falls back to a static layout. */

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- motion-only overlays: hidden unless motion is on ---------- */
.preloader, .cursor, .dish-preview { display: none; }

/* GSAP owns these properties when motion is on, so the CSS fallbacks must step aside */
.has-motion .reveal { opacity: 1; transform: none; transition: none; }
.has-motion .dish { animation: none; opacity: 1; transform: none; }
.has-motion .ribbon-track { animation: none; }
.has-motion .btn { transition: background .4s var(--ease); }
.has-motion .btn:hover { transform: none; }
.has-motion .tab { transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }

/* masked line reveals: a little room so descenders and italics aren't clipped */
.split-line { padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------- intro: the hearth lights up ---------- */
.has-motion .preloader {
  display: grid; place-content: center; justify-items: center; gap: 1.4rem;
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  clip-path: inset(0% 0% 0% 0%); cursor: pointer;
}
.pl-glow {
  position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin;
  border-radius: 50%; pointer-events: none; transform: scale(.2);
  background: radial-gradient(circle, rgba(240,140,70,.55), rgba(196,87,46,.25) 40%, transparent 70%);
}
.pl-logo { position: relative; font-family: var(--serif); font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 400; letter-spacing: -.02em; }
.pl-logo > * { display: inline-block; }
.pl-logo em { color: #f0a273; font-weight: 300; }
.pl-line { position: relative; width: min(220px, 50vw); height: 1px; background: rgba(251,247,240,.15); }
.pl-line i { position: absolute; inset: 0; background: #f0a273; transform: scaleX(0); transform-origin: left; }
.pl-note { position: relative; font-size: .75rem; text-transform: uppercase; letter-spacing: .3em; opacity: .7; }

/* ---------- hero sparks ---------- */
.sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ---------- cursor follower + dish preview (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .has-motion .cursor {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none;
    width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
    border: 1px solid var(--terra); mix-blend-mode: multiply;
    transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s, opacity .3s;
  }
  html:not(.cursor-live) .cursor { visibility: hidden; } /* don't park at 0,0 before the first mousemove */
  .has-motion .cursor.hover { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(196,87,46,.12); }
  .has-motion .cursor.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--terra); border-color: var(--terra); mix-blend-mode: normal; }
  .has-motion .cursor.hide { opacity: 0; }
  .cursor span { color: var(--paper); font: 700 .7rem var(--sans); text-transform: uppercase; letter-spacing: .12em; }

  .has-motion .dish-preview {
    display: block; position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
    width: 190px; padding: 1rem 1rem 1.1rem; text-align: center;
    background: var(--paper); border-radius: 12px; box-shadow: 0 24px 50px rgba(43,29,20,.22);
    opacity: 0; transform: scale(.6);
  }
  .dp-plate {
    width: 120px; height: 120px; margin: 0 auto .8rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--a, #e08a4c), var(--b, #5e1e0c) 70%);
    box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line), 0 10px 24px rgba(0,0,0,.2);
  }
  .dish-preview b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1rem; line-height: 1.2; }
  .dish-preview small { color: var(--terra); font-family: var(--serif); font-size: .95rem; }
}

/* ---------- courses: "Four courses, one fire" ---------- */
.courses { background: var(--ink); color: var(--paper); }
.courses h2 { color: var(--paper); }
.courses h2 em { color: #f0a273; }
.courses-intro p:not(.eyebrow) { color: rgba(251,247,240,.75); max-width: 380px; }
.courses .eyebrow { color: #f0a273; }
.courses-progress { display: none; }

/* static fallback: a simple grid */
.courses-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.course {
  display: flex; flex-direction: column; gap: 1.6rem; padding: 2rem; border-radius: 14px;
  background: linear-gradient(160deg, var(--a), var(--b)); color: var(--paper);
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
.course-plate { position: relative; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.plate-ring { position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(251,247,240,.55); }
.course-plate span { font-family: var(--serif); font-size: 2rem; font-weight: 300; }
.course-n { font-family: var(--serif); font-style: italic; font-size: 1.1rem; margin-right: .6rem; opacity: .8; }
.course time { font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; opacity: .85; }
.course h3 { font-size: 1.8rem; margin: .4rem 0 .6rem; }
.course p { opacity: .88; }

/* desktop with motion: pinned, scrolls sideways */
@media (min-width: 861px) {
  .has-motion .courses { padding: 0; }
  .has-motion .courses-pin {
    height: 100vh; display: flex; align-items: center; gap: 4rem;
    padding: 0 clamp(1rem, 5vw, 4rem); overflow: hidden;
  }
  /* the intro sits on its own layer; cards slide underneath and fade out at its edge */
  .has-motion .courses-intro { flex: 0 0 min(380px, 32vw); position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .has-motion .courses-intro::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
    left: calc(-1 * clamp(1rem, 5vw, 4rem)); right: -4rem;
    background: linear-gradient(90deg, var(--ink) 82%, transparent);
  }
  .has-motion .courses-progress { display: block; position: relative; width: 180px; height: 2px; margin-top: 2rem; background: rgba(251,247,240,.15); }
  .has-motion .courses-progress i { position: absolute; inset: 0; background: #f0a273; transform: scaleX(0); transform-origin: left; }
  .has-motion .courses-track { display: flex; flex: 0 0 auto; gap: 2.5rem; margin: 0; }
  .has-motion .course { flex: 0 0 min(560px, 44vw); height: min(560px, 70vh); justify-content: space-between; padding: 2.5rem; }
  .has-motion .course-plate { width: 200px; height: 200px; }
}
@media (max-width: 860px) {
  .courses-track { grid-template-columns: 1fr; }
}