html, body { margin: 0; min-height: 100%; background: #1c1411; scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }
*, *::before, *::after { box-sizing: border-box; }
:root { --night: #1c1411; --night-2: #2a1c17; --gold: #e8b86b; --gold-soft: #f6dfb0; --cream: #f4e8d6;
        --cream-dim: rgba(244,232,214,.68); --berry: #b23a48; --line: rgba(232,184,107,.28); }
.mt { position: relative; min-height: 100svh; overflow: hidden; color: var(--cream); font-family: 'Jost', system-ui, sans-serif;
      background: radial-gradient(90% 55% at 50% 0%, #3a241c 0%, var(--night-2) 42%, var(--night) 100%); }
.mt-sfx { display: none; }
.mt-grain { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: url(../assets/grain.svg); }
.mt-glow { position: absolute; top: -160px; left: 50%; width: 520px; height: 520px; margin-left: -260px; pointer-events: none;
           background: radial-gradient(circle, rgba(232,184,107,.32) 0%, rgba(232,184,107,.08) 40%, rgba(232,184,107,0) 68%);
           animation: mt-flicker 3.2s ease-in-out infinite; }
@keyframes mt-flicker { 0%,100% { opacity: .9; scale: 1; } 30% { opacity: .75; scale: .97; } 55% { opacity: 1; scale: 1.03; } 80% { opacity: .85; scale: .99; } }
.mt-embers { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mt-ember { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
            box-shadow: 0 0 8px 2px rgba(232,184,107,.6); opacity: 0; animation: mt-rise 11s linear infinite; }
.mt-ember--1 { left: 8%; animation-delay: -1s; } .mt-ember--2 { left: 19%; animation-delay: -6s; width: 3px; height: 3px; }
.mt-ember--3 { left: 31%; animation-delay: -3s; } .mt-ember--4 { left: 44%; animation-delay: -8s; width: 2px; height: 2px; }
.mt-ember--5 { left: 56%; animation-delay: -2s; } .mt-ember--6 { left: 67%; animation-delay: -9.5s; width: 3px; height: 3px; }
.mt-ember--7 { left: 78%; animation-delay: -4.5s; } .mt-ember--8 { left: 90%; animation-delay: -7s; width: 2px; height: 2px; }
.mt-ember--9 { left: 14%; animation-delay: -10s; animation-duration: 14s; } .mt-ember--10 { left: 50%; animation-delay: -12s; animation-duration: 15s; }
.mt-ember--11 { left: 73%; animation-delay: -5s; animation-duration: 13s; } .mt-ember--12 { left: 95%; animation-delay: -11s; animation-duration: 16s; }
@keyframes mt-rise { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .9; } 50% { translate: 18px -50vh; opacity: .7; } 100% { translate: -12px -105vh; opacity: 0; } }
section, .mt-content { position: relative; z-index: 2; }

/* gate */
.mt-gate { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
           padding: 40px 24px; text-align: center; background: radial-gradient(90% 60% at 50% 30%, #3a241c 0%, #221713 60%, #1a120f 100%); }
.mt-gate-kicker { margin: 0; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.mt-gate-title { position: relative; margin: 14px 0 0; height: 1.1em; width: 100%; font-family: 'Cormorant Garamond', Georgia, serif;
                 font-style: italic; font-weight: 500; font-size: clamp(42px, 12vw, 64px); line-height: 1.1; color: var(--cream); }
.mt-gate-wish, .mt-gate-lucky { position: absolute; inset: 0; }
.mt-gate-lucky { opacity: 0; color: var(--gold-soft); font-size: .62em; line-height: 1.8; }
.mt-stage { position: relative; width: min(72vw, 270px); margin: 28px 0 18px; touch-action: none; cursor: grab; user-select: none; }
.mt-stage:active { cursor: grabbing; }
.mt-bone { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.mt-half--r { filter: drop-shadow(0 0 0 rgba(232,184,107,0)); }
.mt-gate-hint { margin: 0; font-size: 15px; letter-spacing: .04em; color: var(--cream-dim); }
.mt-hand { display: inline-block; margin-right: 6px; color: var(--gold); }
.mt-pull { margin-top: 18px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
           color: var(--cream-dim); font: 500 13px 'Jost', sans-serif; letter-spacing: .08em; cursor: pointer; }
.mt.is-open .mt-gate { pointer-events: none; }

/* hero */
.mt-hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 24px; text-align: center; }
.mt-kicker { margin: 0; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.mt-title { margin: 10px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-style: italic;
            font-size: clamp(62px, 18vw, 112px); line-height: .95; letter-spacing: -.01em;
            background: linear-gradient(180deg, #fff3da 0%, var(--gold) 70%, #b98236 100%); -webkit-background-clip: text;
            background-clip: text; color: transparent; padding: 0 .08em .06em; }
.mt-host { margin: 6px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; color: var(--cream); }
.mt-date { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 40px; padding: 18px 34px;
           border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mt-date-day { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.mt-date-line { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; line-height: 1.1; }
.mt-date-year { font-size: 13px; letter-spacing: .3em; color: var(--cream-dim); }

/* story */
.mt-story { padding: 40px 30px 60px; text-align: center; }
.mt-mini { width: 34px; height: auto; opacity: .9; }
.mt-story-text { margin: 18px auto 0; max-width: 330px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
                 font-size: 25px; line-height: 1.4; color: var(--cream); }

/* gratitude cards */
.mt-table { padding: 30px 20px 50px; text-align: center; }
.mt-table-title { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 40px; color: var(--gold-soft); }
.mt-table-intro { margin: 10px auto 26px; max-width: 320px; font-size: 15px; line-height: 1.6; color: var(--cream-dim); }
.mt-cards { display: grid; gap: 14px; width: min(100%, 340px); margin: 0 auto; perspective: 1100px; }
.mt-card { position: relative; height: 128px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
           -webkit-tap-highlight-color: transparent; }
.mt-card:nth-child(1) { rotate: -1.5deg; } .mt-card:nth-child(2) { rotate: 1deg; } .mt-card:nth-child(3) { rotate: -.6deg; }
.mt-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2,.75,.25,1.15); }
.mt-card.is-flipped .mt-card-inner { transform: rotateY(180deg); }
.mt-card-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
                padding: 16px 22px; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mt-card-front { background: linear-gradient(150deg, #3b271f, #2a1c17); border: 1px solid var(--line);
                 box-shadow: inset 0 0 0 6px rgba(28,20,17,.6), inset 0 0 0 7px rgba(232,184,107,.25), 0 14px 26px rgba(0,0,0,.35); }
.mt-card-front img { width: 18px; opacity: .9; }
.mt-card-no { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 24px; color: var(--gold-soft); }
.mt-card-tap { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-dim); }
.mt-card-back { transform: rotateY(180deg); background: linear-gradient(160deg, #f7ecd9, #ead8bb); color: #2a1c17;
                box-shadow: 0 14px 26px rgba(0,0,0,.35); }
.mt-card-q { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; line-height: 1.25; font-weight: 500; }

/* details */
.mt-details { padding: 40px 24px 20px; text-align: center; }
.mt-candle { position: relative; width: 26px; height: 84px; margin: 0 auto 22px; }
.mt-wax { position: absolute; bottom: 0; left: 4px; width: 18px; height: 50px; border-radius: 3px 3px 2px 2px;
          background: linear-gradient(90deg, #e9dcc6, #fbf3e4 45%, #d8c6a8); }
.mt-wick { position: absolute; bottom: 50px; left: 12px; width: 2px; height: 8px; background: #3a2a22; }
.mt-flame { position: absolute; bottom: 56px; left: 6px; width: 14px; height: 26px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
            background: radial-gradient(circle at 50% 70%, #fff7da 0 22%, #ffd27a 45%, rgba(232,140,50,.85) 70%, rgba(232,140,50,0) 76%);
            box-shadow: 0 0 26px 10px rgba(255,190,90,.35); transform-origin: 50% 90%; animation: mt-flame 1.6s ease-in-out infinite; }
@keyframes mt-flame { 0%,100% { rotate: -2deg; scale: 1 1; } 25% { rotate: 3deg; scale: .96 1.05; } 50% { rotate: -1deg; scale: 1.03 .97; } 75% { rotate: 2deg; scale: .98 1.04; } }
.mt-label { margin: 18px 0 4px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.mt-time { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; line-height: 1; }
.mt-where { margin: 0 auto; max-width: 300px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.25; }
.mt-note { padding: 34px 28px 10px; text-align: center; }
.mt-note p { margin: 0 auto; max-width: 320px; padding: 18px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
             font-size: 15px; line-height: 1.7; color: var(--cream-dim); }
.mt-close { padding: 60px 24px 80px; text-align: center; }
.mt-close-line { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 34px; line-height: 1.2; color: var(--gold-soft); }
.mt-sign { margin: 16px 0 0; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--cream-dim); }

/* opening drama */
.mt-halo { position: absolute; left: 50%; top: 86%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; pointer-events: none;
           background: radial-gradient(circle, rgba(255,214,140,.45), rgba(255,214,140,0) 65%); opacity: .55; }
.mt-flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
            background: radial-gradient(60% 45% at 50% 62%, rgba(255,236,190,.95), rgba(255,200,120,.35) 45%, rgba(255,200,120,0) 75%); }
.mt-sparks { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.mt-spark { position: absolute; width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; background: #ffe3a6;
            box-shadow: 0 0 10px 3px rgba(255,200,110,.75); }
.mt-spark--line { width: 2px; height: 12px; border-radius: 2px; }

/* cinema mode: every part is a full-screen scene that zooms past */
.mt.is-cinema .mt-content { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.mt.is-cinema .mt-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
                          min-height: 0; padding: 48px 22px; opacity: 0; pointer-events: none; will-change: transform, opacity, filter; }
.mt.is-cinema .mt-scene.is-active { pointer-events: auto; }
.mt.is-cinema .mt-scene--details .mt-details, .mt.is-cinema .mt-scene--details .mt-note { padding-top: 0; padding-bottom: 0; }
.mt.is-cinema .mt-scene--details .mt-note { margin-top: 26px; }
.mt.is-cinema .mt-close { padding: 48px 24px; }
.mt-track { position: relative; z-index: 0; pointer-events: none; }
.mt.is-cinema { background: var(--night); }
.mt.is-cinema::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
                        background: radial-gradient(90% 55% at 50% 0%, #3a241c 0%, var(--night-2) 42%, var(--night) 100%); }
.mt.is-cinema .mt-embers, .mt.is-cinema .mt-grain, .mt.is-cinema .mt-glow { position: fixed; }
.mt-scrollhint { display: none; margin: 34px 0 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-dim); }
.mt.is-cinema .mt-scrollhint { display: block; }
.mt-scrollhint span { display: inline-block; margin-left: 4px; color: var(--gold); }
.mt-dots { position: fixed; right: 12px; top: 50%; z-index: 7; display: none; flex-direction: column; gap: 10px; translate: 0 -50%; }
.mt.is-cinema.is-open .mt-dots { display: flex; }
.mt-dot { width: 7px; height: 7px; padding: 0; border: 1px solid rgba(232,184,107,.6); border-radius: 50%; background: transparent; cursor: pointer;
          transition: background .3s, transform .3s; }
.mt-dot.is-on { background: var(--gold); transform: scale(1.35); }

@media (min-width: 768px) {
  .mt-cards { grid-template-columns: repeat(3, 1fr); width: min(100%, 760px); gap: 18px; }
  .mt-card { height: 200px; }
  .mt-stage { width: 300px; }
  .mt-story-text { max-width: 480px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-ember, .mt-glow, .mt-flame { animation: none; } .mt-ember { display: none; }
  .mt-card-inner { transition: none; }
}

/* card */
.mt-cardlet { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 16px; border-radius: 16px;
              background: radial-gradient(90% 80% at 50% 0%, #3a241c, #1c1411); color: #f4e8d6; text-align: center; font-family: 'Jost', sans-serif; }
.mt-cardlet-date { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; line-height: 1; color: #e8b86b; }
.mt-cardlet-month { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.mt-cardlet-title { margin: 6px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; }