/* App reels: a native-video carousel, progressively enhanced by phone-reels.js. */
.phone-reels {
    --reel-width: 300px;
    color: #eef4fc;
    background: #091422;
    padding: 88px 0 64px;
    overflow: hidden;
}
.phone-reels .phone-reels-heading { max-width: 660px; margin-bottom: 30px; }
.phone-reels .section-kicker { color: #86efac; }
.phone-reels h2 { color: #f8fafc; }
.phone-reels .lead { color: #b2c1d3; margin-top: 16px; }
.phone-reels button { font: inherit; cursor: pointer; }
.phone-reels [hidden] { display: none !important; }
.phone-reels :focus-visible { outline: 3px solid #86efac; outline-offset: 5px; }

/* Without JavaScript, every reel remains a playable, horizontally scrollable card. */
.reels-carousel { max-width: 1180px; margin: 0 auto; }
.reels-stage {
    display: flex;
    gap: 36px;
    overflow-x: auto;
    padding: 30px 32px 20px;
    scroll-snap-type: x mandatory;
}
.reel-card { flex: 0 0 var(--reel-width); min-width: 0; scroll-snap-align: center; }
.reel-phone {
    position: relative;
    width: 100%;
    aspect-ratio: 393 / 852;
    padding: 13px;
    border-radius: 52px;
    isolation: isolate;
    /* The original demo's titanium shell, highlights, depth and blue glow. */
    background: linear-gradient(160deg, #d4d4d8 0%, #a1a1aa 18%, #52525b 42%, #71717a 58%, #d4d4d8 78%, #a1a1aa 100%);
    box-shadow: inset 0 2px 0 #ffffff73, inset 0 -2px 0 #0008,
        inset 2px 0 0 #ffffff1f, inset -2px 0 0 #00000059,
        0 70px 140px #000000b3, 0 30px 70px #0008, 0 8px 24px #0006,
        0 0 80px #0ea5e92e, 0 0 160px #0ea5e914;
}
.reel-phone::before { content: ""; position: absolute; inset: 3px; border-radius: 48px; background: #000; z-index: 0; pointer-events: none; }
.reel-screen {
    position: absolute;
    inset: 13px;
    overflow: hidden;
    border-radius: 40px;
    background: #020617;
    z-index: 1;
    box-shadow: inset 0 0 28px #0009;
}
.reel-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #000; padding: 0; }
.reel-island {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    width: 34%; height: 36px; border-radius: 999px; background: #000;
    z-index: 10; pointer-events: none;
    box-shadow: 0 0 0 1.5px #ffffff0f, inset 0 1px 0 #ffffff0a;
}
.reel-hardware { position: absolute; z-index: 10; pointer-events: none; }
.reel-action, .reel-volume-up, .reel-volume-down {
    left: -3.5px; width: 3.5px; border-radius: 2px 0 0 2px;
    background: linear-gradient(to right, #3f3f46, #a1a1aa, #3f3f46);
}
.reel-action { top: 17%; height: 7%; }
.reel-volume-up { top: 28%; height: 12%; }
.reel-volume-down { top: 43%; height: 12%; }
.reel-power {
    right: -3.5px; top: 27%; width: 3.5px; height: 16%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(to left, #3f3f46, #a1a1aa, #3f3f46);
}
.reel-home-bar {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    width: 38%; height: 5px; border-radius: 999px; background: #ffffff52;
    z-index: 10; pointer-events: none;
}
.reel-glare {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background: linear-gradient(138deg, #ffffff1a 0%, #ffffff0a 30%, transparent 55%, #ffffff05 100%);
}
.reel-glow {
    position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 180px; border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, #0ea5e961 0%, #6366f12e 45%, transparent 72%);
    filter: blur(36px);
}
.reel-reflection {
    position: absolute; bottom: -28px; left: 10%; right: 10%; height: 40px;
    border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, #0ea5e938, transparent 70%); filter: blur(14px);
}
.reel-caption { position: relative; z-index: 2; padding: 22px 0 0; text-align: center; }
.reel-caption > span { color: #86efac; font-size: .68rem; font-weight: 750; letter-spacing: .12em; }
.reel-caption h3 { font-size: 1.1rem; line-height: 1.3; margin: 8px 0; color: #f8fafc; }
.reel-caption p { font-size: .85rem; line-height: 1.6; color: #b2c1d3; }
.reel-select {
    position: absolute; inset: 0; width: 100%; border: 0;
    color: #fff; background: #07111f30;
}
.reel-select > span {
    position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
    white-space: nowrap; border-radius: 999px; padding: 10px 16px;
    background: #091422e8; border: 1px solid #c2cedc80; font-size: .82rem; font-weight: 700;
}
.reel-select:hover { background: transparent; }

/* The original sound pill, kept above the recording and clear of native controls. */
.reel-sound {
    position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    min-height: 44px; padding: 8px 14px 8px 9px; border-radius: 999px;
    background: #020617e6; backdrop-filter: blur(10px); border: 1px solid #67e8f94d;
    color: #e0f2fe; font-size: .75rem !important; font-weight: 800 !important;
    box-shadow: 0 8px 24px #0006; z-index: 9;
    animation: reelSoundPulse 2.4s ease-in-out 3;
}
.reel-sound:hover { background: #0b2942; }
.reel-sound-icon {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, #0ea5e9, #22c55e); flex-shrink: 0;
}
.reel-sound-bars { display: flex; align-items: center; gap: 2px; height: 14px; }
.reel-sound-bars span { width: 3px; height: 6px; border-radius: 2px; background: #67e8f9; opacity: .45; }
.reel-sound[aria-pressed="true"][data-playing="true"] .reel-sound-bars span { opacity: 1; animation: reelSoundBar .9s ease-in-out infinite; }
.reel-sound[aria-pressed="true"][data-playing="true"] .reel-sound-bars span:nth-child(2) { height: 12px; animation-delay: .15s; }
.reel-sound[aria-pressed="true"][data-playing="true"] .reel-sound-bars span:nth-child(3) { height: 8px; animation-delay: .3s; }
.reel-sound[aria-pressed="true"][data-playing="true"] .reel-sound-bars span:nth-child(4) { height: 14px; animation-delay: .1s; }
@keyframes reelSoundBar { 50% { transform: scaleY(.4); } }
@keyframes reelSoundPulse { 50% { box-shadow: 0 8px 24px #0006, 0 0 0 5px #0ea5e926; } }

/* Three phone positions, animated only in response to deliberate navigation. */
.is-enhanced .reels-stage {
    position: relative; display: block; padding: 0;
    /* Reserve room for captions that wrap to three lines on tablet layouts. */
    height: calc(var(--reel-width) * 2.168 + 196px);
    perspective: 1400px; overflow: clip; scroll-snap-type: none;
    touch-action: pan-y pinch-zoom;
}
.is-enhanced .reel-card {
    position: absolute; top: 30px; left: 50%; width: var(--reel-width);
    margin-left: calc(var(--reel-width) / -2);
    transition: transform 600ms cubic-bezier(.22,.68,0,1), opacity 450ms ease;
    transform-origin: center center;
}
.is-enhanced .reel-card[data-position="active"] { transform: translateX(0); opacity: 1; z-index: 3; }
.is-enhanced .reel-card[data-position="previous"] { transform: translateX(calc(var(--reel-width) * -1.08)) rotateY(16deg) scale(.82); opacity: .68; z-index: 1; }
.is-enhanced .reel-card[data-position="next"] { transform: translateX(calc(var(--reel-width) * 1.08)) rotateY(-16deg) scale(.82); opacity: .68; z-index: 1; }
.is-enhanced .reel-card:not([data-position="active"]) .reel-caption { visibility: hidden; }
.is-enhanced .reel-card:not([data-position="active"]) video { pointer-events: none; }
.reels-navigation { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.reels-controls { display: flex; align-items: center; justify-content: center; gap: 20px; }
.reels-arrow {
    flex: 0 0 46px; height: 46px; border: 1px solid #53647a; border-radius: 50%;
    background: #132237; color: #f8fafc; font-size: 1.4rem !important;
    transition: background 160ms ease;
}
.reels-arrow:hover { background: #24405a; }
.reels-status { text-align: center; color: #c7d3e2; font-size: .83rem; min-width: 260px; }
.reels-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 18px; }
.reels-picker button {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid #53647a; border-radius: 999px;
    padding: 11px 17px; min-height: 44px; color: #c7d3e2; background: #132237;
    font-size: .78rem; font-weight: 700;
}
.reels-picker button[aria-pressed="true"] { color: #092417; border-color: #86efac; background: #86efac; }
.reels-hint, .reels-note { font-size: .8rem; line-height: 1.7; color: #a8bad0; text-align: center; }
.reels-hint { max-width: 530px; margin: 0 auto; }
.reels-hint > span { display: inline-block; font-size: 1.1rem; margin-right: 6px; animation: reelSwipeHint 1.6s ease-in-out 3; }
.reels-note { max-width: 650px; margin: 24px auto 0; padding: 0 24px; font-size: .72rem; color: #a3b5cc; }
.reels-error { text-align: center; color: #fed7aa; font-size: .85rem; margin-top: 16px; }
@keyframes reelSwipeHint { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@media (max-width: 768px) {
    .phone-reels { --reel-width: 280px; padding-top: 64px; }
    .is-enhanced .reel-card[data-position="previous"] { transform: translateX(calc(var(--reel-width) * -.94)) rotateY(12deg) scale(.82); }
    .is-enhanced .reel-card[data-position="next"] { transform: translateX(calc(var(--reel-width) * .94)) rotateY(-12deg) scale(.82); }
}
@media (max-width: 480px) {
    .phone-reels { --reel-width: min(280px, calc(100vw - 106px)); }
    .phone-reels h2 { font-size: 1.85rem; }
    .phone-reels .lead { font-size: .95rem; }
    .reels-navigation { padding: 0 16px; }
    .reels-controls { gap: 12px; }
    .reels-status { min-width: 0; flex: 1; font-size: .76rem; }
    .reels-picker { gap: 8px; margin-top: 20px; }
    .reels-picker button { padding: 9px 12px; font-size: .72rem; }
    .reel-caption h3 { font-size: 1rem; }
    .reel-caption p { font-size: .8rem; }
}
@media (max-width: 640px) {
    .reel-phone { border-radius: 44px; padding: 10px; }
    .reel-phone::before { border-radius: 38px; }
    .reel-screen { border-radius: 34px; }
    .reel-island { top: 14px; height: 28px; }
    .reel-home-bar { bottom: 9px; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .phone-reels *, .phone-reels *::before, .phone-reels *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}