@font-face {
  font-family: Roboto;
  src: url('assets/fonts/Roboto-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fafaf8;
  --blue: #262c96;
  --orange: #ff6b00;
  --ink: #22231f;
  --muted: #72736d;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.page { min-height: 100svh; display: flex; flex-direction: column; padding: 0 clamp(24px, 5vw, 80px); border-top: 3px solid var(--blue); }
main { flex: 1; display: grid; place-items: center; padding: 32px 0 64px; }
.hero { width: 100%; text-align: center; }
.logo-wrap { width: min(100%, 520px); margin: 0 auto; }
#brand-logo { display: block; width: 100%; height: auto; overflow: visible; }
.announcement { margin-top: 42px; }
.accent { display: block; width: 28px; height: 2px; margin: 0 auto 28px; background: var(--orange); }
h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
.period { color: var(--orange); }
.announcement p { margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
#signal-inner, #signal-outer { transform-box: fill-box; transform-origin: left bottom; animation: signal 3.8s ease-in-out infinite; }
#signal-outer { animation-delay: .22s; }
@keyframes signal {
  0%, 16%, 72%, 100% { opacity: 1; transform: scale(1); }
  35% { opacity: .28; transform: scale(.98); }
  51% { opacity: 1; transform: scale(1.035); }
}
.motion-paused #signal-inner, .motion-paused #signal-outer { animation: none; }
#eye-left, #eye-right {
  --wink-scale: 1;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: idle-blink 18s linear infinite;
}
#eye-left { --wink-scale: .06; }
/* Touch devices get a quiet idle expression without needing a cursor. */
@media (hover: none), (pointer: coarse) {
  #gaze { animation: idle-gaze 12s ease-in-out infinite; }
}
@keyframes idle-gaze {
  0%, 12%, 44%, 57%, 92%, 100% { transform: translate(0, 0); }
  20%, 33% { transform: translate(3.5px, -1.3px); }
  66%, 79% { transform: translate(-3.5px, 1px); }
}
@keyframes idle-blink {
  0%, 18.35%, 49.35%, 69.35%, 88.35%, 100% { transform: rotate(-6deg) scaleY(1) rotate(6deg); }
  /* Both eyes close in 90 ms and reopen in 153 ms, with uneven pauses. */
  17%, 48%, 87% {
    transform: rotate(-6deg) scaleY(1) rotate(6deg);
    animation-timing-function: cubic-bezier(.4, 0, 1, 1);
  }
  17.5%, 48.5%, 87.5% {
    transform: rotate(-6deg) scaleY(.06) rotate(6deg);
    animation-timing-function: cubic-bezier(0, 0, .25, 1);
  }
  /* An occasional single-eye wink follows the eye's original slant. */
  68% {
    transform: rotate(-6deg) scaleY(1) rotate(6deg);
    animation-timing-function: cubic-bezier(.4, 0, 1, 1);
  }
  68.5% {
    transform: rotate(-6deg) scaleY(var(--wink-scale)) rotate(6deg);
    animation-timing-function: cubic-bezier(0, 0, .25, 1);
  }
}
@media (max-width: 600px) {
  main { padding: 58px 0 90px; }
  .logo-wrap { width: min(100%, 390px); }
  .announcement { margin-top: 36px; }
  .announcement p { max-width: 260px; margin: 17px auto 0; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #signal-inner, #signal-outer, #gaze, #eye-left, #eye-right { animation: none; }
}