/* =========================================================
   Wedding invitation — Артем і Влада
   Built from the Figma design. Plain CSS, no build step.
   ========================================================= */

/* ---- Design tokens ---- */
:root {
  --bg-blue:   #dff5ff;
  --ink:       #000000;
  --hand:      #2456c3;   /* handwriting blue (Caveat) */
  --paper:     #fafaee;   /* letter card */
  --navy-1:    #1e2750;
  --navy-2:    #1b2240;
  --cream-1:   #e8d7b0;   /* questionnaire card */
  --cream-2:   #e9dcbe;

  /* Headings use the real "B52" typewriter font, self-hosted (see @font-face
     below). system-ui is a per-glyph fallback for symbols B52 lacks (e.g. →). */
  --font-display: "B52", system-ui, sans-serif;
  --font-hand:    "Caveat", cursive;
}

/* Self-hosted display font from the Figma design */
@font-face {
  font-family: "B52";
  src: url("assets/B52.woff2") format("woff2"),
       url("assets/B52.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  position: relative;
  background: var(--bg-blue);
  color: var(--ink);
  font-family: var(--font-display);
  overflow-x: hidden;
}

/* Paper texture over the blue, scrolls with the content */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/bg-texture.png") center / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

img { display: block; max-width: 100%; }

/* ---- Centered column (matches the Figma desktop = narrow centered layout) ---- */
.page {
  width: 100%;
  /* Fill modern phones edge-to-edge (no side gutters) and allow the whole column
     to scale up a little larger than the 390px Figma frame for comfier reading. */
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* generous separation between the main sections, so within-block spacing
     (e.g. the dress-code palette) reads as clearly tighter than block-to-block */
  gap: 92px;
}

/* ---- Shared type ---- */
.title,
.title-sm,
.title-spaced {
  margin: 0;
  width: 100%;   /* full column width so text wraps/centres instead of overflowing */
  font-family: var(--font-display);
  /* B52 only ships a Regular weight; 400 uses its true weight so the browser
     doesn't synthesise a heavier faux-bold (which read as too thick). */
  font-weight: 400;
  font-synthesis: none;
  text-align: center;
  line-height: 1.2;
}
.title        { font-size: 36px; }
/* Fluid so the one-line hero title scales to fit narrow phones yet grows on wide
   ones; the 34px max caps it on desktop (where vw would otherwise be huge). */
.title-spaced { font-size: clamp(25px, 7.1vw, 34px); text-transform: uppercase; letter-spacing: 3.2px; }
.title-sm     { font-size: 27px; line-height: 1.1; }

.hand {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--hand);
  letter-spacing: 0.8px;
  text-align: center;
  line-height: 1.15;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn:hover  { background: rgba(0, 0, 0, 0.06); }
.btn:active { transform: translateY(1px); }
.map-btn    { padding: 6px 10px 6px 8px; }
.pin        { flex: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.couple-dancing { width: 226px; height: auto; }

/* ---- Hero photo — the couple polaroid. Composite PNG exported from Figma:
        frame, both photos, washi tape and caption are baked in and pre-tilted,
        so it needs no CSS frame/rotation, only sizing. ---- */
.hero-photo {
  width: 72%;
  max-width: 292px;
  height: auto;
}

/* =========================================================
   ENVELOPE / LETTER
   ========================================================= */
.envelope-section { width: 100%; }

/* The whole composition is a scaled port of the Figma frame `animation_core`
   (998 × 1114). Every layer is positioned as a percentage of this stage, so the
   design stays pixel-faithful at any column width. Layers stack by z-index. */
.envelope-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 998 / 1114;
  /* visible so the risen invitation can extend a little above the stage (into the
     60px section gap) — it ends higher than the Figma frame so the "місце" row
     clears the envelope mouth. */
  overflow: visible;
}
.envelope-stage > * { position: absolute; }

/* --- envelope back: the navy interior behind everything (Figma "back side") --- */
.env2-back {
  left: 50%; bottom: 5.39%;
  width: 89.68%; height: 52.96%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1e2750, #161d3d);
  border-radius: 4px;
  box-shadow: 0.9% 3.5% 2% rgba(0, 0, 0, 0.25),
              inset 2px 2px 1.6px rgba(255, 255, 255, 0.2);
  z-index: 0;
}

/* --- the flap's inside: the second half of the flap rotation — a navy triangle
       (apex up, rounded, baked into the SVG). Anchored by its BOTTOM at the mouth
       (the hinge line cap_1 collapses to), it stretches *upward*, standing open
       above the envelope — it does not grow down into it (Figma "cap_2",
       bottom:649 = 58.26%). --- */
.env2-cap2 {
  left: 50%; bottom: 58.26%;
  width: 89.48%; height: 30.25%;
  transform: translateX(-50%);
  z-index: 1;
}
.env2-cap2 img { display: block; width: 100%; height: 100%; }

/* --- the invitation card (Figma "letter"): bottom pinned, grows upward out of
       the envelope; content is clipped to the box while it rises --- */
.env2-letter {
  left: 50%; bottom: 14.54%;
  width: 82.66%; height: 92%;
  transform: translateX(-50%);
  overflow: hidden;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 12px 13px 20px rgba(0, 0, 0, 0.2);
  padding: 16px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

/* --- envelope front: opaque pocket + side walls, open at the top-centre.
       The PNG carries its own soft shadow, so it is scaled up and offset inside
       an overflow-clipped box exactly as in Figma. --- */
.env2-front {
  left: 50%; bottom: 5.39%;
  width: 89.58%; height: 54.85%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 3;
}
.env2-front img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  max-width: none;
}

/* --- front flap: closed at rest, then lifts open. The box is anchored by its
       TOP edge (the flap's hinge, at the envelope mouth), so shrinking its height
       retracts the tip *upward* — the flap opens up, it does not drop down.
       Base values are the *open* (lifted-away) state so that without JS the
       envelope is shown open and the invitation stays readable; the `.js` rule
       below puts it back closed before first paint. --- */
.env2-cap1 {
  left: 50%; top: 41.74%;
  width: 89.48%; height: 0.2%;
  opacity: 0;
  transform: translateX(-50%);
  overflow: visible;
  z-index: 4;
}
/* The SVG carries transparent padding around the triangle (for its drop-shadow),
   so the img is sized larger than the box with negative insets — exactly Figma's
   inset-[-1.98% -3.51% -6.66% -1.42%] — so the *triangle* fills the box and the
   flap fully covers the envelope mouth when closed. */
.env2-cap1 img {
  display: block;
  position: absolute;
  top: -1.98%; left: -1.42%;
  width: 104.93%; height: 108.64%;
  max-width: none;
}

/* --- baby's-breath flowers (Figma "flowers") --- */
.env2-flowers {
  left: 49.32%; bottom: 4.56%;
  width: 44.73%; height: auto;
  transform: translateX(-50%);
  z-index: 5;
}

/* --- postmark stamp (Figma "stamp") --- */
.env2-stamp {
  left: 21.02%; bottom: 10.94%;
  width: 19%; height: auto;
  transform: translateX(-50%);
  z-index: 6;
}

/* =========================================================
   Opening animation — ported from Figma motion data
   (node animation_core 40:1164; 4s, plays once).

   Default (no JS)  → open state, so the invitation is always readable.
   .js              → closed state, applied before first paint (see <head>).
   .is-playing      → runs the keyframes closed → open and holds open.
   .is-open         → jumps straight to open (reduced-motion / no observer).
   ========================================================= */
.js .env2-cap2  { height: 0; }
.js .env2-cap1  { height: 31.69%; opacity: 1; }
.js .env2-letter { height: 36.44%; }

.envelope-stage.is-open .env2-cap2   { height: 30.25%; }
.envelope-stage.is-open .env2-cap1   { height: 0.2%; opacity: 0; }
.envelope-stage.is-open .env2-letter { height: 92%; }

.envelope-stage.is-playing .env2-cap2 {
  animation: env2-cap2 4s linear forwards;
}
.envelope-stage.is-playing .env2-cap1 {
  animation: env2-cap1-h 4s linear forwards, env2-cap1-o 4s linear forwards;
}
.envelope-stage.is-playing .env2-letter {
  animation: env2-letter 4s linear forwards;
}

@keyframes env2-cap2 {
  0%      { height: 0; }
  19.98%  { height: 0; animation-timing-function: ease-out; }
  41.43%  { height: 30.25%; }
  100%    { height: 30.25%; }
}
@keyframes env2-cap1-h {
  0%      { height: 31.69%; }
  1.79%   { height: 31.69%; animation-timing-function: cubic-bezier(0.814, -0.003, 1, 1); }
  19.98%  { height: 0.2%; }
  100%    { height: 0.2%; }
}
@keyframes env2-cap1-o {
  0%      { opacity: 1; }
  19.38%  { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  19.98%  { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes env2-letter {
  0%      { height: 36.44%; }
  44.42%  { height: 36.44%; animation-timing-function: ease-in-out; }
  97.05%  { height: 92%; }
  100%    { height: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-stage.is-playing .env2-cap2,
  .envelope-stage.is-playing .env2-cap1,
  .envelope-stage.is-playing .env2-letter { animation: none; }
  .js .env2-cap2   { height: 30.25%; }
  .js .env2-cap1   { height: 0.2%; opacity: 0; }
  .js .env2-letter { height: 92%; }
}

/* two-rings mark at the top of the invitation (Figma image 18, node 65:228).
   align-self centres it — the letter is a flex column without align-items:center,
   so a fixed-width child would otherwise sit against the left edge. */
.letter__rings { width: 52px; height: auto; align-self: center; }

.letter__lead {
  margin: 0;
  font-size: 23px;
  line-height: 1.1;
  text-align: center;
}

/* date / time / place table */
.fields { margin: 0; display: flex; flex-direction: column; }
.field  { display: flex; align-items: stretch; }
.field + .field { margin-top: -1px; }           /* collapse shared border */
.field__key,
.field__val {
  border: 1px solid var(--ink);
  padding: 6px 6px;
}
.field__key {
  margin: 0;
  width: 78px;
  flex: none;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;   /* keep "місце:" on one line so the value column keeps its width */
}
.field + .field .field__val,
.field + .field .field__key { margin-left: 0; }
.field__val {
  margin: 0 0 0 -1px;          /* collapse shared vertical border */
  flex: 1;
  min-width: 0;
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.05;
  color: var(--hand);
  display: flex;
  align-items: center;
}

/* =========================================================
   VENUE
   ========================================================= */
.venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
/* ---- Venue photos — museum polaroids. Composite PNGs from Figma (washi tape,
        captions and hand-drawn arrows baked in, already tilted); just size them. ---- */
.venue-photo {
  width: 100%;
  height: auto;
}

/* =========================================================
   AFTER-PARTY (GOGOL)
   ========================================================= */
.gogol { position: relative; width: 100%; }
.gogol__img { width: 100%; height: auto; }
.gogol__text {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  width: 200px;
  margin: 0;
  font-family: var(--font-display);
  /* B52 is Regular-only; 400 + no synthesis renders its true (thinner) weight
     instead of the browser's faux-bold. */
  font-weight: 400;
  font-synthesis: none;
  font-size: 25px;
  line-height: 1.35;
  text-align: center;
}
.gogol__addr {
  display: block;
  margin-top: 8px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
}

/* =========================================================
   DRESS CODE
   ========================================================= */
/* dress-code block — values ported from Figma node 20:1876 */
.dresscode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.dresscode__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.dresscode__side { width: 90px; height: 200px; object-fit: contain; flex: none; }
.dresscode__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.dresscode__title { font-size: 28px; }
.dresscode__hint { margin: 0; font-size: 27px; letter-spacing: 0.96px; line-height: 1.2; color: var(--ink); }
.dresscode__palette-label {
  margin: 0;                         /* drop the default <p> margin so it sits close to the swatches */
  width: 100%;                       /* wrap within the column (B52 is wide) */
  font-family: var(--font-display);  /* B52 typewriter, not the handwriting */
  font-synthesis: none;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: 0.96px;
  color: var(--ink);
}

/* recommended colour palette — fabric swatches. Each 57.9px circle is the gray
   fabric texture with its colour multiplied on top, chained with a -6.77px
   overlap and a white stroke (matches Figma node 20:1876). */
/* margin-top + the .dresscode 6px flex gap = 16px between the label and swatches */
.dresscode__palette { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 10px; }
.swatch-row { display: flex; }
.swatch {
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  margin-left: -6.77px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: url("assets/swatch-texture.png") center / cover, #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;            /* keep the multiply blend inside each swatch */
}
.swatch-row .swatch:first-child { margin-left: 0; }
.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  opacity: var(--o, 0.8);
  mix-blend-mode: multiply;
}

/* =========================================================
   GUEST QUESTIONNAIRE CARD
   ========================================================= */
.form-card {
  /* inset ~16px from each page edge so the card doesn't touch the screen sides */
  width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 24px;
  border-radius: 2px;
  background: linear-gradient(163deg, var(--cream-1) 13%, var(--cream-2) 93%);
  box-shadow: 4px 6px 5px rgba(0, 0, 0, 0.25),
              inset 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.form-card__img { height: auto; }
.form-card__img[src*="form-top"] { width: 96px; }
.form-card__img[src*="form-mid"] { width: 92px; }
.form-card__lead { max-width: 350px; }

/* =========================================================
   CLOSING
   ========================================================= */
.footer-deco { width: 156px; height: auto; }
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.closing__couple { width: 326px; max-width: 100%; height: auto; }
/* wider spacing between the two signature lines */
.closing__sign { line-height: 1.6; }

/* =========================================================
   Small-screen safety (very narrow phones)
   ========================================================= */
@media (max-width: 360px) {
  .title { font-size: 30px; }
  .title-spaced { font-size: 27px; }
}