/* Michael's Home: shared design system.
   Midnight evergreen, warm gold, glass panels, slow gentle motion.
   Grown-up on the outside, with puppies hiding in it.
   Rules that matter for Michael: big targets, high contrast, nothing flashes,
   no hover-only UI (tablet + VR headset), and every animation respects
   "reduce motion" and the Snow switch. */

@font-face {
  font-family: "Fraunces";
  src: url("/shared/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/shared/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #07120f;
  --bg-2: #0d241d;
  --ink: #f6f0e4;
  --muted: #b7c4b8;
  --gold: #e9c46a;
  --gold-hi: #f6dc94;
  --gold-ink: #2a1d04;
  --red: #dd4b3d;
  --green: #3aa273;
  --glass: rgba(14, 34, 28, .62);
  --glass-hi: rgba(26, 58, 48, .72);
  --line: rgba(255, 255, 255, .14);
  --line-hi: rgba(233, 196, 106, .55);
  --radius: 26px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .75), 0 2px 0 rgba(255, 255, 255, .05) inset;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;           /* no double-tap zoom (pinch still works) */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.2rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Backdrop: Steve's artwork, dimmed, with slow parallax ---------- */
.backdrop {
  position: fixed;
  inset: -4vh -4vw;
  z-index: -3;
  background: var(--bg) var(--backdrop-image, url("/shared/img/hero-globe.jpg")) center / cover no-repeat;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.06);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
  filter: saturate(.9) blur(1.5px);
}
.backdrop-shade {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(7, 18, 15, .35) 0%, rgba(7, 18, 15, .86) 62%, #07120f 100%),
    linear-gradient(180deg, rgba(7, 18, 15, .55), rgba(7, 18, 15, .9));
}
#snow {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Layout ---------- */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 8rem;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0 1.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: .6rem;
  color: var(--ink);
  font: 600 1.15rem var(--display);
  letter-spacing: .02em;
  text-decoration: none;
}
.brand-mark {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-hi), var(--gold));
  color: var(--gold-ink);
  font-size: 1.05rem;
  box-shadow: 0 6px 18px -6px rgba(233, 196, 106, .7);
}
.back {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  padding: .5rem .25rem;
}
.back:focus-visible { color: var(--gold-hi); }
@media (hover: hover) { .back:hover { color: var(--gold-hi); } }

.eyebrow {
  margin: 0 0 .9rem;
  color: var(--gold);
  font: 700 .9rem var(--body);
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.01em; }

/* ---------- Glass ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.4rem;
  padding: .75rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 1.1rem var(--body);
  color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 10px 26px -10px rgba(233, 196, 106, .75), 0 1px 0 rgba(255, 255, 255, .6) inset;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); filter: brightness(1.05); } }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, .08);
  border-color: var(--line);
  box-shadow: none;
}
.btn:focus-visible, .tile:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold-hi);
  outline-offset: 3px;
}

/* ---------- Snow switch + puppy ---------- */
.snow-toggle {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 20;
  min-height: 2.75rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--muted);
  font: 600 .95rem var(--body);
  cursor: pointer;
}
.snow-toggle[aria-pressed="true"] { color: var(--gold-hi); border-color: var(--line-hi); }
.snow-toggle.in-bar { position: static; flex: none; }
.bar-tools { display: flex; align-items: center; gap: .5rem; flex: none; }
@media (max-width: 700px) {
  .snow-toggle .snow-label { display: none; }
  .snow-toggle { width: 2.75rem; padding: 0; font-size: 1.15rem; }
  .brand { font-size: 1.02rem; }
  .puppy { width: 96px; }
}

.puppy {
  position: fixed;
  right: clamp(.5rem, 3vw, 2.5rem);
  bottom: 0;
  z-index: 15;
  width: clamp(100px, 12vw, 140px);
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  transform: translateY(40%);
  animation: puppy-in 1.1s .6s cubic-bezier(.2, 1.3, .4, 1) backwards;
  transition: transform .45s cubic-bezier(.2, 1.2, .4, 1);
  -webkit-tap-highlight-color: transparent;
}
.puppy svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (hover: hover) { .puppy:hover { transform: translateY(26%); } }
.puppy.tucked { transform: translateY(105%); }
.puppy.hop { animation: puppy-hop .6s ease; }
.puppy-bubble {
  position: absolute;
  right: 70%;
  bottom: 75%;
  padding: .35rem .9rem;
  border-radius: 18px 18px 4px 18px;
  background: #fff;
  color: #2a1d04;
  font: 800 1.1rem var(--body);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(.8);
  transition: opacity .2s, transform .25s cubic-bezier(.2, 1.5, .4, 1);
  pointer-events: none;
}
.puppy.woof .puppy-bubble { opacity: 1; transform: none; }
.puppy .tail { transform-origin: 148px 188px; animation: puppy-wag 1.6s ease-in-out infinite; }
.puppy.woof .tail { animation-duration: .28s; }
.puppy .eyes { transform-origin: 100px 92px; animation: puppy-blink 5.5s infinite; }
.puppy .ear-l { transform-origin: 66px 70px; animation: puppy-ear 6s ease-in-out infinite; }
.puppy .ear-r { transform-origin: 134px 70px; animation: puppy-ear 6s 2.2s ease-in-out infinite reverse; }
.puppy .tongue { opacity: 0; transition: opacity .2s; }
.puppy.woof .tongue { opacity: 1; }
@media (hover: hover) { .puppy:hover .tongue { opacity: 1; } }

@keyframes puppy-in { from { transform: translateY(110%); } to { transform: translateY(40%); } }
@keyframes puppy-hop { 0%,100% { transform: translateY(40%); } 40% { transform: translateY(18%); } }
@keyframes puppy-wag { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
@keyframes puppy-blink { 0%,94%,100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
@keyframes puppy-ear { 0%,88%,100% { transform: rotate(0); } 92% { transform: rotate(-7deg); } 96% { transform: rotate(3deg); } }

/* ---------- Entrance + reduced motion ---------- */
.rise { opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .puppy { transform: translateY(40%); }
  .rise { opacity: 1; transform: none; }
  .backdrop { transition: none; }
}