/* ============================================================
   Petal & Seal — invitation engine
   ------------------------------------------------------------
   Every colour in this file is a token. A theme (themes/*.css)
   redefines the tokens and nothing else, so one stylesheet drives
   every motif. If you find yourself writing a literal colour here,
   it belongs in :root instead.
   ============================================================ */

/* ---------- self-hosted fonts -------------------------------
   No fonts.googleapis.com: that would send every guest's visit —
   including their personalised ?guest= URL in the Referer — to a
   third party. Both families are SIL OFL, which permits this.     */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../assets/fonts/cormorant-garamond-variable.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../assets/fonts/cormorant-garamond-italic-variable.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url("../assets/fonts/jost-variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* motif — themes override this block and only this block */
  --deep:#3f4f60; --mid:#5c7488; --light:#aec6d8; --light-soft:#d4e2ec;
  --warm:#e3c0c2; --warm-deep:#cf9ea2;
  --base:#f6f1e7; --base-2:#efe7d8;
  --hair:#b3a892; --metal:#b99a5b;
  --ink:#3c4650; --ink-light:#f4efe6;

  --petal-1:var(--warm); --petal-2:var(--light);
  --bg-1:#e9eef2; --bg-2:#f2ece1; --bg-3:#dfe7ee;

  --env-face:#efe7d6; --env-lid:#e6dbc5; --env-inner:#fffdf8; --env-letter:#fffdf8;

  --panel-alpha:0.88;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--serif); color:var(--ink);
  background:var(--base); -webkit-font-smoothing:antialiased;
}
/* Must stay !important. Author rules like .field{display:block} otherwise beat
   the UA [hidden] rule, which once leaked the plus-one block onto invitations
   that were never given one. */
[hidden]{display:none !important}
img{max-width:100%;display:block}

/* ---------- backdrop ---------- */
.bg-garden{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 800px at 15% 10%, var(--bg-1), transparent 60%),
    radial-gradient(1000px 700px at 85% 85%, var(--bg-3), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--base));
}
.bg-veil{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35))}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---------- petals ----------
   A div masked by one greyscale PNG, tinted by a token. That is why a motif
   needs no new artwork: the same file becomes blush, sage or gold. */
.petal-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.petal-layer--back{z-index:-1}
.petal-layer--front{z-index:40}
.petal{
  position:absolute; top:-12vh;
  width:var(--size); height:var(--size);
  opacity:var(--op);
  background-color:var(--petal-1);
  -webkit-mask:url("../assets/petal.png") center/contain no-repeat;
  mask:url("../assets/petal.png") center/contain no-repeat;
  animation:fall var(--dur) linear var(--delay) infinite;
}
.petal:nth-child(even){background-color:var(--petal-2)}
@keyframes fall{
  0%{transform:translate3d(0,-12vh,0) rotate(0)}
  100%{transform:translate3d(var(--drift),118vh,0) rotate(var(--spin))}
}
@media (prefers-reduced-motion:reduce){ .petal{display:none} }

/* ---------- type primitives ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--mid); margin:0 0 .6rem;
}
.eyebrow--light{color:var(--light-soft)}
.eyebrow--sm{font-size:.63rem;letter-spacing:.26em}
.section__title{font-size:clamp(1.9rem,5vw,2.9rem);font-weight:300;margin:0 0 1.4rem;color:var(--deep)}
.panel--deep .section__title{color:var(--ink-light)}
.signature{font-style:italic}
.rule{display:flex;align-items:center;gap:.8rem;justify-content:center;margin:0 0 1.6rem}
.rule span{flex:1;height:1px;background:var(--hair);opacity:.55;max-width:90px}
.rule i{width:5px;height:5px;background:var(--metal);transform:rotate(45deg)}

/* ---------- layout ---------- */
.site{position:relative}
/* No z-index here. position:relative alone already paints .site above the
   fixed backdrops, because those sit at NEGATIVE z-index. Adding z-index:1
   would open a stacking context, and then .botanical's mix-blend-mode would
   have only .site's transparent backdrop to multiply against — which shows
   up as a white box around every illustration. */
