/* Looks: alternative palettes and motifs from the moodboard
   (Inspiration/: Dune, Foundation, The Hunger Games: Sunrise on the Reaping),
   switched with html[data-look] by js/looks.js. "current" is the default and
   is not styled here. Backgrounds come from css/background.css (generated);
   this file holds each look's headline gradient and motif. Every color is
   clean (no muddy shades) and the backgrounds keep secondary text above 4.5:1. */

/* motif layer: one decorative element behind the home screen's line, filling
   the art area between the top of the screen and the chunky bar */
.motif{position:absolute;inset:0;z-index:-1;pointer-events:none;display:none}

/* ---- Current (default): the Chromatica palette. A home line in MF Splash Blend's colors and
   Foundation's triangle lattice (animated by js/lattice.js) on the deep water ---- */
.motif-lattice{position:absolute;inset:0;z-index:-2;pointer-events:none;display:none}
:root:not([data-look]) .spectrum-gold{background-image:var(--platinum-metal)}
/* the home line in MF Splash Blend's colors: the inks' red-eye group (255 0 0) and cyan-eye
   group (0 227 254) screened together (255 227 254), screened in turn onto the splash's pink
   glow beneath: the collapsed MF's core, (255 238 255), over that glow */
:root:not([data-look]) .home-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--title-ink);animation:none;
  text-shadow:0 0 .064em color-mix(in oklch, var(--glow-pink) calc(100% * var(--glow, 1)), transparent),0 0 .064em color-mix(in oklch, var(--glow-pink) calc(100% * var(--glow, 1)), transparent)}
/* the word "Color", a neon membrane: set in MF Caps Black like the rest of the line, unfilled, its
   outline a bright lagoon stroke (lit toward the text ink) with a soft lagoon glow, like the
   chromatophores' open cells. Stroke and glow are in em so they scale with the line; the glow fades
   in with the chroma (--glow) */
:root:not([data-look]) .home-title .home-color{color:transparent;font-family:var(--font-caps);font-weight:900;text-shadow:none;   /* the line's pink halo would show through the hollow letters */
  -webkit-text-stroke:.026em color-mix(in oklch, var(--lagoon-420), var(--text-strong) 25%);
  filter:drop-shadow(0 0 .05em color-mix(in oklch, var(--lagoon-420) calc(100% * var(--glow, 1)), transparent))
    drop-shadow(0 0 .16em color-mix(in oklch, var(--lagoon-220) calc(70% * var(--glow, 1)), transparent))}
/* word spaces, closed up to read as one optical gap, loose at full width against MF Caps' 0.12em
   letter gaps. R-T sits a little tighter in ink than E-S to look the same: the T's arm overhangs
   open space, which reads as extra air */
