/* =============================================================
   APOLLO EVENTS PLATFORM - STYLES
   Brand reference: Apollo Brand Guidelines (2022)
   - apollo blue       #001D3E   primary
   - apollo coral      #FF3D4B   gradient start
   - apollo turquoise  #00D1B8   gradient end
   - apollo light blue #00C3DE   accent
   - apollo orange     #FF7758   accent
   - apollo gradient: 312deg, coral 30%, turquoise 85%
   - Type: Tenorite. Headings line-height 1.0, body 1.3

   Generic across all event types - birthdays, client dinners,
   golf days, networking, awards, Christmas. No event-specific
   styling exists in this file.

   Version 3.0.0
   ============================================================= */

:root{
  --apollo-blue:#001D3E;
  --apollo-coral:#FF3D4B;
  --apollo-turquoise:#00D1B8;
  --apollo-light-blue:#00C3DE;
  --apollo-orange:#FF7758;
  --apollo-white:#FFFFFF;

  /* Tints of apollo blue, per the guidelines */
  --blue-80:#334A65;
  --blue-60:#66778B;
  --blue-20:#CCD2D8;
  --blue-10:#E5E8EC;

  --apollo-gradient:linear-gradient(312deg,var(--apollo-coral) 30%,var(--apollo-turquoise) 85%);
  --body:'Tenorite','Segoe UI',Arial,Helvetica,sans-serif;
  --page:min(1120px,calc(100% - 48px));
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  font-size:17px;
  line-height:1.3;                    /* brand body line height */
  color:var(--apollo-blue);
  background:var(--apollo-white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-weight:400;                    /* light headings, per brand */
  line-height:1.0;                    /* brand heading line height */
  letter-spacing:-.03em;
  margin:0;
}
button,input,textarea,select{font:inherit;color:inherit}
.hidden{display:none !important}
.wrap{width:var(--page);margin:0 auto}

/* -------------------------------------------------------------
   LOGO - approved Apollo logo pack assets only.
   The supplied files already include the required clear space,
   so no extra margin is added.
   Width only is set - never both width and height - to avoid
   any stretch or distortion. Minimum main logo width is 76px.
   White logo is used only on apollo blue; full colour logo
   only on white.
   ------------------------------------------------------------- */
.logo-img{display:block;width:clamp(120px,13vw,168px);height:auto;min-width:76px}
.logo-img--header{width:118px}
.logo-img--ticket{width:112px}
.lockup{font-size:12px;letter-spacing:.02em;margin-top:10px;color:rgba(255,255,255,.75)}

/* =============================================================
   BOOT / LOADING / ERROR STATE
   ============================================================= */
.state{
  min-height:100svh;display:grid;place-items:center;text-align:center;
  color:var(--apollo-white);padding:32px;
  background:
    radial-gradient(circle at 78% 22%,rgba(0,195,222,.16),transparent 38%),
    radial-gradient(circle at 12% 88%,rgba(255,61,75,.12),transparent 42%),
    var(--apollo-blue);
}
.state-inner{display:grid;justify-items:center;gap:20px;max-width:460px}
.state p{margin:0;color:rgba(255,255,255,.8);line-height:1.45}
.state-link{color:var(--apollo-turquoise);font-size:15px}
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.2);border-top-color:var(--apollo-turquoise);
  animation:spin .9s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* =============================================================
   LAUNCH SCREEN
   ============================================================= */
.launch{
  position:relative;min-height:100svh;overflow:hidden;color:var(--apollo-white);
  background:
    radial-gradient(circle at 78% 22%,rgba(0,195,222,.16),transparent 38%),
    radial-gradient(circle at 12% 88%,rgba(255,61,75,.12),transparent 42%),
    var(--apollo-blue);
}
.launch-grid{
  width:var(--page);min-height:100svh;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;
}
.copy{padding:40px 0}
.eyebrow{
  margin-top:56px;color:var(--apollo-turquoise);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
}
.copy h1{font-size:clamp(46px,6.6vw,88px);margin:16px 0 28px}
.meta{padding-left:20px;border-left:1px solid var(--apollo-turquoise);display:grid;gap:8px}
.meta strong{font-size:20px;font-weight:700}
.meta span{color:rgba(255,255,255,.72)}
.meta em{font-style:normal;color:var(--apollo-turquoise);font-size:18px;margin-top:8px}