.site section{position:relative;overflow:hidden}
section,.hero{padding:clamp(3rem,8vw,5.5rem) 1.25rem}
.panel{
  max-width:780px;margin:0 auto;padding:clamp(2rem,6vw,3.4rem);
  text-align:center;border-radius:3px;
  /* No backdrop-filter and no z-index here. Either creates a stacking context
     that traps this panel's children beneath the front petal layer — which is
     how petals ended up drifting across the couple's faces. Raise the alpha
     instead if it needs to be more opaque. */
  background-color:color-mix(in srgb, var(--base) calc(var(--panel-alpha)*100%), transparent);
  /* Real stock. paper.jpg is greyscale, so background-blend-mode:multiply tints
     it with whatever the theme sets — one texture serves every motif. Blending
     the BACKGROUND (not mix-blend-mode) keeps children out of the blend, so no
     stacking context is created and the petal layering stays intact. */
  background-image:url("../assets/paper.jpg");
  background-size:cover;
  background-blend-mode:multiply;
  box-shadow:0 1px 40px rgba(0,0,0,.06);
}
.panel--deep{
  background-color:var(--deep);
  background-image:url("../assets/paper.jpg");
  background-size:cover;
  background-blend-mode:soft-light;   /* multiply would crush a dark panel */
}
.panel--deep{ color:var(--ink-light); }
.panel--deep p{color:var(--ink-light);opacity:.9}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh; min-height:100dvh;   /* dvh: mobile Safari's URL bar made
                                            100vh push the scroll cue off-screen */
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.hero__inner{max-width:680px}
.hero__names{font-size:clamp(3rem,13vw,6.5rem);font-weight:300;line-height:1;margin:.3rem 0;color:var(--deep)}
.hero__amp{display:block;font-size:.42em;font-style:italic;color:var(--metal);margin:.25em 0}
.hero__sub{font-style:italic;color:var(--mid);margin:.2rem 0 1rem}
.hero__greeting{font-size:1.35rem;color:var(--deep);margin:.6rem 0}
.hero__meta{font-family:var(--sans);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mid)}
.hero__more{
  display:inline-flex;flex-direction:column;align-items:center;gap:.45rem;
  margin-top:2.2rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--deep);text-decoration:none;
}
.hero__more-arrow{width:22px;height:13px;fill:none;stroke:var(--metal);stroke-width:1.5;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero__rsvp{
  display:block;margin-top:1.3rem;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mid);text-decoration:none;
  border-bottom:1px solid var(--hair);padding-bottom:2px;width:max-content;margin-inline:auto;
}

/* ---------- countdown ---------- */
.date__day{font-size:clamp(1.5rem,4.5vw,2.3rem);font-weight:300;margin:0;color:var(--deep)}
.date__year{font-style:italic;color:var(--mid);margin:.3rem 0 1.8rem}
.countdown{display:flex;justify-content:center;gap:clamp(1rem,5vw,2.6rem);margin:0 0 1.8rem}
.cd span{display:block;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:300;color:var(--deep)}
.cd small{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.btn{
  display:inline-block;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.75rem 1.7rem;border-radius:999px;text-decoration:none;
  background:var(--mid);color:var(--base);border:none;cursor:pointer;
}
.btn--small{padding:.6rem 1.3rem}
.cal{display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap}
.cal__alt{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;color:var(--mid)}

/* ---------- timeline ---------- */
.timeline{display:grid;gap:1.3rem;max-width:460px;margin:0 auto;text-align:left}
.timeline__item{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:baseline}
.timeline__time{font-size:1.25rem;color:var(--deep)}
.timeline__time em{font-size:.6em;font-style:normal;color:var(--mid)}
.timeline__label{font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--deep)}
.timeline__sub{display:block;font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;color:var(--mid);font-size:.95rem}

/* ---------- entourage ---------- */
.ent-group{margin:0 0 2.2rem}
.ent-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.6rem}
.ent-role{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mid);margin:0 0 .5rem}
.ent-name{margin:.18rem 0;font-size:1.02rem;color:var(--deep)}
.panel--deep .ent-role{color:var(--light-soft)}
.panel--deep .ent-name{color:var(--ink-light)}

/* ---------- venue / travel ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem;text-align:left}
.card__name{font-size:1.15rem;color:var(--deep);margin:.2rem 0}
.card__meta{color:var(--mid);font-size:.94rem;margin:.2rem 0}

/* ---------- palette swatches ---------- */
.swatches{display:flex;gap:1.1rem;justify-content:center;margin:1.6rem 0 0;flex-wrap:wrap}
.swatch{text-align:center;font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--light-soft)}
.swatch i{display:block;width:46px;height:46px;border-radius:50%;margin:0 auto .5rem;border:1px solid rgba(255,255,255,.35)}

/* ---------- RSVP ---------- */
.field{display:block;margin:1.1rem 0;text-align:left}
.field>span{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.4rem;color:var(--light-soft)}
.field input,.field textarea,.field select{
  width:100%;padding:.7rem .8rem;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:var(--ink-light);font:inherit;border-radius:3px;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)}
.choices{display:flex;gap:1.4rem;justify-content:center;margin:1.4rem 0;flex-wrap:wrap}
.choices label{font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;cursor:pointer}
.rsvp__deadline{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.rsvp__status{margin-top:1rem;font-style:italic;min-height:1.4em}
.demo-note{
  margin:1.4rem auto 0;max-width:420px;padding:.8rem 1rem;border-radius:3px;
  background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.35);
  font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;line-height:1.6;
}

/* ---------- envelope intro ----------
   Modelled on real stationery: textured coloured stock, a curved flap, a lace
   belly band and a pressed wax seal. The seal art has a deliberately BLANK
   centre so each couple's initials are set in live text over it — no bespoke
   monogram asset per client. */
.intro{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background-color:var(--base);background-image:url("../assets/paper.jpg");
  background-size:cover;background-blend-mode:multiply;transition:opacity .9s ease}
.intro.gone{opacity:0;pointer-events:none}

