/* ─── Mantra Thai Wellbeing (El Born) — brand layer ─────────────────
   Self-contained on purpose: this file must NOT import or depend on the root
   styles.css or school/school.css. Three live brands sharing a stylesheet means
   a tweak to one can silently break another. See wellbeing/README.md.

   Loads AFTER scrollcraft.css (the scroll engine's floor, copied unmodified
   from the scroll-craft skill). This file themes the engine through its
   tokens and styles our own markup; it never restyles [data-sc-*] mechanics.

   Identity: "Washi" (chosen 14 Oct 2026). Warm paper, ink brown, one muted
   bronze accent, Italiana display over light Jost. Calm, lots of air. */

:root {
  --paper: #F7F4EE;
  --paper-deep: #EFE9DE;
  --white: #FFFFFF;
  --ink: #3A332C;
  --ink-deep: #1E1A16;
  --ink-soft: #6E6357;      /* secondary text, 5:1 on --paper */
  --line: #D8CDBC;
  --accent: #846640;        /* bronze, 4.9:1 on --paper: safe for small caps */
  --font-display: "Italiana", "Didot", Georgia, serif;
  --font-body: "Jost", -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 4.4vw, 64px);

  /* Scroll engine tokens, mapped onto the brand */
  --sc-canvas: var(--paper);
  --sc-surface: var(--paper-deep);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--accent);
  --sc-accent-ink: var(--paper);
  --sc-font-display: var(--font-display);
  --sc-font-text: var(--font-body);
  --sc-gutter: var(--gutter);
}

body { font-family: var(--font-body); font-weight: 300; background: var(--paper); color: var(--ink); }
a { color: inherit; }
a:hover { color: var(--ink-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.caps { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; }
.muted { color: var(--ink-soft); }

.btn {
  display: inline-block;
  padding: 18px 34px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}
.btn:hover { background: var(--ink-deep); color: var(--paper); }

/* ─── Top bar (sits over the hero, then scrolls away with the page) ─── */
.bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  padding: clamp(22px, 4vh, 36px) var(--gutter) 0;
}
.bar__links { display: flex; gap: 40px; padding-top: 12px; }
.bar__links a, .bar__reserve { text-decoration: none; }
.bar__brand { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 400; text-decoration: none; }
.bar__logo { width: 34px; height: auto; color: var(--accent); }
.bar__reserve { justify-self: end; margin-top: 10px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.bar__menu, .drawer { display: none; }

/* ─── The Mantra butterfly, alive ───
   The mark is split into a left and a right wing (same shape, same colour).
   Each wing beats by folding toward the body line (scaleX) while its tip lifts
   a little (rotate), so it reads as a butterfly in flight, not a logo wobbling.
   The whole mark flies in once on load, then hovers in place with a bob and
   beats its wings in short bursts with rests between. Transform only, so the
   header layout never moves. */
.fly { overflow: visible; }
.fly .wing { transform-box: view-box; transform-origin: 184.4px 168.3px; }

/* Header: fly in along a small curve while beating fast, then hover. */
.fly--hero {
  transform-origin: 50% 60%;
  animation: fly-in 2.6s cubic-bezier(0.3, 0.6, 0.3, 1) both, fly-hover 3.4s ease-in-out 2.6s infinite;
}
.fly--hero .wing--l { animation: beat-l 0.26s ease-in-out 10, burst-l 4.8s ease-in-out 2.6s infinite; }
.fly--hero .wing--r { animation: beat-r 0.26s ease-in-out 10, burst-r 4.8s ease-in-out 2.6s infinite; }

/* Booking band: hovers, with a softer burst now and then. */
.fly--calm { animation: fly-hover 4s ease-in-out infinite; }
.fly--calm .wing--l { animation: burst-l 6.4s ease-in-out infinite; }
.fly--calm .wing--r { animation: burst-r 6.4s ease-in-out infinite; }

/* Hovering a logo link (header, footer): a quick run of wing beats. */
a:hover > .fly .wing--l { animation: beat-l 0.22s ease-in-out 4; }
a:hover > .fly .wing--r { animation: beat-r 0.22s ease-in-out 4; }

@keyframes fly-in {
  0%   { transform: translate(-150px, 28px) rotate(-16deg) scale(0.7); opacity: 0; }
  15%  { opacity: 1; }
  40%  { transform: translate(-80px, -14px) rotate(8deg) scale(0.85); }
  70%  { transform: translate(-22px, 8px) rotate(-6deg) scale(0.97); }
  100% { transform: none; }
}
@keyframes fly-hover {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  30%      { transform: translate(1px, -3px) rotate(1.5deg); }
  65%      { transform: translate(-1px, -1px) rotate(-0.5deg); }
}
/* One full wing beat. */
@keyframes beat-l { 0%, 100% { transform: scaleX(1) rotate(0); } 50% { transform: scaleX(0.18) rotate(9deg); } }
@keyframes beat-r { 0%, 100% { transform: scaleX(1) rotate(0); } 50% { transform: scaleX(0.18) rotate(-9deg); } }
/* A burst of four beats, then a slow half-close glide and a rest. */
@keyframes burst-l {
  0%, 100% { transform: scaleX(1) rotate(0); }
  3%  { transform: scaleX(0.2) rotate(9deg); }   6% { transform: scaleX(1) rotate(0); }
  9%  { transform: scaleX(0.22) rotate(9deg); }  12% { transform: scaleX(1) rotate(0); }
  15% { transform: scaleX(0.25) rotate(8deg); }  18% { transform: scaleX(1) rotate(0); }
  21% { transform: scaleX(0.3) rotate(7deg); }   24% { transform: scaleX(1) rotate(0); }
  45% { transform: scaleX(0.7) rotate(3deg); }   70% { transform: scaleX(1) rotate(0); }
}
@keyframes burst-r {
  0%, 100% { transform: scaleX(1) rotate(0); }
  3%  { transform: scaleX(0.2) rotate(-9deg); }  6% { transform: scaleX(1) rotate(0); }
  9%  { transform: scaleX(0.22) rotate(-9deg); } 12% { transform: scaleX(1) rotate(0); }
  15% { transform: scaleX(0.25) rotate(-8deg); } 18% { transform: scaleX(1) rotate(0); }
  21% { transform: scaleX(0.3) rotate(-7deg); }  24% { transform: scaleX(1) rotate(0); }
  45% { transform: scaleX(0.7) rotate(-3deg); }  70% { transform: scaleX(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .fly, .fly .wing { animation: none !important; } }

/* ─── Hero ─── */
.hero__stage { background: var(--paper); }
/* Plate + compress scale together from the ledge line, so the compress
   never lifts off or sinks into the ledge. */
.hero__scene {
  position: absolute; inset: 0;
  transform: scale(calc(1 + var(--sc-p, 0) * 0.07));
  transform-origin: 50% 100%;
}
.hero__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hero__compress {
  position: absolute; right: 17%; bottom: 16.2%;
  width: auto; height: min(44vh, 470px);
  filter: drop-shadow(18px 10px 18px rgba(58, 51, 44, 0.18));
}
.hero__copy {
  position: absolute; z-index: 2;
  left: var(--gutter); top: clamp(120px, 21vh, 210px);
  max-width: 600px;
  display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 26px);
}
.hero__soon { color: var(--accent); }
.hero__copy h1 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, min(7.4vw, 11.5vh), 116px); line-height: 0.96; letter-spacing: 0.01em;
}
.hero__concept { margin: 0; max-width: 38ch; font-size: clamp(18px, 2.3vh, 21px); line-height: 1.6; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 62% at 18% 44%, color-mix(in oklab, var(--paper) 72%, transparent) 0%, color-mix(in oklab, var(--paper) 38%, transparent) 55%, transparent 80%);
}
.hero__act { display: flex; align-items: center; gap: 28px; margin-top: clamp(4px, 1vh, 12px); }
.hero__hours { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.hero__after {
  position: absolute; z-index: 2; left: var(--gutter); top: 38%; margin: 0;
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); line-height: 1.05;
}
.hero__plumeria {
  position: absolute; z-index: 3; top: 4%; right: -6%;
  width: min(32vw, 440px); height: auto;
  rotate: 196deg;
  filter: blur(1.4px) drop-shadow(-14px -18px 24px rgba(58, 51, 44, 0.16));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scene { transform: none; }
}

