/* Shared styles for the scroll-story demo pages (/coffee/, /renovation/, /salon/).
   Each page sets its palette on .dm-page (--pg-bg, --pg-ink, --accent, --bar-bg …) and adds a small page stylesheet.
   Base rules = static layout (reduced motion / no GSAP). `html.dm-on` switches on the scroll story. */

.dm-page {
  --bar-h: 52px;
  --ink-2: color-mix(in srgb, var(--ink, var(--pg-ink)) 72%, transparent);
  background: var(--pg-bg); color: var(--pg-ink); font: 400 1.0625rem/1.55 var(--f-body); -webkit-font-smoothing: antialiased;
  position: relative; z-index: 2;
}
.dm-page *, .dm-page *::before, .dm-page *::after { box-sizing: border-box; }
.dm-page h1, .dm-page h2, .dm-page h3 { font-family: var(--f-display); font-weight: var(--h-weight, 700); letter-spacing: -.035em; line-height: .98; margin: 0; color: inherit; text-transform: none; }
.dm-page a { color: inherit; }
.dm-page img { max-width: 100%; height: auto; }
.dm-wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

.dm-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.6rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--btn-bg); font: 700 1rem var(--f-body); text-decoration: none; white-space: nowrap; transition: transform .2s, filter .2s;
}
.dm-page .dm-btn { color: var(--btn-fg); }
.dm-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.dm-btn--sm { min-height: 34px; padding: 0 1rem; font-size: .85rem; }
.dm-eyebrow, .dm-kicker { font: 500 .78rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; margin: 0; }
.dm-tag {
  display: inline-block; vertical-align: middle; margin-left: .45rem; padding: .15rem .45rem; border-radius: 6px;
  border: 1.5px solid currentColor; font: 500 .62rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}

/* Business bar with the demo tag */
.dm-bar {
  position: sticky; top: 0; z-index: 10; height: var(--bar-h); display: flex; align-items: center; gap: 1.5rem;
  padding: 0 max(16px, (100vw - 1160px) / 2); background: var(--bar-bg); color: var(--bar-fg);
}
.dm-bar__name { font: 700 1.15rem var(--f-display); letter-spacing: -.01em; text-decoration: none; margin-right: auto; white-space: nowrap; }
.dm-bar .dm-tag { color: var(--tag, currentColor); }
.dm-bar__links { display: flex; gap: 1.4rem; font-size: .85rem; opacity: .8; }
.dm-bar__links a { text-decoration: none; }
.dm-bar__links a:hover { text-decoration: underline; }
@media (max-width: 560px) { .dm-bar__links { display: none; } }
@media (max-width: 480px) { .dm-bar .dm-btn { display: none; } }   /* the booking/order section is further down anyway */
@media (max-width: 400px) { .dm-bar { gap: .75rem; } .dm-bar__name { font-size: 1rem; } .dm-bar .dm-tag { margin-left: .25rem; font-size: .58rem; } }

/* ---------- Story: static layout ---------- */
.dm-stage { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 3rem; padding: 10vh 16px; text-align: center; }
.dm-intro h1 { font-size: clamp(2.8rem, 7.5vw, 6.2rem); }
.dm-intro p:last-child { margin: 1rem 0 0; font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--ink-2); }
.dm-intro .dm-eyebrow { margin-bottom: 1rem; }
.dm-obj { width: min(100%, 560px); }
.dm-obj canvas { display: none; width: 100%; height: 100%; }
.dm-steps { display: grid; gap: 3rem; max-width: 36rem; }
.dm-step { display: grid; gap: .9rem; justify-items: center; }
.dm-step h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.dm-step p { margin: 0; font-size: 1.15rem; color: var(--ink-2); }
.dm-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .3rem 0 0; padding: 0; }
.dm-chips li { padding: .4rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--ink, var(--pg-ink)) 9%, transparent); font-weight: 600; font-size: .9rem; }
.dm-final h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); }
.dm-final p { margin: .8rem 0 1.4rem; color: var(--ink-2); font-size: 1.2rem; }
.dm-giants, .dm-cue, .dm-load, .dm-fx { display: none; }

/* ---------- The scroll story ---------- */
.dm-on .dm-story { height: var(--story-h, 1000svh); }
.dm-on .dm-stage {
  position: sticky; top: 0; height: 100svh; display: block; padding: 0; gap: 0; text-align: left;
  background: var(--bg); color: var(--ink);
  /* --x slides the object side to side; --k (1 → 0) shrinks it up out of the way for the intro and finale copy */
  --x: 0vw; --k: 1;
  --ink-2: color-mix(in srgb, var(--ink) 72%, transparent);   /* re-derived here: --ink is tweened on the stage */
}
.dm-on .dm-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(34vmax 30vmax at calc(50% + var(--x)) 52%, var(--spot, rgba(255, 255, 255, .45)), transparent 70%);
}
.dm-on .dm-intro, .dm-on .dm-final { position: absolute; left: 0; right: 0; top: calc(50svh + 3rem); z-index: 3; text-align: center; padding: 0 16px; }
.dm-on .dm-final { visibility: hidden; opacity: 0; }

