/* ==========================================================================
   Wedding Invite — base, background, card, text, motion
   (envelope styles live in envelope.css)
   RULE: no CSS `transform` on GSAP-animated elements (.card, .card__inner,
   .fo-line, .bt). Center with inset/margin:auto instead.
   ========================================================================== */

/* ---------- Reset basics ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  background: var(--page-grain) 0 0 / 220px 220px, var(--page-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img {
  max-width: 100%;
}

/* ---------- Tokens ---------- */
:root {
  --page-bg: #3d0e17;
  --page-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --maroon-900: #2a0710;
  --maroon-800: #4a0d1a;
  --maroon-700: #6b1424;
  --gold: #d4a64a;
  --gold-light: #f1d48a;
  --ivory: #fbf1dc;
  --ivory-deep: #ecd7ad;
  --card-text: #6a3b2a;
  --card-name: #8b1a1a;
  --marigold: #f29f05;
  --vermilion: #c8361b;

  --f-serif: 'Playfair Display', Georgia, serif;
  --f-script: 'Pinyon Script', cursive;
  --f-deva: 'Tiro Devanagari Marathi', serif;
  --f-body: 'Cormorant Garamond', Georgia, serif;

  --card-w: min(86vw, calc(78svh / 1.4145));
  --card-h: calc(var(--card-w) * 1.4145);
  --env-w: calc(var(--card-w) * 1.08);
  --env-h: calc(var(--card-h) * 1.05);
  --flap-h: calc(var(--env-h) * 0.45);
  --seal: calc(var(--env-w) * 0.2);

  /* Kanjivaram temple red + gold zari */
  --silk-red: #9b1b24;
  --silk-red-deep: #7a1018;
  --zari: #d4a64a;
  --zari-light: #f1d48a;
  --zari-dark: #9c7424;
  --silk: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 40%, rgba(0, 0, 0, 0.10)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 3px);

  /* Paper-noise texture, defined once and reused */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 1.2 -0.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

/* ---------- Body background ---------- */
body {
  min-height: 100vh;
  min-height: 100svh;
  color: #6a3b2a;
  font-family: var(--f-body);
  overflow-x: hidden;
  background: var(--page-grain) 0 0 / 220px 220px, var(--page-bg);
}

/* ---------- Card ---------- */
.card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--card-w);
  height: var(--card-h);
  z-index: 2;
  container-type: inline-size;
  perspective: 2600px;
}

.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ivory);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.card__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__face--back {
  transform: rotateY(180deg);
}

/* ---------- Petals canvas ---------- */
#petals {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

/* ---------- Music toggle (shown once the envelope opens) ---------- */
.sound-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 14px);
  right: 14px;
  z-index: 60;
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid rgba(212, 166, 74, 0.6);
  border-radius: 50%;
  background: rgba(42, 7, 16, 0.55);
  color: var(--gold-light);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}

.sound-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sound-toggle__off,
.sound-toggle.is-muted .sound-toggle__on {
  display: none;
}

.sound-toggle.is-muted .sound-toggle__off {
  display: inline;
}

/* ---------- Reduced motion ---------- */
html.reduced-motion .card {
  position: relative;
  inset: auto;
  height: auto;
  margin: 0 auto;
  perspective: none;
}

html.reduced-motion .card__inner {
  height: auto;
  transform-style: flat;
}

html.reduced-motion .card__face {
  position: relative;
  inset: auto;
  height: var(--card-h);
}

html.reduced-motion .card__face--back {
  transform: none;
}

html.reduced-motion .card__face + .card__face {
  margin-top: 24px;
}

html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}