@font-face { font-family: "Outfit"; src: url("fonts/Outfit-Variable.ttf"); font-weight: 100 900; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Variable.ttf"); font-weight: 100 1000; }
:root {
  --night: #0B1F2A; --night2: #12303D; --night3: #1C4552; --ink: #EAF4F1; --ink2: #A9CBC8;
  --lagoon: #5FD3C6; --lagoon-l: #D6FAF4; --lagoon-d: #2FA59C; --lantern: #FFD27A; --lumi: #FFB48A; --melo: #FF9E86;
  --sprout: #A6DB86; --breezy: #DCEBFF; --deep: #0E2A33; --cap: #2E5A63;
  --H: min(90vh, 920px, calc(100vw * 1.7778)); --W: calc(var(--H) * 0.5625);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: radial-gradient(1200px 700px at 50% 0%, #17394a, #07131a 70%); font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); overflow: hidden; }
.stage { height: 100%; display: grid; place-items: center; perspective: 2200px; }
/* Page turn styles: set data-flip on the .book. turn (default), slide, rise, fold. */
.book { --pose: rotateY(-102deg) scale(.97); --origin: left center; }
.book[data-flip="slide"] { --pose: translateX(-104%); --origin: center; }
.book[data-flip="rise"] { --pose: translateY(-14%) scale(.9); --origin: center; }
.book[data-flip="fold"] { --pose: rotateX(98deg); --origin: center top; }
.book { position: relative; width: var(--W); height: var(--H); border-radius: 26px; box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); touch-action: pan-y; }
.page { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; transform-origin: var(--origin); backface-visibility: hidden; opacity: 0; pointer-events: none; transition: transform 1000ms cubic-bezier(.45,0,.2,1), opacity 600ms ease, box-shadow 1000ms; padding: calc(var(--H) * .06) calc(var(--W) * .09); display: flex; flex-direction: column; }
.page.active { opacity: 1; z-index: 3; pointer-events: auto; }
.page.under { opacity: 1; z-index: 2; }
.page.leaving { opacity: 1; z-index: 4; transform: var(--pose); box-shadow: 40px 0 60px rgba(0,0,0,.4); }
.page.leaving.back { transform: rotateY(0); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* editorial type */
.kick { font: 700 calc(var(--H) * .0145)/1 "Outfit"; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.folio { position: absolute; bottom: calc(var(--H) * .028); left: calc(var(--W) * .09); right: calc(var(--W) * .09); display: flex; justify-content: space-between; font: 700 calc(var(--H) * .0125)/1 "Outfit"; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
h1, h2 { font-family: "Outfit"; font-weight: 800; letter-spacing: -.02em; line-height: .95; }
h2 { font-size: calc(var(--H) * .062); margin-top: calc(var(--H) * .018); }
.lede { font-size: calc(var(--H) * .0215); line-height: 1.35; font-weight: 500; margin-top: calc(var(--H) * .02); max-width: 92%; }
.small { font-size: calc(var(--H) * .0175); line-height: 1.35; font-weight: 500; }
.light { color: var(--deep); } .dark { color: var(--ink); }
.cut { filter: drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 14px 18px rgba(11,31,42,.35)); }
.abs { position: absolute; }
/* animations only run on the page in view */
.float { animation: float 4.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(calc(var(--H) * -.012)) rotate(1.5deg); } }
.page:not(.active) * { animation-play-state: paused !important; }
@keyframes drift { from { transform: translateX(-30%); } to { transform: translateX(130%); } }
@keyframes bob { 50% { transform: translateY(-14px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes glow { 50% { opacity: .95; transform: scale(1.12); } }
@keyframes wiggle { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes press { 50% { transform: translateY(8px) scaleY(.85); } }
@keyframes ring { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }
@keyframes park { 0% { transform: translate(var(--fx), var(--fy)); opacity: 0; } 15% { opacity: 1; } 60%,100% { transform: translate(0,0); opacity: 1; } }
@keyframes lane { from { transform: translateY(-120%); } to { transform: translateY(260%); } }
@keyframes sun { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.active .rise > * { animation: pop .7s both cubic-bezier(.2,1.4,.4,1); }
.active .rise > *:nth-child(2) { animation-delay: .12s; } .active .rise > *:nth-child(3) { animation-delay: .24s; } .active .rise > *:nth-child(4) { animation-delay: .36s; }

/* controls */
.tap { position: absolute; top: 0; bottom: 0; z-index: 10; }
.tap.l { left: 0; width: 28%; cursor: w-resize; } .tap.r { right: 0; width: 72%; cursor: e-resize; }
.bar { position: absolute; top: calc(var(--H) * .018); left: calc(var(--W) * .06); right: calc(var(--W) * .06); display: flex; gap: 4px; z-index: 12; pointer-events: none; }
.bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.bar i b { display: block; height: 100%; width: 0; background: #fff; transition: width .5s; }
.bar i.done b { width: 100%; }
.hint { position: fixed; bottom: 8px; left: 0; right: 0; text-align: center; font: 600 12px "Outfit"; letter-spacing: .2em; text-transform: uppercase; opacity: .45; }

/* page themes */
.p-cover { background: radial-gradient(120% 70% at 70% 30%, #1d5160, var(--night) 65%); }
.p-peach { background: linear-gradient(170deg, #FFE9DE, #FFC9B0); }
.p-lagoon { background: linear-gradient(170deg, #E8FFFA, #BDF1E8); }
.p-sun { background: linear-gradient(170deg, #FFF3CC, #FFD98A); }
.p-dusk { background: linear-gradient(170deg, #2A2150, #5C3F78 70%, #A8567A); }
.p-mint { background: linear-gradient(170deg, #E4F9D6, #B9E6A0); }
.p-sky { background: linear-gradient(170deg, #E9F1FF, #BFD6FF); }
.p-night { background: linear-gradient(170deg, var(--night2), var(--night)); }