/* ==========================================================================
   Glow Up Rich invitation: an envelope that opens onto the free guide.
   Linen / Espresso / Sand / Taupe / Clay, Georgia Pro. Everything is sized in em
   from --W (the envelope width), so the same envelope scales from the homepage
   teaser to the full-screen stage.
   ========================================================================== */

/* ---------- Envelope object ---------- */
.env { --W: min(82vw, 34rem); --liner: repeating-linear-gradient(90deg, #EBE1D1 0 .2em, #E2D6C3 .2em .24em);
  position: relative; width: var(--W); height: calc(var(--W) * .68); font-size: calc(var(--W) / 30);
  font-family: var(--gur); color: var(--espresso); }
.env-body { position: absolute; inset: 0; perspective: 90em; transition: transform 1s cubic-bezier(.5, 0, .2, 1); }
.env-back { position: absolute; inset: 0; z-index: 0; border-radius: .25em; background: var(--liner), #E9DFCF;
  box-shadow: 0 0 0 1px rgba(31, 27, 24, .1), 0 2.2em 3.6em -1.6em rgba(60, 40, 28, .38), 0 .4em 1em rgba(60, 40, 28, .08); }
.env-front { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; border-radius: .25em; overflow: hidden; display: block;
  filter: drop-shadow(0 0 .02em rgba(31, 27, 24, .35)); transition: opacity .8s ease; }
.env-to { position: absolute; z-index: 4; left: 0; right: 0; top: 79.5%; margin: 0; text-align: center; display: grid; gap: .45em; transition: opacity .8s ease; pointer-events: none; }
.env-to i { font-style: italic; font-size: 1.5em; letter-spacing: .02em; color: var(--espresso); }
.env-to span { font-size: .62em; letter-spacing: .38em; text-transform: uppercase; color: var(--g-stone); }

.env-flap { position: absolute; left: 0; top: 0; width: 100%; height: 55.8%; z-index: 5; transform-origin: 50% 0; transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.5, .02, .2, 1), z-index 0s linear 0s, opacity .8s ease; will-change: transform; }
.env-flap > span { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.env-flap-out { background: linear-gradient(176deg, #FFFDFA 0%, #F9F4EA 55%, #EFE6D6 100%); }
.env-flap-in { transform: rotateX(180deg); background: var(--liner), #E4D8C6; }

.env-seal { position: absolute; z-index: 8; left: 50%; top: 55.8%; width: 3.9em; height: 3.9em; margin: -1.95em 0 0 -1.95em; padding: 0; border: 0;
  border-radius: 51% 49% 50% 50% / 50% 52% 48% 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 26%, #CF8C6E 0, #A9654C 46%, #7C4632 100%);
  box-shadow: 0 .55em 1.1em -.25em rgba(70, 32, 20, .5), inset 0 .12em .22em rgba(255, 255, 255, .38), inset 0 -.22em .45em rgba(50, 20, 10, .38);
  color: rgba(255, 238, 226, .94); font: italic 400 1.9em/1 var(--gur); transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .45s ease; }
.env-seal::before { content: ""; position: absolute; inset: .42em; border-radius: 50%; border: .07em solid rgba(255, 236, 224, .42); }
.env-seal::after { content: ""; position: absolute; inset: -.15em; border-radius: 50%; border: 1px solid rgba(156, 94, 70, .55); animation: envRing 3s ease-out infinite; }
.env-seal span { position: relative; text-shadow: 0 -.04em .06em rgba(40, 14, 6, .5); }
@keyframes envRing { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.65); opacity: 0; } }

.env-card { position: absolute; z-index: 2; left: 6%; right: 6%; top: 9%; bottom: 8%; display: grid; align-content: center; justify-items: center; gap: .9em;
  background: #FFFDF9; box-shadow: 0 0 0 1px rgba(214, 204, 191, .9), 0 .6em 1.4em -.6em rgba(60, 40, 28, .3);
  transform: translateY(0); transition: transform 1.15s cubic-bezier(.22, .9, .25, 1), opacity .55s ease; }
.env-card::before { content: ""; position: absolute; inset: .55em; border: 1px solid var(--taupe); }
.env-card-k { font-size: .72em; letter-spacing: .4em; text-transform: uppercase; color: var(--g-ink); padding-left: .4em; }
.env-card-t { font-style: italic; font-size: 1.5em; color: var(--clay); }
.env-card-r { width: 3em; height: 1px; background: var(--taupe); }

/* ---------- Opening sequence ---------- */
.env.is-open .env-seal { transform: scale(1.35); opacity: 0; pointer-events: none; }
.env.is-open .env-flap { transform: rotateX(180deg); z-index: 1; transition-delay: .3s, .78s, 0s; }
.env.is-open .env-card { transform: translateY(-43%); transition-delay: .95s; }
.env.is-gone .env-body { transform: translateY(3.2em); }
.env.is-gone .env-back, .env.is-gone .env-front, .env.is-gone .env-flap, .env.is-gone .env-to, .env.is-gone .env-seal { opacity: 0; }
.env.is-gone .env-card { opacity: 0; }

/* ---------- Full-screen stage ---------- */
.env-overlay { display: none; position: fixed; inset: 0; z-index: 1000; overflow: hidden; opacity: 0; transition: opacity .75s ease;
  font-family: var(--gur); color: var(--espresso);
  background: radial-gradient(120% 90% at 50% 40%, #FFFDF9 0%, #F8F5F0 44%, #EDE4D6 100%); }
.env-overlay.open { display: block; }
.env-overlay.show { opacity: 1; }
html.env-pending .env-overlay { display: block; opacity: 1; }
.env-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.env-stage > * { grid-area: 1 / 1; }
.env-overlay .env { animation: envEnter 1.1s cubic-bezier(.2, .8, .2, 1) both, envFloat 7s ease-in-out 1.1s infinite; }
.env-overlay[data-state="opening"] .env, .env-overlay[data-state="read"] .env { animation: none; }
@keyframes envEnter { from { opacity: 0; transform: translateY(2.2em) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes envFloat { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-.7em) rotate(.4deg); } }

.env-brand { position: absolute; top: max(1.4rem, env(safe-area-inset-top)); left: 0; right: 0; margin: 0; text-align: center; font-size: .78rem; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: var(--g-ink); }
.env-skip { position: absolute; z-index: 20; top: max(1.1rem, env(safe-area-inset-top)); right: clamp(1rem, 3vw, 2rem); background: none; border: 0; padding: .5em .2em; cursor: pointer;
  font: italic 400 .98rem/1 var(--gur); letter-spacing: .06em; color: var(--g-stone); border-bottom: 1px solid var(--taupe); }
.env-skip:hover { color: var(--clay); border-color: var(--clay); }
.env-hint { align-self: end; justify-self: center; margin: 0 0 clamp(2.4rem, 11vh, 6rem); font-style: italic; font-size: 1.02rem; color: var(--g-stone); letter-spacing: .03em; transition: opacity .5s ease; animation: envBreathe 3.4s ease-in-out infinite; }
.env-overlay[data-mode="auto"] .env-hint, .env-overlay[data-state="opening"] .env-hint, .env-overlay[data-state="read"] .env-hint { opacity: 0; animation: none; }
@keyframes envBreathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Morning light through a French window, drifting dust, a little grain */
.env-light { position: absolute; inset: -25%; pointer-events: none; filter: blur(26px); animation: envLight 20s ease-in-out infinite alternate;
  background:
    linear-gradient(112deg, transparent 0 33%, rgba(255, 255, 255, .85) 33% 40%, transparent 40% 47%, rgba(255, 255, 255, .6) 47% 52%, transparent 52% 100%),
    linear-gradient(112deg, transparent 0 41%, rgba(124, 92, 64, .07) 41% 47%, transparent 47% 55%, rgba(124, 92, 64, .05) 55% 59%, transparent 59% 100%); }
@keyframes envLight { from { transform: translate3d(-5%, -1%, 0) rotate(-1.2deg); } to { transform: translate3d(6%, 2%, 0) rotate(1.2deg); } }
.env-grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .28  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.env-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.env-motes i { position: absolute; bottom: -4vh; left: var(--l); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 249, 238, 0) 72%); box-shadow: 0 0 calc(var(--s) * 3) rgba(205, 176, 142, .6);
  animation: envMote var(--t) linear var(--d) infinite; }
@keyframes envMote { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: .95; } 80% { opacity: .7; } 100% { opacity: 0; transform: translate3d(var(--dx), -108vh, 0); } }

/* Glimmer released as the card lifts */
.env-sparks { position: absolute; left: 50%; top: 36%; width: 0; height: 0; pointer-events: none; z-index: 9; }
.env-sparks i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; opacity: 0;
  background: #FFF; box-shadow: 0 0 .9em .25em rgba(214, 184, 148, .85), 0 0 .3em #FFF; }
.env.is-open .env-sparks i { animation: envSpark 1.9s cubic-bezier(.15, .7, .25, 1) calc(1.1s + var(--d)) both; }
@keyframes envSpark { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 3.5em)) scale(1); } }

