/* ==========================================================================
   Christmas Dinner · the envelope (intro.js)
   The sealed letter that opens into the invitation, and the sealed envelope
   on the private page. All motion is driven from intro.js (Web Animations).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The overlay
   -------------------------------------------------------------------------- */

.env-intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter, 20px) calc(18px + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: transparent;
}

.env-intro[inert] {
  pointer-events: none;
}

.env-intro__veil,
.env-intro__warm {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.env-intro__veil {
  background:
    radial-gradient(46% 38% at 50% 50%, rgba(217, 180, 90, 0.11), transparent 72%),
    radial-gradient(125% 100% at 50% 48%, transparent 34%, rgba(1, 7, 5, 0.74) 100%);
}

.env-intro__warm {
  opacity: 0;
  background:
    radial-gradient(40% 34% at 50% 44%, rgba(255, 206, 128, 0.3), rgba(255, 170, 84, 0.1) 48%, transparent 74%),
    radial-gradient(90% 70% at 50% 60%, rgba(255, 186, 102, 0.08), transparent 70%);
}

/* Reduced motion: the warm layer becomes the night, for a true cross-fade to the page */
.env-intro.is-reduced .env-intro__warm {
  background: linear-gradient(180deg, #020907 0%, #051410 34%, #0a2119 72%, #07160f 100%);
}

.env-intro__dust {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.env-intro__stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(16px, 3.6vh, 38px);
  width: 100%;
}

.env-intro__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--frost);
}

.env-intro__kicker svg {
  width: 9px;
  height: 9px;
  color: var(--gold);
  flex: none;
}

.env-intro__hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--frost);
}

.env-intro__hint::before,
.env-intro__hint::after {
  content: "";
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.env-intro__hint::after {
  transform: scaleX(-1);
}

.env-intro__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
}

/* The light that fills the screen: a white-hot core, warm gold, then a long soft rim, so that
   at any size it looks like a glow rather than a disc */
.env-intro__bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    closest-side,
    rgba(255, 253, 247, 1) 0%,
    rgba(255, 248, 229, 1) 16%,
    rgba(255, 236, 192, 1) 32%,
    rgba(253, 221, 154, 0.98) 45%,
    rgba(247, 204, 120, 0.88) 57%,
    rgba(240, 188, 99, 0.64) 69%,
    rgba(234, 177, 88, 0.36) 80%,
    rgba(230, 170, 82, 0.13) 90%,
    rgba(228, 168, 80, 0) 100%
  );
}

/* Rays of light behind the card as it is presented */
.env-intro__rays {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 480px;
  height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  /* Two sets of rays with different spacing, so they fall irregularly, like real light */
  background:
    radial-gradient(closest-side, rgba(255, 236, 190, 0.5), rgba(255, 214, 140, 0.14) 40%, rgba(255, 214, 140, 0) 72%),
    repeating-conic-gradient(from 0deg, rgba(255, 232, 176, 0) 0deg 4deg, rgba(255, 234, 182, 0.3) 5.5deg, rgba(255, 232, 176, 0) 7deg 11deg),
    repeating-conic-gradient(from 5deg, rgba(255, 224, 156, 0) 0deg 9deg, rgba(255, 224, 156, 0.2) 12.5deg, rgba(255, 224, 156, 0) 16deg 27deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, 0.45) 44%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, 0.45) 44%, transparent 92%);
}

/* The star the light becomes when it reaches the title */
.env-intro__flare {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: clamp(60px, 7vw, 92px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  color: #fffaf0;
}

.env-intro__flare::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 214, 0.9), rgba(255, 214, 130, 0.35) 38%, rgba(255, 200, 110, 0) 100%);
}

.env-intro__flare span,
.env-intro__flare svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The music switch and "Skip the envelope" */

.env-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--frost);
  cursor: pointer;
}

.env-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.env-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background 0.25s;
}

.env-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--frost);
  transition: transform 0.3s var(--ease-out), background 0.25s;
}

.env-switch input:checked + .env-switch__track {
  background: rgba(217, 180, 90, 0.42);
}

.env-switch input:checked + .env-switch__track::after {
  transform: translateX(16px);
  background: var(--gold-hi);
}

.env-switch input:focus-visible + .env-switch__track {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}

.env-skip {
  min-height: 40px;
  padding: 6px 2px;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: underline;
  text-decoration-color: rgba(139, 164, 152, 0.4);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.2s;
}

.env-skip:hover {
  color: var(--frost);
}

/* --------------------------------------------------------------------------
   2. The envelope
   The box is the button; inside, a float layer and a tilt layer carry the
   paper: rear (inside), flap, light rays, card, pocket front, seal, sheen.
   -------------------------------------------------------------------------- */

.env {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}

button.env {
  cursor: pointer;
}

button.env:focus {
  outline: none;
}

/* At most 40% of the screen's height, so on laptops there is room above it for the flap to
   swing open and for the card to rise clear of the pocket without leaving the screen */
.env-intro .env {
  width: min(86vw, 580px, max(250px, 60vh));
  width: min(86vw, 580px, max(250px, 60svh));
}

