/* ReclipIt boot screen — the initial-load cover (shared component; byte-identical copies in design/landing-v2-wave-full/boot/
   and design/app-v4/auth/boot/). EXPERIMENT (2026-10-17): a full-opacity dark intro — the brand-anchor navy (#050E18, the
   landing's --bg-deep), the ReclipIt colour mark alone (3A, the approved PNG unmodified, the app's trim), ONE specular shine
   across the mark, then the whole layer fades out. The shine is a narrow skewed light band moving inside a box whose CSS mask
   IS the same PNG, so it can only appear inside the two shapes. The mask's image URL is set inline by the page (the brand
   folder sits at a different relative path on each server).
   It is in the page from its first paint (this stylesheet is render-blocking; the markup is the first child of <body>);
   boot.js fades it out and removes it. Failsafe without JS: it hides itself after 8 s. */
html:not(.rb-ready) { background: #050E18; }   /* before reveal the page edge is the intro's navy too */
.rb-boot { --rb-ih: 122px; --rb-sweep: 420ms; --rb-delay: 60ms;
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: #050E18;
  transition: opacity .24s cubic-bezier(0, 0, .2, 1); animation: rb-failsafe 0s linear 8s forwards; }   /* quick ease-out fade: visible from its first frame */
.rb-boot.rb-out { opacity: 0; pointer-events: none; }
@keyframes rb-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* the mark: a box the size of the visible artwork (3A: 1254² canvas, artwork 208–1053 × 204–1140 → 845 × 936); the PNG and the
   shine layer are both placed on the full canvas inside it, so the mask lines up with the pixels exactly */
.rb-mark { position: relative; width: calc(var(--rb-ih) * 845 / 936); height: var(--rb-ih); }
.rb-mark img, .rb-shine { position: absolute; left: calc(var(--rb-ih) * -208 / 936); top: calc(var(--rb-ih) * -204 / 936);
  width: calc(var(--rb-ih) * 1254 / 936); height: calc(var(--rb-ih) * 1254 / 936); }
.rb-mark img { display: block; animation: rb-settle var(--rb-sweep) ease-out var(--rb-delay) both; }
@keyframes rb-settle { from { filter: brightness(.86); } to { filter: brightness(1); } }   /* slightly subdued → the approved colours */
.rb-shine { overflow: hidden; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }   /* mask-image (the mark PNG) is set inline by the page */
/* the band: a solid white core with a cool-blue feather either side, wide enough to read on the saturated blue shape; a gentle,
   near-even pace so it spends as long on the blue shape as on the light one (the old ease rushed through the blue half) */
.rb-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -27%; width: 30%;
  background: linear-gradient(90deg, rgba(214,230,255,0) 0%, rgba(214,230,255,.38) 24%, rgba(240,246,255,.85) 40%, #fff 47%, #fff 53%, rgba(240,246,255,.85) 60%, rgba(214,230,255,.38) 76%, rgba(214,230,255,0) 100%);
  transform: translateX(0) skewX(-14deg); animation: rb-sweep var(--rb-sweep) cubic-bezier(.25, .1, .75, .9) var(--rb-delay) both; }
@keyframes rb-sweep { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(427%) skewX(-14deg); } }   /* starts just before the light shape, ends just past the blue one: little dead travel */

@media (max-width: 480px) { .rb-boot { --rb-ih: 92px; } }
/* review only (?bootdemo=1): a slow shine so it can be judged; boot.js also holds the screen a little longer */
html.rb-demo .rb-boot { --rb-sweep: 1500ms; --rb-delay: 400ms; }
/* reduced motion: the still mark, no shine, no fade */
@media (prefers-reduced-motion: reduce) { .rb-boot { transition: none; } .rb-shine { display: none; } .rb-mark img { animation: none; } }
html.rb-reduce .rb-boot { transition: none; }
html.rb-reduce .rb-shine { display: none; }
html.rb-reduce .rb-mark img { animation: none; }