/* ==========================================================================
   intro.css — the envelope intro (site/js/intro.js) and the page's
   "intro pending" state.

   Load this stylesheet render-blocking in <head> (before any script), so the
   site is hidden from the very first paint while the intro gets ready.

   Sections
     1. Pending state: hide .site while <html> has `intro-pending`, with a
        CSS-only failsafe that reveals it after 6 s even if scripts die.
     2. Reduced motion: no envelope; the site fades in over 200 ms.
     3. Overlay shell: the fixed full-screen layer, its own CSS failsafe,
        and the Skip button (first focusable control, always reachable).
     4. Paper backdrop: white base that matches the blank page, plus a blush
        laid-paper tint drawn with gradients only (no image files).
     5. Envelope: the back panel and its liner, the open top flap and its
        liner, and the pocket's side and bottom flaps — all CSS shapes in the
        site's rose (#BD2163), with a fine paper grain and soft shadows. The
        liners show the card's own floral artwork (an <img> set by intro.js).
     6. The card: positioned purely by transforms (FLIP), sized to the hero
        card's width; its look comes from site.css's `.card` rules.

   Every class here starts with `wi-` (wedding intro) so nothing collides
   with site.css. Only `transform` and `opacity` are ever animated.
   ========================================================================== */

/* ==========================================================================
   1. PENDING STATE + FAILSAFE
   early.js adds `intro-pending` to <html> before the body is parsed (unless
   the guest prefers reduced motion). While it is there the site is hidden
   but still laid out, so intro.js can measure the hero card for the FLIP.
   The failsafe is a zero-length animation delayed by 6 s that turns the site
   visible no matter what. `!important` (with a more specific selector) keeps
   it alive even if site.css switches animations off for reduced motion.
   ========================================================================== */
html.intro-pending .site {
  visibility: hidden;                  /* Hidden but laid out (measurable, not focusable). */
  animation: wi-failsafe-reveal 0s linear 6s forwards !important; /* After 6 s: visible, scripts or not. */
}
@keyframes wi-failsafe-reveal {
  to { visibility: visible; }          /* The only frame: show the site and keep it shown. */
}

/* ==========================================================================
   2. REDUCED MOTION
   No envelope at all. The site simply fades in over 200 ms from the first
   paint (or the moment intro-pending is removed). Opacity only.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:not(.intro-pending) .site {
    animation: wi-site-in 200ms ease-out !important; /* A gentle 200 ms fade; beats any "animation: none" reset. */
  }
}
@keyframes wi-site-in {
  from { opacity: 0; }                 /* Start transparent… */
  to { opacity: 1; }                   /* …end fully shown. */
}

/* ==========================================================================
   3. OVERLAY SHELL + SKIP BUTTON
   The overlay covers the viewport above everything (the sticky header,
   side bands and phone tab bar included). It never scrolls the page: touch
   gestures are disabled on it and intro.js turns wheel/scroll keys into
   "skip". Its own failsafe hides it 9 s after it appears, in case scripts
   stop before removing it. The overlay is aria-hidden and its artwork is
   inert; the Skip button is a separate element placed just before it in
   the page (so it is the first focusable control and stays accessible),
   floating above it with the same failsafe.
   ========================================================================== */