/* ─── Phone ─── */
@media (max-width: 720px) {
  .bar { grid-template-columns: 1fr auto; align-items: center; padding: 16px 20px 0; }
  .bar__links, .bar__reserve { display: none; }
  .bar__brand { justify-self: start; flex-direction: row; gap: 12px; font-size: 11px; letter-spacing: 0.3em; }
  .bar__logo { width: 26px; }
  .bar__menu {
    display: flex; align-items: center; justify-content: flex-end;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink);
  }
  .drawer:not([hidden]) {
    grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px;
    margin: 8px -20px 0; padding: 22px 20px 26px;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .drawer a { text-decoration: none; }

  .hero__plate img { object-position: 30% 100%; }
  .hero__compress { right: 7%; height: 27vh; }
  .hero__copy { left: 20px; right: 20px; top: 92px; gap: 12px; }
  .hero__copy h1 { font-size: 50px; }
  .hero__concept { font-size: 16px; max-width: 24ch; }
  .hero__act { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__act .btn { text-align: center; padding: 17px 0; }
  .hero__hours { font-size: 12.5px; }
  .hero__scrim { background: linear-gradient(180deg, color-mix(in oklab, var(--paper) 80%, transparent) 0%, color-mix(in oklab, var(--paper) 55%, transparent) 55%, transparent 75%); }
  .hero__after { left: 20px; right: 20px; top: 34%; font-size: 40px; }
  .hero__plumeria { width: 40vw; top: auto; right: auto; bottom: 1%; left: -9%; rotate: 24deg; }
  .hero__soon { max-width: 16em; line-height: 1.8; }
}