.primary,.outlook{
  display:inline-block;border:0;border-radius:6px;padding:15px 26px;
  background:var(--apollo-gradient);color:var(--apollo-white);
  font-weight:700;text-decoration:none;cursor:pointer;text-align:center;
}
.primary[disabled]{opacity:.6;cursor:progress}
.primary:focus-visible,.secondary:focus-visible,.outlook:focus-visible,
.linkish:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--apollo-light-blue);outline-offset:2px
}
.copy .primary{margin-top:30px}
.skip{display:block;margin-top:14px;background:none;border:0;padding:0;
  color:rgba(255,255,255,.6);cursor:pointer;text-decoration:underline}

/* Rocket ---------------------------------------------------- */
.rocket-bay{height:min(76vh,660px);min-height:500px;display:grid;place-items:center}
.rocket-shell{position:relative;width:min(320px,80%);height:100%;display:grid;place-items:center}
.rocket{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 20px rgba(0,0,0,.35))}
.idle{transform-origin:150px 486px;animation:idle .42s ease-in-out infinite alternate}
.thrust{transform-origin:150px 486px;opacity:0}
.smoke{position:absolute;left:50%;bottom:6%}
.smoke i{position:absolute;width:64px;height:64px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff,#c3ced6 62%,transparent 70%)}

.countdown{
  position:absolute;inset:0;z-index:10;display:grid;place-content:center;text-align:center;
  background:rgba(0,29,62,.72);opacity:0;pointer-events:none;transition:opacity .25s
}
.countdown.show{opacity:1}
.countdown small,.countdown span{letter-spacing:.25em;font-size:11px;color:var(--apollo-turquoise)}
.countdown strong{font-size:clamp(90px,18vw,220px);font-weight:300;line-height:1}

.launch.go .copy{opacity:0;transition:opacity .4s}
.launch.go .idle{opacity:0}
.launch.go .thrust{opacity:1;animation:thrust .1s infinite alternate}
.launch.go .rocket-shell{animation:lift 2.5s cubic-bezier(.55,.02,.82,.45) forwards}
.launch.go .smoke i{animation:smoke 1.4s infinite}
.launch.go .smoke i:nth-child(2){animation-delay:.1s}
.launch.go .smoke i:nth-child(3){animation-delay:.2s}
.launch.go .smoke i:nth-child(4){animation-delay:.3s}
.launch.go .smoke i:nth-child(5){animation-delay:.4s}
.launch.go .smoke i:nth-child(6){animation-delay:.5s}

@keyframes idle{to{transform:scaleY(1.16)}}
@keyframes thrust{to{transform:scaleY(1.28)}}
@keyframes lift{0%,25%{transform:none}100%{transform:translateY(-145vh) scale(.7)}}
@keyframes smoke{
  0%{opacity:.85;transform:translate(-50%,0) scale(.3)}
  100%{opacity:0;transform:translate(calc(-50% + (var(--i,1) * 34px)),80px) scale(3.8)}
}
.wipe{position:fixed;inset:0;z-index:20;background:var(--apollo-white);opacity:0;pointer-events:none}
body.wiping .wipe{animation:wipe 2s forwards}
@keyframes wipe{0%{opacity:0}45%,70%{opacity:1}100%{opacity:0}}

/* =============================================================
   EVENT PAGE
   ============================================================= */
header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px max(24px,calc((100vw - 1120px)/2));background:var(--apollo-white);
  border-bottom:1px solid var(--blue-10)
}
header small{color:var(--blue-60);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

.hero{background:var(--apollo-blue);color:var(--apollo-white);
  padding:80px max(24px,calc((100vw - 1120px)/2))}
.hero small{display:block;color:var(--apollo-turquoise);font-size:11px;letter-spacing:.22em}
.hero h2{font-size:clamp(44px,8vw,96px);margin:18px 0}
.hero p{font-size:20px;color:rgba(255,255,255,.75);margin:0;max-width:720px}

.intro,.details,.rsvp{padding:72px 0}
.intro h3,.details h3,.rsvp h3{font-size:clamp(34px,4.6vw,56px);margin:0 0 18px}
.intro p{color:var(--blue-80);font-size:18px;max-width:760px;margin:0}
.deadline{margin-top:16px !important;font-size:15px !important;color:var(--blue-60) !important}

.details{background:var(--blue-10)}
.timeline,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:28px}
.time{border-top:2px solid var(--apollo-turquoise);padding:22px 10px 8px}
.time strong{display:block;font-size:26px;font-weight:700;line-height:1}
.time span{display:block;color:var(--blue-80);margin-top:8px;font-size:15px}
.card{min-height:120px;padding:20px;border-radius:12px;background:var(--apollo-blue);
  color:var(--apollo-white);display:flex;align-items:flex-end;font-size:20px}
