/* "A day at school" landing section (resources/views/landing-page/sections/day_story.blade.php, public/js/day-story.js).

   One idea: the day passes. Each phone stands in a sky card painted for its time (dawn 7:20, morning 8:05, noon 12:40,
   dusk 6:30): flat brand-yellow sun, soft clouds or the first stars, real green hills, and the moment's notification
   floating above the phone. On wide screens one card is pinned; its sky crossfades, the sun travels and the rail fills.

   States set on .lp-day by day-story.js (plus .is-paused while the viewer has paused the animations):
     (none)       no JavaScript, or the scenes could not load: the heading and a plain list of the four steps
     .is-ready    scenes mounted; each step shows its own panel (small screens, and reduced motion everywhere)
     .is-pinned   wide screens with motion: one pinned panel beside the steps
   Text colours are AA on their backgrounds; motion is transform and opacity only. */

/* The section's own background follows the day down the page: a dawn-blue wash at the top, morning green, afternoon
   warmth and a sunset gold at the bottom, with soft colour blooms where each moment sits and a faint dot texture.
   All of it is very light, so every text colour on it stays AA. */
.lp-day {
    position: relative; isolation: isolate; padding: var(--sect-pad) 0; overflow-x: clip;
    background: linear-gradient(180deg, #ffffff 0%, #eef8fe 9%, #f2faf0 34%, #fff6ea 60%, #fff8e2 86%, #ffffff 100%);
}
.lp-day::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 16% at 88% 12%, rgba(28, 176, 246, .14), transparent 70%),
        radial-gradient(34% 14% at 6% 34%, rgba(88, 204, 2, .11), transparent 70%),
        radial-gradient(38% 16% at 92% 60%, rgba(255, 150, 0, .11), transparent 70%),
        radial-gradient(36% 15% at 8% 86%, rgba(255, 200, 0, .14), transparent 70%);
}
.lp-day::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(rgba(26, 26, 46, .07) 1px, transparent 1.3px) 0 0 / 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.lp-day [data-scene="transport"]  { --acc: var(--c-sky);  --acc-soft: var(--c-sky-soft);  --acc-ink: var(--c-sky-ink); }
.lp-day [data-scene="attendance"] { --acc: var(--primary); --acc-soft: var(--p-soft);     --acc-ink: var(--primary-ink); }
.lp-day [data-scene="fees"]       { --acc: var(--c-fire); --acc-soft: var(--c-fire-soft); --acc-ink: var(--c-fire-ink); }
.lp-day [data-scene="results"]    { --acc: var(--c-sun);  --acc-soft: var(--c-sun-soft);  --acc-ink: var(--c-sun-ink); }

