.irms-stage {
--irms-bg: #000;
--irms-fg: #fff;
--irms-muted: rgba(255,255,255,0.62);
--irms-line: rgba(255,255,255,0.14);
--irms-pad-x: clamp(20px, 5vw, 64px);
position: relative;
background: var(--irms-bg);
color: var(--irms-fg);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
isolation: isolate;
overflow: clip;
}
.irms-stage__scroller {
position: relative;
height: var(--irms-scroll-length, 400vh);
}
.irms-stage__sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
}
.irms-stage__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.irms-stage__overlay {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding: clamp(24px, 6vh, 64px) var(--irms-pad-x);
pointer-events: none;
}
.irms-stage.irms-align-left   .irms-stage__overlay { justify-items: start;  text-align: left;  }
.irms-stage.irms-align-center .irms-stage__overlay { justify-items: center; text-align: center; }
.irms-stage.irms-align-right  .irms-stage__overlay { justify-items: end;    text-align: right; }
.irms-msg {
grid-column: 1;
grid-row: 1;
max-width: min(640px, 92vw);
opacity: 0;
transform: translate3d(0, 12px, 0);
will-change: opacity, transform;
pointer-events: none;
}
.irms-msg.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
pointer-events: auto;
}
.irms-eyebrow {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--irms-muted);
margin: 0 0 14px;
font-weight: 500;
}
.irms-msg__title {
font-size: clamp(28px, 5vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 600;
margin: 0 0 16px;
color: var(--irms-fg);
}
.irms-msg__body {
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.55;
color: var(--irms-muted);
margin: 0;
max-width: 56ch;
}
.irms-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 28px;
padding: 14px 22px;
border: 1px solid var(--irms-fg);
border-radius: 999px;
color: var(--irms-fg);
background: transparent;
text-decoration: none;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.irms-cta:hover { background: var(--irms-fg); color: var(--irms-bg); transform: translateY(-1px); }
.irms-cta:focus-visible { outline: 2px solid var(--irms-fg); outline-offset: 4px; }
.irms-cta svg { transition: transform .25s ease; }
.irms-cta:hover svg { transform: translateX(3px); }
.irms-progress {
position: absolute;
left: var(--irms-pad-x);
right: var(--irms-pad-x);
bottom: clamp(20px, 4vh, 40px);
height: 1px;
background: var(--irms-line);
overflow: hidden;
}
.irms-progress__bar {
display: block;
width: 100%;
height: 100%;
transform-origin: left center;
transform: scaleX(0);
background: var(--irms-fg);
will-change: transform;
} .irms-stage__fallback {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--irms-pad-x);
background:
radial-gradient(ellipse at center, rgba(255,255,255,0.06), transparent 60%),
repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 80px);
}
.irms-fallback__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
width: min(1100px, 100%);
}
.irms-fallback__item {
border: 1px solid var(--irms-line);
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.irms-fallback__item:hover {
border-color: var(--irms-fg);
background: rgba(255,255,255,0.04);
transform: translateY(-2px);
}
.irms-fallback__name {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
.irms-fallback__tag {
font-size: 12px;
color: var(--irms-muted);
letter-spacing: 0.04em;
} .irms-empty {
padding: 48px 32px;
border: 1px dashed #999;
text-align: center;
color: #666;
font-family: inherit;
}
@media (prefers-reduced-motion: reduce) {
.irms-msg { transition: none !important; transform: none !important; }
.irms-cta { transition: none !important; }
}