.wi,
.wi-skip {
  --wi-rose: #BD2163;                  /* Card mauve: the envelope paper. */
  --wi-rose-light: #CC3A77;            /* Lit edge of the rose paper. */
  --wi-rose-shade: #A3154F;            /* Shaded rose (inside of the envelope). */
  --wi-rose-deep: #830F3E;             /* Deepest rose (fold creases, Skip hover text). */
  --wi-ink-rose: #A3154F;              /* Readable mauve for the Skip label (6.2:1 on white). */
}
.wi {
  --wi-liner-paper: #FFFCFA;           /* Warm white behind the liner artwork. */
  --wi-grain: /* Paper grain shared by every rose surface: */
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 4px), /* light fibres one way… */
    repeating-linear-gradient(24deg, rgba(70, 0, 30, 0.05) 0 1px, rgba(70, 0, 30, 0) 1px 5px); /* …dark fibres across them (no image files). */
  position: fixed;                     /* Pinned to the viewport… */
  inset: 0;                            /* …edge to edge. */
  z-index: 2147483000;                 /* Above the header (20), side bands (30) and tab bar (40). */
  overflow: hidden;                    /* The dropping envelope never adds scrollbars. */
  contain: strict;                     /* Its layout and paint never affect the page beneath. */
  touch-action: none;                  /* Touch gestures never scroll the hidden page. */
  overscroll-behavior: contain;        /* No scroll chaining to the page. */
  -webkit-user-select: none;           /* No accidental text selection (older WebKit prefix). */
  user-select: none;                   /* No accidental text selection. */
  -webkit-touch-callout: none;         /* No iOS long-press menu on the artwork. */
  -webkit-tap-highlight-color: transparent; /* No grey flash on tap. */
  animation: wi-overlay-failsafe 0s linear 9s forwards !important; /* Last resort: hidden 9 s after it appears (survives any "animation: none" reset). */
}
@keyframes wi-overlay-failsafe {
  to { visibility: hidden; }           /* Hidden overlays also stop catching taps. */
}

.wi-scene {
  position: absolute;                  /* Fills the overlay… */
  inset: 0;                            /* …edge to edge. */
}

.wi-skip {
  position: fixed;                     /* Floats over the overlay… */
  z-index: 2147483001;                 /* …one layer above it. */
  top: max(12px, env(safe-area-inset-top, 0px));   /* Clear of the notch / status bar. */
  right: max(12px, env(safe-area-inset-right, 0px)); /* Clear of rounded corners. */
  min-width: 44px;                     /* Comfortable tap target… */
  min-height: 44px;                    /* …in both directions. */
  margin: 0;                           /* No default button margin. */
  padding: 0 1.25rem;                  /* Pill-shaped label padding. */
  border: 1px solid rgba(163, 21, 79, 0.45); /* Thin mauve outline, like the site's secondary button. */
  border-radius: 999px;                /* Pill. */
  background: rgba(255, 255, 255, 0.82); /* Soft white so it reads on any part of the paper. */
  color: var(--wi-ink-rose);           /* Readable mauve text. */
  font-family: var(--font-caps, "Gilda Display", "Didot", "Bodoni 72", Georgia, serif); /* The site's tracked caps face. */
  font-size: 0.8125rem;                /* Small label size (site --fs-xs). */
  font-weight: 400;                    /* Single-weight display face. */
  letter-spacing: 0.16em;              /* Tracked like the site's small caps labels. */
  text-transform: uppercase;           /* "SKIP" / "SALTAR". */
  line-height: 1;                      /* Centred in the pill. */
  cursor: pointer;                     /* It is a button. */
  touch-action: none;                  /* A drag that starts on it never scrolls the hidden page. */
  -webkit-tap-highlight-color: transparent; /* No grey flash on tap. */
  box-shadow: 0 6px 18px -10px rgba(131, 15, 62, 0.45); /* Lifted a hair off the paper. */
  animation: wi-skip-in 300ms ease-out both, wi-overlay-failsafe 0s linear 9s forwards !important; /* Appears softly; hidden 9 s later at the latest, like the overlay. */
}
.wi-skip:hover {
  background: #FDEFF4;                 /* Blush wash on hover. */
  border-color: var(--wi-ink-rose);    /* Firmer outline. */
  color: var(--wi-rose-deep);          /* Deeper mauve keeps contrast on blush. */
}
.wi-skip:focus-visible {
  outline: 2px solid var(--wi-ink-rose); /* Visible keyboard focus, like the rest of the site. */
  outline-offset: 3px;                 /* Ring sits just outside the pill. */
}
@keyframes wi-skip-in {
  from { opacity: 0; }                 /* Start invisible… */
  to { opacity: 1; }                   /* …and settle in. */
}

/* ==========================================================================
   4. PAPER BACKDROP
   A white base (identical to the blank page beneath, so the overlay's
   arrival is invisible) and a blush tint that warms in with the envelope:
   soft light in the middle, a faint rose vignette, and laid-paper lines.
   The whole backdrop fades out at the end to reveal the site.
   ========================================================================== */