/* ---- heading: left aligned, short, no label above it ---- */
.lp-day-head { max-width: 34rem; margin-bottom: 3rem; }
.lp-day-title {
    font-family: var(--font-head); font-weight: 800; color: var(--dark); margin: 0;
    font-size: clamp(2rem, 1.25rem + 2.6vw, 3.15rem); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance;
}
.lp-day-title .lp-accent { color: var(--primary-ink); }
.lp-day-intro { margin: 1rem 0 0; color: #4b5563; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; max-width: 31rem; }

/* ---- pause / play (WCAG 2.2.2) ---- */
.lp-day-toggle {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; padding: .5rem .95rem; border-radius: 999px;
    border: 1px solid #d9dee3; background: #fff; color: var(--dark); font-weight: 700; font-size: .875rem; line-height: 1;
    cursor: pointer; transition: border-color .2s, background-color .2s, transform .1s;
}
.lp-day-toggle[hidden] { display: none; }
.lp-day-toggle:hover { border-color: #9aa3ad; background: #f8faf9; }
.lp-day-toggle:active { transform: translateY(1px); }
.lp-day-toggle:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 3px; }
.lp-day-toggle i { font-size: .75rem; }
.lp-day-toggle .lp-day-ico-play, .lp-day.is-paused .lp-day-toggle .lp-day-ico-pause { display: none; }
.lp-day.is-paused .lp-day-toggle .lp-day-ico-play { display: inline-block; }

/* ---- the steps ---- */
.lp-day-track { position: relative; }
.lp-day-rail { display: none; }
.lp-day-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4.5rem; }
.lp-day-copy { max-width: 30rem; }
.lp-day-time {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; padding: .35rem .85rem;
    border-radius: 999px; background: var(--acc-soft); color: var(--acc-ink);
    font-weight: 800; font-size: .875rem; letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.lp-day-step h3 {
    font-family: var(--font-head); font-weight: 800; color: var(--dark); letter-spacing: -.025em; line-height: 1.12;
    font-size: clamp(1.45rem, 1.05rem + 1.3vw, 2.15rem); margin: 0 0 .65rem; transition: color .35s;
}
.lp-day-text { color: #4b5563; font-size: 1.0625rem; line-height: 1.65; margin: 0; transition: color .35s; }

/* ---- the sky card: a sky painted for the moment, its weather and hills, the phone standing in it ---- */
.lp-day-panel {
    display: none; position: relative;
    --dh: 460px;                                          /* phone height; its width follows (9:16 screen in a 2.6% bezel) */
    margin: 2rem auto 3.5rem; padding-top: 5rem;           /* room above the phone for the notification */
    height: calc(var(--dh) + 5rem - 2rem);                 /* the phone stands 2rem below the card, for depth */
}
.lp-day-sky {
    position: absolute; inset: 0; border-radius: 32px; overflow: hidden; isolation: isolate;
    box-shadow: inset 0 0 0 1px rgba(26, 26, 46, .05), 0 30px 60px -44px rgba(15, 58, 36, .45);
}
.lp-day-sky-l { position: absolute; inset: 0; }
.lp-day-sky-l[data-scene="transport"]  { background: linear-gradient(180deg, #a9dcf8 0%, #d9eefa 40%, #ffe3c2 76%, #ffd09a 100%); }  /* dawn */
.lp-day-sky-l[data-scene="attendance"] { background: linear-gradient(180deg, #6fc6f4 0%, #b4e3fb 55%, #e8f7ff 100%); }               /* morning */
.lp-day-sky-l[data-scene="fees"]       { background: linear-gradient(180deg, #3fb2ee 0%, #8fd6f8 52%, #d9f2ff 100%); }               /* noon */
.lp-day-sky-l[data-scene="results"]    { background: linear-gradient(180deg, #0e2f20 0%, #1f5a3a 36%, #b9683a 74%, #f39a45 100%); }  /* dusk */

/* hills in real greens (not see-through), deeper at dusk */
.lp-day-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 24%; }
.lp-day-sky-l[data-scene="transport"]  .h1 { fill: #b9de98; } .lp-day-sky-l[data-scene="transport"]  .h2 { fill: #8fca67; }
.lp-day-sky-l[data-scene="attendance"] .h1 { fill: #aadd86; } .lp-day-sky-l[data-scene="attendance"] .h2 { fill: #7dc554; }
.lp-day-sky-l[data-scene="fees"]       .h1 { fill: #a1da79; } .lp-day-sky-l[data-scene="fees"]       .h2 { fill: #70c047; }
.lp-day-sky-l[data-scene="results"]    .h1 { fill: #2f6b45; } .lp-day-sky-l[data-scene="results"]    .h2 { fill: #174f2c; }

/* weather: soft clouds by day, the first stars at dusk */
.lp-day-cloud { position: absolute; width: 30%; height: 7%; border-radius: 999px; background: rgba(255, 255, 255, .78); }
.lp-day-cloud::before { content: ''; position: absolute; left: 20%; bottom: 35%; width: 42%; height: 150%; border-radius: 50%; background: inherit; }
.lp-day-cloud.is-sm { width: 20%; height: 5%; }
.lp-day-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .85; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .6); }

/* the sun: flat brand yellow with a soft halo, low left at dawn, high at noon, low right and orange at dusk */
.lp-day-sun {
    position: absolute; left: var(--sx, 12%); top: var(--sy, 60%); width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
    background: #ffd23f; transition: background-color .6s, box-shadow .6s;
    box-shadow: 0 0 0 10px rgba(255, 210, 63, .22), 0 0 0 22px rgba(255, 210, 63, .1), 0 0 60px 12px rgba(255, 200, 0, .32);
}
.lp-day-sky[data-scene="transport"]  { --sx: 12%; --sy: 60%; }
.lp-day-sky[data-scene="attendance"] { --sx: 14%; --sy: 30%; }
.lp-day-sky[data-scene="fees"]       { --sx: 85%; --sy: 15%; }
.lp-day-sky[data-scene="results"]    { --sx: 87%; --sy: 60%; }
.lp-day-sky[data-scene="results"] .lp-day-sun, .lp-day-sun.is-dusk {
    background: #ff9a3c; box-shadow: 0 0 0 10px rgba(255, 150, 0, .22), 0 0 0 22px rgba(255, 150, 0, .1), 0 0 70px 16px rgba(255, 130, 0, .4);
}

.lp-day-device {
    position: relative; z-index: 1; margin: 0 auto; height: var(--dh); width: calc(var(--dh) / 1.737);
    padding: 2.6%; border-radius: 13% / 7.5%; background: #16182a;
    box-shadow: 0 40px 60px -32px rgba(15, 58, 36, .55), 0 0 0 1px rgba(26, 26, 46, .08), inset 0 0 0 1.5px rgba(255, 255, 255, .09);
}
.lp-day-device > .lp-day-screen, .lp-day-screens { border-radius: 10.8% / 6.1%; overflow: hidden; }
.lp-day-device > .lp-day-screen { aspect-ratio: 9 / 16; background: #f6fcf1; }   /* its shape before the scene loads */
.lp-day-screens { position: relative; aspect-ratio: 9 / 16; background: #f6fcf1; }
.lp-day-screens > .lp-day-screen { position: absolute; inset: 0; }

/* the moment's notification floats in the sky above the phone, never over the app screen */
.lp-day-notif {
    position: absolute; z-index: 2; left: 0; right: 0; top: 1.1rem; width: max-content; max-width: calc(100% - 1.5rem); margin: 0 auto;
    display: flex; align-items: center; gap: .75rem; padding: .6rem 1.1rem .6rem .6rem; border-radius: 18px;
    background: rgba(255, 255, 255, .94); box-shadow: 0 18px 36px -18px rgba(15, 58, 36, .45), 0 0 0 1px rgba(26, 26, 46, .05);
}
.lp-day-notif i {
    flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center; font-size: .95rem;
    background: var(--acc-soft); color: var(--acc-ink);
}
.lp-day-notif small { display: block; font-size: .75rem; font-weight: 700; color: #4b5563; letter-spacing: .01em; }
.lp-day-notif b { display: block; font-size: .95rem; font-weight: 800; color: var(--dark); letter-spacing: -.01em; white-space: nowrap; }

.lp-day-aside { display: none; }
.lp-day-note { margin: 3.5rem 0 0; color: #4b5563; font-size: .875rem; }

/* ---- once mounted: a sky card per step ---- */
.lp-day.is-ready .lp-day-panel { display: block; }
.lp-day-step .lp-day-panel { --dh: clamp(380px, 112vw, 500px); max-width: 440px; }

@media (min-width: 768px) {
    .lp-day.is-ready:not(.is-pinned) .lp-day-step .lp-day-panel { --dh: 460px; max-width: 520px; }
    .lp-day.is-ready:not(.is-pinned) .lp-day-steps { gap: 5rem; max-width: 640px; }
}

/* ---- wide screens with motion: one panel pinned beside the steps ---- */
.lp-day.is-pinned .lp-day-grid {
    display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 36rem); justify-content: center; gap: clamp(3rem, 6vw, 6rem); align-items: start;
}
.lp-day.is-pinned .lp-day-step .lp-day-panel { display: none; }
.lp-day.is-pinned .lp-day-head .lp-day-toggle { display: none; }      /* the pinned panel carries its own */
.lp-day.is-pinned .lp-day-aside { display: block; }
.lp-day.is-pinned .lp-day-track { padding-left: 2.75rem; }
.lp-day.is-pinned .lp-day-steps { gap: 0; }
/* text sits at the top of each block, so there is no empty gap under the heading */
.lp-day.is-pinned .lp-day-step { min-height: 62vh; padding: 2vh 0 0; position: relative; }
.lp-day.is-pinned .lp-day-step:last-child { min-height: 46vh; }
/* the moment being read sits on a white card with a thin bar in its colour; the others stay on the page */
.lp-day.is-pinned .lp-day-copy {
    padding: 1.5rem 1.75rem; border-radius: 24px; border: 1px solid transparent; background: transparent;
    transition: background-color .4s, border-color .4s, box-shadow .4s;
}
.lp-day.is-pinned .lp-day-step.is-active .lp-day-copy {
    background: #fff; border-color: #e6ebe7;
    box-shadow: inset 4px 0 0 var(--acc), 0 26px 50px -34px rgba(26, 26, 46, .35);
}
.lp-day.is-pinned .lp-day-step:not(.is-active) h3,
.lp-day.is-pinned .lp-day-step:not(.is-active) .lp-day-text { color: #59616d; }          /* quieter, still AA on every tint of the day background */
.lp-day.is-pinned .lp-day-step:not(.is-active) .lp-day-time { background: #f1f3f2; color: #4b5563; }
.lp-day.is-pinned .lp-day-rail {
    display: block; position: absolute; left: .55rem; top: calc(2.2rem + 1.5rem); bottom: 46vh; width: 2px; border-radius: 2px; background: #e5e7eb;
}
.lp-day.is-pinned .lp-day-rail i {
    position: absolute; inset: 0; border-radius: 2px; transform-origin: 50% 0; transform: scaleY(0);
    background: linear-gradient(180deg, var(--c-sky), var(--primary) 38%, var(--c-fire) 70%, var(--c-sun));
}
.lp-day.is-pinned .lp-day-step::before {
    content: ''; position: absolute; left: -2.75rem; top: calc(2vh + 1.5rem + .55rem); z-index: 1; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: #fff; border: 2px solid #cfd5da; transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.lp-day.is-pinned .lp-day-step.is-active::before { background: var(--acc); border-color: var(--acc-ink); box-shadow: 0 0 0 6px var(--acc-soft); }

.lp-day-stage { display: flex; flex-direction: column; }
.lp-day-panel.is-stage { display: block; margin: 0; width: 100%; --dh: min(530px, calc(100vh - 310px)); }
.lp-day-panel.is-stage .lp-day-sun { left: 0; top: 0; }   /* placed and moved by the script */
.lp-day-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding: 0 .5rem; }   /* clears the phone, which stands 2rem below the card */
.lp-day-foot .lp-day-toggle { margin: 0; }
.lp-day-clock { display: flex; gap: .25rem; }
.lp-day-clock span {
    padding: .3rem .65rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: #4b5563;
    font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s;
}
.lp-day-clock span.is-active { background: var(--acc-soft); color: var(--acc-ink); }