/* Memoroam — Streak demo overlay
   Two stages live inside one #streakOverlay:
   - .sk-question : 4-option cultural question
   - .sk-fact     : watercolour bg + paper plate with the cultural fact
   Both are sized to phone width and animate in with a slide+fade. */

.sk-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:8000;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  /* IMPORTANT: backdrop-filter is intentionally NOT on the base rule.
     A blur backdrop-filter forces the browser to composite a layer over the
     entire viewport every frame even at opacity:0, which makes the globe
     drag laggy when the overlay is "closed but mounted". It's added only on
     .is-open so the cost only happens during the demo itself. */
  transition:opacity .32s ease, visibility 0s linear .32s, background .4s ease;
}
.sk-overlay.is-open{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  background:rgba(14,21,32,.32);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  /* Make visibility flip to visible immediately on open so the fade-in
     starts right away (the close path keeps the .32s delay above). */
  transition:opacity .32s ease, visibility 0s linear 0s, background .4s ease;
}
.sk-overlay.is-card-up{
  background:rgba(14,21,32,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Hide globe pins during the demo so the gold country is the only visual
   element on the globe. Body gets is-streak-active when openStreakDemo
   fires; cleared on close. */
body.is-streak-active #globePinLayer{
  visibility:hidden;
}

/* Country splash — fades in centred over the globe between the pan settling
   and the question card sliding up. Pure label moment, no interactions. */
.sk-splash{
  position:absolute;
  top:38%;
  left:0;right:0;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px) scale(.96);
  transition:opacity .42s ease, transform .42s cubic-bezier(.32,.72,0,1);
}
.sk-overlay.is-splash-up .sk-splash{
  opacity:1;
  transform:translateY(0) scale(1);
}
.sk-splash-name{
  display:block;
  font-family:'Playfair Display', serif;
  font-size:46px;
  letter-spacing:.02em;
  color:#FBF6EC;
  text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.sk-splash-native{
  display:block;
  margin-top:6px;
  font-family:'Playfair Display', serif;
  font-size:24px;
  color:var(--gold-soft);
  letter-spacing:.05em;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}

.sk-card{
  width:100%;
  max-width:390px;
  background:var(--card);
  border-radius:28px 28px 0 0;
  padding:24px 22px 30px;
  transform:translateY(100%);
  transition:transform .48s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -20px 60px rgba(0,0,0,.18);
  overflow:hidden;
  position:relative;
}
.sk-overlay.is-card-up .sk-card{
  transform:translateY(0);
}

/* ── Header (shared) ─────────────────────────────────────── */
.sk-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.sk-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.sk-streak-badge{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--gold);
  background:rgba(214,165,71,.12);
  padding:5px 10px;
  border-radius:999px;
}
.sk-streak-badge svg{ flex:0 0 auto; }

/* ── Question card ───────────────────────────────────────── */
.sk-question-text{
  font-family:'Playfair Display', serif;
  font-size:22px;
  line-height:1.3;
  color:var(--text);
  margin-bottom:22px;
}
.sk-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sk-option{
  appearance:none;
  border:none;
  text-align:left;
  background:rgba(60,48,34,.04);
  color:var(--text);
  font-family:'DM Sans', sans-serif;
  font-size:15px;
  font-weight:500;
  padding:16px 18px;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(60,48,34,.10);
  transition:transform .12s ease, background .18s ease, box-shadow .18s ease;
  cursor:pointer;
  touch-action:pan-x pan-y;
  -webkit-tap-highlight-color:transparent;
}
.sk-option:active{ transform:scale(.98); }
.sk-option.is-correct{
  background:rgba(45,90,74,.16);
  box-shadow:inset 0 0 0 1.5px #2d5a4a;
  color:#1f3d34;
}
.sk-option.is-wrong{
  background:rgba(190,80,70,.10);
  box-shadow:inset 0 0 0 1.5px #c46c64;
  color:#7a3530;
}
.sk-option.is-disabled{ pointer-events:none; opacity:.6; }

