/* Theme: "Crimson on Cream" palette · "Romantic Script" headings · "Engraved Caps" body voice.
   The variables mirror the mood options from the original design — swap the values
   here to re-theme the whole site.

   ---------------------------------------------------------------------------
   PREVIOUS VALUES, kept deliberately so we can go back to them:

     --script: 'filmotype-yale', 'bickham-script-pro-3', 'Bickham Script Pro', cursive;
     --hs: 1;
     --accent: #ba1f07;

   Filmotype Yale was the cursive the site shipped with (it sat first in the
   stack, so it won). Bickham Script Pro 3 replaced it, and because Bickham is
   a much narrower face, --hs was raised to 1.2 to match the old visual weight.
   Reverting to Filmotype means restoring BOTH the stack and --hs: 1 — putting
   Filmotype back at 1.2 would render it a fifth larger than it ever was.

   #ba1f07 was a brighter red used for the scribble, caret and link hovers,
   while the panels and map used the maroon. That read as two different reds,
   so everything now uses the single maroon below.
   --------------------------------------------------------------------------- */
.theme {
  /* One red across the whole site — the maroon of the gate / RSVP / closing
     panels. The map, the "and partying" scribble, its caret and link hovers
     all resolve to this. */
  --accent: #4a0f13;
  --map-accent: var(--accent);
  --ink: #29292a;
  --bg: #f7f6ee;
  --panel: #f1ede5;
  /* Bickham Script Pro 3 is the intended cursive; filmotype-yale only stands in
     if the Adobe Fonts kit fails to load. Both come from kit hve3kss. */
  --script: 'bickham-script-pro-3', 'Bickham Script Pro', 'filmotype-yale', cursive;
  --hstyle: normal;   /* heading font-style */
  --htt: none;        /* heading text-transform */
  --hls: normal;      /* heading letter-spacing */
  --hs: 1.2;          /* heading scale — 1.2 compensates for Bickham's narrow face */
  --body: 'Cormorant Garamond', serif;
  --tt: uppercase;    /* body text-transform */
  --lsf: 1.4;         /* letter-spacing factor */
  --bfs: 1.15;        /* body font-size factor */
  --bw: 600;          /* body font-weight */

  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  min-height: 100vh;
}

/* iOS inflates text without this; decorative elements overhang the viewport. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: #f7f6ee; overflow-x: clip; }

a { color: #29292a; }
a:hover { color: var(--accent, #ba1f07); }
input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: var(--accent, #ba1f07) !important; }
::placeholder { color: #b5b2a6; }

.gate-enter:hover { background: rgba(255, 255, 255, 0.12); }
.rsvp-button:hover { background: #4a0f13; color: #ffffff; border-color: #4a0f13; }

/* --- Hand-drawn arrows in the closing section --- */
[data-arrow-path] { stroke-dasharray: 300; stroke-dashoffset: 300; }
[data-arrow-head] { stroke-dasharray: 60; stroke-dashoffset: 60; }
[data-draw] [data-arrow-path] { animation: arrow-draw 1.6s cubic-bezier(0.45, 0, 0.2, 1) 0.4s forwards; }
[data-draw] [data-arrow-head] { animation: arrow-draw 0.35s ease-out 1.95s forwards; }
[data-draw] svg:nth-of-type(2) [data-arrow-path] { animation-delay: 1.1s; }
[data-draw] svg:nth-of-type(2) [data-arrow-head] { animation-delay: 2.65s; }
@keyframes arrow-draw { to { stroke-dashoffset: 0; } }

/* --- Paper-cutout wobble over the closing photo --- */
@keyframes cutout-jitter {
  0%   { transform: scale(1.05) rotate(0deg) translate(0, 0); }
  25%  { transform: scale(1.056) rotate(0.5deg) translate(1px, -1px); }
  50%  { transform: scale(1.048) rotate(-0.4deg) translate(-1px, 1px); }
  75%  { transform: scale(1.054) rotate(0.3deg) translate(1px, 1px); }
  100% { transform: scale(1.05) rotate(0deg) translate(0, 0); }
}
[data-cutout] { animation: cutout-jitter 0.9s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { [data-cutout] { animation: none; } }

/* --- Handwritten name labels beside the arrows --- */
[data-arrow-name] { opacity: 0; transition: opacity 0.8s ease 2.4s; }
[data-draw] [data-arrow-name] { opacity: 1; }
[data-draw] [data-arrow-name]:last-of-type { transition-delay: 3.1s; }

/* --- Stop-motion wobble on the "and partying" scribble and its caret --- */
@keyframes scribble-jitter {
  0%   { transform: translateX(-50%) rotate(-8deg) translate(0, 0); }
  25%  { transform: translateX(-50%) rotate(-7.3deg) translate(1px, -1px); }
  50%  { transform: translateX(-50%) rotate(-8.6deg) translate(-1px, 1px); }
  75%  { transform: translateX(-50%) rotate(-7.6deg) translate(1px, 1px); }
  100% { transform: translateX(-50%) rotate(-8deg) translate(0, 0); }
}
@keyframes caret-jitter {
  0%   { transform: rotate(-4deg) translate(0, 0); }
  25%  { transform: rotate(-3.2deg) translate(1px, -1px); }
  50%  { transform: rotate(-4.8deg) translate(-1px, 1px); }
  75%  { transform: rotate(-3.5deg) translate(1px, 0); }
  100% { transform: rotate(-4deg) translate(0, 0); }
}
[data-scribble] { animation: scribble-jitter 0.9s steps(1) infinite; }
[data-scribble] + span { animation: caret-jitter 1.25s steps(1) infinite; animation-delay: -0.45s; }
@media (prefers-reduced-motion: reduce) {
  [data-scribble], [data-scribble] + span { animation: none; }
}

/* --- Venue photo hover-swap (exterior → interior) --- */
.hover-swap { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
div:hover > .hover-swap { opacity: 1; }

/* --- Scroll reveal --- */
[data-screen-label] > *:not([data-no-reveal]), footer {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-revealed][data-revealed] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-screen-label] > *, footer { opacity: 1; transform: none; transition: none; }
}

