/* EasyFile page, Scan beam look: a night hero where a scanner light sweeps a crooked grey page, the page is found,
   snaps straight and clean, and its tidy name types itself; each feature card gets a quick scan sweep as it appears.
   The scanner is added by easyfile-scan.js. Loaded after the page's own styles, so it wins. */

:root { --sc-gold: #F5B83D; --sc-sweep: rgba(245, 184, 61, .35); }

/* ---- night hero (dark in both themes) ---- */
.hero {
  --text: #F3EBDA; --muted: #BFB39C; --subtle: #A89C85; --surface: #2A241B; --surface-alt: #352D21; --line: #4A4032;
  --accent: var(--sc-gold); --ok: #A9CC94; --ok-soft: rgba(169, 204, 148, .14);
  background: #1F1B14; color: var(--text);
}
.hero h1 { color: var(--text); }

/* ---- SC-A1 to SC-A3 the scanner takes the place of the icon ---- */
.hero .art { aspect-ratio: auto; width: min(400px, 86vw); }
.hero .art .ring { display: none; }
/* Kept for the eggs (they frame the icon): invisible, sitting over the scanned page. */
.hero .art .icon-big { visibility: hidden; animation: none; width: 170px; height: 220px; top: 155px; }
.sc-scan {
  position: relative; height: 310px; display: grid; place-items: center; overflow: hidden; border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, #3A3226, #15120C); box-shadow: inset 0 0 0 1px #3A3226;
}
.sc-page {
  width: 170px; height: 220px; padding: 16px; background: #CFC6B4; filter: contrast(.8) brightness(.8);
  transform: rotate(-9deg) skew(4deg) scale(.9);
  transition: transform .8s var(--ease), background .8s, filter .8s, box-shadow .3s;
}
.sc-page b { display: block; font: 800 .9rem Bahnschrift, "Segoe UI", sans-serif; letter-spacing: .1em; margin-bottom: 4px; color: #2B2620; }
.sc-page small { display: block; font: 600 .62rem "Segoe UI", sans-serif; color: #5C5345; margin-bottom: 12px; }
.sc-page i { display: block; height: 6px; margin-bottom: 9px; background: #B3AA97; transition: background .8s; }
.sc-page.found { box-shadow: 0 0 0 3px var(--sc-gold), 0 0 28px rgba(245, 184, 61, .5); }
.sc-page.clean { transform: none; background: #FFFFFF; filter: none; }
.sc-page.clean i { background: #E9E3D6; }
.sc-beam {
  position: absolute; left: 0; right: 0; top: -70px; height: 70px; pointer-events: none;
  background: linear-gradient(transparent, rgba(255, 206, 92, .6), transparent);
}
.sc-beam.go { animation: sc-beam 1.3s ease-in-out; }
@keyframes sc-beam { from { top: -70px; } to { top: 100%; } }
.sc-fname { margin: 14px 0 0; min-height: 3em; font: .92rem/1.5 "Cascadia Mono", Consolas, monospace; color: var(--muted); overflow-wrap: anywhere; }
.sc-fname .sc-new { color: #F5C25E; }
html.calm .sc-page { transition: none; }

/* The labels around it become small dark tags. */
.hero .art .float { background: rgba(31, 27, 20, .92); border-color: #5A4C35; }
.hero .art .f1 { left: -6%; top: 6%; }
.hero .art .f2 { right: -6%; top: 30%; }
.hero .art .f3 { left: -6%; bottom: 30%; top: auto; }
.hero .art .f4 { right: -4%; bottom: 20%; }
@media (max-width: 480px) {
  .sc-scan { height: 270px; }
  .sc-page { width: 150px; height: 196px; padding: 13px; }
  .hero .art .icon-big { width: 150px; height: 196px; top: 135px; }
  .hero .art .float { font-size: .8rem; padding: 6px 10px; }
  .hero .art .f1, .hero .art .f3 { left: -2%; }
  .hero .art .f2, .hero .art .f4 { right: -2%; }
}

/* ---- SC-A4 each feature card gets a quick scan sweep as it appears ---- */
#features .card { position: relative; overflow: hidden; }
#features .card::after {
  content: ""; position: absolute; left: 0; right: 0; top: -45%; height: 45%; pointer-events: none;
  background: linear-gradient(transparent, var(--sc-sweep), transparent);
}
html.motion #features .card.in::after { animation: sc-sweep 1.1s ease-in-out forwards; animation-delay: calc(var(--delay, 0s) + .25s); }
@keyframes sc-sweep { from { top: -45%; } to { top: 110%; } }

/* Step numbers in scanner gold. */
.step .num { background: var(--sc-gold); color: #2B2108; }