/**
 * Public light-theme visual language.
 * Portal and dark stay out. Pair assignment (SVG × palette) is in visual.js.
 */

html:not([data-theme="dark"]) {
  --ocean: #a8cdd6;
  --sand: #e2d2b4;
  --rise: 1rem;
  --dur: 1s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hover-sat: 1.5;
  --hover-dur: 0.65s;
  --wave-h: 4rem;
  --tint-teal-hold: color-mix(in srgb, #1a5f7a 22%, #ffffff);
  --tint-gulf: color-mix(in srgb, #0d3d4c 28%, #ffffff);
  --tint-sea-green: color-mix(in srgb, #1a6e68 28%, #ffffff);
  --tint-lagoon: color-mix(in srgb, #3d7d80 32%, #ffffff);
  --tint-coral-hold: color-mix(in srgb, #b44a32 24%, #ffffff);
  --tint-sand-hold: color-mix(in srgb, #c4ae7a 42%, #ffffff);
  overflow-x: visible;
}

html:not([data-theme="dark"]) body {
  overflow-x: visible;
}

html:not([data-theme="dark"]) .hero {
  border-bottom: none;
}

html:not([data-theme="dark"]) .section--alt {
  background: var(--color-bg);
  border-block: none;
}

html:not([data-theme="dark"]) .section--quotes {
  background: var(--color-bg);
  border-block: none;
}

/* Palettes */
html:not([data-theme="dark"]) [data-palette="mid-water"] { --ocean: #a8cdd6; --sand: #e2d2b4; }
html:not([data-theme="dark"]) [data-palette="seafoam"] { --ocean: #a8d6d0; --sand: #e2d2b4; }
html:not([data-theme="dark"]) [data-palette="lagoon"] { --ocean: #a8d6c5; --sand: #e2d2b4; }
html:not([data-theme="dark"]) [data-palette="teal"] { --ocean: #a8d6d6; --sand: #e2d2b4; }
html:not([data-theme="dark"]) [data-palette="straw-floor"] { --ocean: #a8cdd6; --sand: #e2dab4; }
html:not([data-theme="dark"]) [data-palette="coral-floor"] { --ocean: #a8cdd6; --sand: #e2c0b4; }
html:not([data-theme="dark"]) [data-palette="gold-floor"] { --ocean: #a8cdd6; --sand: #e2dfb4; }
html:not([data-theme="dark"]) [data-palette="seafoam-straw"] { --ocean: #a8d6d0; --sand: #e2dab4; }
html:not([data-theme="dark"]) [data-palette="lagoon-peach"] { --ocean: #a8d6c5; --sand: #e2c8b4; }
html:not([data-theme="dark"]) [data-palette="teal-peach"] { --ocean: #a8d6d6; --sand: #e2c8b4; }
html:not([data-theme="dark"]) [data-palette="lagoon-gold"] { --ocean: #a8d6c5; --sand: #e2dfb4; }
html:not([data-theme="dark"]) [data-palette="cyan-straw"] { --ocean: #a8c7d6; --sand: #e2dab4; }
html:not([data-theme="dark"]) [data-palette="seafoam-coral"] { --ocean: #a8d6d0; --sand: #e2c0b4; }
html:not([data-theme="dark"]) [data-palette="teal-gold"] { --ocean: #a8d6d6; --sand: #e2dfb4; }

/* Wave masks */
html:not([data-theme="dark"]) [data-wave="gentle-sine"] {
  --wave-h: 3.5rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20L0%2C48%20C200%2C18%20400%2C78%20600%2C48%20C800%2C18%201000%2C78%201200%2C48%20L1200%2C80%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="sine-both"] {
  --wave-h: 3.5rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20L0%2C48%20C200%2C18%20400%2C78%20600%2C48%20C800%2C18%201000%2C78%201200%2C48%20L1200%2C80%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="two-peak"] {
  --wave-h: 3.5rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20L0%2C50%20Q150%2C18%20300%2C50%20T600%2C50%20T900%2C50%20T1200%2C50%20L1200%2C80%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="deep-swell"] {
  --wave-h: 4.5rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20L0%2C28%20C250%2C88%20450%2C-8%20700%2C36%20C900%2C68%201050%2C8%201200%2C32%20L1200%2C80%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="ripple"] {
  --wave-h: 3.5rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20L0%2C42%20Q100%2C12%20200%2C42%20T400%2C42%20T600%2C42%20T800%2C42%20T1000%2C42%20T1200%2C42%20L1200%2C80%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="bulge"] {
  --wave-h: 4.5rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20Q600%2C-16%201200%2C80%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="scoop"] {
  --wave-h: 3.75rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C0%20L1200%2C0%20L1200%2C16%20Q600%2C78%200%2C16%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="double-wave"] {
  --wave-h: 3.5rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20L0%2C48%20C200%2C18%20400%2C78%20600%2C48%20C800%2C18%201000%2C78%201200%2C48%20L1200%2C80%20Z%22/%3E%3C/svg%3E");
  --wave-mask-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20L0%2C52%20C180%2C22%20360%2C72%20540%2C42%20C720%2C12%20900%2C68%201200%2C40%20L1200%2C80%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="s-curve"] {
  --wave-h: 4.25rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C80%20L0%2C58%20C300%2C8%20900%2C108%201200%2C22%20L1200%2C80%20Z%22/%3E%3C/svg%3E");
}
html:not([data-theme="dark"]) [data-wave="tall-swell"] {
  --wave-h: 4.25rem;
  --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C120%20L0%2C62%20C200%2C10%20400%2C110%20600%2C62%20C800%2C14%201000%2C110%201200%2C62%20L1200%2C120%20Z%22/%3E%3C/svg%3E");
}

/* Even bands: ocean → sand over a fixed distance (not % of section height).
   Percentage fades collapse into a hard seam when the band is short. */
html:not([data-theme="dark"]) main > section:nth-of-type(even) {
  position: relative;
  overflow: visible;
  margin: 0;
  padding-block: var(--space-xl) var(--space-2xl);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--sand);
  background-image: linear-gradient(
    180deg,
    var(--ocean) 0,
    var(--ocean) 4rem,
    color-mix(in srgb, var(--ocean) 45%, var(--sand)) 12rem,
    var(--sand) 22rem
  );
}

/* Wave already separates sections — keep real air under the trough.
   Min-height keeps the fade from meeting the floor while still mid-blend. */
html:not([data-theme="dark"]) main > section.sea-band {
  padding-top: var(--space-xl);
  min-height: calc(22rem + var(--wave-h, 4rem));
}

html:not([data-theme="dark"]) .page-plain main > section:nth-of-type(even),
html:not([data-theme="dark"]) .page-plain main > section:nth-of-type(even).section--alt {
  margin: 0;
  padding-top: 0;
  min-height: 0;
  background: var(--color-bg);
  background-image: none;
}

html:not([data-theme="dark"]) .page-paper main > section:nth-of-type(even) {
  --vellum: #f0e4c4;
  --vellum-stain: rgba(140, 100, 48, 0.26);
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.5%27%2F%3E%3C%2Fsvg%3E");
  margin: 0 0 var(--space-2xl);
  min-height: 0;
  background-color: var(--vellum);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 42%, var(--vellum-stain) 100%),
    var(--grain);
  background-size: auto, 180px 180px;
}

html:not([data-theme="dark"]) .page-paper main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

html:not([data-theme="dark"]) .page-paper main > section:nth-of-type(even):last-child {
  margin-bottom: 0;
  flex: 1 0 auto;
}

.sea-band__edge {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wave-h, 5.5rem);
  z-index: 1;
  pointer-events: auto;
  -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat;
  mask: var(--wave-mask) center / 100% 100% no-repeat;
  transition: height var(--hover-dur) var(--ease);
}

.sea-band__edge--top {
  top: 0;
  transform: translateY(-99%);
  background-color: var(--ocean);
}

.sea-band__edge--floor {
  bottom: 0;
  transform: translateY(100%) scaleY(-1);
  transform-origin: top;
  background-color: var(--sand);
}

.sea-band__edge--layer2 {
  top: 0;
  transform: translateY(-92%);
  background-color: var(--ocean);
  opacity: 0.88;
  -webkit-mask: var(--wave-mask-2) center / 100% 100% no-repeat;
  mask: var(--wave-mask-2) center / 100% 100% no-repeat;
}

html:not([data-theme="dark"]) [data-wave="scoop"] .sea-band__edge--top {
  transform: none;
  background-color: var(--color-bg);
}

html:not([data-theme="dark"]) main > section:nth-of-type(even) {
  transition: filter var(--hover-dur) var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not([data-theme="dark"]) .sea-band:hover .sea-band__edge {
    height: calc(var(--wave-h) * 1.227);
  }

  html:not([data-theme="dark"]) .sea-band:hover {
    filter: saturate(var(--hover-sat));
  }
}

/* Dots are opt-in: add .section--dots on a section when needed. */
html:not([data-theme="dark"]) main > .section.section--dots {
  padding-top: calc(var(--space-2xl) + 3.5rem);
}

html:not([data-theme="dark"]) main > .section.section--dots .container::before {
  content: "·  ·  ·";
  display: block;
  position: absolute;
  top: calc(-3.5rem + var(--space-lg));
  left: 0;
  right: 0;
  font-family: var(--font-display);
  font-size: 2.55rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--color-accent);
  text-align: center;
  pointer-events: none;
}

html:not([data-theme="dark"]) main > section .container {
  position: relative;
  z-index: 2;
}

/* Copy rise — light theme only. First block after the header matches dark (no rise). */
html:not([data-theme="dark"]) main > section:not(.hero):not(.page-header) .container {
  transform: translate3d(0, var(--rise), 0);
  transition: transform var(--dur) var(--ease);
}

html:not([data-theme="dark"]) main > .hero + section .container,
html:not([data-theme="dark"]) main > .page-header + section .container,
html:not([data-theme="dark"]) main > section.is-in .container,
html:not([data-theme="dark"]) main > section.sea-band .container {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="dark"]) main > section:not(.hero):not(.page-header) .container {
    transform: none !important;
    transition: none !important;
  }

  html:not([data-theme="dark"]) .sea-band,
  html:not([data-theme="dark"]) .sea-band__edge {
    transition: none !important;
  }
}