/* --- Room for the cursive's swashes ---------------------------------------
   Bickham Script Pro's flourishes drop roughly 0.6-0.7em below the line box,
   so at the tight line-heights the headings use (1 - 1.15) the ink escapes the
   element's own box. Chrome paints that overflow; Safari clips it, which sliced
   the tail off r.s.v.p., the event titles and the hero names.

   Every element set in var(--script) therefore carries `padding-bottom: 0.75em`
   with the same amount taken straight back off its margin-bottom, so the ink
   sits inside the box while the spacing on the page is unchanged. Keep both
   halves together — padding without the margin adjustment adds a visible gap.
   Re-apply this when ingesting a new design export. */

/* --- Photo slots that fall back to an empty frame when the asset is missing --- */
.photo-slot { background: var(--panel); overflow: hidden; }
.photo-slot .slot-caption {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  font-size: calc(10px * var(--bfs));
  font-weight: var(--bw);
  letter-spacing: calc(2.5px * var(--lsf));
  text-transform: var(--tt);
  color: #9a938a;
  border: 1px dashed #cfcabd;
}
.photo-slot.slot-empty .slot-caption { display: flex; }

/* --- RSVP option rows --- */
.pick-group { display: flex; flex-direction: column; gap: 14px; }
.pick-option { display: flex; align-items: center; gap: 12px; cursor: pointer; background: none; border: none; padding: 0; font-family: var(--body); color: var(--ink); text-align: left; }
.pick-option .pick-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--ink); box-sizing: border-box;
  display: inline-block; background: transparent; flex: 0 0 auto;
}
.pick-option[aria-checked="true"] .pick-dot { background: var(--ink); }
.pick-option .pick-label {
  font-size: calc(12px * var(--bfs));
  font-weight: var(--bw);
  letter-spacing: calc(2px * var(--lsf));
  text-transform: var(--tt);
}

/* --- Guest name inputs (added dynamically) --- */
.guest-name-input {
  margin-top: 10px; width: 100%; box-sizing: border-box;
  background: var(--panel); border: none; border-bottom: 1px solid #545454;
  padding: 12px 10px; font-family: var(--body);
  font-size: calc(14px * var(--bfs));
  letter-spacing: calc(1px * var(--lsf));
  color: var(--ink);
}

/* Hide the engaged video row entirely if the reel isn't available */
.video-missing { display: none !important; }

/* --- Mobile (most guests open this from WhatsApp on iOS) ---
   The design ships absolute values against its own type scale (--bfs 0.93,
   --lsf 1.25). This repo runs a larger scale, so the same proportions are
   expressed through the variables rather than hard-coded px. */
@media (max-width: 640px) {
  .theme { --bfs: 1.09; --lsf: 1.18; }

  /* !important throughout: these elements carry the design's inline styles. */
  [data-header] { padding: 20px 6vw !important; font-size: calc(11px * var(--bfs)) !important; letter-spacing: calc(2px * var(--lsf)) !important; }

  /* iOS zooms the page when a field under 16px takes focus */
  input, select, textarea { font-size: 16px !important; }

  [data-date-long] { display: none !important; }
  [data-date-short] { display: inline !important; }

  /* Keep the 0.75em that holds Bickham's descending swashes inside the box
     (see penang.html) — a bare `padding: 0 0.2em` would reset it here. */
  [data-hero-names] { font-size: calc(min(62px, 11.4vw) * var(--hs)) !important; padding: 0 0.2em 0.75em !important; }

  [data-scribble] { font-size: 0.42em !important; bottom: 92% !important; }

  [data-engaged-row] { flex-direction: column !important; gap: 32px !important; }
  [data-engaged-row] > span { flex: none !important; text-align: center !important; }
  [data-engaged-row] video { width: 78vw !important; }

  [data-screen-label="Closing"] { padding-top: 170px !important; padding-bottom: 40px !important; }
  [data-screen-label="Closing"] [data-closing-photo] { margin-top: 0 !important; }
  [data-closing-photo] { flex-direction: column !important; gap: 40px !important; }
  [data-closing-photo] > span { flex: none !important; text-align: center !important; }
  [data-closing-photo] [data-arrow-wrap] { width: 78vw !important; }

  [data-arrow-wrap] { margin: 14vw 0 16vw !important; }
  [data-arrow-wrap] svg:first-of-type { left: -2% !important; top: -22% !important; width: 34% !important; }
  [data-arrow-wrap] svg:nth-of-type(2) { right: -12% !important; bottom: -45% !important; width: 32% !important; }
  [data-arrow-name="jeremy"] { left: -8% !important; top: -20% !important; transform: rotate(-6deg) !important; font-size: 22px !important; }
  [data-arrow-name="yonghui"] { right: -8% !important; bottom: -46% !important; transform: rotate(4deg) !important; font-size: 22px !important; }

  footer { padding: 24px 6vw !important; text-align: center !important; }
}