.envelope{position:relative;width:min(88vw,430px);aspect-ratio:3/2;cursor:pointer}
.envelope__body{
  position:absolute;inset:0;border-radius:4px;z-index:0;
  background-color:var(--env-face);
  background-image:url("../assets/paper.jpg");
  background-size:cover;background-blend-mode:multiply;
  box-shadow:0 22px 60px rgba(0,0,0,.22), inset 0 0 60px rgba(0,0,0,.06);
}
.envelope__lid{
  position:absolute;left:0;right:0;top:0;height:31%;
  background-color:var(--env-lid);
  background-image:url("../assets/paper.jpg");
  background-size:cover;background-blend-mode:multiply;
  /* A curved flap, not a hard triangle — the single biggest tell that a CSS
     envelope is a CSS envelope. objectBoundingBox units keep it responsive. */
  clip-path:url(#flapCurve);
  transform-origin:top;backface-visibility:hidden;
  transition:transform .95s cubic-bezier(.6,-.18,.3,1.35);
  z-index:4;filter:drop-shadow(0 5px 9px rgba(0,0,0,.16));
}
.envelope.open .envelope__lid{transform:rotateX(178deg);z-index:0}

.envelope__pocket{
  position:absolute;left:0;right:0;top:27%;bottom:0;border-radius:0 0 4px 4px;z-index:2;
  background-color:var(--env-face);
  background-image:url("../assets/paper.jpg");
  background-size:cover;background-blend-mode:multiply;
  box-shadow:0 -3px 10px rgba(0,0,0,.10);
}

/* Addressee printed on the envelope front, below the flap and above the band —
   a guest should see their own name before they open anything. */
.envelope__front{
  position:absolute;left:8%;right:8%;top:35%;text-align:center;z-index:3;
  pointer-events:none;transition:opacity .45s ease;
}
.envelope.open .envelope__front{opacity:0}
.envelope__to{font-family:var(--sans);font-size:.55rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--env-ink);opacity:.72;margin:0 0 .35rem}
.envelope__name{font-size:clamp(1.15rem,4.4vw,1.6rem);color:var(--env-ink);
  margin:0;line-height:1.2;font-weight:300}

/* The insert, hidden until the flap lifts. */
.envelope__letter{
  position:absolute;left:5.5%;right:5.5%;top:28%;bottom:5%;
  background-color:var(--env-letter);
  background-image:url("../assets/paper.jpg");
  background-size:cover;background-blend-mode:multiply;
  border-radius:2px;box-shadow:0 2px 14px rgba(0,0,0,.12);
  transform:translateY(0);transition:transform 1s ease .35s;z-index:1;
}
.envelope.open .envelope__letter{transform:translateY(-62%)}

/* lace belly band — sits across the fold, like a real ribbon */
.envelope__lace{
  position:absolute;left:-1.5%;right:-1.5%;top:65%;height:auto;z-index:5;
  opacity:.78;pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.16));
  transition:opacity .5s ease,transform .5s ease;
}
.envelope.open .envelope__lace{opacity:0;transform:translateY(-18px)}

.envelope__seal{
  position:absolute;left:50%;top:71%;transform:translate(-50%,-50%);
  width:104px;z-index:6;transition:transform .55s ease,opacity .55s ease;
}
.envelope__seal img{width:100%;display:block;filter:drop-shadow(0 4px 7px rgba(0,0,0,.28))}
.envelope__initials{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.02rem;letter-spacing:.04em;
  color:#6b4d1d;                       /* struck into gold wax, not printed on it */
  text-shadow:0 1px 0 rgba(255,246,222,.55), 0 -1px 1px rgba(0,0,0,.28);
  padding-bottom:2px;white-space:nowrap;
}
.envelope.open .envelope__seal{transform:translate(-50%,-50%) scale(.42) rotate(-12deg);opacity:0}
.envelope__hint{position:absolute;left:0;right:0;bottom:-2.6rem;text-align:center;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mid)}

/* ---------- botanicals ----------
   Rendered on white and composited with multiply, so the white simply drops
   out against any light surface. No cutout, therefore no halo — background
   removal is what wrecked the floral wreath on the last project. */
.botanical{
  position:absolute;pointer-events:none;user-select:none;opacity:.9;
  /* Alpha is baked into the PNGs (white -> transparent), so no blend mode is
     needed. That keeps them independent of stacking context and lets them sit
     on dark panels as happily as light ones. */
}
.botanical--hero{width:min(42vw,300px);right:-2%;bottom:4%;transform:rotate(6deg)}
.botanical--hero-2{width:min(34vw,230px);left:-4%;top:8%;transform:rotate(-165deg);opacity:.6}
.botanical--section{width:min(30vw,190px);right:2%;top:-40px;transform:rotate(12deg);opacity:.55}
@media (max-width:640px){
  .botanical--hero{width:46vw;right:-8%}
  .botanical--hero-2{display:none}
  .botanical--section{width:34vw;opacity:.4}
}

/* ---------- reveal ---------- */
.site section{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.site section.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .site section{opacity:1;transform:none} }

/* ---------- footer ---------- */
.foot{text-align:center;padding:3rem 1.25rem 4rem;color:var(--mid);font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.foot a{color:var(--mid)}