/* Motion system: one set of easings and durations, shared by every page. */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* soft landing: entrances */
  --ease-in: cubic-bezier(.7, 0, .84, 0);       /* gathering weight: exits */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* confident snap: switches, confirmations */
  --t-micro: 120ms;
  --t-short: 220ms;
  --t-medium: 420ms;
  --t-long: 700ms;
}

/* Pages paint their own background; isolation lets z-index:-1 scenery (bokeh) sit above it. */
body { isolation: isolate; }

/* Scroll and load reveals. data-reveal on an element, --i for stagger order. */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--t-long) var(--ease-out), transform var(--t-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal].in { opacity: 1; transform: none; }

/* Word-by-word title reveal through a mask */
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.words .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 55ms + var(--base, 0ms)); }
.words.in .w > span { transform: none; }

/* Magnetic buttons: lean toward the pointer */
.magnetic { position: relative; overflow: hidden; transition: transform var(--t-short) var(--ease-out), box-shadow var(--t-short) var(--ease-out); will-change: transform; }

/* Iris page transition: a sodium circle closes over the page, then opens on the next one */
#iris { position: fixed; inset: 0; z-index: 4000; pointer-events: none; background: var(--sodium); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); }
#iris::after { content: ''; position: absolute; inset: 0; background: var(--ink); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); }
#iris.close { transition: clip-path .6s var(--ease-in); clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
#iris.close::after { transition: clip-path .45s var(--ease-in) .25s; clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
#iris.full, #iris.full::after { clip-path: circle(150% at 50% 50%); }
#iris.open { transition: clip-path .8s var(--ease-out); clip-path: circle(0 at 50% 50%); }
#iris.open::after { transition: clip-path .55s var(--ease-out); clip-path: circle(0 at 50% 50%); }

/* Letterbox bars for cinematic scenes */
.letterbox::before, .letterbox::after { content: ''; position: absolute; left: 0; right: 0; height: 11vh; background: #000; z-index: 5; transition: transform 1s var(--ease-out); }
.letterbox::before { top: 0; }
.letterbox::after { bottom: 0; }
.letterbox.open::before { transform: translateY(-100%); }
.letterbox.open::after { transform: translateY(100%); }

/* Boot assembly: children rise in once */
.boot [data-boot] { opacity: 0; transform: translateY(18px) scale(.98); }
.boot.go [data-boot] { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }

/* Physical slide-to-arm switch */
.slide-switch { position: relative; width: min(320px, 82vw); height: 80px; border-radius: 999px; background: rgb(var(--paper-rgb) / .05); border: 1px solid rgb(var(--sodium-rgb) / .35); touch-action: none; user-select: none; cursor: grab; }
.slide-switch .fill { position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--sodium-rgb) / .22); clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0); }
.slide-switch .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 64px; font-weight: 500; font-size: 17px; color: var(--mist); opacity: calc(1 - var(--p, 0) * 1.6); }
.slide-switch .knob { position: absolute; top: 7px; left: 7px; width: 66px; height: 66px; border-radius: 50%; background: var(--sodium); display: flex; align-items: center; justify-content: center; color: var(--on-sodium); transform: translateX(var(--x, 0px)); }
.slide-switch.snap .knob { transition: transform .5s var(--ease-spring); }
.slide-switch.armed { border-color: var(--sodium); }
.slide-switch:focus-visible { outline: 3px solid var(--sodium); outline-offset: 4px; }

/* Expanding rings when something powers on */
.power-rings { position: absolute; inset: 0; pointer-events: none; }
.power-rings i { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 2px solid rgb(var(--sodium-rgb) / .6); transform: scale(0); opacity: 0; }
.power-rings.go i { animation: ring-out 1.4s var(--ease-out) forwards; }
.power-rings.go i:nth-child(2) { animation-delay: .15s; }
.power-rings.go i:nth-child(3) { animation-delay: .3s; }
@keyframes ring-out { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(4); opacity: 0; } }

/* Press feedback for anything tappable */
.press { transition: transform var(--t-micro) var(--ease-out); }
.press:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .words .w > span, .boot [data-boot] { opacity: 1 !important; transform: none !important; transition: none !important; }
  }