/* ──────────────────────────────────────────────────────────────
   BASE — reset, brand tokens, fixed page background, layout helpers,
   and the two shared glass treatments (CTA capsule + frosted card).
   Loaded first; every section stylesheet builds on these.
   ────────────────────────────────────────────────────────────── */

/* — Reset — */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: #8D69CA; } /* floor behind .page-bg */
body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* No opaque body background — it would paint OVER the z-index:-1 mesh
     and hide it. The floor colour lives on html instead (behind the
     fixed .page-bg), so there's no flash before the canvas paints. */
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* — Brand tokens: canonical YUL AM:PM ramp — */
:root {
  --coral:    #E8785F;
  --peach:    #F5D7CC;
  --lavender: #B28FE3;
  --accent:   #A88BE7;
  --sky:      #2E6FC9;   /* sampled from the hero/footer sky photos */
  --plum:     #7C6480;   /* muted privacy-card plum */
  --maxw: 1040px;        /* mockups are ~1040 wide */
}

/* — Fixed page background — a full-bleed, FIXED (non-scrolling) layer
   behind every section except the hero + footer photos (which paint
   opaque). It hosts an animated WebGL mesh (js/mesh.js) of soft drifting
   lavender/violet/pink blobs — the brand canvas the content scrolls over.
   Falls back to a static CSS gradient if WebGL / reduced-motion. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Static fallback gradient (also shows for the instant before the
     canvas paints): lavender-forward, matching the mid-page mood. */
  background:
    radial-gradient(70% 70% at 18% 12%,  #D6A8DE 0%, rgba(214,168,222,0) 60%),
    radial-gradient(60% 60% at 88% 16%,  #E6B7CF 0%, rgba(230,183,207,0) 60%),
    radial-gradient(90% 90% at 50% 100%, #A98AE0 0%, rgba(169,138,224,0) 70%),
    #B894E0;
}
#mesh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  #mesh { display: none; }   /* fall back to the static gradient above */
}

/* — Layout helpers — */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
section { position: relative; }

/* ══════════════════════════════════════════════════════════════
   GLASS CTA — the app's sheet CTA (glassAccentCapsule). A soft,
   translucent Liquid-Glass capsule, white text, cursor-tracked
   specular (js/glass-cta.js). .glass-sm is the nav-sized variant.
   ══════════════════════════════════════════════════════════════ */
.glass-root {
  --glass-height: 60px;
  --glass-content-padding-inline: 1.7em;
  --glass-border-width: clamp(1px, 0.0625em, 4px);
  --glass-text-color: #ffffff;
  --glass-font-size: 19px;
  --glass-font-weight: 600;
  --glass-letter-spacing: -0.18px;
  --glass-content-text-shadow: none;
  /* Soft, translucent (~0.40 lavender) so the bg/photo reads through. */
  --glass-surface-background:
    linear-gradient(-75deg, #ffffff26, #ffffff4d, #ffffff26),
    rgba(168, 139, 231, 0.40);
  --glass-surface-shadow:
    inset 0 0.125em 0.125em #0000000d,
    inset 0 -0.125em 0.125em #ffffff80;
  --glass-pointer-x: 50%;
  --glass-pointer-y: 50%;
  --glass-hover: 0;
  isolation: isolate;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 999vw;
  display: inline-flex;
}
.glass-root:hover { --glass-hover: 1; }
.glass-root.glass-sm {
  --glass-height: 44px;
  --glass-font-size: 15px;
  --glass-content-padding-inline: 1.25em;
}

.glass-surface {
  z-index: 2;
  box-sizing: border-box;
  height: var(--glass-height);
  padding-inline: 0;
  background: var(--glass-surface-background);
  box-shadow: var(--glass-surface-shadow);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  color: inherit;
  border-radius: 999vw;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.glass-surface::after {
  content: "";
  z-index: 1;
  position: absolute;
  width: calc(100% + var(--glass-border-width));
  height: calc(100% + var(--glass-border-width));
  top: calc(0% - var(--glass-border-width) / 2);
  left: calc(0% - var(--glass-border-width) / 2);
  padding: var(--glass-border-width);
  box-sizing: border-box;
  background:
    linear-gradient(140deg,
      #ffffffcc 0%, #ffffff4d 35%, #ffffff26 65%, #ffffff40 100%);
  box-shadow: inset 0 0 0 calc(var(--glass-border-width) / 2) #ffffff4d;
  border-radius: 999vw;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.glass-glow {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 999vw;
  background: radial-gradient(
    circle 120px at var(--glass-pointer-x) var(--glass-pointer-y),
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 32%,
    rgba(255, 255, 255, 0) 64%);
  opacity: var(--glass-hover);
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}
@media (prefers-reduced-motion: reduce) { .glass-glow { display: none; } }
.glass-content {
  z-index: 2;
  width: 100%;
  height: 100%;
  padding-inline: var(--glass-content-padding-inline);
  color: var(--glass-text-color);
  font-size: var(--glass-font-size);
  font-weight: var(--glass-font-weight);
  letter-spacing: var(--glass-letter-spacing);
  text-shadow: var(--glass-content-text-shadow);
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  position: relative;
}
.glass-content::after {
  content: "";
  z-index: 1;
  position: absolute;
  display: block;
  width: calc(100% - var(--glass-border-width));
  height: calc(100% - var(--glass-border-width));
  top: calc(0% + var(--glass-border-width) / 2);
  left: calc(0% + var(--glass-border-width) / 2);
  background: linear-gradient(-75deg, #fff0 0%, #ffffff80 40% 50%, #fff0 55%);
  mix-blend-mode: screen;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  border-radius: 999vw;
}
.glass-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.5em; }
.apple-mark { width: 0.95em; height: 1.05em; }

/* ══════════════════════════════════════════════════════════════
   GLASS CARD — lighter frosted-white treatment for widgets, chapter
   tiles, the privacy card, review cards. Refracts the page bg.
   ══════════════════════════════════════════════════════════════ */
.glass-card {
  position: relative;
  border-radius: 22px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  /* Edge-defining inset rim only — NO outer drop-shadow (it rings the
     glass as a dark halo, especially over the mesh). */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.45),
    inset 0 -1px 1px rgba(0,0,0,0.05);
}

/* ══════════════════════════════════════════════════════════════
   BREATHE — shared float utility. Any element with .breathe gently
   drifts up and back on a slow loop, like it's hovering and breathing.
   Reusable across screens; stagger multiple elements by overriding
   --breathe-delay so they fall out of sync (more organic than lockstep).
   Tunables: --breathe-rise (drift distance), --breathe-cycle (period).
   Honours Reduce Motion — the animation is removed entirely below.
   ══════════════════════════════════════════════════════════════ */
.breathe {
  --breathe-rise: 8px;
  --breathe-cycle: 9s;
  --breathe-delay: 0s;
  animation: breathe var(--breathe-cycle) ease-in-out var(--breathe-delay) infinite;
  /* Animate `translate` (not the `transform` shorthand) so .breathe never
     clobbers an element's own rotate/translate. No `will-change` — leaving
     it on permanently pins a GPU layer per element and causes scroll jank;
     a single translate keyframe is cheap enough without it. */
}
@keyframes breathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-1 * var(--breathe-rise)); }
}
@media (prefers-reduced-motion: reduce) {
  .breathe { animation: none; translate: 0 0; }
}