/* the door: first screen. Phone first, budgeted for 390 x 664 and checked at 375 x 548. */
.frame-door .frame-media img { object-position: 50% 0%; }
.veil { position: absolute; inset: 0; background: var(--night); opacity: 0.22; animation: lampup 1400ms var(--ease-candle) 100ms both; }
.glow-door {
  background:
    radial-gradient(ellipse 55% 34% at 56% 26%, rgba(242, 199, 122, 0.22), transparent 70%),
    radial-gradient(ellipse 34% 20% at 14% 16%, rgba(242, 199, 122, 0.2), transparent 70%);
  animation: lampglow 1400ms var(--ease-candle) 100ms both;
}
.scrim-door { background: linear-gradient(to top, var(--night) 0%, rgba(13, 15, 12, 0.92) 22%, rgba(13, 15, 12, 0.6) 46%, transparent 66%); }
@keyframes lampup { from { opacity: 0.74; } }
@keyframes lampglow { from { opacity: 0; } }
@keyframes lamplit { from { opacity: 0; filter: blur(6px); } }

.door-copy {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: stretch;
}
.frame-door { min-height: 100svh; min-height: 100vh; min-height: 100svh; }
.eyebrow { margin-bottom: 10px; text-shadow: 0 0 8px var(--night), 0 0 2px var(--night); } /* keeps it legible over the brooch */
.frame-door h1 {
  font-size: var(--t-hero); line-height: 0.95; letter-spacing: -0.01em; font-weight: 500;
  animation: lamplit 900ms var(--ease-candle) 150ms both;
}
.h1-l { display: block; }
.lede { margin-top: 12px; font: italic 400 var(--t-lede)/1.5 var(--f-body); color: var(--ivory); max-width: 26em; }
.door-cta { margin-top: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.door-cta .btn { width: 100%; animation: none; }
.door-cta .textlink { align-self: center; min-height: 44px; display: inline-flex; align-items: center; }
.micro { margin-top: 2px; text-align: center; font-size: 0.875rem; line-height: 1.5; color: var(--ivory-dim); }
.cue { display: none; }
.intro-done .veil, .intro-done .glow-door, .intro-done h1 { animation: none; }

@media (max-height: 620px) {
  .eyebrow, .micro { display: none; }
  .frame-door h1 { font-size: 2.75rem; }
  .lede { font-size: 1rem; margin-top: 8px; }
  .door-cta { margin-top: 12px; gap: 4px; }
  .door-cta .btn { min-height: 48px; }
  .door-copy { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (min-width: 768px) and (orientation: landscape) {
  .door-copy { left: var(--gutter); right: auto; width: min(54vw, 760px); top: 0; bottom: 0; justify-content: center; padding-top: var(--bar-h); padding-bottom: 6vh; }
  .frame-door h1 { font-size: var(--t-hero); }
  .scrim-door { background: linear-gradient(to right, var(--night) 0%, rgba(13, 15, 12, 0.86) 38%, transparent 62%); }
  .glow-door { background: radial-gradient(ellipse 30% 40% at 76% 34%, rgba(242, 199, 122, 0.2), transparent 70%); }
  .frame-door .frame-media img { object-position: 50% 50%; }
  .door-cta { flex-direction: row; align-items: center; gap: var(--s-5); margin-top: var(--s-5); }
  .door-cta .btn { width: auto; }
  .door-cta .textlink { align-self: auto; }
  .micro { text-align: left; font-size: 0.9375rem; margin-top: var(--s-4); }
  .lede { margin-top: var(--s-4); }
  .cue { display: block; position: absolute; z-index: 3; left: var(--gutter); bottom: 32px; font: 400 0.875rem var(--f-sc); letter-spacing: 0.1em; color: var(--ivory-faint); }
}
@media (min-width: 768px) and (orientation: portrait) {
  .door-copy { max-width: 42rem; }
  .frame-door h1 { font-size: 5.5rem; }
  .door-cta { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s-5); }
  .door-cta .btn { width: auto; }
  .micro { text-align: left; }
}