/* The story: a room at night, lit only by one tablet. As the story moves, the screen changes,
   and the light it throws changes the room. Kaju stays out of it until the app is born. */
body { background: var(--night-deep); color: var(--cream); }

.st-hero, .st-end { position: relative; z-index: 1; }
.st-hero { padding-block: clamp(44px,7vw,100px) clamp(24px,4vw,50px); }
.st-hero h1 { font-size: clamp(46px,8.4vw,120px); color: var(--cream); font-variation-settings: "wdth" 94; }
.st-hero p { margin-top: 16px; font-size: clamp(19px,1.9vw,24px); line-height: 1.42; color: #CFE0E0; max-width: 34em; }

/* the light in the room */
.story { position: relative; isolation: isolate; --lx: 50%; --ly: 38%; --rise: -40%; }
.gl { position: fixed; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.gl-gold { background: radial-gradient(60% 70% at var(--lx) var(--ly), rgba(242,177,52,.34), transparent 72%); }
.gl-cold { background: radial-gradient(62% 74% at var(--lx) var(--ly), rgba(150,84,214,.46), rgba(45,92,190,.2) 48%, transparent 76%); }
.gl-pale { background: radial-gradient(56% 66% at var(--lx) var(--ly), rgba(214,232,240,.26), transparent 72%); }
.gl-mango { background: radial-gradient(84% 96% at var(--lx) var(--ly), rgba(255,227,138,.42), rgba(224,97,43,.3) 42%, transparent 80%); }
.story[data-s="1"] .gl-gold { opacity: .7; }
.story[data-s="2"] .gl-cold { opacity: 1; animation: uneasy 3.4s ease-in-out infinite; }
.story[data-s="3"] .gl-pale { opacity: 1; }
.story[data-s="4"] .gl-gold { opacity: .8; }
.story[data-s="5"] .gl-gold { opacity: 1; }
.story[data-s="6"] .gl-gold { opacity: .6; }
.story[data-s="7"] .gl-mango { opacity: .6; }
@keyframes uneasy { 50% { opacity: .62; } }

/* the words */
.st-g { display: grid; grid-template-columns: minmax(0,1fr); }
.ch { padding-block: 34px 60px; display: grid; gap: 14px; align-content: start; }
.ch h2 { font-size: clamp(34px,4.6vw,62px); color: var(--cream); font-variation-settings: "wdth" 96; }
.ch p { font-size: clamp(19px,1.75vw,23px); line-height: 1.5; color: var(--cream); max-width: 34em; }
.ch .st-hint { display: none; color: var(--glow); font-weight: 700; }
.tab-col { display: none; }

/* With the script, the tablet stays and the words go past it. On a phone it stays at the top. */
.live .ch .st-hint { display: block; }
.live .tab-col { display: block; grid-row: 1; position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); z-index: 2; margin-inline: calc(var(--gut) * -1) calc(var(--gur) * -1); padding: 28px var(--gur) 26px var(--gut); background: linear-gradient(to bottom, var(--night-deep) 88%, transparent); }
.live .ch { min-height: 62vh; }
.live .chs { padding-bottom: 12vh; }
.live .tab-stick { max-width: calc(36vh * 4 / 3); margin-inline: auto; }
/* With room for two columns, the words on either side of the one being read go quiet. */
@media (min-width: 760px), (min-width: 560px) and (orientation: landscape) {
  .story { --lx: 73%; --ly: 48%; --rise: -58%; }
  .story[data-s="7"] .gl-mango { opacity: 1; }
  .live .st-g { grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: clamp(28px,5vw,80px); }
  .live .tab-col { grid-row: auto; top: max(112px, calc(50vh - min(18vw, 222px))); z-index: auto; align-self: start; margin-inline: 0; padding: 0; background: none; }
  .live .ch { min-height: 82vh; align-content: center; opacity: .28; transition: opacity .5s ease; }
  .live .ch.now { opacity: 1; }
  .live .tab-stick { max-width: calc((100vh - 150px) * 4 / 3); margin-inline: auto 0; }
}

/* the tablet: everything inside it is sized from its width, so it works at any size */
.tab-stick { position: relative; container-type: inline-size; }
.tab { position: relative; z-index: 1; aspect-ratio: 4/3; padding: 2.6cqw; border-radius: 5cqw; background: #101B20; border: 2px solid #2A4048; overflow: hidden; box-shadow: 0 0 9cqw 1cqw rgba(0,0,0,.4); transition: box-shadow .9s ease; }
.story[data-s="1"] .tab { box-shadow: 0 0 12cqw 2cqw rgba(242,177,52,.26); }
.story[data-s="2"] .tab { box-shadow: 0 0 15cqw 3cqw rgba(150,84,214,.46); }
.story[data-s="3"] .tab { box-shadow: 0 0 13cqw 2cqw rgba(214,232,240,.26); }
.story[data-s="4"] .tab, .story[data-s="5"] .tab { box-shadow: 0 0 13cqw 2cqw rgba(242,177,52,.34); }
.story[data-s="6"] .tab { box-shadow: 0 0 13cqw 2cqw rgba(242,177,52,.26); }
.story[data-s="7"] .tab { box-shadow: 0 0 20cqw 5cqw rgba(255,227,138,.5); }
.scr { position: absolute; inset: 2.6cqw; border-radius: 2.6cqw; overflow: hidden; font-size: 4.4cqw; line-height: 1.25; opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.story[data-s="1"] .scr-1, .story[data-s="2"] .scr-2, .story[data-s="3"] .scr-3, .story[data-s="4"] .scr-4, .story[data-s="5"] .scr-4, .story[data-s="6"] .scr-6, .story[data-s="7"] .scr-7 { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }

/* 1: a full day */
.scr-1 { background: var(--cream); color: var(--night); padding: 6cqw 7cqw; display: grid; align-content: start; gap: 3cqw; }
.scr-1 b { font: 600 1.7em/1 var(--display); }
.scr-1 ul { display: grid; gap: 2.2cqw; }
.scr-1 li { display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw 3cqw; border-radius: 2.4cqw; background: #fff; border: 2px solid var(--line); font-weight: 700; }
.scr-1 li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--right); color: #fff; font-size: .8em; }
.story[data-s="1"]:not(.seen-1) .scr-1 li { animation: rise .45s cubic-bezier(.3,1.4,.55,1) backwards; }
.story[data-s="1"]:not(.seen-1) .scr-1 li:nth-child(2) { animation-delay: .35s; }
.story[data-s="1"]:not(.seen-1) .scr-1 li:nth-child(3) { animation-delay: .7s; }
.ball { position: absolute; right: 8cqw; top: 5cqw; width: 9cqw; height: 9cqw; border-radius: 50%; background: #fff; border: 2px solid var(--line); box-shadow: inset 2.2cqw 0 0 -1.9cqw #D2455F, inset -2.2cqw 0 0 -1.9cqw #D2455F; }
.story[data-s="1"] .ball { animation: toss 1.9s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
@keyframes toss { to { transform: translateY(5cqw) rotate(200deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(2.4cqw); } }

/* 2: the feed that never ends */
.scr-2 { background: #14101F; }
.feed { display: grid; animation: feed 9s linear infinite paused; }
.story[data-s="2"] .feed { animation-play-state: running; }
.feed-set { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; padding: 0 1.8cqw 1.8cqw; }
.feed-set span { display: flex; align-items: flex-end; min-height: 22cqw; padding: 2cqw; border-radius: 2cqw; color: #fff; font: 700 .86em/1.1 var(--body); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.c1 { background: linear-gradient(135deg, #E5266B, #7A1FA2); }
.c2 { background: linear-gradient(135deg, #F2B134, #E5482B); }
.c3 { background: linear-gradient(135deg, #2D5CBE, #9238C9); }
.c4 { background: linear-gradient(135deg, #17837E, #2D5CBE); }
.c5 { background: linear-gradient(135deg, #B8246A, #E5482B); }
@keyframes feed { to { transform: translateY(-50%); } }

/* 3: the first page, just as plain as a first page is */
.scr-3 { background: #fff; color: #111; padding: 5cqw 6cqw; font-family: "Times New Roman", Times, serif; font-size: 5cqw; display: grid; align-content: start; gap: 2.4cqw; }
.scr-3 b { color: #0000C8; text-decoration: underline; font-size: 1.3em; }
.q3 { display: flex; gap: 2.4cqw; }
.q3 button { min-width: 44px; min-height: 44px; padding: 1.2cqw 4cqw; background: #EFEFEF; border: 1px solid #767676; border-radius: 3px; color: #111; font: inherit; }
.q3 button:hover { background: #E2E2E2; }
.q3 button:focus-visible { outline: 3px solid #0000C8; box-shadow: none; }
.q3 button.no { color: #777; }
.q3 button.yes { background: var(--right); border-color: var(--right); color: #fff; }
.q3-say { min-height: 2.6em; font-size: .92em; line-height: 1.25; }

/* 4 and 5: it grows */
.scr-4 { background: var(--cream); padding: 4cqw; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); grid-template-rows: 1fr 1fr; gap: 2.2cqw; }
.scr-4 i { display: grid; place-items: center; padding: 1.4cqw; border-radius: 3cqw; color: #fff; font: 600 .9em/1.08 var(--display); text-align: center; box-shadow: 0 1cqw 0 rgba(0,0,0,.2); grid-column: span 2; }
.scr-4 .t4, .scr-4 .t5 { grid-column: span 3; }
.t1 { background: #7466CC; } .t2 { background: #B4501F; } .t3 { background: #29826C; } .t4 { background: #2B2926; } .t5 { background: #1F7FA0; }
.story[data-s="4"]:not(.seen-4) .scr-4 i { animation: popin .5s cubic-bezier(.3,1.5,.55,1) backwards; }
.story[data-s="4"]:not(.seen-4) .scr-4 .t2 { animation-delay: .45s; } .story[data-s="4"]:not(.seen-4) .scr-4 .t3 { animation-delay: .9s; } .story[data-s="4"]:not(.seen-4) .scr-4 .t4 { animation-delay: 1.35s; } .story[data-s="4"]:not(.seen-4) .scr-4 .t5 { animation-delay: 1.8s; }
@keyframes popin { from { opacity: 0; transform: scale(.6); } }

/* 5: other kids come to look, and 7: they come back */
.pks { position: absolute; left: 6%; right: 6%; top: 0; height: 0; display: none; align-items: flex-start; justify-content: space-between; z-index: 0; }
/* Away from these chapters they are not on the page at all, because they would still cost frames. */
.story[data-s="5"] .pks, .story[data-s="7"] .pks { display: flex; }
.pk { flex: none; width: 17cqw; aspect-ratio: 1; transform: translateY(var(--rise)); animation: peek .55s cubic-bezier(.3,1.5,.55,1) backwards; }
.pk:nth-child(2) { animation-delay: .12s; } .pk:nth-child(3) { animation-delay: .24s; } .pk:nth-child(4) { animation-delay: .36s; }
@keyframes peek { from { transform: translateY(-6%); } }

/* 6: a new plan, drawn on notebook paper. The path draws itself, and the zoo appears along it. */
.scr-6 { background: repeating-linear-gradient(to bottom, #FFFDF6 0, #FFFDF6 6.4cqw, #D8E6EE 6.4cqw, #D8E6EE calc(6.4cqw + 1px)); }
.plan { display: block; width: 100%; height: 100%; }
.plan text { font: 600 16px/1 var(--display); fill: var(--night); text-anchor: middle; paint-order: stroke; stroke: #FFFDF6; stroke-width: 5px; stroke-linejoin: round; }
.plan .plan-t { font-size: 24px; fill: var(--mango-text); text-anchor: start; }
.plan-path { fill: none; stroke: #F2B134; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.star { fill: var(--reward); stroke: #B97F12; stroke-width: 2; stroke-linejoin: round; }
.stop { transform-box: fill-box; transform-origin: center; }
.story[data-s="6"]:not(.seen-6) .plan-path { animation: draw 2.8s linear backwards; }
.story[data-s="6"]:not(.seen-6) .stop { animation: popin .5s cubic-bezier(.3,1.5,.55,1) backwards; }
.story[data-s="6"]:not(.seen-6) .s2 { animation-delay: .7s; } .story[data-s="6"]:not(.seen-6) .s3 { animation-delay: 1.35s; } .story[data-s="6"]:not(.seen-6) .s4 { animation-delay: 2.15s; } .story[data-s="6"]:not(.seen-6) .s5 { animation-delay: 2.8s; }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* 7: the app */
.scr-7 { background: var(--night); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2cqw; padding-inline: 2cqw; }
.col { display: grid; gap: 2cqw; align-content: start; animation: drift 7s ease-in-out infinite alternate paused; }
.col.up { animation-direction: alternate-reverse; }
.story[data-s="7"] .col { animation-play-state: running; }
.col img { display: block; width: 100%; height: auto; border-radius: 2cqw; }
@keyframes drift { from { transform: translateY(-3cqw); } to { transform: translateY(-34cqw); } }

/* the itch: a small dot that stays until the app makes it go */
.itch { position: absolute; z-index: 2; right: 1.4cqw; top: 1.4cqw; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #D2455F; border: .6cqw solid #101B20; opacity: 0; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.5,.55,1), opacity .2s; }
.story[data-s="2"] .itch, .story[data-s="3"] .itch, .story[data-s="4"] .itch, .story[data-s="5"] .itch, .story[data-s="6"] .itch { opacity: 1; transform: none; }
.story[data-s="2"] .itch { animation: itch 1.3s ease-in-out infinite; }
@keyframes itch { 50% { transform: scale(1.25); } }

/* Kaju arrives with the app */
.st-kaju { display: none; position: absolute; z-index: 3; right: -3cqw; bottom: -5cqw; width: 34cqw; aspect-ratio: 1; pointer-events: none; }
.story[data-s="7"] .st-kaju { display: block; animation: kaju-in .6s .5s cubic-bezier(.3,1.5,.55,1) backwards; }
@keyframes kaju-in { from { opacity: 0; transform: translateY(16cqw) scale(.7); } }
.k3d-canvas { display: block; width: 100%; height: 100%; }

/* the end: the light has reached the whole room */
.st-end { color: var(--ink); background: linear-gradient(180deg, transparent 0, #7C5A3A 9%, #E8A25F 19%, #FFE3C7 30%, var(--cream) 44%); padding-block: clamp(190px,26vw,340px) clamp(60px,8vw,110px); }
.dream { font: 500 clamp(21px,2.4vw,30px)/1.3 var(--display); color: #93391A; max-width: 30em; }
.st-end h2 { margin-top: 12px; font-size: clamp(44px,8vw,112px); color: var(--night); font-variation-settings: "wdth" 94; max-width: 13em; }
.sign { margin-top: 20px; font-size: clamp(18px,1.6vw,21px); color: var(--ink-soft); }
.sign::before { content: "— "; }
.st-end .btn { margin-top: 26px; }

/* With less motion, everything on a screen arrives at once. */
@media (prefers-reduced-motion: reduce) { .story .scr * { animation-delay: 0s !important; } .plan * { transition: none !important; } }