/* ============================================================
   WOW.CSS — "WOW pass" (signature reveal theater + depth/light + ambient)
   The centerpiece: a sealed envelope that unseals, opens, and lets the
   card rise out while the message writes on and petals settle.
   Plus: cursor petal-trail, gyro/sheen depth, cinematic vignette, polish.
   Depends on tokens.css + base.css + home.css + enrich.css + decor.css.
   Adds, never breaks. Every continuous motion fully resolves to a calm
   static state under prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   CINEMATIC VEIL — whisper-soft vignette + grain for a filmic finish
   ============================================================ */
.cinematic-veil {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background:
    radial-gradient(125% 100% at 50% 38%, transparent 58%, rgba(43,38,34,.10) 100%);
  mix-blend-mode: multiply; opacity: .9;
}
.cinematic-veil::after { /* the faintest film grain */
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); background-size: 180px 180px;
  opacity: .025; mix-blend-mode: multiply;
}

/* ============================================================
   DEPTH & LIGHT — maker card gains a tilt-reactive shadow + travelling foil
   JS sets --tilt-x / --tilt-y (normalised -1..1) on [data-mk-tilt].
   ============================================================ */
.mk-card-wrap {
  /* soft, physical ground-shadow that leans opposite to the tilt */
  filter: drop-shadow(
    calc(var(--tilt-x, 0) * -14px)
    calc(var(--tilt-y, 0) * 12px + 16px)
    28px rgba(43,38,34,.15));
  transition: filter var(--dur-2) var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) { .mk-card-wrap { filter: none; transition: none; } }

/* a gilded foil band that travels across the card as it tilts */
.mk-card .mk-foil {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(
    105deg, transparent 38%,
    color-mix(in srgb, var(--gold-soft) 70%, #fff) 48%,
    color-mix(in srgb, var(--gold) 30%, #fff) 52%,
    transparent 62%);
  background-size: 280% 100%;
  background-position: calc(50% + var(--tilt-x, 0) * 60%) 0;
  opacity: 0; mix-blend-mode: screen;
  transition: opacity var(--dur-2) var(--ease-soft), background-position var(--dur-1) linear;
}
.mk-card-wrap:hover .mk-foil { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .mk-card .mk-foil { display: none; } }

/* polished focus glow across interactive elements (buttery, on-brand) */
.btn:focus-visible,
.chip:focus-visible,
.swatch:focus-visible,
.mk-sticker:focus-visible,
.pick:focus-visible,
.pensiero-note:focus-visible,
.mk-input:focus-visible,
.lang button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 45%, transparent),
              0 6px 20px color-mix(in srgb, var(--rose) 22%, transparent);
}

/* ============================================================
   CURSOR PETAL-TRAIL — subtle, throttled, capped (fine pointer only)
   ============================================================ */
.cursor-trail { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.trail-bit {
  position: fixed; left: 0; top: 0; width: var(--tz, 14px); height: var(--tz, 14px);
  color: var(--tc, var(--rose)); will-change: transform, opacity; opacity: 0;
  transform: translate(-50%, -50%);
  animation: trailFade var(--tt, 1100ms) var(--ease-expo) forwards;
}
.trail-bit svg { width: 100%; height: 100%; display: block; }
@keyframes trailFade {
  0%   { opacity: .0;  transform: translate(-50%, -50%) scale(.5) rotate(0deg); }
  18%  { opacity: var(--to, .7); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--tdx,0)), calc(-50% + var(--tdy,26px))) scale(1) rotate(var(--tr,40deg)); }
}

/* ============================================================
   REVEAL THEATER — the signature cinematic moment
   A full-screen stage built by reveal.js. State is driven by classes on
   .rt-stage (s-in → s-unseal → s-open → s-rise → s-present → s-write → s-done).
   ============================================================ */
.rt-stage {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: var(--sp-5);
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--ease-soft), visibility 0s linear 420ms;
}
.rt-stage.s-in { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease-soft); }
body.rt-open { overflow: hidden; } /* lock scroll while the theater is up */

.rt-backdrop {
  position: absolute; inset: 0; z-index: 0; border: 0;
  background:
    radial-gradient(120% 100% at 50% 30%, rgba(76,40,52,.42), rgba(30,22,26,.78) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(125%);
  backdrop-filter: blur(7px) saturate(125%);
}
.rt-backdrop::after { /* drifting motes for atmosphere (paused under reduced-motion) */
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,246,216,.5), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,246,216,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(247,220,227,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,246,216,.4), transparent 60%);
  opacity: .8; animation: rtMotes 18s linear infinite;
}
@keyframes rtMotes { from { transform: translateY(0); } to { transform: translateY(-40px); } }

/* ---- the scene that holds envelope + card ---- */
.rt-scene {
  position: relative; z-index: 1;
  width: min(94vw, 560px);
  height: min(64vh, 420px);
  perspective: 1600px;
  display: grid; place-items: center;
}

