/* ==========================================================================
   VISUAL UPGRADES overlay  -  loads LAST on every page (after site.css and page CSS).
   Delete this file + scripts/upgrades.js and the two tags in each page <head> to revert.
   Numbers match the idea list (1-14).
   New infinite animations are listed in the html.paused rule at the bottom.
   ========================================================================== */

:root {
  /* 12. extra depth tokens */
  --sand-mid: #f1e6cf;
  --sunset: linear-gradient(135deg, #c4592a 0%, var(--terracotta) 45%, #8a3a15 100%);
  --sunset-soft: linear-gradient(145deg, var(--plumeria-soft) 0%, var(--sand-soft) 70%);
  --hairline: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(58, 36, 24, .08) 45%, rgba(13, 74, 87, .18));
  --wave-edge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0 30c120-26 240-26 360-6s240 30 360 10 240-34 360-14 240 20 360 4v36H0Z' fill='%23f7efdf'/></svg>");
  --header-bg: rgba(247, 239, 223, .94);
  --header-line: rgba(58, 36, 24, .1);
  --surface-white: #fff;
}

/* ---------- 1. Two-layer cards: paper highlight + gradient hairline ---------- */
.card, .stat, .person, .set-card, .lt-card, .question-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), var(--shadow-soft);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--hairline);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card-link:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-lift); }
/* featured variant: warm wash (home: the middle card) */
.card--featured, .features .card:nth-child(2) { background: var(--sunset-soft); }
/* soft glow behind card icon on hover */
.card-link:hover .card-icon { box-shadow: 0 0 0 6px var(--plumeria-soft), var(--shadow-soft); }

/* ---------- 2. Quiet wave edge for inner pages ---------- */
.page-hero--flat, .v-hero {
  position: relative; isolation: isolate;
  padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}
.page-hero--flat::before {
  content: ""; position: absolute; z-index: -1; right: -6%; top: -30%;
  width: clamp(200px, 30vw, 380px); aspect-ratio: 1; border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  background: radial-gradient(circle at 35% 35%, var(--plumeria-soft), var(--plumeria) 60%, #eaa974);
  opacity: .5; animation: drift 24s ease-in-out infinite alternate;
}
body.has-wash > main::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 5vw, 56px); z-index: 1;
  background: var(--wave-edge) center bottom / 100% 100% no-repeat; pointer-events: none;
}
/* pages with no hero (quiz, profile, settings...): a soft wash under the header */
body.has-wash > main { position: relative; }
body.has-wash > main::before {
  top: 0; bottom: auto; height: clamp(120px, 18vw, 200px); z-index: 0; transform: scaleY(-1);
  background: var(--wave-edge) center top / 100% 100% no-repeat; opacity: 0; /* wave only; wash below */
}
body.has-wash > main > *:not([aria-hidden]) { position: relative; z-index: 1; }

/* ---------- 6. Glass header that settles on scroll ---------- */
.site-header {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), background-color .3s;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--header-line) 15%, var(--plumeria) 50%, var(--header-line) 85%, transparent);
}
.site-header .wrap { transition: min-height .3s var(--ease); }
.brand svg { transition: transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease); }
.brand:hover svg { transform: rotate(-6deg) scale(1.05); }
html.scrolled .site-header { box-shadow: 0 10px 30px -14px rgba(8, 52, 62, .35); }
@media (min-width: 900px) {
  html.scrolled .site-header .wrap { min-height: 54px; }
  html.scrolled .brand svg { width: 34px; height: 34px; }
}

