/*
 * The motion of the full page (js/motion.js). Everything here is an extra: with reduced motion, or without the script, the page is the same page
 * with nothing moving. Same tokens and the same shapes as the clock home page.
 */

/* ---- the header after the page has moved ---- */
.top { transition: box-shadow 250ms var(--ease), background-color 250ms var(--ease); }
.top .top-bar { transition: min-height 250ms var(--ease); }
.top.is-scrolled { box-shadow: 0 6px 24px rgb(10 45 105 / 0.08); }
.top.is-scrolled .top-bar { min-height: 60px; }

/* ---- the hero: its words arrive one after the other, a ring of six arcs turns slowly behind it, and a light follows the cursor ---- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.hero-text > * { animation: rise 800ms var(--ease) backwards; }
.hero-text > :nth-child(2) { animation-delay: 80ms; }
.hero-text > :nth-child(3) { animation-delay: 170ms; }
.hero-text > :nth-child(4) { animation-delay: 250ms; }
.hero-text > :nth-child(5) { animation-delay: 330ms; }
.hero-text > :nth-child(6) { animation-delay: 410ms; }
.hero-art { animation: rise 1000ms var(--ease) 200ms backwards; }

.hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -22%;
    top: -34%;
    width: min(980px, 90vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, var(--primary-100) 0 50deg, transparent 50deg 60deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 70px), #000 calc(100% - 69px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 70px), #000 calc(100% - 69px));
    opacity: 0.7;
    animation: ring-turn 140s linear infinite;
    pointer-events: none;
}
@keyframes ring-turn { to { transform: rotate(360deg); } }
.hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 880px;
    height: 880px;
    /* the light is a soft round spot that fades out before its own edge, and it moves freely: it is never cut by the box of the hero */
    background: radial-gradient(circle closest-side, rgb(185 218 248 / 0.5), rgb(185 218 248 / 0.18) 55%, transparent);
    transform: translate(calc(var(--mx, -999px) - 440px), calc(var(--my, -999px) - 440px));
    opacity: var(--glow, 0);
    transition: opacity 1600ms ease;
    pointer-events: none;
}

/* ---- things come in as you reach them ---- */
.js-reveal .reveal {
    opacity: 0;
    --ty: 26px;
    transform: translateY(var(--ty, 0)) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: opacity 700ms var(--ease), transform 800ms var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.js-reveal .reveal.in { opacity: 1; --ty: 0px; }
.js-reveal .reveal.done { transition: opacity 300ms var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease); transition-delay: 0s; }
.reveal.is-leaning { box-shadow: 0 18px 44px rgb(10 45 105 / 0.14); }
.card, .door, .plan-card { transform-style: preserve-3d; }
.card:not(.reveal), .door:not(.reveal) { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }

/* ---- the tabs: one mark that slides from the chosen tab to the next ---- */
.tablist { position: relative; isolation: isolate; }
.tablist .glider { position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0; border-radius: 9999px; background: var(--primary-600); box-shadow: 0 6px 16px rgb(31 102 179 / 0.28); opacity: 0; transition: transform 380ms var(--ease), width 380ms var(--ease), height 380ms var(--ease), opacity 200ms; pointer-events: none; }
.tablist.has-glider .glider { opacity: 1; }
.tablist.has-glider button[aria-selected='true'] { background: transparent; border-color: transparent; }
.tablist button { transition: color 250ms var(--ease), background-color 150ms ease-out; }
.tabpanel:not([hidden]) { animation: panel-in 420ms var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } }

/* ---- the questions open smoothly where the browser can ---- */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease), content-visibility 320ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---- the small clock that follows the reading ---- */
.dial-float { position: fixed; z-index: 40; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(18px) scale(0.92); transform-origin: 100% 100%; pointer-events: none; transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
.dial-float.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.dial-float .clock { --size: 132px; flex: none; filter: drop-shadow(0 10px 22px rgb(10 45 105 / 0.18)); animation: none; }
.dial-float .arc-label { display: none; }
.dial-float .halo { display: none; }
.dial-float .face { box-shadow: var(--shadow), inset 0 0 0 calc(var(--size) * 0.03) var(--background); }
.dial-float .mark { display: none; }
.dial-float-name { order: -1; max-width: 190px; padding: 8px 16px; border-radius: 9999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text-strong); font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(12px); transition: opacity 220ms var(--ease), transform 300ms var(--ease); }
.dial-float-name.on { opacity: 1; transform: none; }
@media (max-width: 719px), (max-height: 519px) { .dial-float { display: none; } }

@media print { .js-reveal .reveal { opacity: 1; transform: none; } .dial-float, .hero::after, .hero::before { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .hero-text > *, .hero-art, .tabpanel:not([hidden]) { animation: none; }
    .hero::after { animation: none; }
    .tablist .glider, .dial-float, .dial-float-name { transition: none; }
    .faq details::details-content { transition: none; }
}

/* the small clock needs a little more body than the big one to be read at its size */
.dial-float .clock { --size: 112px; background: var(--surface); border-radius: 50%; }
.dial-float .arc-shape { fill: var(--primary-200); stroke: var(--primary-200); }
.dial-float .arc.is-active .arc-shape { fill: var(--primary-600); stroke: var(--primary-600); }
.dial-float .face { inset: 17%; }

/* the moving light may reach past the edge of the window: that must never make the page wider */
html, body { overflow-x: clip; }