/* ---- the card that rises out (reuses .mk-card visual system) ---- */
.rt-card-wrap {
  position: absolute; left: 50%; bottom: 6%;
  width: 100%; transform: translate(-50%, 0); transform-style: preserve-3d;
  z-index: 2; will-change: transform, opacity;
}
.rt-card {
  width: 100%; min-height: 0;
  height: auto; aspect-ratio: 3 / 2;
  opacity: 0; transform: translateY(46%) scale(.86);
  transition:
    transform 900ms var(--ease-expo),
    opacity   600ms var(--ease-soft);
  box-shadow: var(--sh-4),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 0 0 6px color-mix(in srgb, var(--gold) 42%, transparent);
}
.rt-card .mk-body { justify-content: flex-end; }

/* card rises out of the envelope */
.rt-stage.s-rise .rt-card,
.rt-stage.s-present .rt-card,
.rt-stage.s-write .rt-card,
.rt-stage.s-done .rt-card { opacity: 1; }
.rt-stage.s-rise .rt-card-wrap { z-index: 6; }
.rt-stage.s-rise .rt-card { transform: translateY(-6%) scale(.92); }

/* card presents — floats up to centre, full size */
.rt-stage.s-present .rt-card-wrap,
.rt-stage.s-write .rt-card-wrap,
.rt-stage.s-done .rt-card-wrap { z-index: 6; bottom: 50%; transform: translate(-50%, 50%); transition: bottom 800ms var(--ease-expo), transform 800ms var(--ease-expo); }
.rt-stage.s-present .rt-card,
.rt-stage.s-write .rt-card,
.rt-stage.s-done .rt-card { transform: translateY(0) scale(1); }

/* the message starts hidden, then "writes on" */
.rt-card .mk-msg { clip-path: inset(0 100% 0 0); filter: blur(.6px); opacity: .4; }
.rt-stage.s-write .rt-card .mk-msg,
.rt-stage.s-done .rt-card .mk-msg {
  clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1;
  transition: clip-path 1000ms var(--ease-soft), filter 1000ms var(--ease-soft), opacity 600ms var(--ease-soft);
}
/* travelling "pen nib" highlight that rides the writing edge */
.rt-nib {
  position: absolute; z-index: 7; left: 8%; top: 64%; width: 16px; height: 16px;
  color: var(--gold); opacity: 0; pointer-events: none; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 70%, transparent));
}
.rt-nib svg { width: 100%; height: 100%; display: block; }
.rt-stage.s-write .rt-nib { animation: rtNib 1000ms var(--ease-soft) forwards; }
@keyframes rtNib {
  0%   { opacity: 0;  left: 10%; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; left: 88%; }
}

/* ============================================================
   ENVELOPE — back pocket · front pocket · flap · wax seal
   ============================================================ */
.rt-envelope {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 108%; height: 56%;
  z-index: 3; transform-style: preserve-3d;
  transition: opacity 700ms var(--ease-soft), transform 800ms var(--ease-expo);
}
/* once the card has presented, the envelope eases down + dims */
.rt-stage.s-present .rt-envelope,
.rt-stage.s-write .rt-envelope,
.rt-stage.s-done .rt-envelope {
  opacity: 0; transform: translateX(-50%) translateY(26%) scale(.96);
}

.rt-env-back {
  position: absolute; inset: 0; z-index: 1; border-radius: 0 0 14px 14px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent, var(--rose)) 30%, var(--paper-2)),
    color-mix(in srgb, var(--accent, var(--rose)) 16%, var(--paper)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--sh-3);
}
.rt-env-front {
  position: absolute; inset: 0; z-index: 4; border-radius: 0 0 14px 14px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent, var(--rose)) 40%, var(--paper-2)),
    color-mix(in srgb, var(--accent, var(--rose)) 24%, var(--paper)));
  /* trapezoid: the front pocket whose top edge dips to a V */
  clip-path: polygon(0 26%, 50% 60%, 100% 26%, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.rt-env-front::after { /* gilt rim along the pocket V */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent, color-mix(in srgb, var(--gold) 22%, transparent));
  clip-path: polygon(0 26%, 50% 60%, 100% 26%, 100% 28%, 50% 62%, 0 28%);
  opacity: .8;
}

/* the flap pivots open from the top edge */
.rt-env-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 60%;
  z-index: 6; transform-origin: top center; transform: rotateX(0deg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent, var(--rose)) 52%, #fff 4%),
    color-mix(in srgb, var(--accent, var(--rose)) 34%, var(--paper)));
  box-shadow: 0 2px 8px rgba(43,38,34,.18);
  transition: transform 760ms var(--ease-expo), z-index 0s linear 380ms;
  backface-visibility: hidden;
}
.rt-env-flap::after { /* gilt edge on the flap */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 30%, transparent), transparent 60%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.rt-stage.s-open .rt-env-flap,
.rt-stage.s-rise .rt-env-flap { transform: rotateX(-172deg); z-index: 2; }
.rt-stage.s-present .rt-env-flap,
.rt-stage.s-write .rt-env-flap,
.rt-stage.s-done .rt-env-flap { transform: rotateX(-172deg); z-index: 2; }