.env__float,
.env__body,
.env__float > *,
.env__body > * {
  position: absolute;
}

.env__float {
  inset: 0;
  perspective: 1500px;
}

.env__body {
  inset: 0;
}

.env__aura {
  inset: -24% -14%;
  border-radius: 50%;
  opacity: 0.8;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 217, 148, 0.2), rgba(217, 180, 90, 0.08) 52%, rgba(217, 180, 90, 0) 100%);
}

.env__edgelight {
  left: 0;
  top: 0;
  z-index: 7;
  width: 4cqi;
  height: 4cqi;
  margin: -2cqi 0 0 -2cqi;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, #fffdf4 0%, rgba(255, 238, 186, 0.9) 22%, rgba(255, 214, 130, 0.28) 55%, rgba(255, 214, 130, 0) 100%);
}

.env__ground {
  left: 4%;
  right: 4%;
  top: 94%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.26) 45%, transparent 72%);
  pointer-events: none;
}

.env__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.env-grain {
  mix-blend-mode: overlay;
}

/* The inside of the envelope, seen once the flap is open */
.env__rear {
  inset: 0;
  z-index: 1;
  border-radius: 1.2cqi;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(180deg, #081c15 0%, #0c2a20 60%, #0f3025 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 22px 44px -18px rgba(0, 0, 0, 0.75),
    0 60px 90px -50px rgba(0, 0, 0, 0.7);
}

.env__glow {
  position: absolute;
  left: 2%;
  right: 2%;
  top: -10%;
  height: 92%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(56% 56% at 50% 30%, rgba(255, 226, 160, 0.95), rgba(255, 184, 92, 0.42) 42%, rgba(255, 170, 80, 0) 72%);
}

/* The flap: a wrapper (stacking and falling) around a 3D hinge with two faces */
.env__flapwrap {
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  z-index: 6;
}

.env__flap {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(0deg);
}

.env__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.env__face--in {
  transform: rotateY(180deg);
}

.env__shade,
.env__foilsheen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 1.6%, 54.4% 89.6%, 50% 97.2%, 45.6% 89.6%, 0 1.6%);
}

.env__shade {
  background: linear-gradient(180deg, rgba(1, 8, 5, 0.2), rgba(1, 8, 5, 0.85));
}

.env__foilsheen {
  overflow: hidden;
}

/* A band of light that slides across the gold liner (moved with transform, so it never repaints) */
.env__foilsheen span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  width: 95%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 250, 225, 0.85) 47%, rgba(255, 236, 170, 0.35) 63%, transparent 100%);
}

