/* Section entrances, "Quiet Apple" (entrances-lab V1, chosen 2026-10-07), shared by every page:
   home, waitlist, privacy, credits, pro/thanks. The choreography is in js/entrances.js; a page opts a
   section in with data-ent="<recipe>" (see the recipe list there).
   Everything is scoped to html.ent-on, which only that script adds, so with no JS nothing here hides
   anything. Motion: opacity, the individual transform properties (translate / scale, so they compose
   with each page's own `transform`), clip-path, and one box-shadow growth on settling cards.
   Animations use `backwards` fill and stop applying once a unit is done (.ent-done), so each page's
   own animations and hovers take over cleanly afterwards. */

html.ent-on {
  --eo: cubic-bezier(0.19, 1, 0.22, 1);   /* strong ease-out, the page's --ease-out */
  --ei: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* First paint, before the script has marked its sections (it does so at DOMContentLoaded): hold them
   back so nothing shows and then hides. data-ent-keep (e.g. the waitlist form) is never hidden. The script's 4s failsafe removes ent-on if setup never runs. */
html.ent-on:not(.ent-ready) [data-ent] > :not([data-ent-keep]),
html.ent-on:not(.ent-ready) :is([data-ent="card"], [data-ent="piece"], [data-ent="rise"], [data-ent="fade"]) { opacity: 0; }
html.ent-on:not(.ent-rm):not(.ent-ready) .hc-frame { clip-path: inset(3.5% 3% 3.5% 3% round 34px); }

/* split words: each word sits in a clip so it can rise from behind its own line */
.ew { display: inline-block; }
.ewi { display: inline-block; }
html.ent-on:not(.ent-rm) .ent-u:not(.ent-done) .ewm { clip-path: inset(-0.3em -0.2em -0.16em -0.2em); }

/* ---- effects: [data-e] on a target inside a section (.ent-u), or on the section itself ------------
   --t duration, --d delay, --e easing, --y/--x distance, --s start scale, --c0/--c1 clip shapes. */
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="fade"], .ent-u[data-e="fade"]:not(.ent-in)) { opacity: 0; }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="fade"], .ent-u.ent-in[data-e="fade"]:not(.ent-done)) { animation: e-fade var(--t, 700ms) var(--e, var(--ei)) var(--d, 0ms) backwards; }
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="rise"], .ent-u[data-e="rise"]:not(.ent-in)) { opacity: 0; translate: 0 var(--y, 12px); }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="rise"], .ent-u.ent-in[data-e="rise"]:not(.ent-done)) { animation: e-rise var(--t, 800ms) var(--e, var(--eo)) var(--d, 0ms) backwards; }
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="slide"], .ent-u[data-e="slide"]:not(.ent-in)) { opacity: 0; translate: var(--x, 16px) 0; }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="slide"], .ent-u.ent-in[data-e="slide"]:not(.ent-done)) { animation: e-slide var(--t, 800ms) var(--e, var(--eo)) var(--d, 0ms) backwards; }
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="scale"], .ent-u[data-e="scale"]:not(.ent-in)) { opacity: 0; scale: var(--s, 0.96); }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="scale"], .ent-u.ent-in[data-e="scale"]:not(.ent-done)) { animation: e-scale var(--t, 900ms) var(--e, var(--eo)) var(--d, 0ms) backwards; }
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="card"], .ent-u[data-e="card"]:not(.ent-in)) { opacity: 0; scale: var(--s, 0.96); box-shadow: none; }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="card"], .ent-u.ent-in[data-e="card"]:not(.ent-done)) { animation: e-card var(--t, 1000ms) var(--e, var(--eo)) var(--d, 0ms) backwards; }
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="settle"], .ent-u[data-e="settle"]:not(.ent-in)) { scale: var(--s, 1.06); }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="settle"], .ent-u.ent-in[data-e="settle"]:not(.ent-done)) { animation: e-settle var(--t, 1200ms) var(--e, var(--eo)) var(--d, 0ms) backwards; }
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="pop"], .ent-u[data-e="pop"]:not(.ent-in)) { opacity: 0; scale: 0; }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="pop"], .ent-u.ent-in[data-e="pop"]:not(.ent-done)) { animation: e-pop var(--t, 420ms) var(--e, var(--spring)) var(--d, 0ms) backwards; }
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="wipe"], .ent-u[data-e="wipe"]:not(.ent-in)) { clip-path: var(--c0, inset(0 100% 0 0)); }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="wipe"], .ent-u.ent-in[data-e="wipe"]:not(.ent-done)) { animation: e-wipe var(--t, 900ms) var(--e, var(--eo)) var(--d, 0ms) backwards; }
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="mask"], .ent-u[data-e="mask"]:not(.ent-in)) { translate: 0 118%; }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="mask"], .ent-u.ent-in[data-e="mask"]:not(.ent-done)) { animation: e-mask var(--t, 900ms) var(--e, var(--eo)) var(--d, 0ms) backwards; }

/* nudge: moves into place without ever being transparent (for things that must be usable at once) */
html.ent-on:not(.ent-rm) :is(.ent-u:not(.ent-in) [data-e="nudge"], .ent-u[data-e="nudge"]:not(.ent-in)) { translate: 0 var(--y, 10px); }
html.ent-on:not(.ent-rm) :is(.ent-u.ent-in:not(.ent-done) [data-e="nudge"], .ent-u.ent-in[data-e="nudge"]:not(.ent-done)) { animation: e-nudge var(--t, 700ms) var(--e, var(--eo)) var(--d, 0ms) backwards; }
@keyframes e-nudge { from { translate: 0 var(--y, 10px); } }
@keyframes e-fade { from { opacity: 0; } }
@keyframes e-rise { from { opacity: 0; translate: 0 var(--y, 12px); } }
@keyframes e-slide { from { opacity: 0; translate: var(--x, 16px) 0; } }
@keyframes e-scale { from { opacity: 0; scale: var(--s, 0.96); } }
@keyframes e-card { from { opacity: 0; scale: var(--s, 0.96); box-shadow: none; } 60% { opacity: 1; } }
@keyframes e-settle { from { scale: var(--s, 1.06); } }
@keyframes e-pop { from { opacity: 0; scale: 0; } 40% { opacity: 1; } }
@keyframes e-wipe { from { clip-path: var(--c0, inset(0 100% 0 0)); } to { clip-path: var(--c1, inset(0 0 0 0)); } }
@keyframes e-mask { from { translate: 0 118%; } }

/* ---- reduced motion: every section is one short opacity fade (pages that switch all animation off
   under reduced motion simply show it) ---------------------------------------------------------------- */
html.ent-on.ent-rm .ent-u:not(.ent-in):not(:has([data-ent-keep])) { opacity: 0; }
html.ent-on.ent-rm .ent-u.ent-in:not(.ent-done):not(:has([data-ent-keep])) { animation: e-fade 320ms ease-out backwards; }