/* ---------- 3. Wave-fill progress + gradient ring ---------- */
.progress { box-shadow: inset 0 1px 2px rgba(58, 36, 24, .15); }
.progress > span {
  position: relative; min-width: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'><path d='M0 8c4-6 8-6 12 0s8 6 12 0 6-4 8-3v11H0Z' fill='white' fill-opacity='.22'/></svg>") 0 100% / 32px 100% repeat-x,
    linear-gradient(90deg, var(--plumeria), var(--terracotta));
  animation: wavefill 3s linear infinite;
}
.progress > span::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 1.15em; height: 1.15em; min-width: 12px; min-height: 12px; transform: translateY(-50%);
  border-radius: 50%; background: #fff; border: 3px solid var(--terracotta); box-shadow: 0 2px 6px rgba(58, 36, 24, .3);
}
.progress > span[style*="width: 0%"]::after, .progress > span[style*="width:0%"]::after { display: none; }
@keyframes wavefill { to { background-position: 32px 100%, 0 0; } }
.ring .ring-value { stroke: url(#ring-grad); filter: drop-shadow(0 1px 2px rgba(165, 72, 31, .35)); }

/* ---------- 4. Numbers as design ---------- */
.stat strong, #streak-display strong {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--ocean-deep), var(--ocean)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 600; }
.stat-strip {
  display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr);
  width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.stat-strip .stat { text-align: center; align-items: center; padding: 1.1rem .75rem; }
@media (max-width: 520px) { .stat-strip { gap: .5rem; } .stat-strip .stat strong { font-size: 1.6rem; } .stat-strip .stat span { font-size: .62rem; letter-spacing: .06em; } }

/* ---------- 7. Flashcard: tilt + burst ---------- */
.device { transition: transform .25s var(--ease), box-shadow .3s; transform-style: preserve-3d; will-change: transform; }
.device::before {
  content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: inherit;
  background: radial-gradient(circle at 70% 20%, rgba(243, 201, 164, .8), transparent 60%); filter: blur(18px); opacity: .7;
}
.device .face.back {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><path d='M18 4 32 18 18 32 4 18Z' fill='none' stroke='%230d4a57' stroke-opacity='.09' stroke-width='1.5'/></svg>"),
    var(--ocean-mist);
}
.burst { position: fixed; z-index: 150; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; animation: burst .75s var(--ease) forwards; }
@keyframes burst { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ---------- 8. Quiz feedback ---------- */
.mc-option { position: relative; overflow: hidden; }
.mc-option::after {
  content: ""; position: absolute; left: 1.5rem; top: 50%; width: 10px; height: 10px; border-radius: 50%; margin: -5px;
  background: rgba(47, 107, 58, .35); transform: scale(0); opacity: 0; pointer-events: none;
}
.mc-option[aria-checked="true"]::after { animation: ripple .6s var(--ease); }
@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(40); opacity: 0; } }
.mc-option[aria-checked="true"] .mc-key { font-size: 0; position: relative; }
.mc-option[aria-checked="true"] .mc-key::after {
  content: ""; position: absolute; left: 50%; top: 46%; width: 8px; height: 14px; border: solid var(--ocean-deep); border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(45deg); animation: pop .35s var(--spring);
}
@keyframes pop { from { transform: translate(-50%, -50%) rotate(45deg) scale(0); } }
.q-prompt { background: linear-gradient(160deg, var(--sand-deep), var(--sand-mid)); }
.dot.is-answered::before { background: linear-gradient(135deg, var(--ocean-mist), var(--sea)); }

/* ---------- 9. Learning trail: ripples, sheen, dusk ---------- */
.lt-node { position: relative; overflow: visible; }
.lt-node::before, .lt-node::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--ring2, rgba(143, 194, 189, .5)); opacity: 0;
  animation: ripple-ring 4.5s ease-out infinite;
}
.lt-node::after { animation-delay: 2.2s; }
.lt-row:nth-child(even) .lt-node::before { animation-delay: .8s; }
@keyframes ripple-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
.lt-node { background-image: linear-gradient(150deg, rgba(255, 255, 255, .55), transparent 55%); background-color: var(--fill); }
.lt-card { transition: transform .35s var(--spring), box-shadow .3s; }
.lt-card:hover { transform: translateY(-50%) translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-lift); }
.lt-bird { animation: bob 7s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translate3d(0, 0, 0) rotate(-1.5deg); } to { transform: translate3d(0, -8px, 0) rotate(1.5deg); } }

/* ---------- 10/11. Type moments + divider variety ---------- */
.hero h1 { letter-spacing: -.025em; }
.hero h1 span { letter-spacing: 0; }
.device .face strong { letter-spacing: -.02em; }
.eyebrow { position: relative; padding-left: 1.6rem; }
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1.1rem; height: 8px; transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'><path d='M0 8 5.5 1 11 8l5.5-7L22 8' fill='none' stroke='%23a5481f' stroke-width='1.8' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.proverb-band .eyebrow::before { filter: brightness(1.8); }
.dev-top .eyebrow, .stat-strip + * .eyebrow { padding-left: 1.6rem; }
.section-head .eyebrow, .center .eyebrow { padding-left: 0; }
.section-head .eyebrow::before, .center .eyebrow::before { display: none; }
/* scalloped divider replaces the wave under the features section */
.features { position: relative; }
.features::after {
  content: ""; display: block; height: 28px; margin: clamp(2rem, 5vw, 3.5rem) auto 0; width: min(100% - 2 * var(--gutter), var(--max));
  /* arcs sit 2px below the tile top so the 2.5px stroke is not clipped */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='28' viewBox='0 0 52 28'><path d='M2 26a24 24 0 0 1 48 0' fill='none' stroke='%23a5481f' stroke-opacity='.45' stroke-width='2.5'/><path d='M12 26a14 14 0 0 1 28 0' fill='none' stroke='%232f6b6c' stroke-opacity='.5' stroke-width='2.5'/></svg>") center / 52px 28px repeat-x;
}
.about { background: linear-gradient(180deg, var(--sand) 0%, var(--sand-mid) 100%); }

/* primary button: flat terracotta fill (no gradient, no gloss) */
.btn-primary { background: var(--terracotta); border-color: transparent; }
.btn-primary:hover { background: var(--terracotta-dark); }
.btn { position: relative; overflow: hidden; }

