/* ============================================================
   Break Book — shared custom styles
   Sits on top of Tailwind (Play CDN). Holds the bits Tailwind
   utilities can't express cleanly: the topographic texture,
   scroll-reveal animation, the phone bezel, and legal-page prose.
   ============================================================ */

:root {
  --bb-gold: #e9c349;
  --bb-green: #b3cdb7;
  --bb-bg: #02170a;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection { background: rgba(233, 195, 73, 0.3); color: #fff; }

/* Material Symbols defaults */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.fill-icon { font-variation-settings: 'FILL' 1; }

/* Topographic contour texture — reinforces the GPS-mapping theme */
.bg-topo {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23cee9d2' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Soft gold glow used behind hero / device clusters */
.glow-gold { box-shadow: 0 0 80px -20px rgba(233, 195, 73, 0.35); }

/* ---------- Phone device frame ----------
   Screenshots already include the iOS status bar + dynamic island,
   so we only add a subtle bezel — no second fake notch. */
.device {
  position: relative;
  border-radius: 2.6rem;
  padding: 6px;
  background: linear-gradient(160deg, #2b3f33, #0c1d13 60%, #06120b);
  border: 1px solid rgba(206, 233, 210, 0.12);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.device img { display: block; width: 100%; border-radius: 2.15rem; }
.device:hover { transform: translateY(-6px) rotate(0deg) scale(1.01); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* ---------- Slow drift on hero topo ---------- */
@keyframes drift { from { background-position: 0 0; } to { background-position: 200px 200px; } }
.bg-topo-anim { animation: drift 60s linear infinite; }

/* ---------- Legal / support long-form prose ---------- */
.prose-bb { color: #c3c8c1; font-size: 16px; line-height: 1.7; }
.prose-bb h2 {
  color: #cee9d2; font-weight: 600; font-size: 24px; line-height: 1.3;
  margin: 2.5rem 0 .75rem; scroll-margin-top: 6rem;
}
.prose-bb h3 { color: #cee9d2; font-weight: 600; font-size: 18px; margin: 1.75rem 0 .5rem; }
.prose-bb p { margin: 0 0 1rem; }
.prose-bb ul { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; }
.prose-bb ul li { margin: .35rem 0; }
.prose-bb a { color: var(--bb-gold); text-decoration: underline; text-underline-offset: 2px; }
.prose-bb a:hover { color: #ffe088; }
.prose-bb strong { color: #cee9d2; font-weight: 600; }
.prose-bb hr { border: 0; border-top: 1px solid #434843; margin: 2.5rem 0; }

/* Anchored table of contents for legal pages */
.toc a { color: #c3c8c1; }
.toc a:hover { color: var(--bb-gold); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bg-topo-anim { animation: none; }
  .device { transition: none; }
}