/* Afterhours as its own live section. The iframe is inert until entered. */
.ah-section { padding: 0 clamp(.5rem, 1vw, 1rem); position: relative; z-index: 3; }
.ah-stage { perspective: 1600px; transform-origin: 50% 100%; will-change: transform; position: relative; }
.ah-outro-stage { position: relative; z-index: 1; }
.ah-embed[data-outro-complete] .ah-outro-stage { pointer-events: none; }
.ah-embed { margin: 0; display: grid; gap: .75rem; }
.ah-frame { position: relative; height: min(88vh, 960px); min-height: 520px; border: 0; border-radius: 24px; overflow: hidden; background: #151719 url('/work/afterhours/images/hero-1920.avif') center / cover no-repeat; box-shadow: none; }
.ah-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #101114; pointer-events: none; opacity: 0; transition: opacity .6s ease-out; }
.ah-embed[data-loaded] iframe { opacity: 1; }
.ah-embed[data-state="active"] iframe { pointer-events: auto; }
.ah-cover { position: absolute; inset: 0; }
.ah-embed[data-state="active"] .ah-cover { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease-out, visibility 0s linear .45s; }
.ah-photo { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }
.ah-photo picture, .ah-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ah-enter { border: 0; padding: .65rem 0 .65rem 1rem; background: none; color: var(--color-fg); font: inherit; cursor: pointer; }
.ah-enter:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.ah-embed[data-state="active"] .ah-enter { visibility: hidden; }
.ah-status:empty { display: none; }
.ah-status { flex-basis: 100%; }
.ah-bar { position: absolute; top: 0; right: 0; left: 0; height: 52px; padding: 4px 12px; background: rgb(13 14 16 / .96); display: flex; align-items: center; justify-content: flex-end; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .3s ease-out, transform .3s ease-out, visibility 0s linear .3s; z-index: 2; }
.ah-embed[data-state="active"] .ah-bar { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .3s ease-out .15s, transform .3s ease-out .15s, visibility 0s; }
.ah-bar > * { min-height: 2.75rem; padding: 0 1rem; display: inline-flex; align-items: center; gap: .45em; border: 0; border-radius: 999px; background: transparent; color: var(--color-fg); font: 500 .82rem/1 var(--font-body); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.ah-bar > [data-ah-exit] { margin-right: auto; background: rgb(242 242 242 / .08); }
.ah-bar > *:hover { background: var(--color-accent); color: var(--color-on-accent); }
.ah-bar > *:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ah-bar { top: auto; bottom: 0; }
.ah-embed figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: .82rem; color: var(--color-muted); }
.ah-frame:fullscreen { height: 100%; border-radius: 0; }
@media (max-width: 899px) { .ah-stage::after { border-radius: 18px; } .ah-frame { height: 82svh; min-height: 480px; border-radius: 18px; background-image: url('/work/afterhours/images/hero-portrait.avif'); } .ah-heading { align-items: flex-start; flex-direction: column; gap: 1.25rem; } .ah-embed[data-state="active"] .ah-entry { display: none; } .ah-bar a { display: none; } .ah-bar > * { padding: 0 .85rem; } }
@media (prefers-reduced-motion: reduce) { .ah-embed iframe, .ah-cover, .ah-bar, .ah-cover .btn { transition: none; transform: none; } }