/* ---------- 13. Empty + loading states ---------- */
.empty-state { background: var(--sunset-soft); position: relative; }
.empty-state svg { filter: drop-shadow(0 4px 0 rgba(165, 72, 31, .15)); }
.skeleton, [aria-busy="true"] {
  background: linear-gradient(100deg, var(--sand-deep) 30%, var(--sand-soft) 50%, var(--sand-deep) 70%) 0 0 / 220% 100%;
  animation: shimmer 1.6s linear infinite; border-radius: var(--r-md);
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- 5. Scroll-linked polish (progressive: only where supported) ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero .blob-sun, .hero .blob-sea, .hero .blob-leaf {
      animation: parallax linear both; animation-timeline: scroll(root); animation-range: 0 90vh;
    }
    .hero .blob-sea { --py: -60px; } .hero .blob-sun { --py: 90px; } .hero .blob-leaf { --py: -120px; }
    .waves .w1, .waves .w2, .waves .w3 { translate: 0 0; }
    .page-hero--flat::before { animation: parallax linear both; animation-timeline: scroll(root); animation-range: 0 60vh; --py: 60px; }
  }
}
@keyframes parallax { to { translate: 0 var(--py, 60px); } }

/* ---------- motion hygiene ---------- */
html.paused .page-hero--flat::before, html.paused .progress > span, html.paused .skeleton, html.paused .lt-node::before, html.paused .lt-node::after, html.paused .lt-bird { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .device, .site-header, .brand svg { transition: none !important; }
  .lt-card:hover { transform: translateY(-50%); }
  .burst { display: none; }
  .lt-node::before, .lt-node::after { display: none; }
}
/* more breathing room under the proverb text: the wave divider eats the bottom padding */
.proverb-band { padding-bottom: clamp(6.25rem, 12.5vw, 10rem); }

/* ---------- Home: drifting blobs + words in the tan area below the proverb band ---------- */
.home-lower { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--sand) 0%, var(--sand-mid) 100%); }
.home-lower .about { background: none; }
.home-lower .hl-b1 { width: clamp(200px, 30vw, 400px); left: -10%; top: 4%; }
.home-lower .hl-b2 { width: clamp(180px, 26vw, 340px); right: -9%; top: 22%; }
.home-lower .hl-b3 { width: clamp(80px, 12vw, 150px); left: 8%; top: 46%; }
.home-lower .hl-b4 { width: clamp(180px, 28vw, 360px); left: -8%; bottom: 8%; }
.home-lower .hl-b5 { width: clamp(150px, 22vw, 280px); right: -6%; bottom: 2%; }
.home-lower .floaters span { opacity: .22; }
.home-lower .hl-f1 { font-size: 2.2rem; right: 8%; top: 6%; }
.home-lower .hl-f2 { font-size: 1.7rem; left: 6%; top: 24%; color: var(--terracotta); animation-delay: -4s; animation-duration: 17s; }
.home-lower .hl-f3 { font-size: 2rem; right: 14%; top: 42%; animation-delay: -8s; animation-duration: 19s; }
.home-lower .hl-f4 { font-size: 1.6rem; left: 44%; top: 62%; color: var(--terracotta); animation-delay: -2s; }
.home-lower .hl-f5 { font-size: 2.1rem; left: 4%; bottom: 22%; animation-delay: -10s; animation-duration: 16s; }
.home-lower .hl-f6 { font-size: 1.8rem; right: 6%; bottom: 10%; color: var(--terracotta); animation-delay: -6s; animation-duration: 18s; }
@media (max-width: 899px) { .home-lower .hl-f3, .home-lower .hl-f4 { display: none; } .home-lower .hl-f2 { left: auto; right: 6%; } }

/* ---------- Circles throughout: page-wide drifting blobs, nothing clipped at the hero edge ---------- */
.page-hero--flat, .v-hero { overflow: visible; }
body { position: relative; }
.page-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-deco .blob { z-index: 0; }
.page-deco .pd1 { width: clamp(200px, 28vw, 380px); right: -9%; top: 300px; }
.page-deco .pd2 { width: clamp(170px, 24vw, 320px); left: -9%; top: 860px; }
.page-deco .pd3 { width: clamp(80px, 11vw, 140px); right: 10%; top: 1250px; }
.page-deco .pd4 { width: clamp(190px, 26vw, 340px); right: -8%; top: 1700px; }
.page-deco .pd5 { width: clamp(160px, 22vw, 300px); left: -8%; top: 2300px; }
.page-deco .pd6 { width: clamp(90px, 12vw, 150px); left: 12%; top: 2750px; }
.page-deco .pd7 { width: clamp(180px, 26vw, 330px); right: -7%; top: 3250px; }
.page-deco .blob { opacity: .5; }
@media (max-width: 720px) { .page-deco .blob { opacity: .35; } }

.page-hero--flat::after { content: none; }