/* Route-scoped scroll story for the tipi.zone homepage. */
.cinematic-experience {
    --cinematic-progress: 0;
    --hero-opacity: 1;
    --phone-opacity: 1;
    --phone-scale: .88;
    --phone-rotate-x: 5deg;
    --phone-rotate-y: -8deg;
    --map-opacity: 0;
    --map-scale: .34;
    --map-x: 18vw;
    --map-y: 1vh;
    --location-copy-opacity: 0;
    --discovery-copy-opacity: 0;
    --preview-opacity: 0;
    --conversation-progress: 0;
    --expiry-progress: 0;
    --expiry-opacity: 0;
    --logo-progress: 0;
    --logo-point-opacity: 0;
    --final-opacity: 0;
    --hero-y: 0px;
    --location-copy-y: 18px;
    --discovery-copy-y: 18px;
    --preview-y: 80px;
    --preview-scale: .72;
    --timer-offset: 0;
    --travel-scale: .7;
    --people-opacity: 1;
    --expiry-ring-scale: .6;
    --particle-scale: 1;
    --final-y: 32px;
    --map-card-scale: 1;
    position: relative;
    width: 100%;
    margin-inline: 0;
    color: var(--site-ink);
    overflow: clip;
    isolation: isolate;
}

body.site-home > main.site-shell {
    width: 100%;
    max-width: none;
}