/* ---------- The letter ---------- */
.env-letter { position: relative; z-index: 6; width: min(92vw, 27.5rem); max-height: 92vh; overflow-y: auto; display: grid; gap: 1.05rem; justify-items: center; text-align: center;
  padding: clamp(1.9rem, 6vw, 2.9rem) clamp(1.4rem, 6vw, 2.5rem); background: #FFFDF9; border: 1px solid var(--taupe);
  box-shadow: 0 2.4rem 5rem -2rem rgba(60, 40, 28, .42), 0 .5rem 1.4rem rgba(60, 40, 28, .08);
  opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 50% 50%; }
.env-letter::before { content: ""; position: absolute; inset: .55rem; border: 1px solid var(--taupe); pointer-events: none; }
.env-overlay[data-state="read"] .env-letter { visibility: visible; pointer-events: auto; }
.env-letter > * { opacity: 0; transform: translateY(.7rem); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); position: relative; }
.env-overlay[data-state="read"] .env-letter > * { opacity: 1; transform: none; }
.env-overlay[data-state="read"] .env-letter > :nth-child(1) { transition-delay: .55s; }
.env-overlay[data-state="read"] .env-letter > :nth-child(2) { transition-delay: .68s; }
.env-overlay[data-state="read"] .env-letter > :nth-child(3) { transition-delay: .8s; }
.env-overlay[data-state="read"] .env-letter > :nth-child(4) { transition-delay: .92s; }
.env-overlay[data-state="read"] .env-letter > :nth-child(5) { transition-delay: 1.06s; }
.env-overlay[data-state="read"] .env-letter > :nth-child(6) { transition-delay: 1.2s; }
.env-kicker { margin: 0; font-style: italic; font-size: 1.1rem; color: var(--clay); letter-spacing: .04em; }
.env-title { margin: 0; font-family: var(--gur); font-weight: 400; font-size: clamp(2.3rem, 9vw, 3.3rem); line-height: .98; letter-spacing: -.015em; color: var(--g-ink); }
.env-title i { font-style: italic; }
.env-rule { width: 3.2rem; height: 1px; background: var(--taupe); }
.env-copy { margin: 0; max-width: 32ch; font-size: 1.02rem; line-height: 1.6; color: var(--espresso); }
.env-actions { display: grid; gap: .9rem; justify-items: center; margin-top: .2rem; }
.env-letter .btn { font-family: var(--gur); font-weight: 400; letter-spacing: .16em; background: var(--clay); border-color: var(--clay); color: #FFF; }
.env-letter .btn:hover { background: transparent; color: var(--clay); }
.env-enter { font-style: italic; font-size: 1rem; color: var(--g-stone); border-bottom: 1px solid var(--taupe); padding-bottom: .15em; text-decoration: none; }
.env-enter:hover { color: var(--clay); border-color: var(--clay); }
.env-sig { margin: .2rem 0 0; font-size: .66rem; letter-spacing: .34em; text-transform: uppercase; color: var(--g-stone); }

/* ---------- Homepage: closed envelope resting on the Glow Up Rich photo ---------- */
.env-collage { position: relative; width: 100%; max-width: 460px; justify-self: center; }
.env-collage > img.photo { width: 100%; }
.env-inline { display: none; position: absolute; z-index: 3; left: -2.2rem; bottom: -1.6rem; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(-5deg);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 1.2rem 1.2rem rgba(60, 40, 28, .12)); }
html.env-home .env-inline { display: block; }
.env-inline .env { --W: clamp(170px, 17vw, 236px); animation: envFloat 7s ease-in-out infinite; }
.env-inline .env-body { perspective: 60em; }
.env-inline .env-seal { cursor: inherit; }
.env-inline:hover, .env-inline:focus-visible { transform: rotate(-3deg) translateY(-6px); outline: none; }
.env-inline:hover .env-flap, .env-inline:focus-visible .env-flap { transform: rotateX(34deg); transition-duration: .8s; }
.env-inline:hover .env-card, .env-inline:focus-visible .env-card { transform: translateY(-9%); transition-delay: .1s; transition-duration: .8s; }
.env-inline:focus-visible .env-back { box-shadow: 0 0 0 2px var(--clay), 0 2.2em 3.6em -1.6em rgba(60, 40, 28, .38); }
.env-inline-cap { position: absolute; left: 50%; bottom: -2.1rem; transform: translateX(-50%) rotate(5deg); white-space: nowrap; font: italic 400 .95rem/1 var(--gur); color: var(--g-stone); letter-spacing: .03em; }
.env-inline:hover .env-inline-cap { color: var(--clay); }

@media (max-width: 900px) {
  .env-inline { left: -.4rem; bottom: -1.4rem; }
  .env-inline .env { --W: clamp(150px, 42vw, 190px); }
}

/* ---------- Reduced motion: no flying parts, the letter simply appears ---------- */
@media (prefers-reduced-motion: reduce) {
  .env-overlay, .env-letter > *, .env-body, .env-card, .env-flap, .env-seal, .env-inline { transition-duration: .01s !important; transition-delay: 0s !important; }
  .env-overlay .env, .env-inline .env, .env-light, .env-motes i, .env-seal::after, .env-hint { animation: none !important; }
  .env-motes { display: none; }
  .env-overlay[data-state="read"] .env { display: none; }
  .env-letter > * { transform: none; }
}