/* ── Fact stage ──────────────────────────────────────────── */
/* Full-bleed watercolour. Lives at the overlay level (not inside the card)
   so it can fill the entire viewport when the fact stage activates. */
.sk-stage-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s ease;
}
.sk-overlay.is-fact-stage .sk-stage-bg{
  opacity:1;
}
/* During fact stage, the dark backdrop fades out so the watercolour is
   the only visible layer behind the floating plate. */
.sk-overlay.is-fact-stage{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* Hide the question card when the fact stage activates — slides off bottom. */
.sk-overlay.is-fact-stage .sk-card{
  transform:translateY(110%);
  opacity:0;
  pointer-events:none;
}

/* Centred floating plate. Translucent so the watercolour reads through;
   strong backdrop-blur keeps text legible against any artwork. Fades +
   scales in 600ms after the fact stage activates so the user takes in
   the art alone before the text arrives. */
/* backdrop-filter scoped to is-plate-up — same perf rationale as the
   other always-mounted overlays. When the plate is closed (opacity:0),
   no blur layer composited. */
/* Glass-pane plate. The blur was making it look "frosted card" — dropped
   to 4px so the watercolour stays crisp through the plate. Fill is just
   an 8% cream tint to barely define the area, with the inset border doing
   the heavy lifting on the plate edge. Text legibility comes from heavier
   text-shadows below, not from the plate fill. */
.sk-plate{
  position:absolute;
  top:50%;
  left:50%;
  width:calc(100% - 48px);
  max-width:340px;
  background:rgba(253,250,247,.08);
  border-radius:22px;
  padding:28px 26px 26px;
  box-shadow:0 22px 60px rgba(28,23,19,.30),
             inset 0 0 0 1.5px rgba(253,250,247,.55),
             inset 0 1px 0 rgba(255,255,255,.45);
  transform:translate(-50%, -50%) translateY(14px) scale(.96);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .55s ease, transform .55s cubic-bezier(.32,.72,0,1), visibility 0s linear .55s;
}
.sk-overlay.is-fact-stage.is-plate-up .sk-plate{
  opacity:1;
  transform:translate(-50%, -50%) translateY(0) scale(1);
  pointer-events:auto;
  visibility:visible;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s;
}

[data-theme="dark"] .sk-plate{
  background:rgba(36,32,25,.10);
  box-shadow:0 22px 60px rgba(0,0,0,.6),
             inset 0 0 0 1.5px rgba(255,255,255,.18),
             inset 0 1px 0 rgba(255,255,255,.06);
}
.sk-fact-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
/* Stronger white text-shadows so text holds even with minimal plate blur.
   The double-layered shadow (small + large) creates a soft halo around
   each glyph, masking detail in the watercolour without creating an
   obvious outline effect. */
.sk-fact-title{
  font-family:'Playfair Display', serif;
  font-size:26px;
  line-height:1.18;
  color:var(--text);
  margin-bottom:6px;
  text-shadow:0 1px 2px rgba(253,250,247,.85),
              0 0 8px rgba(253,250,247,.6);
}
.sk-fact-sub{
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  color:var(--muted);
  margin-bottom:14px;
  text-shadow:0 1px 2px rgba(253,250,247,.85),
              0 0 6px rgba(253,250,247,.5);
}
.sk-fact-body{
  font-family:'DM Sans', sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--text);
  margin-bottom:20px;
  text-shadow:0 1px 2px rgba(253,250,247,.85),
              0 0 6px rgba(253,250,247,.5);
}
.sk-fact-cta{
  appearance:none;
  border:none;
  width:100%;
  background:var(--text);
  color:var(--card);
  font-family:'DM Sans', sans-serif;
  font-size:15px;
  font-weight:600;
  padding:14px 0;
  border-radius:12px;
  cursor:pointer;
  touch-action:pan-x pan-y;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .18s ease;
}
.sk-fact-cta:active{ transform:scale(.98); }