/* The invitation is live HTML; the theatre is an illustrative environment. */
.genesis-founding { padding-top: 0; }
.genesis-theatre { position: relative; isolation: isolate; margin: 0 -9.1% 70px; min-height: 790px; overflow: hidden; display: grid; place-items: center; background: #090907; }
.theatre-art, .theatre-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.theatre-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.theatre-shade { background: linear-gradient(180deg,#080807b0, #08080725 35%,#08080765 68%,#0c0c09 100%),linear-gradient(90deg,#08080750,transparent 30%,transparent 70%,#08080750); }
.genesis-theatre .genesis-number-block { width: 100%; max-width: 1000px; padding: 80px 32px 92px; margin: 0; }
.genesis-theatre .eyebrow { font-size: 9px; letter-spacing: 3px; }
.genesis-theatre .genesis-grand-number { display: block; font-size: clamp(110px,12vw,185px); line-height: 1; margin: 24px 0 30px; letter-spacing: -6px; color: #e3c486; text-shadow: 0 5px 45px #000; }
.genesis-theatre h3 { font-size: clamp(38px,4.4vw,67px); line-height: 1.08; text-shadow: 0 2px 25px #000; }
.genesis-theatre .theatre-invitation { margin: 20px 0; font-family: var(--serif); font-size: 28px; color: #e3c486; }
.theatre-copy { max-width: 550px; margin: 0 auto; font-size: 14px; line-height: 1.8; color: #dfdbd1; text-wrap: balance; }
.theatre-roles { display: flex; justify-content: center; gap: 12px; margin: 30px auto 0; }
.theatre-roles a { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 52px; padding: 14px 18px; border: 1px solid #e3c48670; background: #080807b8; font-size: 11px; color: #f4eee2; transition: background .25s ease,border-color .25s ease; }
.theatre-roles a:hover { background: #342918; border-color: #e3c486; }
.theatre-roles span { color: #e3c486; font-size: 18px; }
.genesis-theatre .theatre-note { max-width: 540px; font-size: 10px; line-height: 1.7; color: #bab7ad; margin: 22px auto 0; }
.genesis-theatre .arrival-complete .genesis-grand-number { animation: theatre-number 1.8s ease-out both; }
@keyframes theatre-number { from { opacity: .25; transform: translateY(12px); text-shadow: 0 0 0 #e3c48600; } 65% { text-shadow: 0 0 35px #e3c48660; } to { opacity: 1; transform: none; text-shadow: 0 5px 45px #000; } }
@media (max-width: 1050px) { .genesis-theatre { margin-left: -6.82%; margin-right: -6.82%; } }
@media (max-width: 700px) { .genesis-theatre { margin: 0 -24px 40px; min-height: 760px; } .genesis-theatre .genesis-number-block { padding: 54px 24px 70px; } .genesis-theatre .eyebrow { font-size: 8px; letter-spacing: 1.5px; } .genesis-theatre .genesis-grand-number { font-size: clamp(108px,26vw,145px); letter-spacing: -4px; margin: 22px 0; } .genesis-theatre h3 { font-size: 38px; letter-spacing: -1px; } .theatre-roles { flex-direction: column; max-width: 320px; gap: 10px; margin-top: 24px; } .theatre-roles a { min-height: 52px; } .theatre-copy { font-size: 13px; } .theatre-shade { background: linear-gradient(180deg,#0808078c,#08080755 45%,#080807a0 80%,#0c0c09); } }
@media (prefers-reduced-motion: reduce) { .genesis-theatre .arrival-complete .genesis-grand-number { animation: none; } .theatre-roles a { transition: none; } }
.genesis-theatre:has(.arrival-complete) .theatre-art { animation: theatre-light 2.6s ease-out both; }
.genesis-theatre .arrival-complete .theatre-roles { animation: theatre-invitation 1.2s .35s ease-out both; }
@keyframes theatre-light { from { filter: brightness(.45); } to { filter: brightness(1); } }
@keyframes theatre-invitation { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width:700px), (prefers-reduced-motion:reduce) { .genesis-theatre:has(.arrival-complete) .theatre-art, .genesis-theatre .arrival-complete .theatre-roles { animation: none; } }
.genesis-theatre .genesis-number-block .theatre-note { font-size: 11px; line-height: 1.7; }