:root:not([data-look]) .home-title > span:nth-child(1){word-spacing:-.11em}
:root:not([data-look]) .home-title > span:nth-child(3){word-spacing:-.1em}
/* its light spills onto the neighbouring letters' halos: js/title-light.js */
:root:not([data-look]) .motif-lattice{display:block;opacity:.32;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 520' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='t' width='60' height='104' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0L60 104M60 0L0 104M0 0H60M0 52H60' fill='none' stroke='%23e0c79b' stroke-width='1.4'/%3E%3C/pattern%3E%3CradialGradient id='g' cx='0.78' cy='0.35' r='0.5'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='0.35' stop-color='%23fff' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='1200' height='520' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='1200' height='520' fill='url(%23t)' mask='url(%23m)'/%3E%3C/svg%3E") center/cover no-repeat}
:root:not([data-look]) .motif-lattice.is-live{background:none;opacity:1}   /* js/lattice.js draws it, animated */

/* ---- Dune: Arrakis night, spice-sand headline, a horizon line ---- */
:root[data-look="dune"] .spectrum-gold{background-image:linear-gradient(90deg,var(--hi-45),var(--hi-60),var(--hi-75),var(--hi-60),var(--hi-45))}
:root[data-look="dune"] :is(.intro,.home-copy) .eyebrow{font-weight:400;letter-spacing:.42em}
:root[data-look="dune"] .motif{display:block;inset:auto 0 18px;height:2px;
  background:linear-gradient(90deg,transparent,var(--hi-60) 30%,var(--hi-75) 50%,var(--hi-60) 70%,transparent);
  box-shadow:0 0 18px 2px color-mix(in oklch,var(--hi-60) calc(55% * var(--glow, 1)),transparent),0 0 60px 8px color-mix(in oklch,var(--hi-45) calc(25% * var(--glow, 1)),transparent)}

/* ---- Foundation: deep teal, champagne gold, the interlocking triangles ---- */
:root[data-look="foundation"] .spectrum-gold{background-image:linear-gradient(90deg,oklch(0.80 0.11 80),oklch(0.90 0.08 88),oklch(0.95 0.05 95),oklch(0.90 0.08 88),oklch(0.80 0.11 80))}
:root[data-look="foundation"] .motif{display:block;opacity:.38;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 520' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='t' width='60' height='104' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0L60 104M60 0L0 104M0 0H60M0 52H60' fill='none' stroke='%23d9be86' stroke-width='1.4'/%3E%3C/pattern%3E%3CradialGradient id='g' cx='0.78' cy='0.35' r='0.5'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='0.35' stop-color='%23fff' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='1200' height='520' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='1200' height='520' fill='url(%23t)' mask='url(%23m)'/%3E%3C/svg%3E") center/cover no-repeat}

/* ---- Capitol: propaganda plum, a full-rainbow headline, a radiating sunburst ---- */
:root[data-look="capitol"] .spectrum-gold{background-image:var(--spectrum-hi)}
:root[data-look="capitol"] .motif{display:block;opacity:.32;
  background:repeating-conic-gradient(from 0deg at 50% 62%,var(--ink-0) 0 4deg,var(--ink-45) 4deg 8deg,var(--ink-90) 8deg 12deg,var(--ink-150) 12deg 16deg,var(--ink-210) 16deg 20deg,var(--ink-285) 20deg 24deg);
  -webkit-mask:radial-gradient(60% 75% at 50% 62%,#000 0,transparent 70%);mask:radial-gradient(60% 75% at 50% 62%,#000 0,transparent 70%)}

/* ---- Deco: ink black, metallic gold, an art-deco fan ---- */
:root[data-look="deco"] .spectrum-gold{background-image:linear-gradient(90deg,var(--ink-75) 0%,var(--hi-90) 18%,oklch(0.96 0.06 95) 26%,var(--hi-75) 38%,var(--ink-90) 52%,var(--hi-90) 66%,oklch(0.96 0.06 95) 74%,var(--hi-75) 86%,var(--ink-75) 100%)}
:root[data-look="deco"] .motif{display:block;opacity:.3;inset:calc(var(--header-h) + 28px) var(--gutter) auto auto;width:min(520px,60vw);aspect-ratio:2/1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cpath d='M230 300A70 70 0 0 1 370 300M180 300A120 120 0 0 1 420 300M130 300A170 170 0 0 1 470 300M80 300A220 220 0 0 1 520 300M30 300A270 270 0 0 1 570 300M370.0 300.0L570.0 300.0M367.6 281.9L560.8 230.1M360.6 265.0L533.8 165.0M349.5 250.5L490.9 109.1M335.0 239.4L435.0 66.2M318.1 232.4L369.9 39.2M300.0 230.0L300.0 30.0M281.9 232.4L230.1 39.2M265.0 239.4L165.0 66.2M250.5 250.5L109.1 109.1M239.4 265.0L66.2 165.0M232.4 281.9L39.2 230.1M230.0 300.0L30.0 300.0' fill='none' stroke='%23f2c14e' stroke-width='1.6'/%3E%3Cpath d='M260 300A40 40 0 0 1 340 300Z' fill='%23f2c14e'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-look="deco"] .section-head::after{background:linear-gradient(90deg,var(--hi-90),var(--ink-75) 40%,transparent)}