/* Light streaming up out of the open envelope, behind the card */
.env__rays {
  left: -45%;
  right: -45%;
  bottom: 78%;
  height: 150%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  background:
    radial-gradient(40% 55% at 50% 100%, rgba(255, 224, 150, 0.5), transparent 70%),
    repeating-conic-gradient(from -64deg at 50% 100%, rgba(255, 230, 170, 0) 0deg 5deg, rgba(255, 230, 170, 0.34) 7deg, rgba(255, 230, 170, 0) 9.5deg 15deg);
  -webkit-mask-image: radial-gradient(60% 100% at 50% 100%, #000 18%, transparent 78%);
  mask-image: radial-gradient(60% 100% at 50% 100%, #000 18%, transparent 78%);
}

/* The pocket (front) with the guest's name */
.env__front {
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.env__to {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 80.5%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3em;
  margin: 0;
  font-family: var(--font-script);
  font-size: calc(7.8cqi * var(--name-fit, 1));
  line-height: 1.25;
  white-space: nowrap;
  transform: translateY(-50%);
}

.env__for {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: max(11px, 0.42em);
  color: rgba(242, 217, 148, 0.74);
}

.env__name {
  padding: 0.02em 0.14em 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
  mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}

.env__flourish {
  position: absolute;
  left: 50%;
  top: 91%;
  width: 26%;
  height: auto;
  aspect-ratio: 120 / 10;
  transform: translateX(-50%);
  color: var(--gold);
  opacity: 0.8;
}

/* Moving light across the paper (pointer on desktop, sway on phones) */
.env__sheen {
  inset: 0;
  z-index: 9;
  overflow: hidden;
  border-radius: 1.2cqi;
  pointer-events: none;
}

.env__sheen span {
  position: absolute;
  left: -60%;
  top: -70%;
  width: 150%;
  height: 170%;
  background: radial-gradient(closest-side, rgba(255, 246, 222, 0.16), rgba(255, 240, 205, 0.06) 48%, rgba(255, 240, 205, 0) 100%);
}

/* --------------------------------------------------------------------------
   3. The wax seal
   -------------------------------------------------------------------------- */

.env-seal {
  left: 50%;
  top: 58%;
  z-index: 8;
  width: 17.5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

.env-seal > span,
.env-seal > svg {
  position: absolute;
}

.env-seal__glow {
  inset: -85%;
  border-radius: 50%;
  opacity: 0.7;
  background: radial-gradient(closest-side, rgba(255, 196, 140, 0.46), rgba(255, 128, 104, 0.24) 30%, rgba(236, 170, 96, 0.1) 56%, transparent 100%);
}

.env-seal__pulse {
  inset: -7%;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 214, 180, 0.55);
  opacity: 0;
}

.env-seal__ring {
  inset: -14%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px 2px rgba(242, 217, 148, 0.45);
  opacity: 0;
  transition: opacity 0.2s;
}

.env-intro.is-keys .env:focus-visible .env-seal__ring {
  opacity: 1;
}

.env-seal__burst {
  inset: -150%;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(closest-side, rgba(255, 250, 230, 0.95), rgba(255, 226, 150, 0.5) 18%, rgba(255, 214, 130, 0) 42%),
    repeating-conic-gradient(from 4deg, rgba(255, 236, 190, 0) 0deg 6deg, rgba(255, 236, 190, 0.6) 8.5deg, rgba(255, 236, 190, 0) 11deg 17deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
}

.env-seal__body {
  inset: 0;
}

.env-seal__shadow {
  inset: 9%;
  border-radius: 50%;
  box-shadow: 0 0.9cqi 1.9cqi rgba(30, 0, 6, 0.6), 0 0.2cqi 0.5cqi rgba(0, 0, 0, 0.45);
}

.env-seal__half {
  position: absolute;
  inset: 0;
}

.env-seal__half svg,
.env-seal__crack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.env-seal__glint {
  left: 21%;
  top: 22%;
  width: 26%;
  height: 26%;
  margin: -13% 0 0 -13%;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   4. The card inside
   -------------------------------------------------------------------------- */

.env-card {
  left: 5.5%;
  right: 5.5%;
  top: 4.5%;
  height: 89%;
  z-index: 4;
  container-type: inline-size;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.env-card__paper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1cqi;
  background:
    radial-gradient(140% 90% at 15% 0%, #fffcf3 0%, rgba(255, 252, 243, 0) 55%),
    linear-gradient(170deg, #f8f1e2 0%, #efe3c7 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 16px 36px -14px rgba(0, 0, 0, 0.65);
}

.env-card__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.3;
}

.env-card__frame {
  position: absolute;
  inset: 3.2cqi;
  border: 1px solid rgba(160, 124, 46, 0.55);
  outline: 1px solid rgba(160, 124, 46, 0.24);
  outline-offset: -1.2cqi;
  border-radius: 0.5cqi;
  background:
    var(--corner-tl) top left / 6.4cqi 6.4cqi no-repeat,
    var(--corner-tr) top right / 6.4cqi 6.4cqi no-repeat,
    var(--corner-br) bottom right / 6.4cqi 6.4cqi no-repeat,
    var(--corner-bl) bottom left / 6.4cqi 6.4cqi no-repeat;
}

.env-card__content {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.7cqi;
  padding: 8cqi 10cqi;
  text-align: center;
}

.env-card__star {
  width: 16cqi;
  height: auto;
  aspect-ratio: 60 / 10;
  color: var(--gold-lo);
}

.env-card__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: max(7px, 2.2cqi);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.env-card__title {
  margin: 0;
  padding: 0 1cqi 0.6cqi;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: calc(12.6cqi * var(--fit, 1));
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}

.env-card__rule {
  width: 20cqi;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-lo), transparent);
}

.env-card__date {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 3.5cqi;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ink-2);
}

.env-card__warm,
.env-card__gleam,
.env-card__light {
  position: absolute;
  inset: 0;
  border-radius: 1cqi;
  pointer-events: none;
  opacity: 0;
}

/* The card turning into light, just before the light fills the screen */
.env-card__light {
  background: radial-gradient(95% 110% at 50% 50%, rgba(255, 252, 242, 0.97) 0%, rgba(255, 241, 204, 0.93) 42%, rgba(250, 221, 156, 0.86) 100%);
}

.env-card__warm {
  background: linear-gradient(0deg, rgba(255, 186, 96, 0.5), rgba(255, 200, 120, 0.12) 45%, transparent 75%);
}

.env-card__gleam {
  overflow: hidden;
}

.env-card__gleam span {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -60%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.72) 48%, rgba(255, 244, 210, 0.3) 56%, transparent);
}

/* --------------------------------------------------------------------------
   5. The private page's sealed envelope (mountSealedEnvelope)
   -------------------------------------------------------------------------- */

.env-sealed {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 5vh, 44px);
  width: 100%;
  text-align: center;
}

.env-sealed .env {
  width: min(84vw, 480px, max(240px, calc((100vh - 360px) * 1.5)));
  width: min(84vw, 480px, max(240px, calc((100svh - 360px) * 1.5)));
  cursor: pointer;
}

.env-sealed__text {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 34rem;
}

.env-sealed__heading {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  line-height: 1.12;
  text-wrap: balance;
}

.env-sealed__body {
  margin: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.32rem);
  line-height: 1.55;
  color: var(--frost);
  text-wrap: balance;
}

.env-sealed__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-top: 8px;
}

.env-sealed__actions:empty {
  display: none;
}

.env-sealed__dust {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.env-intro.is-opening .env {
  cursor: default;
}

/* --------------------------------------------------------------------------
   6. Reduced motion: nothing moves on its own
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .env-seal__pulse {
    display: none;
  }
}