/* ==============================================================
   Entrance animations (assets/js/entrance.js marks the targets).
   [data-ent] = one element, [data-ent-group] = a grid whose children
   stagger; .ent-in starts it. Animations fill backwards only, so once one
   ends the element is back to its own styles (transforms, hovers).
   Keyframes use the translate / scale properties, which add to an
   element's own transform instead of replacing it.
   Styles (html[data-ent-v], picked per page, see entrance.js): rise, scan,
   focus, boot.
   ============================================================== */
html.ent [data-ent]:not(.ent-in),
html.ent [data-ent-group]:not(.ent-in) > * { opacity: 0; }

html.ent [data-ent].ent-in,
html.ent [data-ent-group].ent-in > * {
  animation: var(--ent-anim) var(--ent-dur) var(--ent-ease) backwards;
  animation-delay: calc(var(--ent-base) + var(--ent-i, 0) * var(--ent-step));
}
html.ent [data-ent] { --ent-base: 120ms; --ent-dur: var(--ent-hero-dur); --ent-step: var(--ent-hero-step); --ent-anim: var(--ent-item); }
html.ent [data-ent="up"], html.ent [data-ent-group] > * { --ent-base: 0ms; --ent-dur: var(--ent-sec-dur); --ent-step: var(--ent-sec-step); --ent-anim: var(--ent-item); }
html.ent [data-ent-group] > * { --ent-base: 80ms; }
html.ent [data-ent="bg"] { --ent-anim: ent-bg; --ent-dur: 1600ms; --ent-base: 0ms; --ent-ease: cubic-bezier(.2, .6, .2, 1); }
html.ent [data-ent="line"] { --ent-anim: var(--ent-line); }
/* cinematic models: the split layout places them with `translate`, so their
   keyframes leave translate alone */
html.ent [data-ent="model"] { --ent-anim: var(--ent-model); }

/* cover over a hero whose art is a CSS background (.cin) */
.ent-veil { position: absolute; inset: 0; z-index: 0; background: #050a09; pointer-events: none; }
html.ent .ent-veil[data-ent]:not(.ent-in) { opacity: 1; }
html.ent .ent-veil[data-ent].ent-in { --ent-anim: var(--ent-veil); --ent-dur: 1400ms; --ent-base: 0ms; animation-fill-mode: forwards; }

@keyframes ent-bg { from { opacity: 0; scale: 1.08; } }
@keyframes ent-veil-fade { to { opacity: 0; } }

/* rise: fade up */
html[data-ent-v="rise"] { --ent-item: ent-rise; --ent-model: ent-model-rise; --ent-line: ent-line-open; --ent-veil: ent-veil-fade; --ent-ease: cubic-bezier(.2, .7, .2, 1);
  --ent-hero-dur: 900ms; --ent-hero-step: 80ms; --ent-sec-dur: 700ms; --ent-sec-step: 70ms; }
@keyframes ent-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes ent-model-rise { from { opacity: 0; scale: .96; } }
@keyframes ent-line-open { from { opacity: 0; clip-path: inset(50% 0 50% 0); } to { opacity: 1; clip-path: inset(0); } }

/* scan: wipes in from the left, bright as it lands */
html[data-ent-v="scan"] { --ent-item: ent-scan; --ent-model: ent-model-scan; --ent-line: ent-line-open; --ent-veil: ent-veil-wipe; --ent-ease: cubic-bezier(.65, 0, .35, 1);
  --ent-hero-dur: 800ms; --ent-hero-step: 90ms; --ent-sec-dur: 650ms; --ent-sec-step: 60ms; }
@keyframes ent-scan {
  from { opacity: .4; clip-path: inset(0 100% 0 0); translate: -10px 0; filter: brightness(1.8); }
  to   { clip-path: inset(0 -2% 0 0); translate: 0 0; filter: none; }
}
@keyframes ent-model-scan { from { opacity: .4; clip-path: inset(0 100% 0 0); filter: brightness(1.8); } to { clip-path: inset(0 -2% 0 0); filter: none; } }
@keyframes ent-veil-wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

/* focus: pulls into focus, a little cinematic */
html[data-ent-v="focus"] { --ent-item: ent-focus; --ent-model: ent-focus; --ent-line: ent-focus; --ent-veil: ent-veil-fade; --ent-ease: cubic-bezier(.16, 1, .3, 1);
  --ent-hero-dur: 1100ms; --ent-hero-step: 90ms; --ent-sec-dur: 800ms; --ent-sec-step: 70ms; }
@keyframes ent-focus { from { opacity: 0; filter: blur(12px); scale: 1.04; } }

/* boot: flickers on like an HUD panel powering up */
html[data-ent-v="boot"] { --ent-item: ent-boot; --ent-model: ent-model-boot; --ent-line: ent-line-open; --ent-veil: ent-veil-boot; --ent-ease: linear;
  --ent-hero-dur: 700ms; --ent-hero-step: 110ms; --ent-sec-dur: 600ms; --ent-sec-step: 60ms; }
@keyframes ent-boot {
  0%   { opacity: 0; translate: -14px 0; filter: brightness(2) saturate(.4); }
  12%  { opacity: .9; }
  18%  { opacity: .1; }
  34%  { opacity: 1; translate: -4px 0; }
  40%  { opacity: .35; }
  56%  { opacity: 1; translate: 0 0; filter: brightness(1.3) saturate(.8); }
  100% { opacity: 1; translate: 0 0; filter: none; }
}
@keyframes ent-model-boot {
  0%   { opacity: 0; filter: brightness(2) saturate(.4); }
  12%  { opacity: .9; } 18% { opacity: .1; } 34% { opacity: 1; } 40% { opacity: .35; }
  56%  { opacity: 1; filter: brightness(1.3) saturate(.8); }
  100% { opacity: 1; filter: none; }
}
@keyframes ent-veil-boot { 0% { opacity: 1; } 20% { opacity: .4; } 28% { opacity: .9; } 50% { opacity: .2; } 60% { opacity: .6; } 100% { opacity: 0; } }

/* ?anim= preview bar */
.ent-lab { position: fixed; left: 12px; bottom: 12px; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: calc(100vw - 24px); padding: 6px; font: 600 11px/1 Poppins, system-ui, sans-serif; color: #d1caca; background: rgba(5, 10, 9, .92); border: 1px solid rgba(254, 198, 36, .5); }
.ent-lab b { padding: 0 6px; font-family: Unbounded, sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fec624; }
.ent-lab button { padding: 6px 9px; font: inherit; color: inherit; background: none; border: 1px solid rgba(246, 245, 245, .14); cursor: pointer; }
.ent-lab button.is-on { color: #050a09; background: #fec624; border-color: #fec624; }