.card:nth-child(even){background:var(--apollo-gradient)}

.rsvp{background:var(--apollo-blue);color:var(--apollo-white)}
.guest{margin:22px 0 26px;padding:20px;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;display:grid;gap:6px}
.guest small{color:var(--apollo-turquoise);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.guest strong{font-size:22px;font-weight:700}
.guest span{color:rgba(255,255,255,.72);font-size:15px}

/* =============================================================
   PANELS - profile, referral, closed
   Share the white card treatment used by the wizard.
   ============================================================= */
.wizard,.ticket,.panel{background:var(--apollo-white);color:var(--apollo-blue);border-radius:14px;overflow:hidden}
.panel{margin-bottom:20px}
.panel-body{padding:40px}
.panel-body > small{color:var(--blue-60);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.panel-body h4{font-size:clamp(26px,3.4vw,34px);margin:12px 0 14px}
.panel-intro{color:var(--blue-80);margin:0 0 22px;font-size:16px;line-height:1.45;max-width:620px}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-grid .field{margin-top:0}

.referral-rows{display:grid;gap:10px}
.referral-row input{width:100%;padding:12px;border:1px solid var(--blue-20);border-radius:8px}
.linkish{background:none;border:0;padding:0;color:var(--apollo-blue);font-weight:700;
  cursor:pointer;text-decoration:underline}
.notice{margin-top:22px;padding:16px;border-radius:10px;background:rgba(0,209,184,.1);
  border:1px solid rgba(0,209,184,.35);font-size:15px}
.referral-results{margin:10px 0 0;padding-left:18px;color:var(--blue-80);font-size:14px}
.referral-results li{margin-top:4px}

/* =============================================================
   WIZARD
   ============================================================= */
.progress{height:5px;background:var(--blue-10)}
.progress span{display:block;height:100%;width:0;background:var(--apollo-gradient);transition:width .25s}
.wizard-note{margin:0;padding:16px 40px 0;color:var(--blue-60);font-size:14px}
.step{padding:40px;min-height:300px}
.step > small{color:var(--blue-60);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.step h4,.ticket h4{font-size:clamp(26px,3.4vw,34px);margin:12px 0 24px}

.choices,.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span,.checks label{display:block;padding:15px;border:1px solid var(--blue-20);
  border-radius:8px;cursor:pointer}
.choice input:checked + span{border-color:var(--apollo-turquoise);background:rgba(0,209,184,.08);font-weight:700}
.choice input:focus-visible + span{outline:2px solid var(--apollo-light-blue);outline-offset:2px}
.checks label{display:flex;align-items:center;gap:10px}

.field{margin-top:16px}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:15px}
.field input,.field textarea{width:100%;padding:12px;border:1px solid var(--blue-20);
  border-radius:8px;background:var(--apollo-white)}
.field textarea{min-height:84px;resize:vertical}

.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.secondary{padding:13px 22px;border:1px solid var(--blue-20);border-radius:6px;
  background:var(--apollo-white);color:var(--apollo-blue);font-weight:700;cursor:pointer}
.error{display:none;margin:0 40px 28px;padding:12px 14px;border-radius:8px;
  background:#FFF1F2;color:#A5232C;border:1px solid rgba(255,61,75,.3)}
.panel-body .error{margin:20px 0 0}
.error.show{display:block}

/* Ticket ---------------------------------------------------- */
/* Solid apollo blue header. The white logo must not sit on the
   gradient - the guidelines require the one colour white logo
   for gradient backgrounds. The gradient is used as a keyline
   instead so the brand accent is retained. */
.ticket{max-width:640px;margin:0 auto}
.ticket-head{padding:22px 28px;background:var(--apollo-blue);border-bottom:4px solid transparent;
  border-image:var(--apollo-gradient) 1}
.ticket-body{padding:32px}
.ticket-body > small{color:var(--blue-60);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ticket-grid small{display:block;color:var(--blue-60);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:4px}
.ticket-grid b{font-size:17px}
.ticket-actions{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--blue-10)}
.ticket-actions p{grid-column:1/-1;margin:0;color:var(--blue-60);font-size:13px}
.ticket-referral{margin-top:22px;padding-top:20px;border-top:1px solid var(--blue-10)}

footer{background:var(--apollo-blue);color:rgba(255,255,255,.6);
  padding:28px max(24px,calc((100vw - 1120px)/2));font-size:13px;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
footer a{color:var(--apollo-turquoise);text-decoration:none}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media(max-width:820px){
  .launch-grid{grid-template-columns:1fr;align-content:start;gap:8px}
  .copy{padding-top:24px}
  .eyebrow{margin-top:32px}
  .rocket-bay{height:42vh;min-height:340px}
  .rocket-shell{width:200px}
  .step,.panel-body{padding:26px 20px}
  .error{margin:0 20px 22px}
  .wizard-note{padding:16px 20px 0}
  .intro,.details,.rsvp{padding:56px 0}
  .logo-img{width:132px}
  .field-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .ticket-grid,.ticket-actions{grid-template-columns:1fr}
  .primary,.outlook,.secondary{width:100%}
  .actions{flex-direction:column-reverse;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* =============================================================
   ENVELOPE LAUNCH CONCEPT
   Polished invitation treatment for the demo branch.
   ============================================================= */
:root{
  --launch-display:"Faricy New","Tenorite","Segoe UI",Arial,sans-serif;
}
.envelope-bay{display:none}
.launch--envelope{
  background:
    radial-gradient(ellipse at 50% 64%,rgba(0,195,222,.12),transparent 40%),
    radial-gradient(ellipse at 50% 108%,rgba(255,61,75,.10),transparent 50%),
    linear-gradient(135deg,#00172f 0%,#00284b 52%,#001d3e 100%);
}
.launch--envelope::before{display:none}
.launch--envelope .launch-grid{
  position:relative;
  z-index:1;
  grid-template-columns:1fr;
  align-content:center;
  justify-items:center;
  gap:0;
  padding:34px 0 42px;
}
.launch--envelope .copy{
  padding:0;
  text-align:center;
  transition:opacity .42s ease,transform .42s ease;
}
.launch--envelope .copy .logo-img{width:78px;margin:0 auto}
.launch--envelope .copy .lockup{
  margin-top:2px;
  color:rgba(255,255,255,.68);
  font-size:11px;
  letter-spacing:.035em;
}
.launch--envelope .eyebrow{
  margin:25px 0 10px;
  font-size:10px;
  letter-spacing:.28em;
}
.launch--envelope .copy h1{
  max-width:min(900px,calc(100vw - 40px));
  font-family:var(--launch-display);
  font-size:clamp(36px,4.5vw,62px);
  line-height:1.04;
  letter-spacing:-.035em;
  margin:0 0 18px;
  text-wrap:balance;
}
.launch--envelope .meta{
  border:0;
  padding:0;
  justify-items:center;
  gap:6px;
}
.launch--envelope .meta strong{
  font-size:14px;
  font-weight:600;
  letter-spacing:.09em;
}
.launch--envelope .meta span{
  color:rgba(255,255,255,.66);
  font-size:13px;
}
.launch--envelope .meta em{
  font-family:var(--launch-display);
  font-size:18px;
  margin-top:4px;
  color:#c5eee8;
}
.launch--envelope .copy .primary,
.launch--envelope .copy .skip,
.launch--envelope .rocket-bay{display:none}
.launch--envelope .envelope-bay{
  display:grid;
  justify-items:center;
  gap:10px;
  margin-top:24px;
}
.envelope-stage{
  position:relative;
  width:min(430px,calc(100vw - 52px));
  aspect-ratio:1.62;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.envelope-stage::before{
  content:"";
  position:absolute;
  inset:11% 8% 2%;
  border-radius:50%;
  background:rgba(0,0,0,.27);
  filter:blur(32px);
  transform:translateY(22px);
  pointer-events:none;
}
.envelope-art{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:5px;
  background:transparent;
  cursor:pointer;
  perspective:1100px;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.18));
  -webkit-tap-highlight-color:transparent;
}
.envelope-art:focus-visible,.envelope-open:focus-visible{
  outline:2px solid var(--apollo-turquoise);
  outline-offset:6px;
}
.envelope-art span{position:absolute;display:block}
.envelope-paper{
  inset:0;
  z-index:0;
  border-radius:5px;
  background:
    linear-gradient(112deg,rgba(255,255,255,.62),transparent 34%,rgba(0,29,62,.035) 100%),
    linear-gradient(145deg,#f7f4ec 0%,#eeece4 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),
    inset 0 0 0 2px rgba(0,29,62,.08),
    0 2px 3px rgba(0,0,0,.12);
}
.envelope-letter{
  z-index:1;
  left:12%;
  right:12%;
  top:7%;
  bottom:5%;
  border:1px solid rgba(0,29,62,.09);
  border-radius:2px;
  background:linear-gradient(155deg,#fffefa 0%,#f5f1e8 100%);
  box-shadow:0 3px 12px rgba(0,29,62,.12);
  transform:translateY(0);
  transition:transform .95s cubic-bezier(.18,.72,.2,1);
}
.envelope-letter::before{
  content:"YOU ARE CORDIALLY INVITED";
  position:absolute;
  top:18%;
  left:0;
  right:0;
  color:rgba(0,29,62,.58);
  font:600 8px/1 "Tenorite","Segoe UI",Arial,sans-serif;
  letter-spacing:.2em;
  text-align:center;
}
.envelope-letter::after{
  content:"";
  position:absolute;
  top:34%;
  left:39%;
  right:39%;
  height:1px;
  background:linear-gradient(90deg,transparent,#c5a86c,transparent);
}
.envelope-flap{
  z-index:4;
  inset:0 0 auto;
  height:66%;
  clip-path:polygon(0 0,100% 0,50% 88%);
  background:linear-gradient(147deg,#ece9df 0%,#fffdf8 52%,#e7e3d9 100%);
  transform-origin:50% 0;
  backface-visibility:hidden;
  transition:transform .82s cubic-bezier(.2,.7,.25,1);
  filter:drop-shadow(0 3px 3px rgba(0,29,62,.12));
}
.envelope-pocket{
  z-index:3;
  inset:0;
  clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);
  border-radius:5px;
  background:linear-gradient(135deg,#f8f6ef 0%,#fffefa 50%,#e8e5dc 100%);
  box-shadow:inset 0 0 0 1px rgba(0,29,62,.08);
}
.envelope-pocket::before,.envelope-pocket::after{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}
.envelope-pocket::before{
  clip-path:polygon(0 0,50% 57%,0 100%);
  background:linear-gradient(135deg,#e9e5da,#f5f2e9 70%);
}
.envelope-pocket::after{
  clip-path:polygon(100% 0,50% 57%,100% 100%);
  background:linear-gradient(225deg,#e8e4d9,#f7f4ec 72%);
}
.envelope-seal{
  z-index:5;
  top:55%;
  left:50%;
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border:1px solid #d8bd83;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%,#244968 0%,#092c4e 55%,#001d3e 100%);
  box-shadow:
    0 5px 12px rgba(0,21,43,.28),
    inset 0 0 0 4px rgba(255,255,255,.045),
    inset 0 0 0 5px rgba(216,189,131,.25);
  transform:translate(-50%,-50%);
  transition:opacity .32s ease,transform .42s ease;
}
.envelope-seal::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(232,211,164,.62);
  border-radius:50%;
}
.envelope-seal img{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  display:block;
  width:52px;
  height:auto;
  max-height:36px;
  object-fit:contain;
  transform:translate(-50%,-50%);
}
.envelope-art:hover .envelope-seal{transform:translate(-50%,-50%) scale(1.035)}
.envelope-open{
  min-width:182px;
  padding:11px 22px;
  border:1px solid rgba(216,189,131,.76);
  border-radius:999px;
  color:#f8f5eb;
  background:rgba(0,29,62,.2);
  font-family:var(--launch-display);
  font-size:15px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.envelope-open:hover{
  background:rgba(255,255,255,.08);
  border-color:#e8d3a4;
}
.envelope-skip{
  margin-top:2px;
  color:rgba(255,255,255,.55);
  font-size:12px;
}
.envelope-sparkle{
  position:absolute;
  z-index:6;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#f1d998;
  box-shadow:0 0 10px 2px rgba(241,217,152,.68);
  opacity:0;
  pointer-events:none;
}
.sparkle-one{left:12%;top:24%}
.sparkle-two{left:83%;top:18%;width:3px;height:3px}
.sparkle-three{left:92%;top:60%;width:3px;height:3px}
.sparkle-four{left:7%;top:66%;width:3px;height:3px}
.sparkle-five{left:75%;top:83%;width:2px;height:2px}
.launch--envelope.envelope-opening .copy{
  opacity:0;
  transform:translateY(-8px);
}
.launch--envelope.envelope-opening .envelope-flap{transform:rotateX(180deg)}
.launch--envelope.envelope-opening .envelope-letter{transform:translateY(-28%) scale(1.035)}
.launch--envelope.envelope-opening .envelope-seal{
  opacity:0;
  transform:translate(-50%,-95%) scale(.45);
}
.launch--envelope.envelope-opening .envelope-stage{
  animation:envelope-reveal .72s 1s ease-in both;
}
.launch--envelope.envelope-opening .envelope-sparkle{animation:soft-glitter 1.15s ease-out both}
.launch--envelope.envelope-opening .sparkle-two{animation-delay:.12s}
.launch--envelope.envelope-opening .sparkle-three{animation-delay:.2s}
.launch--envelope.envelope-opening .sparkle-four{animation-delay:.28s}
.launch--envelope.envelope-opening .sparkle-five{animation-delay:.36s}
@keyframes soft-glitter{
  0%{opacity:0;transform:translateY(8px) scale(.4)}
  35%{opacity:.8}
  100%{opacity:0;transform:translateY(-22px) scale(1.15)}
}
@keyframes envelope-reveal{
  to{opacity:0;transform:translateY(-12px) scale(1.035)}
}
@media(max-width:820px){
  .launch--envelope .launch-grid{gap:0;padding:28px 0 40px}
  .launch--envelope .copy{padding-top:0}
  .launch--envelope .copy .logo-img{width:68px}
  .launch--envelope .eyebrow{margin-top:20px}
  .launch--envelope .copy h1{font-size:clamp(34px,7vw,48px)}
  .launch--envelope .envelope-bay{margin-top:22px}
  .envelope-stage{width:min(390px,calc(100vw - 44px))}
  .envelope-seal{width:68px;height:68px}
  .envelope-seal img{width:47px}
}
@media(max-width:480px){
  .launch--envelope .launch-grid{padding-top:22px;padding-bottom:28px}
  .launch--envelope .copy h1{font-size:clamp(32px,8vw,40px)}
  .launch--envelope .meta em{font-size:16px}
  .envelope-stage{width:calc(100vw - 36px)}
  .envelope-open{min-width:166px;padding:10px 18px}
}
@media(max-height:760px) and (min-width:821px){
  .launch--envelope .launch-grid{padding:18px 0 24px}
  .launch--envelope .copy .logo-img{width:64px}
  .launch--envelope .eyebrow{margin-top:16px}
  .launch--envelope .copy h1{font-size:clamp(34px,4vw,50px);margin-bottom:12px}
  .launch--envelope .envelope-bay{margin-top:14px}
  .envelope-stage{width:min(370px,calc(100vh - 340px))}
}
@media(prefers-reduced-motion:reduce){
  .envelope-art span,.envelope-open{transition:none}
}