.wi-backdrop {
  position: absolute;                  /* Fills the scene… */
  inset: 0;                            /* …edge to edge. */
  background: #FFFFFF;                 /* Same white as the page (--paper). */
  will-change: opacity;                /* Fades at the end. */
}
.wi-tint {
  position: absolute;                  /* Covers the white base… */
  inset: 0;                            /* …edge to edge. */
  opacity: 0;                          /* Warms in with the envelope (intro.js animates this). */
  will-change: opacity;                /* Animated. */
  background: /* Blush laid paper, drawn with gradients only: */
    radial-gradient(75% 60% at 50% 46%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),  /* Soft light pooled in the middle. */
    radial-gradient(140% 110% at 50% 50%, rgba(189, 33, 99, 0) 55%, rgba(189, 33, 99, 0.11) 100%), /* Faint rose vignette at the edges. */
    repeating-linear-gradient(0deg, rgba(163, 21, 79, 0.028) 0 1px, rgba(163, 21, 79, 0) 1px 3px),  /* Laid lines (fine, horizontal). */
    repeating-linear-gradient(90deg, rgba(163, 21, 79, 0.03) 0 1px, rgba(163, 21, 79, 0) 1px 26px), /* Chain lines (sparse, vertical). */
    linear-gradient(180deg, #FDF3F7 0%, #FAE5EE 100%); /* Blush paper, a touch deeper toward the bottom. */
}

/* ==========================================================================
   5. ENVELOPE
   The stage groups the envelope and the card so they float in together.
   Inside it, three layers stack by z-index: the back (inside panel, liner,
   open flap) → the card → the pocket (side and bottom flaps). Once the card
   is out of the pocket, intro.js adds `is-free` so it passes in front.
   Sizes come from --wi-env-w / --wi-env-h, set by intro.js for the viewport.
   ========================================================================== */
.wi-stage {
  position: absolute;                  /* Fills the scene… */
  inset: 0;                            /* …edge to edge. */
  opacity: 0;                          /* Invisible until the timeline starts (intro.js fades it in). */
  transform-origin: 0 0;               /* Transforms are written in viewport coordinates. */
  will-change: transform, opacity;     /* Animated. */
}

.wi-env {
  position: absolute;                  /* Placed by transforms only… */
  left: 0;                             /* …from the viewport's… */
  top: 0;                              /* …top-left corner. */
  width: var(--wi-env-w, 300px);       /* Envelope width for this viewport. */
  height: var(--wi-env-h, 210px);      /* Envelope height (0.7 of the width). */
  transform-origin: 0 0;               /* Transforms are written in viewport coordinates. */
  will-change: transform, opacity;     /* Animated. */
}
.wi-env-back { z-index: 1; }           /* Behind the card. */
.wi-card-pos { z-index: 2; }           /* Between the back and the pocket while inside. */
.wi-env-front { z-index: 3; }          /* The pocket hides the card's lower part. */
.wi-card-pos.is-free { z-index: 4; }   /* Out of the pocket: always in front. */

/* --- Back layer: the inside panel (the envelope's shadow comes from here) --- */
.wi-back {
  position: absolute;                  /* Fills the envelope body… */
  inset: 0;                            /* …edge to edge. */
  border-radius: 0 0 3px 3px;          /* Softened bottom corners (the top edge is the fold). */
  background: /* Inside panel colour, shading and grain: */
    linear-gradient(180deg, rgba(60, 0, 25, 0.18) 0%, rgba(60, 0, 25, 0) 40%), /* Shade just under the fold. */
    var(--wi-grain),                   /* Paper grain. */
    var(--wi-rose-shade);              /* Inside of the envelope, a shade darker. */
  box-shadow: /* The envelope lifts off the paper: */
    0 1px 2px rgba(80, 10, 40, 0.22),  /* Contact shadow on the paper. */
    0 22px 40px -18px rgba(110, 15, 55, 0.42), /* Soft drop shadow… */
    0 48px 80px -40px rgba(64, 25, 45, 0.32); /* …and a wide, faint ambient one. */
}

/* --- Liner inside the envelope, seen through the pocket's opening --- */
.wi-back-liner {
  position: absolute;                  /* Inside the body… */
  left: 3%;                            /* …inset from the sides… */
  right: 3%;                           /* …like a real liner… */
  top: 0;                              /* …starting at the fold… */
  height: 60%;                         /* …down past the opening. */
  overflow: hidden;                    /* The artwork stays inside the liner. */
  clip-path: polygon(0 0, 100% 0, 50% 92%); /* Only the V-shaped opening shows; the rest is under the flaps. */
  background: var(--wi-liner-paper);   /* Warm white behind the artwork. */
}
.wi-back-liner::after {
  content: "";                         /* Decorative shading layer. */
  position: absolute;                  /* Over the artwork… */
  inset: 0;                            /* …edge to edge. */
  background: linear-gradient(180deg, rgba(110, 20, 60, 0.06) 0%, rgba(110, 20, 60, 0) 25%, rgba(110, 20, 60, 0.3) 100%); /* Darker deep in the pocket. */
}

/* --- The liner artwork: the card's own floral image --- */
.wi-liner-img {
  position: absolute;                  /* Fills its liner… */
  inset: 0;                            /* …edge to edge… */
  display: block;                      /* No inline gap. */
  width: 100%;                         /* Full liner width. */
  height: 100%;                        /* Full liner height. */
  max-width: none;                     /* Never capped by a global img rule. */
  object-fit: cover;                   /* Cover the liner, cropping the long side. */
  object-position: 50% 0%;             /* Inside the envelope: the frame's top florals. */
  opacity: 0.94;                       /* A printed liner is a shade softer than the card. */
}

/* --- The open top flap (above the body) and its liner --- */
.wi-flap {
  position: absolute;                  /* Hinged on the body's top edge… */
  left: 0;                             /* …full width… */
  right: 0;                            /* …of the envelope… */
  bottom: 100%;                        /* …sitting just above the body. */
  height: calc(var(--wi-env-h, 210px) * 0.62); /* Flap height: 62% of the envelope height. */
  filter: drop-shadow(0 -1px 1px rgba(90, 10, 40, 0.16)) drop-shadow(0 -10px 16px rgba(110, 15, 55, 0.12)); /* Lifted off the paper. */
}
.wi-flap-paper {
  position: absolute;                  /* The flap's rose paper… */
  inset: 0;                            /* …fills the flap box… */
  clip-path: polygon(0 100%, 45.6% 5.2%, 47.9% 2.1%, 50% 1%, 52.1% 2.1%, 54.4% 5.2%, 100% 100%); /* …as a softly pointed flap. */
  background: /* Rose paper of the open flap: */
    linear-gradient(0deg, rgba(60, 0, 25, 0.2) 0%, rgba(60, 0, 25, 0) 14%), /* Crease shadow along the fold. */
    var(--wi-grain),                   /* Paper grain. */
    linear-gradient(180deg, var(--wi-rose-light) 0%, var(--wi-rose) 70%); /* Lit at the tip, rose at the fold. */
}
.wi-flap-liner {
  position: absolute;                  /* The liner on the flap's inner side… */
  inset: 0;                            /* …same box… */
  overflow: hidden;                    /* The artwork stays inside the liner. */
  clip-path: polygon(3.2% 100%, 46.2% 11.5%, 48.2% 8.6%, 50% 7.6%, 51.8% 8.6%, 53.8% 11.5%, 96.8% 100%); /* …inset to leave a rose border. */
  background: var(--wi-liner-paper);   /* Warm white behind the artwork. */
}
.wi-flap-liner .wi-liner-img {
  object-position: 50% 100%;           /* On the flap: the frame's bottom florals rise from the fold. */
}
.wi-flap-liner::after {
  content: "";                         /* Decorative shading layer. */
  position: absolute;                  /* Over the artwork… */
  inset: 0;                            /* …edge to edge. */
  background: linear-gradient(0deg, rgba(110, 20, 60, 0.18) 0%, rgba(110, 20, 60, 0) 16%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.12) 100%); /* Fold shadow below, light at the tip. */
}