body.site-home > main.site-shell > :not(.cinematic-experience) {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.cinematic-scroll-track {
    position: relative;
    height: 400vh;
    min-height: 2600px;
}

.cinematic-sticky {
    position: sticky;
    inset-block-start: 0;
    width: 100%;
    height: 100svh;
    min-height: 580px;
    overflow: clip;
    background:
        radial-gradient(circle at 50% 45%, rgba(45, 212, 191, .12), transparent 38%),
        linear-gradient(145deg, #0b1511 0%, #101d17 48%, #09110e 100%);
    contain: layout paint;
}

@supports (height: 100dvh) {
    .cinematic-sticky {
        height: 100dvh;
    }
}

.cinematic-skip {
    position: absolute;
    z-index: 60;
    inset-block-start: 14px;
    inset-inline-start: 18px;
    padding: 12px 18px;
    min-height: 48px;
    border-radius: 999px;
    color: #073b31;
    background: #d9ffef;
    font-weight: 800;
    transform: translateY(-160%);
    transition: transform .18s ease;
}

.cinematic-skip:focus-visible {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.cinematic-map {
    position: absolute;
    overflow: hidden;
}

.cinematic-map-full {
    z-index: 1;
    inset: -8%;
    opacity: var(--map-opacity);
    transform:
        translate3d(var(--map-x), var(--map-y), 0)
        scale(var(--map-scale));
    transform-origin: 72% 48%;
    will-change: transform, opacity;
}

.cinematic-map-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.map-canvas {
    fill: #13241d;
}

.map-neighborhoods path {
    fill: #1a3027;
    stroke: rgba(166, 227, 204, .08);
    stroke-width: 3;
}

.map-roads {
    fill: none;
    stroke-linecap: round;
}

.map-roads-minor {
    stroke: #365247;
    stroke-width: 12;
}

.map-roads-major {
    stroke: #55776a;
    stroke-width: 22;
}

.map-labels {
    fill: rgba(218, 240, 230, .5);
    font: 700 20px/1 "Noto Sans", sans-serif;
    letter-spacing: .12em;
}

.cinematic-location {
    position: absolute;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #073b31;
    border: 3px solid #e4fff4;
    box-shadow: 0 0 0 7px rgba(166, 227, 204, .18);
}

.cinematic-location b {
    width: 8px;
    height: 8px;
    border-radius: inherit;
    background: #a6e3cc;
}

.cinematic-location i {
    position: absolute;
    inset: 50%;
    width: 24px;
    height: 24px;
    margin: -12px;
    border: 2px solid rgba(166, 227, 204, .72);
    border-radius: 50%;
    opacity: var(--pulse-opacity, 0);
    transform: scale(var(--pulse-one, 1));
}

.cinematic-location i:nth-child(2) {
    opacity: var(--pulse-two-opacity, 0);
    transform: scale(var(--pulse-two, 1));
}

.cinematic-location i:nth-child(3) {
    opacity: var(--pulse-three-opacity, 0);
    transform: scale(var(--pulse-three, 1));
}

.cinematic-location-full {
    inset-inline-start: 52%;
    inset-block-start: 48%;
}

.cinematic-experience .site-hero {
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
    align-items: center;
    gap: clamp(36px, 7vw, 120px);
    width: min(1180px, calc(100% - 64px));
    height: 100%;
    margin: 0 auto;
    padding-block: clamp(96px, 14vh, 150px) 50px;
    opacity: var(--hero-opacity);
    pointer-events: none;
    transform: translate3d(0, var(--hero-y), 0);
    will-change: transform, opacity;
}

.cinematic-experience .hero-copy {
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

.cinematic-scroll-prompt {
    display: none;
}

.cinematic-experience .hero-copy .store-row,
.cinematic-experience .hero-promises {
    transition: opacity .15s linear;
}

.cinematic-experience .hero-visual {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 100%;
}

.cinematic-experience .phone-demo {
    position: relative;
    inset: auto;
    width: clamp(272px, 24vw, 340px);
    height: clamp(530px, 68vh, 650px);
    opacity: var(--phone-opacity);
    transform:
        perspective(1200px)
        rotateX(var(--phone-rotate-x))
        rotateY(var(--phone-rotate-y))
        scale(var(--phone-scale));
    transform-origin: center;
    will-change: transform, opacity;
}

.cinematic-experience[data-in-view="true"][data-scene="arrival"] .phone-demo {
    animation: cinematicPhoneIdle 4.8s ease-in-out infinite alternate;
}

@keyframes cinematicPhoneIdle {
    from { translate: 0 -3px; }
    to { translate: 4px 3px; }
}

.cinematic-experience .phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 9px solid rgba(5, 11, 8, var(--phone-opacity));
    border-radius: 48px;
    background: #13241d;
    box-shadow:
        0 42px 100px rgba(0, 0, 0, .48),
        inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.cinematic-experience .phone-island {
    z-index: 7;
}

.cinematic-experience .phone-status {
    z-index: 6;
    color: #e7fff4;
}

.cinematic-map-phone {
    inset: 0;
    transform: scale(1.82);
    transform-origin: 51% 48%;
}

.cinematic-location-phone {
    inset-inline-start: 49%;
    inset-block-start: 46%;
    z-index: 3;
}

.cinematic-experience .phone-top-card,
.cinematic-experience .phone-peek,
.cinematic-experience .phone-tabbar {
    z-index: 5;
}

.cinematic-experience .map-card {
    display: none;
}

.map-mobile-road {
    fill: none;
    stroke: #45695a;
    stroke-width: 18;
    stroke-linecap: round;
}

.map-mobile-road.major {
    stroke: #6b8e80;
    stroke-width: 28;
}

.cinematic-scene-copy {
    position: absolute;
    z-index: 16;
    inset-inline: 24px;
    inset-block-end: clamp(74px, 12vh, 130px);
    margin: 0 auto;
    max-width: 720px;
    color: #eafff6;
    font-size: clamp(24px, 3.4vw, 52px);
    font-weight: 800;
    text-align: center;
    text-wrap: balance;
    pointer-events: none;
    transform: translate3d(0, 18px, 0);
}

.cinematic-location-copy {
    opacity: var(--location-copy-opacity);
    transform: translate3d(0, var(--location-copy-y), 0);
}

.cinematic-discovery-copy {
    inset-block: clamp(94px, 14vh, 148px) auto;
    opacity: var(--discovery-copy-opacity);
    transform: translate3d(0, var(--discovery-copy-y), 0);
}

.cinematic-room-moments {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cinematic-room-moment {
    --room-progress: 0;
    position: absolute;
    inset-inline-start: var(--room-x);
    inset-block-start: var(--room-y);
    display: grid;
    justify-items: center;
    width: clamp(198px, 17vw, 242px);
    min-height: 72px;
    opacity: var(--room-progress);
    transform:
        translate3d(-50%, var(--room-y-offset, 48px), 0)
        scale(var(--room-scale, .42));
    transform-origin: 50% 100%;
}

html[dir="rtl"] .cinematic-room-moment {
    transform:
        translate3d(50%, var(--room-y-offset, 48px), 0)
        scale(var(--room-scale, .42));
}

.cinematic-room-card {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 66px;
    padding: 8px 13px 8px 8px;
    border: 1px solid rgba(20, 124, 99, .24);
    border-radius: 18px;
    color: #102a22;
    background: rgba(247, 252, 249, .96);
    box-shadow: 0 15px 34px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .22);
    text-align: start;
}

.cinematic-room-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-start: calc(50% - 7px);
    inset-block-end: -7px;
    width: 14px;
    height: 14px;
    border-inline-end: 1px solid rgba(20, 124, 99, .2);
    border-block-end: 1px solid rgba(20, 124, 99, .2);
    background: #f7fcf9;
    rotate: 45deg;
}

.cinematic-room-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #dff7ed;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 0 0 2px #0f9678, 0 5px 12px rgba(7, 59, 49, .2);
}

.cinematic-room-card-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cinematic-room-moment-title {
    overflow: hidden;
    color: #102a22;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cinematic-room-meta {
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #526b62;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cinematic-room-meta::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-inline-end: 5px;
    border-radius: 50%;
    background: #19a886;
    box-shadow: 0 0 0 3px rgba(25, 168, 134, .14);
}

.cinematic-room-moment[data-variant="event"] .cinematic-room-avatar {
    background: #f7dfeb;
    box-shadow: 0 0 0 2px #cf6f9b, 0 5px 12px rgba(7, 59, 49, .2);
}

.cinematic-room-moment[data-variant="traffic"] .cinematic-room-avatar {
    background: #ffe7cf;
    box-shadow: 0 0 0 2px #e58a51, 0 5px 12px rgba(7, 59, 49, .2);
}

.cinematic-room-moment[data-variant="park"] .cinematic-room-avatar {
    background: #dcefd9;
    box-shadow: 0 0 0 2px #61a467, 0 5px 12px rgba(7, 59, 49, .2);
}

.cinematic-room-moment[data-variant="campus"] .cinematic-room-avatar {
    background: #e6e0fa;
    box-shadow: 0 0 0 2px #8271c8, 0 5px 12px rgba(7, 59, 49, .2);
}

.cinematic-room-moment[data-activity="quiet"] .cinematic-room-card {
    filter: saturate(.5);
    opacity: .86;
}

.cinematic-room-preview {
    position: absolute;
    z-index: 24;
    inset: 50% auto auto 50%;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100% - 48px));
    min-height: 560px;
    padding: 26px 22px;
    border: 1px solid rgba(166, 227, 204, .24);
    border-radius: 44px;
    color: #eafff6;
    background: rgba(15, 29, 23, .97);
    box-shadow: 0 35px 100px rgba(0, 0, 0, .55);
    opacity: var(--preview-opacity);
    transform:
        translate3d(-50%, calc(-44% + var(--preview-y)), 0)
        scale(var(--preview-scale));
    pointer-events: none;
    will-change: transform, opacity;
}

