/* ================================================================
   PAGE TRANSITIONS — envelope intro, doors, petal sweep
   Shared by index.html and the travel guide pages (which don't load
   styles.css), so colours are redeclared here as --kg-* tokens.
   Driven by page-transitions.js.
================================================================ */

:root {
  --kg-sage:       #87A97B;
  --kg-sage-deep:  #5E7F52;
  --kg-sage-light: #C7DBBD;
  --kg-sage-pale:  #E4EEDC;
  --kg-cream:      #FBF6E9;
  --kg-cream-warm: #F5EDD8;
  --kg-cream-deep: #EDE2C4;
  --kg-ivory:      #FFFDF7;
  --kg-gold:       #C9A876;
  --kg-gold-light: #DEC59A;
  --kg-gold-deep:  #A8854D;
  --kg-blush:      #E8C4B8;
  --kg-text:       #2C3A26;
  --kg-ease-door:  cubic-bezier(.77, 0, .18, 1);
}

html.kg-lock,
html.kg-lock body { overflow: hidden !important; }

/* Hold the hero's scroll-reveal until the doors part, so guests see
   the names rise in rather than having it play behind the overlay. */
html.kg-intro-active #hero .reveal {
  opacity: 0 !important;
  translate: 0 26px !important;
}

/* ── DOORS ─────────────────────────────────────────────────────────
   Two panels that meet in the middle. `.is-closed` slides them shut,
   `.is-open` slides them apart. Used on its own for page-to-page
   links and as the backdrop of the envelope intro. */
.kg-doors {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: auto;
  overflow: hidden;
}
.kg-doors.is-open { pointer-events: none; }

.kg-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;            /* tiny overlap hides the seam on odd widths */
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,253,247,.85) 0%, transparent 60%),
    linear-gradient(160deg, var(--kg-cream) 0%, var(--kg-sage-pale) 100%);
  transition: transform .8s var(--kg-ease-door);
  will-change: transform;
}
.kg-door--l { left: 0;  transform: translateX(-101%); box-shadow: inset -1px 0 0 rgba(168,133,77,.35); }
.kg-door--r { right: 0; transform: translateX(101%);  box-shadow: inset 1px 0 0 rgba(168,133,77,.35); }

/* engraved panel frame on each door */
.kg-door::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  border: 1px solid rgba(201,168,118,.55);
  border-radius: 999px 999px 4px 4px / 160px 160px 4px 4px;
}
.kg-door--l::before { left: 22px; right: 14px; }
.kg-door--r::before { left: 14px; right: 22px; }

.kg-doors.is-closed .kg-door { transform: translateX(0); }
.kg-doors.is-open   .kg-door--l { transform: translateX(-101%); }
.kg-doors.is-open   .kg-door--r { transform: translateX(101%); }
.kg-doors.is-instant .kg-door { transition: none; }

