/* PupOS site styles on top of CYBERCORE (css/cybercore.css) and the settled pieces (css/core.css) */
:root { color-scheme: dark;
  /* CYBERCORE's cyan accent becomes pupD's red */
  --cyber-cyan-300: #ff8a9a; --cyber-cyan-400: #ff5266; --cyber-cyan-500: #ff2b3f; --cyber-cyan-600: #d91d30; --cyber-cyan-700: #a8121f; --cyber-cyan-900: #3a0710; }
body { margin: 0; }

/* animated background canvas (js/bg.js): behind everything, under the library's scanlines */
#bg { position: fixed; top: 0; left: 0; width: 100%; z-index: -1; pointer-events: none; will-change: transform; }
#bg canvas { position: absolute; top: 0; left: 0; width: 100%; }
/* the browser slides the mesh at 40% of the scroll speed (--drift is set by js/bg.js) */
@supports (animation-timeline: scroll()) {
  #bg { animation: bg-drift linear both; animation-timeline: scroll(root block); }
  @keyframes bg-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--drift, 0px), 0); } }
}

/* his art sits above the library's scanline overlay (z 10); during the cutscene core.css lifts him over the intro (z 101) */
.mascot .rig:not(.intro-cam) { z-index: 11; }
#snoot, .boops { z-index: 12; }

/* hero: pupD on the left, the title beside him, both near the top under the nav */
.hero { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 760px);
  justify-content: center;                                   /* pupD + title sit together in the middle, not hugging the left */
  gap: clamp(24px, 4vw, 64px); align-items: start; max-width: 1240px; margin: 0 auto;
  padding: 164px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
.hero .mascot { margin-top: -10px; }                         /* he sits a little higher than the title */
.hero-side { display: grid; gap: 16px; max-width: 560px; }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); justify-items: center; } .hero .boops { top: auto; bottom: 4%; } }   /* phones: his bubble would cover the counter */

/* his speech bubble, above his head; grows upward as he types */
.bubble { position: absolute; left: 50%; bottom: 85%; z-index: 12; transform: translate(-50%, var(--lift, 0px));
  width: max-content; max-width: min(280px, 80vw); padding: 10px 14px; box-sizing: border-box;
  font: 500 15px/1.5 var(--font-mono); color: var(--color-text-primary);
  background: var(--color-bg-secondary); border: 1px solid var(--color-border-default); }
.bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: var(--color-border-default); }
.bubble .caret { background: var(--cyber-cyan-500); }
/* the page title beside him: really big, library display font, red name with a soft glow, white rest */
.title { margin: 0; font: 700 clamp(56px, 8.4vw, 132px)/.92 var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--color-text-primary); }
.welcome { max-width: 40em; font-size: 15px; line-height: 1.6; color: var(--cyber-chrome-300); }
.welcome p { margin: 0 0 .7em; }

/* terms of service */
main { overflow-x: clip; }   /* nothing may widen the page (the ToS burst flies past the edge): phones would zoom out */
@supports not (overflow-x: clip) { main { overflow-x: hidden; } }   /* iOS 15 and older; nothing in main is sticky */
.tos { max-width: 980px; margin: 0 auto; padding: 40px max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px)); scroll-margin-top: 90px; }
.tos h2 { font-size: var(--text-4xl); margin: 0 0 28px; }
.title .accent { display: block; color: var(--cyber-cyan-500); text-shadow: 0 0 18px color-mix(in srgb, var(--cyber-cyan-500) 45%, transparent); }

/* CYBERCORE headings, calmer: one soft glow, no glitch copies */
.cyber-heading { text-shadow: 0 0 14px color-mix(in srgb, var(--cyber-cyan-500) 40%, transparent); }
.cyber-heading::before, .cyber-heading::after { content: none; }