.cinematic-room-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.cinematic-room-header > span:nth-child(2) {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cinematic-room-header b {
    color: #f2fff9;
    font-size: 15px;
}

.cinematic-room-header small {
    color: #b5c8bf;
    font-size: 11px;
    line-height: 1.35;
}

.cinematic-room-marker {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #073b31;
}

.cinematic-timer {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
}

.cinematic-timer svg {
    position: absolute;
    inset: 0;
    fill: none;
    stroke: #f2b56b;
    stroke-width: 3;
    stroke-dasharray: 113;
    stroke-dashoffset: var(--timer-offset);
    rotate: -90deg;
}

.cinematic-timer b {
    font-size: 10px;
}

.cinematic-enter {
    display: grid;
    place-items: center;
    min-height: 48px;
    margin-block: 18px 10px;
    border: 0;
    border-radius: 999px;
    color: #073b31;
    background: #a6e3cc;
    font: inherit;
    font-weight: 800;
}

.cinematic-experience[data-in-view="false"] .cinematic-map-full,
.cinematic-experience[data-in-view="false"] .phone-demo,
.cinematic-experience[data-in-view="false"] .cinematic-room-preview {
    will-change: auto;
}

.cinematic-message-flow {
    position: relative;
    flex: 1;
    min-height: 360px;
    padding: 28px 5px 8px;
}

.cinematic-message-list {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 10px;
}

.cinematic-message-settled {
    width: fit-content;
    max-width: 82%;
    margin: 0;
    padding: 11px 14px;
    border-radius: 16px 16px 16px 5px;
    color: #eafff6;
    background: #27362e;
    font-size: 13px;
    line-height: 1.4;
    opacity: var(--message-opacity, 0);
    transform: translate3d(var(--message-x, 0), var(--message-y, 18px), 0);
}

html[dir="rtl"] .cinematic-message-settled {
    border-radius: 16px 16px 5px 16px;
}

.cinematic-message-settled:nth-child(even) {
    justify-self: end;
    background: #073b31;
}

.cinematic-person {
    position: absolute;
    z-index: 2;
    width: 12px;
    height: 12px;
    border: 2px solid #eafff6;
    border-radius: 50%;
    background: #2dd4bf;
    opacity: var(--people-opacity);
    box-shadow: 0 0 0 7px rgba(45, 212, 191, .1);
}

.person-north { inset-block-start: 2px; inset-inline-start: 50%; }
.person-east { inset-block-start: 36%; inset-inline-end: -10px; }
.person-south { inset-block-end: 6px; inset-inline-start: 48%; }
.person-west { inset-block-start: 62%; inset-inline-start: -10px; }

.cinematic-traveling-messages {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cinematic-traveling-message {
    position: absolute;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #a6e3cc;
    opacity: var(--travel-opacity, 0);
    transform: translate3d(var(--travel-x, 0), var(--travel-y, 0), 0)
        scale(var(--travel-scale));
}

.cinematic-expiry {
    position: absolute;
    z-index: 26;
    inset: 50% auto auto 50%;
    width: min(440px, 82vw);
    aspect-ratio: 1;
    opacity: var(--expiry-opacity);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cinematic-expiry-ring {
    position: absolute;
    inset: 8%;
    border: 3px solid rgba(242, 181, 107, .8);
    border-radius: 50%;
    transform: scale(var(--expiry-ring-scale));
}

.cinematic-expiry-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a6e3cc;
    transform: translate3d(var(--particle-x), var(--particle-y), 0)
        scale(var(--particle-scale));
}

.particle-one { --particle-x: 80px; --particle-y: 30px; inset: 32% auto auto 16%; }
.particle-two { --particle-x: -70px; --particle-y: -45px; inset: 64% auto auto 78%; }
.particle-three { --particle-x: 40px; --particle-y: -95px; inset: 78% auto auto 28%; }

.cinematic-expiry-copy {
    position: absolute;
    z-index: 30;
    inset-inline: 22px;
    inset-block-end: 11vh;
    display: grid;
    justify-items: center;
    color: #f4fff9;
    text-align: center;
    pointer-events: none;
}

.cinematic-expiry-copy p {
    grid-area: 1 / 1;
    margin: 0;
    font-size: clamp(26px, 4vw, 54px);
    font-weight: 800;
    opacity: var(--expiry-copy-one, 0);
}

.cinematic-expiry-copy p + p {
    opacity: var(--expiry-copy-two, 0);
}

.cinematic-logo-formation {
    position: absolute;
    z-index: 34;
    inset: 50% auto auto 50%;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.cinematic-logo-formation span {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px;
    border: 2px solid #eafff6;
    border-radius: 50%;
    background: #2dd4bf;
    opacity: var(--logo-point-opacity);
    box-shadow: 0 0 22px rgba(45, 212, 191, .8);
    transform: translate3d(var(--point-x, var(--map-x)), var(--point-y, var(--map-y)), 0);
}

.cinematic-final-cta {
    position: absolute;
    z-index: 36;
    inset: 50% auto auto 50%;
    display: grid;
    justify-items: center;
    width: min(720px, calc(100% - 40px));
    color: #eafff6;
    text-align: center;
    opacity: var(--final-opacity);
    transform: translate3d(-50%, calc(-46% + var(--final-y)), 0);
    pointer-events: none;
}

.cinematic-final-cta h2 {
    margin: 2px 0 12px;
    max-width: 650px;
    color: #f3fff9;
    font-size: clamp(30px, 5vw, 62px);
    line-height: .98;
    text-wrap: balance;
}

.cinematic-final-cta > p:not(.section-kicker) {
    max-width: 560px;
    margin: 0;
    color: #b7c9c0;
}

.cinematic-final-cta .store-row {
    margin-block-start: 24px;
    pointer-events: auto;
}

.cinematic-final-logo {
    width: clamp(104px, 14vw, 180px);
    height: auto;
    opacity: var(--logo-solid-opacity, 0);
    filter: drop-shadow(0 20px 45px rgba(45, 212, 191, .22));
}

.cinematic-debug {
    position: absolute;
    z-index: 80;
    inset-block-end: 18px;
    inset-inline-start: 18px;
    width: min(420px, calc(100% - 36px));
    padding: 12px;
    border: 1px solid rgba(166, 227, 204, .38);
    border-radius: 16px;
    color: #eafff6;
    background: rgba(4, 15, 11, .92);
    font: 600 11px/1.3 ui-monospace, monospace;
}

.cinematic-debug dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 0 0 10px;
}

.cinematic-debug dl div {
    min-width: 0;
}

.cinematic-debug dt {
    color: #7fa293;
}

.cinematic-debug dd {
    margin: 0;
}

.cinematic-debug-steps {
    display: flex;
    gap: 5px;
    overflow-x: auto;
}

.cinematic-debug button {
    min-width: 42px;
    min-height: 36px;
    border: 1px solid #476b5c;
    border-radius: 9px;
    color: inherit;
    background: #13241d;
    font: inherit;
}

.cinematic-static-story {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: min(1040px, calc(100% - 40px));
    margin: 0 auto;
    padding-block: 80px 40px;
}

.cinematic-static-story header {
    grid-column: 1 / -1;
    max-width: 760px;
}

.cinematic-static-story h1 {
    display: grid;
    margin: 8px 0 20px;
    color: #f3fff9;
    font-size: clamp(40px, 7vw, 74px);
    line-height: .98;
}

.cinematic-static-story h1 em {
    color: #a6e3cc;
    font-style: normal;
}

.cinematic-static-story article {
    min-width: 0;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid rgba(166, 227, 204, .16);
    border-radius: 24px;
    background: #18231d;
}

.cinematic-static-story article h2 {
    margin: 16px 0 8px;
    color: #f3fff9;
    font-size: clamp(23px, 3vw, 34px);
}

.cinematic-static-story article p {
    color: #b8cbc1;
}

.cinematic-static-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #073b31;
    background: #a6e3cc;
    font-weight: 900;
}

.cinematic-static-story > .store-row {
    grid-column: 1 / -1;
}

.cinematic-experience[data-cinematic-ready="false"] .cinematic-scroll-track {
    display: none;
}

.cinematic-experience[data-cinematic-ready="false"] .cinematic-static-story {
    display: grid;
}

html[dir="rtl"] .cinematic-experience .site-hero {
    direction: rtl;
}

html[dir="rtl"] .cinematic-experience .phone-demo {
    --phone-rotate-y: 8deg;
}

html[dir="rtl"] .cinematic-room-preview {
    transform:
        translate3d(-50%, calc(-44% + var(--preview-y)), 0)
        scale(var(--preview-scale));
}

@media (max-width: 1040px) {
    .cinematic-experience .site-hero {
        grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr);
        gap: 26px;
        width: min(940px, calc(100% - 44px));
    }

    .cinematic-experience .site-hero h1 {
        font-size: clamp(42px, 6vw, 68px);
    }

    .cinematic-room-moment {
        width: 210px;
    }
}

