/* Gateway (home page): three emblems drawn by the particles, a card under each (loaded after immersive.css) */

/* The emblems take the band from 11vh to 33vh; the copy starts just under them so everything fits the first screen */
.im-gate { min-height: 100vh; display: block; padding: 37vh clamp(16px, 6vw, 96px) 4vh; }
.im-gate-inner { width: 88vw; max-width: 1400px; margin: 0 auto; text-align: center; }
.im-gate-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.im-gate-title { margin-top: 12px; font-size: clamp(1.9rem, min(3.8vw, 6.4vh), 3.6rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; }
.im-gate-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.im-gate-sub { max-width: 60ch; margin: 12px auto 0; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.1rem); }

.im-gate-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); margin-top: clamp(22px, 4vh, 40px); text-align: left; }
.im-gate-card {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 1.7vw, 26px) clamp(20px, 2vw, 28px);
    border: 1px solid var(--border); border-radius: 22px; overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow);
    transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.im-gate-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .4s; }
.im-gate-card:hover, .im-gate-card:focus-visible { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--c) 45%, transparent); }
.im-gate-card:hover::before, .im-gate-card:focus-visible::before { opacity: 1; }
.im-gate-head { display: flex; align-items: baseline; gap: 12px; }
.im-gate-n { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1; color: var(--c); }
.im-gate-card h2 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); letter-spacing: -.03em; line-height: 1.1; }
.im-gate-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.im-gate-story { color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; margin-top: 2px; }
.im-gate-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; color: var(--text); }
.im-gate-cta .icon { width: 16px; height: 16px; color: var(--c); transition: transform .3s var(--ease); }
.im-gate-card:hover .im-gate-cta .icon { transform: translateX(5px); }
.im-pill-bonus .icon { color: #ffd166; }
.im-pill-bonus:hover { border-color: #ffd166; }
.im-gate-legal { margin-top: clamp(18px, 3vh, 32px); font-size: 12.5px; color: var(--faint); }
.im-gate-legal a:hover { color: var(--text); }

/* The intro hides the interface until the emblems are drawn */
.im-gate-inner { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .im:not(.is-ready) .im-gate-inner { opacity: 0; transform: translateY(24px); animation: im-safety 0s 9s forwards; }
.im.is-ready .im-gate-inner { transition-delay: .25s; }
/* The intro names each experience under its symbol */
.im-caption { position: fixed; left: 0; right: 0; top: calc(42vh + min(28vw, 28vh) + 14px); z-index: 5; text-align: center; font-family: var(--font-mono); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--cap, var(--text)); text-shadow: 0 0 18px var(--cap, transparent); opacity: 0; pointer-events: none; }
.im-caption.is-on { animation: im-caption 1.05s var(--ease) both; }
@keyframes im-caption { 0% { opacity: 0; transform: translateY(10px); letter-spacing: .6em; } 25%, 75% { opacity: 1; transform: none; letter-spacing: .3em; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Leaving towards an experience: the interface fades while the particles explode */
.im.is-leaving .im-gate-inner, .im.is-leaving .im-header { opacity: 0; transform: scale(.98); transition: opacity .5s, transform .6s var(--ease); }

@media (max-width: 860px) {
    .im-gate { padding: 34vh 16px 6vh; }
    .im-gate-inner { width: 100%; }
    .im-gate-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .js .im:not(.is-ready) .im-gate-inner { opacity: 1; transform: none; }
    .im-caption { display: none; }
}

/* Waiting for the chosen experience: only shown if it takes more than a moment */
.im-wait { position: fixed; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 16px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.im.is-waiting .im-wait { opacity: 1; visibility: visible; transition: opacity .4s; }
.im-wait-ring { width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--c)); -webkit-mask: radial-gradient(circle, transparent 18px, #000 19px); mask: radial-gradient(circle, transparent 18px, #000 19px); animation: im-spin .9s linear infinite; filter: drop-shadow(0 0 12px var(--c)); }
.im-wait b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--c); }
@keyframes im-spin { to { transform: rotate(360deg); } }

/* Replay button: the label hides on phones */
@media (max-width: 600px) { .im-pill-label { display: none; } }