/* ---- wax seal with the il pensiero ♥ monogram ---- */
.rt-seal {
  position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%);
  width: clamp(46px, 16%, 64px); aspect-ratio: 1; z-index: 7;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #E8728C, var(--rose-deep) 70%, #8e2f44);
  box-shadow: 0 3px 8px rgba(43,38,34,.32), inset 0 2px 4px rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.25);
  color: #fff; font-size: 1.4rem; line-height: 1;
  transition: transform 360ms var(--ease-back), opacity 360ms var(--ease-soft);
}
.rt-seal::before { /* deckled wax rim */
  content: ""; position: absolute; inset: 5%; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--gold-soft) 70%, #fff);
  opacity: .55;
}
.rt-seal .rt-seal-mark { position: relative; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
/* unseal: the wax presses, cracks, lifts away */
.rt-stage.s-unseal .rt-seal { transform: translate(-50%, -50%) scale(1.12) rotate(-8deg); }
.rt-stage.s-open .rt-seal,
.rt-stage.s-rise .rt-seal { transform: translate(-50%, -140%) scale(.6) rotate(-26deg); opacity: 0; }
.rt-stage.s-present .rt-seal,
.rt-stage.s-write .rt-seal,
.rt-stage.s-done .rt-seal { opacity: 0; }

/* envelope entrance */
.rt-scene { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity 500ms var(--ease-soft), transform 600ms var(--ease-expo); }
.rt-stage.s-in .rt-scene { opacity: 1; transform: none; }

/* ============================================================
   CONFETTI — petals + sparkles settle once the card is revealed
   ============================================================ */
.rt-confetti { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.rt-petal {
  position: absolute; top: -8%; left: var(--cx, 50%);
  width: var(--cz, 16px); height: var(--cz, 16px); color: var(--cc, var(--rose));
  opacity: 0; will-change: transform, opacity;
  animation: rtPetalFall var(--ct, 2.6s) var(--ease-soft) var(--cd, 0s) forwards;
}
.rt-petal svg { width: 100%; height: 100%; display: block; }
@keyframes rtPetalFall {
  0%   { opacity: 0;   transform: translate3d(0,0,0) rotate(0); }
  12%  { opacity: var(--co, .9); }
  100% { opacity: 0;   transform: translate3d(var(--cdx, 20px), 108%, 0) rotate(540deg); }
}

/* ============================================================
   THEATER CHROME — skip, replay, continue, close
   ============================================================ */
.rt-skip {
  position: absolute; top: max(var(--sp-5), env(safe-area-inset-top)); right: var(--sp-5); z-index: 12;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em 1em; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-back), opacity var(--dur-2);
}
.rt-skip:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.rt-stage.s-done .rt-skip { opacity: 0; pointer-events: none; }

.rt-actions {
  position: absolute; left: 50%; bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 12;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 500ms var(--ease-soft), transform 500ms var(--ease-expo);
  width: min(92vw, 520px);
}
.rt-stage.s-done .rt-actions { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.rt-actions .btn { box-shadow: var(--sh-3); }
.rt-replay {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .85em 1.4em; border-radius: var(--r-pill);
  font-weight: 600; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-back);
}
.rt-replay:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.rt-replay .rt-replay-ico { display: inline-block; }
.rt-replay:hover .rt-replay-ico { animation: shuffleSpin .6s var(--ease-back); }

.rt-close {
  position: absolute; top: max(var(--sp-5), env(safe-area-inset-top)); left: var(--sp-5); z-index: 12;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.3rem; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: background var(--dur-1), transform var(--dur-1) var(--ease-back), opacity var(--dur-2);
}
.rt-close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }
.rt-stage.s-done .rt-close { opacity: 1; pointer-events: auto; }

/* intro variant: no chrome except skip, dissolves on its own */
.rt-stage.is-intro .rt-close { display: none; }

/* ============================================================
   MAKER PREVIEW BUTTON — the call into the experience
   ============================================================ */
.mk-preview .mk-preview-ico { display: inline-block; transition: transform var(--dur-1) var(--ease-back); }
.mk-preview:hover .mk-preview-ico { transform: scale(1.15) rotate(-6deg); }

/* ============================================================
   REDUCED MOTION — full calm fallback (no flips, no strobe)
   Reveal.js jumps straight to the resolved s-present/s-write/s-done state
   and CSS removes every transition/animation here.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rt-stage, .rt-scene, .rt-card, .rt-card-wrap, .rt-envelope, .rt-env-flap, .rt-seal,
  .rt-actions, .rt-skip, .rt-close { transition: none !important; }
  .rt-backdrop::after, .rt-nib, .rt-petal, .rt-replay .rt-replay-ico { animation: none !important; }
  .rt-card .mk-msg { clip-path: inset(0 0 0 0); filter: none; opacity: 1; }
  .rt-nib, .rt-confetti { display: none; }
  .trail-bit { display: none; }
  .rt-scene { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE TUNING
   ============================================================ */
@media (max-width: 560px) {
  .rt-scene { width: min(90vw, 300px); height: min(70vh, 420px); }
  .rt-actions .btn-lg { padding: .9em 1.5em; font-size: var(--fs-body); }
}