@media (min-width: 761px) and (max-width: 1040px) {
    .cinematic-room-moment[data-tablet-visible="false"] {
        display: none;
    }
}

@media (max-width: 760px) {
    .cinematic-scroll-track {
        height: 350vh;
        min-height: 2000px;
    }

    .cinematic-sticky {
        min-height: 520px;
    }

    .cinematic-map-full {
        inset: -4% -22%;
        transform-origin: 50% 44%;
    }

    .cinematic-experience .site-hero {
        display: block;
        width: 100%;
        padding: 98px 20px 70px;
        text-align: start;
    }

    .cinematic-experience .hero-copy {
        position: relative;
        z-index: 7;
        max-width: 100%;
    }

    .cinematic-experience .site-hero h1 {
        max-width: 96%;
        font-size: clamp(39px, 13vw, 60px);
    }

    .cinematic-experience .hero-lede {
        max-width: 34rem;
        margin-block-end: 0;
        font-size: 15px;
    }

    .cinematic-scroll-prompt {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        width: fit-content;
        margin: 16px 0 0;
        padding: 8px 9px 8px 13px;
        border: 1px solid rgba(166, 227, 204, .3);
        border-radius: 999px;
        color: #c9f7e6;
        background: rgba(7, 28, 21, .76);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.2;
        backdrop-filter: blur(14px);
    }

    .cinematic-scroll-arrow {
        display: grid;
        place-items: center;
        width: 25px;
        height: 25px;
        flex: 0 0 auto;
        border-radius: 50%;
        color: #073b31;
        background: #a6e3cc;
        font-size: 16px;
        line-height: 1;
    }

    .cinematic-experience[data-in-view="true"][data-scene="arrival"] .cinematic-scroll-arrow {
        animation: cinematicScrollNudge 1.6s ease-in-out infinite;
    }

    @keyframes cinematicScrollNudge {
        0%, 100% { transform: translateY(-1px); }
        50% { transform: translateY(4px); }
    }

    .cinematic-experience .hero-copy .store-row {
        display: none;
    }

    .cinematic-experience .hero-promises {
        gap: 9px;
        font-size: 11px;
    }

    .cinematic-experience .hero-visual {
        position: absolute;
        z-index: 4;
        inset: 0;
        display: block;
        pointer-events: none;
    }

    .cinematic-experience .phone-demo {
        display: none;
    }

    .cinematic-experience .map-card {
        position: absolute;
        inset-inline: 18px;
        inset-block-end: 24px;
        display: block;
        width: auto;
        height: clamp(300px, 48svh, 380px);
        min-height: 0;
        overflow: hidden;
        border: 1px solid rgba(166, 227, 204, .26);
        border-radius: 28px;
        background: #13241d;
        box-shadow: 0 26px 70px rgba(0, 0, 0, .42);
        transform: scale(var(--map-card-scale));
    }

    .cinematic-experience .map-card > svg {
        width: 100%;
        height: 100%;
    }

    .cinematic-experience .map-card .map-live-tag {
        display: none;
    }

    .cinematic-location-card {
        inset-inline-start: 52%;
        inset-block-start: 43%;
    }

    .cinematic-experience .map-card-peek {
        position: absolute;
        inset-inline: 14px;
        inset-block: clamp(118px, 16svh, 142px) auto;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 64px;
        padding: 10px 12px;
        border: 1px solid rgba(20, 124, 99, .24);
        border-radius: 18px;
        color: #102a22;
        background: rgba(247, 252, 249, .96);
        box-shadow: 0 14px 32px rgba(0, 0, 0, .25);
        text-align: start;
    }

    .cinematic-experience .map-card-peek .peek-icon {
        color: #102a22;
        background: #fff1e4;
        border-color: #fff;
        box-shadow: 0 0 0 2px #e58a51;
        font-size: 19px;
    }

    .cinematic-experience .map-card-peek b {
        color: #102a22;
    }

    .cinematic-experience .map-card-peek small {
        color: #526b62;
    }

    .cinematic-experience .map-card-peek > span:last-child {
        display: grid;
        min-width: 0;
    }

    .cinematic-scene-copy {
        inset-block-end: 78px;
        font-size: clamp(25px, 8vw, 38px);
    }

    .cinematic-discovery-copy {
        inset-block: clamp(92px, 15vh, 126px) auto;
    }

    .cinematic-room-moment {
        width: min(190px, calc(100vw - 32px));
    }

    .cinematic-room-moment[data-mobile-visible="false"] {
        display: none;
    }

    .cinematic-room-card {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 60px;
        padding: 7px 10px 7px 7px;
    }

    .cinematic-room-avatar {
        width: 42px;
        height: 42px;
        font-size: 21px;
    }

    .cinematic-room-moment-title {
        font-size: 12px;
    }

    .cinematic-room-meta {
        font-size: 9px;
    }

    .cinematic-room-preview {
        inset: auto 0 0;
        width: 100%;
        min-height: min(68svh, 570px);
        padding: 22px 18px max(22px, env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: 28px 28px 0 0;
        transform:
            translate3d(0, var(--preview-mobile-y, 75%))
            scale(1);
        transform-origin: 50% 100%;
    }

    html[dir="rtl"] .cinematic-room-preview {
        transform:
            translate3d(0, var(--preview-mobile-y, 75%))
            scale(1);
    }

    .cinematic-message-flow {
        min-height: 300px;
    }

    .cinematic-message-desktop {
        display: none;
    }

    .cinematic-logo-formation span:nth-child(n+9) {
        display: none;
    }

    .cinematic-final-cta h2 {
        font-size: clamp(30px, 9vw, 42px);
    }

    .cinematic-final-cta .store-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cinematic-final-logo {
        width: 112px;
    }

    .cinematic-debug {
        inset-block-end: max(10px, env(safe-area-inset-bottom));
    }

    .cinematic-static-story {
        grid-template-columns: 1fr;
        padding-block-start: 54px;
    }

    .cinematic-static-story header,
    .cinematic-static-story > .store-row {
        grid-column: 1;
    }
}

@media (max-width: 400px) {
    .cinematic-experience .site-hero {
        padding-inline: 16px;
    }

    .cinematic-experience .site-hero h1 {
        font-size: clamp(36px, 12.5vw, 48px);
    }

    .cinematic-experience .hero-promises {
        display: none;
    }

    .cinematic-room-preview {
        min-height: min(72svh, 510px);
    }

    .cinematic-message-flow {
        min-height: 260px;
    }
}

@media (max-width: 760px) and (max-height: 700px) {
    .cinematic-experience .hero-lede {
        display: none;
    }

    .cinematic-scroll-prompt {
        margin-block-start: 8px;
        padding: 6px 7px 6px 10px;
        font-size: 10px;
    }

    .cinematic-scroll-arrow {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .cinematic-experience .map-card {
        inset-block-end: 42px;
        height: 260px;
    }

    .cinematic-experience .map-card-peek {
        inset-block: 82px auto;
        min-height: 58px;
    }

    .cinematic-location-card {
        inset-block-start: 72%;
    }
}

@media (max-width: 400px) and (max-height: 700px) {
    .cinematic-scroll-prompt {
        position: absolute;
        inset-block-start: -58px;
        inset-inline-start: 0;
        max-width: calc(100vw - 32px);
        margin: 0;
    }
}

@media (max-width: 360px) {
    .cinematic-room-moment {
        width: 172px;
    }
}

@media (prefers-reduced-data: reduce), (update: slow) {
    .cinematic-room-moment[data-variant="park"],
    .cinematic-room-moment[data-variant="campus"],
    .cinematic-room-card::after {
        display: none;
    }

    .cinematic-room-card {
        box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    }

    .cinematic-experience .phone-screen {
        box-shadow: 0 24px 55px rgba(0, 0, 0, .34);
    }
}

.cinematic-experience[data-motion="simplified"] .cinematic-room-moment[data-variant="park"],
.cinematic-experience[data-motion="simplified"] .cinematic-room-moment[data-variant="campus"],
.cinematic-experience[data-motion="simplified"] .cinematic-traveling-messages,
.cinematic-experience[data-motion="simplified"] .cinematic-logo-formation span:nth-child(n+9) {
    display: none;
}

.cinematic-experience[data-motion="simplified"] .phone-demo,
.cinematic-experience[data-motion="simplified"] .cinematic-scroll-arrow,
.cinematic-experience[data-motion="simplified"][data-in-view="true"][data-scene="arrival"] .phone-demo,
.cinematic-experience[data-motion="simplified"][data-in-view="true"][data-scene="arrival"] .cinematic-scroll-arrow {
    animation: none;
}

.cinematic-experience[data-motion="simplified"] .phone-screen,
.cinematic-experience[data-motion="simplified"] .cinematic-room-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-experience {
        width: min(1180px, 100%);
        margin-inline: auto;
        overflow: visible;
    }

    .cinematic-scroll-track {
        height: auto;
        min-height: 0;
    }

    .cinematic-sticky {
        display: none;
    }

    .cinematic-static-story {
        display: grid;
    }

    .cinematic-skip {
        display: none;
    }

    .cinematic-experience *,
    .cinematic-experience *::before,
    .cinematic-experience *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}