/* --- Front layer: the pocket's side flaps and bottom flap --- */
.wi-fold {
  position: absolute;                  /* Each fold fills the body… */
  inset: 0;                            /* …and is cut to shape by its paper. */
}
.wi-fold-paper {
  position: absolute;                  /* The fold's paper… */
  inset: 0;                            /* …fills the body box before clipping. */
}
.wi-fold-left {
  filter: drop-shadow(2px -1px 2px rgba(60, 0, 25, 0.24)); /* Casts a little shadow into the opening. */
}
.wi-fold-left .wi-fold-paper {
  clip-path: polygon(0 0, 46.4% 47.2%, 48.6% 50%, 46.4% 52.8%, 0 100%); /* Left flap, tip just short of centre. */
  background: /* Left flap paper: */
    var(--wi-grain),                   /* Paper grain. */
    linear-gradient(100deg, #C52C6C 0%, var(--wi-rose) 60%, #B51D5D 100%); /* Light from the left. */
}
.wi-fold-right {
  filter: drop-shadow(-2px -1px 2px rgba(60, 0, 25, 0.24)); /* Mirror of the left flap's shadow. */
}
.wi-fold-right .wi-fold-paper {
  clip-path: polygon(100% 0, 53.6% 47.2%, 51.4% 50%, 53.6% 52.8%, 100% 100%); /* Right flap, mirrored. */
  background: /* Right flap paper: */
    var(--wi-grain),                   /* Paper grain. */
    linear-gradient(260deg, #C02768 0%, var(--wi-rose) 60%, #B31C5B 100%); /* A touch less light on the right. */
}
.wi-fold-bottom {
  filter: drop-shadow(0 -2px 3px rgba(60, 0, 25, 0.26)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.14)); /* Overlaps the side flaps with a soft shadow and a lit edge. */
}
.wi-fold-bottom .wi-fold-paper {
  clip-path: polygon(0 100%, 0 97%, 46.8% 41.6%, 48.6% 39.8%, 50% 39.2%, 51.4% 39.8%, 53.2% 41.6%, 100% 97%, 100% 100%); /* Wide bottom flap with a softened tip. */
  border-radius: 0 0 3px 3px;          /* Matches the back panel's corners. */
  background: /* Bottom flap paper: */
    var(--wi-grain),                   /* Paper grain. */
    radial-gradient(90% 70% at 50% 40%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%), /* Soft sheen near the tip. */
    linear-gradient(0deg, #B01B59 0%, var(--wi-rose) 48%, #C93272 100%); /* Deeper at the bottom, lit toward the tip. */
}

/* ==========================================================================
   6. THE CARD
   The card is the site's own `.card` (same markup from site.js, same rules
   in site.css), laid out at the hero card's width so the landing matches the
   page exactly. Its wrapper is moved only by transforms. The lifted shadow
   is a separate element so its opacity can fade as the card lands.
   ========================================================================== */
.wi-card-pos {
  position: absolute;                  /* Placed by transforms only… */
  left: 0;                             /* …from the viewport's… */
  top: 0;                              /* …top-left corner. */
  width: var(--wi-card-w, 300px);      /* The hero card's width (text lays out identically). */
  transform-origin: 0 0;               /* Transforms are written in viewport coordinates. */
  isolation: isolate;                  /* The shadow below stays behind this card only. */
  will-change: transform;              /* Animated. */
}
.wi .wi-card {
  width: 100%;                         /* Fill the wrapper (the hero card's width)… */
  max-width: none;                     /* …never capped by page layout rules… */
  margin: 0;                           /* …and never offset by them. */
}
.wi-card-shadow {
  position: absolute;                  /* Behind the card… */
  inset: 3%;                           /* …a little inside its edges… */
  z-index: -1;                         /* …beneath it. */
  border-radius: 4%;                   /* Softened corners. */
  background: rgba(90, 20, 50, 0.3);   /* Rose-tinted shadow, like the site's card shadow. */
  filter: blur(16px);                  /* Very soft. */
  opacity: 0;                          /* Hidden in the pocket (intro.js fades it in). */
  will-change: opacity;                /* Animated. */
}