.u-reel {
min-height: var(--u-reel-h, 500vh);
position: relative;
}
.u-reel-pin {
position: sticky;
top: 0;
min-height: 100vh;
display: grid;
align-content: center;
overflow: hidden;
}
.u-reel-head {
margin-bottom: clamp(24px, 5vh, 56px);
}
.u-reel-frame {
position: relative;
height: clamp(180px, 30vh, 280px);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.u-reel-line {
position: absolute;
inset: 0;
display: grid;
align-content: center;
gap: 10px;
}
.u-reel-line p {
margin: 0;
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.15;
max-width: 22ch;
font-weight: 500;
}
.u-reel-note {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--u-muted);
}
.u-reel-rail {
position: absolute;
right: clamp(16px, 4vw, 40px);
top: 22%;
bottom: 22%;
width: 2px;
background: var(--u-border);
border-radius: 2px;
}
.u-reel-bead {
display: block;
width: 100%;
height: 100%;
background: var(--u-primary);
border-radius: inherit;
transform-origin: top center;
transform: scaleY(0);
}
@media (max-width: 620px) {
.u-reel-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.u-reel{
min-height: 0;
}
.u-reel-pin{
position: static;
height: auto;
min-height: 0;
padding-block: clamp(60px, 10vh, 110px);
}
.u-reel-frame {
height: auto;
display: grid;
gap: clamp(20px, 4vh, 40px);
-webkit-mask-image: none;
mask-image: none;
}
.u-reel-line {
position: static;
inset: auto;
opacity: 1 !important;
transform: none !important;
}
.u-reel-line p {
font-size: clamp(1.2rem, 2.4vw, 1.7rem);
max-width: 40ch;
}
.u-reel-rail { display: none; }
}
@media print {
.u-reel{ min-height: 0; }
.u-reel-pin{
position: static;
height: auto;
min-height: 0;
}
.u-reel-frame {
height: auto;
display: grid;
gap: 12px;
-webkit-mask-image: none;
mask-image: none;
}
.u-reel-line {
position: static;
opacity: 1 !important;
transform: none !important;
}
.u-reel-rail { display: none; }
}