/* Eduzon story scenes: brand-styled UI motion graphics (public/js/story-scenes.js).

   Every size is written against a 1080 x 1920 reference screen, as  calc(N * var(--u))  where  1 unit = 1/1080 of the screen's width.
   The screen is a size container, so the same markup renders crisply in a small phone frame on the site and at full 1080 x 1920 for
   video export. All data in the scenes is fake. */

.ss-screen {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #f6fcf1;
    color: #1a1a2e;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    /* the scenes look the same on any page: none of the host page's text settings leak in */
    line-height: 1.25; text-align: left; letter-spacing: normal; text-transform: none; font-size: 16px;
}
.ss-ui { --u: calc(100cqw / 1080); position: absolute; inset: 0; }
.ss-ui * { box-sizing: border-box; margin: 0; }

/* ---- status bar and page frame ---- */
.ss-status {
    position: absolute; z-index: 8; left: calc(64 * var(--u)); right: calc(64 * var(--u)); top: calc(46 * var(--u));
    display: flex; align-items: center; justify-content: space-between;
    font-size: calc(38 * var(--u)); font-weight: 800; letter-spacing: -.01em;
}
.ss-status svg { height: calc(34 * var(--u)); width: auto; display: block; }
.ss-icons { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.ss-page { position: absolute; left: calc(64 * var(--u)); right: calc(64 * var(--u)); top: calc(168 * var(--u)); display: flex; flex-direction: column; gap: calc(36 * var(--u)); }
.ss-home { position: absolute; z-index: 3; left: 50%; bottom: calc(24 * var(--u)); width: calc(330 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-165 * var(--u)); border-radius: 99px; background: #1a1a2e; opacity: .85; }

/* ---- type ---- */
.ss-hello { font-size: calc(64 * var(--u)); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ss-title { font-size: calc(48 * var(--u)); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ss-label { font-size: calc(34 * var(--u)); font-weight: 600; color: #5b6676; }
.ss-small { font-size: calc(34 * var(--u)); font-weight: 600; color: #5b6676; }

/* ---- cards, chips, avatar ---- */
.ss-card {
    background: #fff; border: calc(2 * var(--u)) solid #e5e7eb; border-radius: calc(44 * var(--u));
    padding: calc(44 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(26, 26, 46, .05);
}
.ss-row { display: flex; align-items: center; justify-content: space-between; gap: calc(28 * var(--u)); }
.ss-row-start { display: flex; align-items: center; gap: calc(30 * var(--u)); }
.ss-av {
    flex: none; width: calc(112 * var(--u)); height: calc(112 * var(--u)); border-radius: 50%;
    display: grid; place-items: center; background: #dff4fe; color: #0a6da1;
    font-size: calc(40 * var(--u)); font-weight: 800;
}
.ss-pill {
    display: inline-flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(30 * var(--u)); border-radius: 99px;
    font-size: calc(32 * var(--u)); font-weight: 800; background: #e8f9d8; color: #1b5e34;
}
.ss-pill.is-orange { background: #fff0db; color: #a85300; }
.ss-pill.is-blue { background: #dff4fe; color: #0a6da1; }
.ss-pill.is-yellow { background: #fff2b8; color: #6b4e00; }
.ss-btn {
    display: block; width: 100%; text-align: center; padding: calc(40 * var(--u)) 0; border-radius: calc(40 * var(--u));
    background: #58cc02; color: #1a1a2e; font-size: calc(44 * var(--u)); font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 calc(12 * var(--u)) 0 #46a302;
}

/* ---- notification banner (slides down over the page) ---- */
.ss-banner {
    position: absolute; left: calc(40 * var(--u)); right: calc(40 * var(--u)); top: calc(118 * var(--u)); z-index: 5;
    display: flex; align-items: center; gap: calc(30 * var(--u)); padding: calc(34 * var(--u)) calc(40 * var(--u));
    background: #fff; border-radius: calc(44 * var(--u)); border: calc(2 * var(--u)) solid #e5e7eb;
    box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(26, 26, 46, .16);
}
.ss-check { flex: none; width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: 50%; background: #58cc02; display: grid; place-items: center; }
.ss-check svg { width: 58%; height: 58%; display: block; }
.ss-banner > div { flex: 1; min-width: 0; }
.ss-banner .ss-when { align-self: flex-start; font-size: calc(28 * var(--u)); }
.ss-banner b { display: block; font-size: calc(44 * var(--u)); font-weight: 800; letter-spacing: -.01em; }
.ss-banner span { font-size: calc(32 * var(--u)); font-weight: 600; color: #5b6676; }

/* ---- week strip ---- */
.ss-week { display: flex; justify-content: space-between; margin-top: calc(34 * var(--u)); }
.ss-day { width: calc(120 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--u)); }
.ss-day i { font-style: normal; font-size: calc(32 * var(--u)); font-weight: 700; color: #5b6676; }
.ss-dot { width: calc(112 * var(--u)); height: calc(112 * var(--u)); border-radius: 50%; background: #eef2ee; display: grid; place-items: center; position: relative; }
.ss-dot.is-green { background: #58cc02; }
.ss-dot.is-amber { background: #ffb020; }
.ss-dot svg { width: 56%; height: 56%; display: block; position: relative; }
.ss-dot.is-ring { background: transparent; }
.ss-dot.is-ring > svg.ss-ringsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-late { height: calc(40 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 800; color: #a85300; }

.ss-dot.is-today { background: transparent; }
.ss-pend { position: absolute; inset: 0; border-radius: 50%; border: calc(6 * var(--u)) dashed #b8c4b8; }
.ss-fill { position: absolute; inset: 0; border-radius: 50%; background: #58cc02; }
.ss-tick { position: absolute; inset: 0; display: grid; place-items: center; }
.ss-tick svg { width: 56%; height: 56%; display: block; }
.ss-day.is-today i { color: #1b5e34; font-weight: 800; }
.ss-pill.is-wait { background: #eef2ee; color: #4b5563; }

/* ---- a line of text that swaps for another in place ---- */
.ss-swap { display: grid; overflow: hidden; padding: calc(4 * var(--u)) 0; margin: calc(-4 * var(--u)) 0; }
.ss-swap > * { grid-area: 1 / 1; justify-self: start; }
.ss-swap.is-end > * { justify-self: end; }

/* ---- small change chip ("+1 day") ---- */
.ss-delta {
    display: inline-flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(26 * var(--u)); padding: calc(10 * var(--u)) calc(24 * var(--u));
    border-radius: 99px; background: #e8f9d8; color: #1b5e34; font-size: calc(30 * var(--u)); font-weight: 800;
}
.ss-center { display: flex; flex-direction: column; align-items: center; }

/* ---- bottom tab bar, shared by every scene (the active tab changes per scene) ---- */
.ss-tabs {
    position: absolute; left: 0; right: 0; bottom: 0; height: calc(210 * var(--u)); padding: calc(22 * var(--u)) calc(30 * var(--u)) 0;
    display: flex; justify-content: space-around; align-items: flex-start;
    background: #fff; border-top: calc(2 * var(--u)) solid #e5e7eb;
}
.ss-tab { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); width: calc(170 * var(--u)); color: #5b6676; font-size: calc(26 * var(--u)); font-weight: 700; }
.ss-tab svg { width: calc(58 * var(--u)); height: calc(58 * var(--u)); display: block; }
.ss-tab.is-on { color: #1b5e34; }
.ss-tab.is-on svg { background: #e8f9d8; border-radius: calc(20 * var(--u)); box-sizing: content-box; padding: calc(6 * var(--u)) calc(26 * var(--u)); margin: calc(-6 * var(--u)) 0; }

/* ---- fees: summary bar, amounts, receipt ---- */
.ss-bar { height: calc(22 * var(--u)); border-radius: 99px; background: #eef2ee; overflow: hidden; margin-top: calc(18 * var(--u)); }
.ss-bar i { display: block; height: 100%; border-radius: 99px; background: #58cc02; transform-origin: 0 50%; }
.ss-stats { display: flex; margin-top: calc(34 * var(--u)); }
.ss-stats > div { flex: 1; }
.ss-stats > div + div { border-left: calc(2 * var(--u)) solid #e5e7eb; padding-left: calc(36 * var(--u)); }
.ss-amt { font-size: calc(44 * var(--u)); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ss-amt.is-due { color: #b42318; }
.ss-mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: calc(40 * var(--u)); font-weight: 700; letter-spacing: .01em; }
.ss-collapse { --k: 1; height: calc(150 * var(--u) * var(--k)); margin-top: calc(34 * var(--u) * var(--k)); overflow: hidden; }
.ss-btn-ghost {
    display: block; text-align: center; margin-top: calc(30 * var(--u)); padding: calc(26 * var(--u)) 0; border-radius: calc(30 * var(--u));
    border: calc(3 * var(--u)) solid #c9e8b0; color: #1b5e34; font-size: calc(34 * var(--u)); font-weight: 800;
}

/* ---- bottom sheet over a dimmed page ---- */
.ss-dim { position: absolute; inset: 0; z-index: 6; background: rgba(26, 26, 46, .38); }
.ss-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: calc(720 * var(--u)); padding: calc(40 * var(--u)) calc(64 * var(--u)) calc(110 * var(--u));
    background: #fff; border-radius: calc(56 * var(--u)) calc(56 * var(--u)) 0 0; display: grid;
}
.ss-sheet::before { content: ''; position: absolute; top: calc(22 * var(--u)); left: 50%; width: calc(110 * var(--u)); height: calc(10 * var(--u)); margin-left: calc(-55 * var(--u)); border-radius: 99px; background: #d9dfd9; }
.ss-stage { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; }
.ss-stage.is-center { align-items: center; text-align: center; gap: calc(36 * var(--u)); }
.ss-field {
    margin: calc(30 * var(--u)) 0 calc(14 * var(--u)); padding: calc(30 * var(--u)) calc(36 * var(--u)); border-radius: calc(28 * var(--u));
    border: calc(3 * var(--u)) solid #58cc02; font-size: calc(52 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums;
}
.ss-stage .ss-btn { margin-top: calc(40 * var(--u)); }
.ss-spin { width: calc(130 * var(--u)); height: calc(130 * var(--u)); display: block; }
.ss-bigcheck { width: calc(170 * var(--u)); height: calc(170 * var(--u)); border-radius: 50%; background: #58cc02; display: grid; place-items: center; }
.ss-bigcheck svg { width: 55%; height: 55%; display: block; }

/* ---- tap indicator (where a finger presses) ---- */
.ss-tap {
    position: absolute; z-index: 9; width: calc(120 * var(--u)); height: calc(120 * var(--u)); margin: calc(-60 * var(--u)) 0 0 calc(-60 * var(--u));
    border-radius: 50%; background: rgba(26, 26, 46, .14); border: calc(3 * var(--u)) solid rgba(26, 26, 46, .22); pointer-events: none;
}

/* ---- results: exam card chips, the report card screen (a PDF in the real app, so it is drawn as a printed page) ---- */
.ss-rule { height: calc(2 * var(--u)); background: #e5e7eb; margin: calc(34 * var(--u)) 0 calc(30 * var(--u)); }
.ss-chips { display: flex; flex-wrap: wrap; gap: calc(18 * var(--u)); }
.ss-chip {
    display: inline-flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(26 * var(--u)); border-radius: calc(22 * var(--u));
    background: #f0f9e8; border: calc(2 * var(--u)) solid #c9e8b0; color: #1b5e34; font-size: calc(30 * var(--u)); font-weight: 700;
}
.ss-chip svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); display: block; }
.ss-chip.is-report { background: #fdecec; border-color: #f2b8b8; color: #9b2c2c; }
.ss-route { position: absolute; inset: 0; z-index: 6; background: #e9edea; }
.ss-appbar { position: absolute; left: 0; right: 0; top: 0; height: calc(250 * var(--u)); padding: calc(140 * var(--u)) calc(56 * var(--u)) 0; background: #fff; border-bottom: calc(2 * var(--u)) solid #e5e7eb; display: flex; align-items: center; gap: calc(26 * var(--u)); }
.ss-appbar svg { width: calc(48 * var(--u)); height: calc(48 * var(--u)); display: block; }
.ss-paper {
    position: absolute; left: calc(56 * var(--u)); right: calc(56 * var(--u)); top: calc(300 * var(--u)); padding: calc(56 * var(--u)) calc(50 * var(--u));
    background: #fff; border-radius: calc(10 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(50 * var(--u)) rgba(26, 26, 46, .12);
}
.ss-paper-head { text-align: center; padding-bottom: calc(26 * var(--u)); border-bottom: calc(3 * var(--u)) solid #1a1a2e; }
.ss-paper-head b { display: block; font-size: calc(46 * var(--u)); font-weight: 800; letter-spacing: .02em; }
.ss-paper-head span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 700; color: #5b6676; text-transform: uppercase; letter-spacing: .08em; }
.ss-meta { display: flex; justify-content: space-between; margin: calc(24 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 600; color: #4b5563; }
.ss-tr { display: grid; grid-template-columns: 1fr calc(190 * var(--u)) calc(130 * var(--u)); align-items: center; padding: calc(18 * var(--u)) calc(8 * var(--u)); border-bottom: calc(2 * var(--u)) solid #eceeec; font-size: calc(32 * var(--u)); font-weight: 600; }
.ss-tr > :nth-child(2), .ss-tr > :nth-child(3) { text-align: center; font-variant-numeric: tabular-nums; }
.ss-tr.is-head { font-size: calc(26 * var(--u)); font-weight: 800; color: #4b5563; text-transform: uppercase; letter-spacing: .06em; background: #f3f5f3; border-bottom: 0; border-radius: calc(8 * var(--u)); }
.ss-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--u)); margin-top: calc(30 * var(--u)); }
.ss-sum > div { border-radius: calc(20 * var(--u)); background: #f3f5f3; padding: calc(20 * var(--u)) 0; text-align: center; }
.ss-sum span { display: block; font-size: calc(24 * var(--u)); font-weight: 800; color: #4b5563; text-transform: uppercase; letter-spacing: .06em; }
.ss-sum b { display: block; margin-top: calc(6 * var(--u)); font-size: calc(48 * var(--u)); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ss-sum .is-grade { background: #58cc02; }
.ss-sum .is-grade span, .ss-sum .is-grade b { color: #1a1a2e; }

/* ---- transport: stylised map, vehicle card, stop list ---- */
.ss-map { padding: 0; overflow: hidden; }
.ss-map svg { display: block; width: 100%; height: auto; }
.ss-veh { background: #1b5e34; border-color: #1b5e34; color: #fff; padding: calc(34 * var(--u)) calc(40 * var(--u)); }
.ss-veh .ss-small { color: rgba(255, 255, 255, .86); }
.ss-veh-ico { flex: none; width: calc(88 * var(--u)); height: calc(88 * var(--u)); border-radius: calc(24 * var(--u)); background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.ss-veh-ico svg { width: 60%; height: 60%; display: block; }
.ss-live { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)); border-radius: 99px; background: #89e219; color: #1a1a2e; font-size: calc(26 * var(--u)); font-weight: 800; letter-spacing: .08em; }
.ss-live::before { content: ''; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #1a1a2e; }
.ss-veh-rule { height: calc(2 * var(--u)); background: rgba(255, 255, 255, .18); margin: calc(24 * var(--u)) 0 calc(20 * var(--u)); }
.ss-veh-facts { display: flex; justify-content: space-between; font-size: calc(30 * var(--u)); font-weight: 700; }
.ss-stops { position: relative; margin-top: calc(14 * var(--u)); }
.ss-stop { position: relative; display: flex; align-items: center; gap: calc(26 * var(--u)); padding: calc(16 * var(--u)) 0; }
.ss-stop::before { content: ''; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #fff; border: calc(6 * var(--u)) solid #b8c4b8; z-index: 1; }
.ss-stop.is-mine::before { border-color: #1b5e34; background: #58cc02; }
.ss-stop.is-school::before { border-color: #1b5e34; }
.ss-stops::before { content: ''; position: absolute; left: calc(11 * var(--u)); top: calc(40 * var(--u)); bottom: calc(40 * var(--u)); width: calc(4 * var(--u)); background: #dfe6df; }
.ss-stop b { flex: 1; font-size: calc(34 * var(--u)); font-weight: 700; }
.ss-stop.is-mine b { font-weight: 800; }
.ss-stop time { font-size: calc(30 * var(--u)); font-weight: 700; color: #4b5563; font-variant-numeric: tabular-nums; }
.ss-yours { padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: #e8f9d8; color: #1b5e34; font-size: calc(22 * var(--u)); font-weight: 800; letter-spacing: .06em; }

/* ---- ring chart ---- */
.ss-ringwrap { position: relative; width: calc(400 * var(--u)); height: calc(400 * var(--u)); margin: calc(30 * var(--u)) auto 0; }
.ss-ringwrap svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ss-ringnum { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ss-ringnum b { font-size: calc(110 * var(--u)); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ss-ringnum > .ss-swap { margin-top: calc(6 * var(--u)); }
.ss-ringnum .ss-swap > * { justify-self: center; }
.ss-ringnum span { font-size: calc(34 * var(--u)); font-weight: 600; color: #5b6676; }