.dm-on .dm-obj {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: min(80svh, 52vw); aspect-ratio: 1; will-change: translate, scale;
  translate: calc(-50% + var(--x)) calc(-50% - 22% * var(--k));
  scale: calc(1 - .45 * var(--k));
}
.dm-on .dm-obj canvas { display: block; }
.dm-on .dm-still { display: none; }

.dm-on .dm-giants { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dm-giant {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; opacity: 0; white-space: nowrap;
  font: var(--giant-weight, 800) clamp(6rem, 17vw, 18rem)/1 var(--f-display); letter-spacing: -.05em; color: var(--giant, rgba(255, 255, 255, .5));
}
.dm-giant[data-side="right"] { translate: calc(-50% + 22vw) -50%; }
.dm-giant[data-side="left"] { translate: calc(-50% - 22vw) -50%; }

.dm-on .dm-steps { position: absolute; inset: 0; z-index: 3; max-width: none; pointer-events: none; }
.dm-on .dm-step {
  position: absolute; top: 50%; translate: 0 -50%; width: min(32rem, 38vw); justify-items: start; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: auto;
}
.dm-on .dm-step[data-side="left"] { left: max(24px, (100vw - 1200px) / 2); }
.dm-on .dm-step[data-side="right"] { right: max(24px, (100vw - 1200px) / 2); }

.dm-on .dm-cue {
  display: block; position: absolute; bottom: 3svh; left: 50%; translate: -50% 0; z-index: 4;
  font: 500 .85rem var(--f-mono); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
}
.dm-on .dm-cue::after { content: ""; display: block; width: 2px; height: 40px; margin: 12px auto 0; background: currentColor; animation: dm-drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes dm-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.dm-on .dm-load { display: block; position: absolute; right: 16px; bottom: 14px; z-index: 3; font: .7rem var(--f-mono); letter-spacing: .08em; opacity: .6; transition: opacity .6s; }
.dm-on .dm-fx { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }

/* Full-bleed mode (landscape frames that fill the screen; copy sits on glass cards) */
.dm-on .dm-page--full .dm-obj { inset: 0; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; translate: none; scale: 1; }
.dm-on .dm-page--full .dm-obj canvas { object-fit: cover; }
.dm-on .dm-page--full .dm-step {
  padding: 1.6rem 1.8rem; border-radius: 22px; width: min(30rem, 40vw);
  background: color-mix(in srgb, var(--card-bg, #fff) 78%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}
.dm-on .dm-page--full .dm-intro, .dm-on .dm-page--full .dm-final {
  top: 50%; translate: 0 -50%; left: 50%; right: auto; width: min(44rem, 100% - 32px); translate: -50% -50%;
  padding: 2rem 2.2rem; border-radius: 26px; background: color-mix(in srgb, var(--card-bg, #fff) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}

@media (max-width: 800px) {
  .dm-on .dm-obj { width: min(100vw, 58svh); top: calc(var(--bar-h) + 29svh); }
  .dm-on .dm-intro { top: 50svh; }
  .dm-on .dm-final { top: auto; bottom: 10svh; }
  .dm-on .dm-steps { inset: auto 0 0; height: 20rem; background: linear-gradient(transparent, var(--bg) 22%); }
  .dm-on .dm-step, .dm-on .dm-step[data-side] { left: 16px; right: 16px; width: auto; top: auto; bottom: 1.5rem; translate: none; }
  .dm-on .dm-step h2 { font-size: 2.2rem; }
  .dm-on .dm-step p { font-size: 1rem; }
  .dm-giant, .dm-giant[data-side] { top: 30svh; translate: -50% -50%; font-size: 26vw; }
  /* full-bleed: picture on top, cards along the bottom */
  .dm-on .dm-page--full .dm-obj { top: var(--bar-h); height: 56svh; }
  .dm-on .dm-page--full .dm-steps { background: none; height: auto; top: auto; }
  .dm-on .dm-page--full .dm-step { width: auto; bottom: 1rem; padding: 1.2rem 1.3rem; }
  .dm-on .dm-page--full .dm-intro, .dm-on .dm-page--full .dm-final { top: auto; bottom: 1rem; translate: -50% 0; padding: 1.4rem; }
  .dm-on .dm-page--full .dm-intro { top: 50svh; bottom: auto; }   /* the stage starts below the headers, so anchor the intro card from the top */
}

/* ---------- Shared lower sections ---------- */
.dm-section { padding: 6.5rem 0; }
.dm-section h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: .8rem 0 2.6rem; }
.dm-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2rem; border-radius: 24px; background: var(--order-bg, #121417); color: var(--order-fg, #fff); }
.dm-order h3 { font-size: 1.6rem; letter-spacing: -.02em; }
.dm-order p { margin: .4rem 0 0; opacity: .75; font-size: .95rem; }
.dm-note { margin: 1rem 0 0; max-width: 24rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); font-size: .95rem; }
.dm-note a { color: inherit; font-weight: 700; }
@media (max-width: 800px) { .dm-order { grid-template-columns: minmax(0, 1fr); } }
.dm-foot { padding: 2.2rem 16px; text-align: center; font-size: .85rem; opacity: .75; border-top: 1px solid color-mix(in srgb, var(--pg-ink) 12%, transparent); }
.dm-foot a { font-weight: 600; }