/* monogram seal where the doors meet */
.kg-door-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: var(--kg-ivory);
  box-shadow:
    0 10px 30px rgba(94,127,82,.22),
    0 0 0 6px rgba(255,253,247,.7),
    0 0 0 7px rgba(201,168,118,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.kg-door-seal img { width: 54%; height: auto; }
.kg-doors.is-closed .kg-door-seal { opacity: 1; transform: scale(1); transition-delay: .45s; }
.kg-doors.is-open   .kg-door-seal { opacity: 0; transform: scale(1.25); transition-delay: 0s; transition-duration: .25s; }
.kg-doors.is-instant .kg-door-seal { transition: none; }
.kg-doors--intro .kg-door-seal { display: none; }

/* ── ENVELOPE INTRO ────────────────────────────────────────────────
   Timeline (classes added by JS on .kg-doors--intro):
   .s-in     envelope floats up
   .s-seal   wax seal pops
   .s-flap   flap swings open
   .s-card   card slides out of the pocket
   .s-front  card comes forward & grows, envelope sinks away
   .s-write  monogram + names write themselves in
   .is-open  doors part, card lifts off, petals burst            */
.kg-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.kg-env {
  --w: min(72vw, 420px);
  position: relative;
  width: var(--w);
  height: calc(var(--w) / 1.45);
  margin-top: calc(var(--w) * .28);
  perspective: 1400px;
  opacity: 0;
  transform: translateY(40px) scale(.94);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.s-in .kg-env { opacity: 1; transform: none; }

.kg-env-back,
.kg-env-front,
.kg-env-flap {
  position: absolute;
  inset: 0;
}
.kg-env-back {
  border-radius: 3px;
  box-shadow: 0 30px 60px rgba(31,48,32,.28), 0 6px 14px rgba(31,48,32,.18);
  z-index: 1;
}
.kg-env-front { z-index: 3; }
.kg-env-back svg,
.kg-env-front svg,
.kg-flap-face svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* flap: green outside, patterned liner inside, swung open about its top edge */
.kg-env-flap {
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.45,.05,.3,1);
}
.kg-flap-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kg-flap-out { filter: drop-shadow(0 2px 3px rgba(31,48,32,.25)); }
.kg-flap-in  { transform: rotateX(180deg); }
.s-flap .kg-env-flap { transform: rotateX(180deg); }

/* gold foil monogram (gradient masked by the logo) */
.kg-card-mono,
.kg-seal-mono {
  display: block;
  -webkit-mask: var(--kg-logo) center / contain no-repeat;
          mask: var(--kg-logo) center / contain no-repeat;
}

/* wax seal — champagne gold, slightly irregular, monogram pressed in */
.kg-env-seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 58%;
  width: calc(var(--w) * .2);
  height: calc(var(--w) * .2);
  margin: calc(var(--w) * -.1) 0 0 calc(var(--w) * -.1);
  border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%;
  background: radial-gradient(circle at 34% 28%, #EBD3A0 0%, #CDAA6E 38%, #A9844A 78%, #8D6C38 100%);
  box-shadow:
    0 4px 10px rgba(31,48,32,.4),
    inset 0 -3px 6px rgba(90,64,26,.35),
    inset 0 2px 3px rgba(255,240,205,.45);
  transition: transform .5s cubic-bezier(.5,-0.4,.7,1), opacity .4s ease .12s;
}
/* stamped rim */
.kg-env-seal::before {
  content: '';
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(90,64,26,.45), 0 1px 0 rgba(255,240,205,.5);
}
.kg-seal-emboss {
  position: absolute;
  inset: 24%;
  filter: drop-shadow(0 1px 0 rgba(255,240,205,.55));
}
.kg-seal-mono {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #7E602F, #9C7A44);
}
.s-seal .kg-env-seal { transform: translateY(-6px) scale(0) rotate(-25deg); opacity: 0; }

/* the invitation card */
.kg-card {
  position: absolute;
  z-index: 2;
  left: 5.5%;
  right: 5.5%;
  top: 6%;
  height: 88%;
  background:
    radial-gradient(ellipse at 50% 0%, #FFFFFB 0%, transparent 70%),
    linear-gradient(180deg, #FFFDF7, #FAF5E8);
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(31,48,32,.22), 0 2px 6px rgba(31,48,32,.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #34502F;
  transition: transform .75s cubic-bezier(.22,.61,.36,1), z-index 0s, opacity .6s ease;
}
/* double gilt rule frame */
.kg-card::before,
.kg-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.kg-card::before { inset: 6px;  border: 1px solid rgba(184,148,90,.75); }
.kg-card::after  { inset: 9px;  border: 1px solid rgba(184,148,90,.3); }

.s-card  .kg-card { transform: translateY(-62%); }
.s-front .kg-card {
  z-index: 6;
  transition: transform .9s cubic-bezier(.22,.61,.36,1), z-index 0s;
  transform: translateY(-34%) scale(1.5);
}
@media (max-width: 600px) {
  .s-front .kg-card { transform: translateY(-34%) scale(1.3); }
}

/* envelope body drops away once the card is out */
.kg-env-back,
.kg-env-front,
.kg-env-flap-wrap {
  transition: transform .8s cubic-bezier(.55,0,.45,1), opacity .6s ease;
}
.s-front .kg-env-back,
.s-front .kg-env-front,
.s-front .kg-env-flap-wrap { transform: translateY(70%); opacity: 0; }
.kg-env-flap-wrap { position: absolute; inset: 0; z-index: 4; perspective: 1400px; }
.s-flap .kg-env-flap-wrap { z-index: 0; transition: transform .8s cubic-bezier(.55,0,.45,1), opacity .6s ease, z-index 0s .4s; }

/* card typography — engraved-stationery feel in Cormorant Garamond */
.kg-card p { margin: 0; }
.kg-card-mono {
  width: calc(var(--w) * .1);
  height: calc(var(--w) * .133);
  margin-bottom: calc(var(--w) * .022);
  background: linear-gradient(115deg, #9C7A40 0%, #C9A876 30%, #F1DFB4 45%, #C9A876 60%, #A8854D 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.45,.05,.3,1), background-position 1.8s ease .6s;
}
.kg-card-prelude {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: calc(var(--w) * .022);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #A8854D;
  margin-bottom: calc(var(--w) * .012) !important;
  opacity: 0;
  transition: opacity .8s ease .3s;
}
.kg-card-names {
  font-family: 'Imperial Script', 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--w) * .11);
  line-height: 1.3;
  white-space: nowrap;
  /* written in left → right, with room left for the swashes */
  clip-path: inset(-30% 100% -30% -6%);
  opacity: .2;
  transition: clip-path 1.6s cubic-bezier(.45,.05,.4,1) .35s, opacity .6s ease .35s;
}
.kg-card-names em { font-style: normal; color: #B8945A; font-size: .85em; padding: 0 .06em; }
.kg-card-rule {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * .018);
  margin: calc(var(--w) * .022) 0 calc(var(--w) * .02) !important;
}
.kg-card-rule span {
  width: calc(var(--w) * .1);
  height: 1px;
  background: #C9A876;
  transform: scaleX(0);
  transition: transform .9s cubic-bezier(.22,.61,.36,1) 1s;
}
.kg-card-rule span:first-child { transform-origin: 100% 50%; }
.kg-card-rule span:last-child  { transform-origin: 0 50%; }
.kg-card-rule i {
  width: 5px;
  height: 5px;
  background: #C9A876;
  transform: rotate(45deg) scale(0);
  transition: transform .5s ease .95s;
}
.kg-card-date,
.kg-card-place {
  font-family: 'Cormorant Garamond', Georgia, serif;
  opacity: 0;
  transform: translateY(5px);
}
.kg-card-date {
  font-weight: 500;
  font-size: calc(var(--w) * .026);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #34502F;
  font-variant-numeric: lining-nums;
  transition: opacity .8s ease 1.15s, transform .8s ease 1.15s;
}
.kg-card-place {
  font-style: italic;
  font-size: calc(var(--w) * .031);
  color: #5A6850;
  margin-top: calc(var(--w) * .006) !important;
  transition: opacity .8s ease 1.3s, transform .8s ease 1.3s;
}

.s-write .kg-card-mono    { clip-path: inset(0 0 0 0); background-position: 0 0; }
.s-write .kg-card-prelude { opacity: 1; }
.s-write .kg-card-names   { opacity: 1; clip-path: inset(-30% -6% -30% -6%); }
.s-write .kg-card-rule span { transform: scaleX(1); }
.s-write .kg-card-rule i  { transform: rotate(45deg) scale(1); }
.s-write .kg-card-date,
.s-write .kg-card-place   { opacity: 1; transform: none; }

/* doors part → card lifts toward the viewer and dissolves */
.kg-doors--intro.is-open .kg-card {
  transition: transform .9s cubic-bezier(.55,0,.45,1), opacity .7s ease;
  transform: translateY(-34%) scale(1.9);
  opacity: 0;
}

.kg-skip {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 4px 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(184,148,90,.6);
  background: none;
  color: #5E7F52;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .3s ease;
}
.kg-doors.is-open .kg-skip { opacity: 0; pointer-events: none; }

/* ── PETALS ────────────────────────────────────────────────────────
   Shared by the intro burst and the in-page sweep; each petal is
   animated individually with the Web Animations API. */
.kg-petal {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform, opacity;
  line-height: 1;
}
.kg-petal--shape {
  width: 14px;
  height: 20px;
  border-radius: 0 100% 0 100%;   /* soft leaf / petal silhouette */
}
.kg-petal--glyph { font-family: Georgia, serif; }

/* ── IN-PAGE SWEEP ─────────────────────────────────────────────────
   A wide cream wash carrying a drift of petals passes across the
   screen; the page jumps to the new section while it's covered. */
.kg-sweep {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: auto;
}
.kg-sweep-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300vw;
  background: linear-gradient(100deg,
    rgba(251,246,233,0) 0%,
    rgba(251,246,233,.92) 9%,
    var(--kg-cream) 15%,
    var(--kg-sage-pale) 50%,
    var(--kg-cream) 85%,
    rgba(251,246,233,.92) 91%,
    rgba(251,246,233,0) 100%);
  will-change: transform;
}
.kg-sweep-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Petit Formal Script', 'Brush Script MT', cursive;
  font-size: clamp(1.8rem, 6vw, 3rem);
  color: var(--kg-sage-deep);
  opacity: 0;
  pointer-events: none;
}
.kg-sweep-label img { width: 46px; height: auto; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .kg-doors, .kg-sweep { display: none !important; }
}