/* Grey Oakes — extras: boot screen, chrome shine on the logo, NEW! sticker */

/* ---- Boot screen ---- */
.boot {
  position: fixed; inset: 0; z-index: 100; background: #050604; color: var(--neon);
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-left, 0px));
  font-family: var(--font); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  transition: opacity .35s ease;
}
.boot.done { opacity: 0; pointer-events: none; }
.boot-box { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; }
.boot-line { display: flex; justify-content: space-between; }
.boot-bar { height: 14px; border: 1px solid var(--neon); padding: 2px; display: flex; gap: 2px; }
.boot-bar i { flex: 1; background: var(--neon); opacity: 0; }
.boot-bar i.on { opacity: 1; }
.boot-caret::after { content: '_'; animation: blink 1s steps(1) infinite; }

/* ---- Home logo: float + chrome shine masked to the artwork ---- */
.logo-stage { position: relative; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.logo-stage .shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 48%, rgba(220,255,160,.5) 52%, transparent 60%) 200% 0 / 250% 100% no-repeat;
  mix-blend-mode: screen; animation: shine 6s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { background-position: 200% 0; } 85%, 100% { background-position: -60% 0; } }

/* ---- Sticker badge ---- */
.sticker {
  display: inline-block; padding: 3px 7px; margin-left: 10px; background: var(--neon); color: var(--ink);
  font-size: 10px; font-weight: 700; transform: rotate(-6deg); animation: blink 1.2s steps(1) infinite;
  vertical-align: middle;
}

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .logo-stage .shine, .sticker, .boot-caret::after { animation: none; }
}