/* SharkQuiz Underwater Theme */
.shq-quiz {
  --ocean-deep:#0e2a47;
  --ocean-mid:#0b5b8c;
  --ocean-bright:#14a3c7;
  --foam:#e6f7ff;
  --card-bg:rgba(255,255,255,0.08);
  --card-border:rgba(255,255,255,0.18);
  --ink:#06121e;
  --radius:16px;

  color: var(--foam);
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: clamp(18px,3.2vw,36px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(20,163,199,0.08), rgba(20,163,199,0) 40%),
    linear-gradient(180deg, var(--ocean-mid), var(--ocean-deep));
}

/* Decorative wave caps */
.shq-quiz::before,
.shq-quiz::after{
  content:"";
  position:absolute;
  left:0;
  width:140%;
  height:140px;
  pointer-events:none;
  background-repeat:repeat-x;
  background-size:contain;
  animation: shq-waveMove 24s linear infinite;
  opacity:.25;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.25));
}
.shq-quiz::before{
  top:-60px;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'>\
  <path fill='%2314a3c7' d='M0,0 C150,120 450,-40 600,60 C750,160 1050,20 1200,80 L1200,0 L0,0 Z'/></svg>");
}
.shq-quiz::after{
  bottom:-60px;
  transform: rotate(180deg);
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'>\
  <path fill='%230b5b8c' d='M0,0 C150,120 450,-40 600,60 C750,160 1050,20 1200,80 L1200,0 L0,0 Z'/></svg>");
}
@keyframes shq-waveMove{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-10%) }
}

/* Bubbles layer */
.shq-quiz .bubble-field{
  position:absolute; inset:0; pointer-events:none; opacity:.18;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.25) 0 6px, transparent 7px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.25) 0 4px, transparent 5px),
    radial-gradient(circle at 60% 30%, rgba(255,255,255,.25) 0 5px, transparent 6px),
    radial-gradient(circle at 35% 50%, rgba(255,255,255,.25) 0 3px, transparent 4px);
  animation: shq-bubbles 18s ease-in-out infinite alternate;
}
@keyframes shq-bubbles { 0%{transform:translateY(10px)} 100%{transform:translateY(-16px)} }

.shq-header{
  display:flex; align-items:center; gap:12px; margin-bottom:clamp(12px,2vw,18px);
}
.shq-title{ font-weight:800; font-size:clamp(1.1rem,2.8vw,1.6rem); text-shadow:0 1px 0 rgba(0,0,0,.3) }
.shq-progress{ margin-left:auto; opacity:.9 }

/* Base slide container */
.shq-slide{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius);
  padding: clamp(16px,2.6vw,24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  outline: none;
  /* Default animation (fallback) */
  animation: shq-slideIn .35s ease both;
}
.shq-quiz[data-transition="slide"][data-transition-dir="forward"] .shq-slide{
  animation: shq-slideInRight .35s ease both;
}
.shq-quiz[data-transition="slide"][data-transition-dir="back"] .shq-slide{
  animation: shq-slideInLeft .35s ease both;
}
.shq-quiz[data-transition="fade"] .shq-slide{
  animation: shq-fadeIn .28s ease both;
}

@keyframes shq-slideIn{
  from{ transform: translateY(12px); opacity: 0 }
  to{ transform: translateY(0); opacity: 1 }
}
@keyframes shq-fadeIn{
  from{ opacity: 0 }
  to{ opacity: 1 }
}
@keyframes shq-slideInRight{
  from{ transform: translateX(40px); opacity: 0 }
  to{ transform: translateX(0);     opacity: 1 }
}
@keyframes shq-slideInLeft{
  from{ transform: translateX(-40px); opacity: 0 }
  to{ transform: translateX(0);       opacity: 1 }
}

.shq-prompt{
  font-weight:800; line-height:1.25; margin-bottom:12px; color:#dff7ff;
  font-size: clamp(1.05rem,2.6vw,1.35rem);
}
.shq-media{ margin:10px 0 6px }
.shq-media img{ display:block; width:100%; height:auto; border-radius:12px; }

.shq-answers{ display:grid; gap:clamp(10px,2.2vw,14px); margin-top:8px; }
.shq-answer{ position:relative; }
.shq-answer input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}
.shq-answer label{
  display:block; cursor:pointer; border-radius:14px;
  padding: clamp(12px,2.4vw,16px) clamp(14px,3vw,20px);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--card-border); color:#f1fbff;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.shq-answer label:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.25); border-color:rgba(255,255,255,.28) }
.shq-answer input[type="radio"]:checked + label{
  border-color: rgba(20,163,199,.8);
  background: linear-gradient(180deg, rgba(20,163,199,.22), rgba(20,163,199,.06));
  box-shadow: 0 8px 20px rgba(20,163,199,.25);
}
.shq-answer input[type="radio"]:checked + label::after{
  content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:22px; height:22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23e6f7ff' d='M3 20c7-6 9-11 9-16 6 4 6 9 9 16H3z'/></svg>");
  opacity:.85;
}

.shq-short-label{ margin-bottom:6px; display:block; }
.shq-answers input[type="text"]{
  width:100%; border-radius:12px; border:1px solid var(--card-border);
  background: rgba(255,255,255,.06); color:#fff; padding:12px 14px;
}

.shq-hint{
  display:inline-block; margin-top:10px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px dashed rgba(255,255,255,.3); color:#e8fbff; font-size:.95rem;
}

.shq-footer{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px;
  margin-top: clamp(16px,2.6vw,24px);
}
.shq-spacer{ width:1px; }

.shq-btn{
  appearance:none; border:0; border-radius:999px; padding:12px 20px; font-weight:800;
  background:
    radial-gradient(150% 120% at 80% -20%, rgba(255,255,255,.25), transparent),
    linear-gradient(90deg, var(--ocean-bright), #2db0ce);
  color:#022432; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:0 10px 24px rgba(20,163,199,.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.shq-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 28px rgba(20,163,199,.45); filter:saturate(110%) }
.shq-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.shq-results{ text-align:center; padding: 10px 0 4px }
.shq-score{ font-size: clamp(1.05rem,2.6vw,1.35rem); margin-bottom:6px; }
.shq-percent{ font-size: clamp(1.6rem,4.6vw,2.4rem); font-weight:900; margin-bottom:6px; }
.shq-grade{ font-size: clamp(1rem,2.6vw,1.2rem); opacity:.95; }
.shq-error{ padding:12px; border-radius:10px; background:rgba(255,59,59,.12); border:1px solid rgba(255,59,59,.35); }

@media (max-width: 900px){
  .shq-footer{ grid-template-columns: 1fr; }
  .shq-btn{ width:100%; }
}
@media (pointer: coarse){
  .shq-answer label{ padding:16px 18px; }
}

/* ---------- THEME VARIANTS ---------- */

/* Shark Deep (default ocean) */
.shq-quiz[data-theme="shark-deep"] {
  --ocean-deep: #0e2a47;
  --ocean-mid:  #0b5b8c;
  --ocean-bright:#14a3c7;
  --foam:       #e6f7ff;
}

/* Open Ocean (airy blues) */
.shq-quiz[data-theme="open-ocean"] {
  --ocean-deep: #00334e;
  --ocean-mid:  #0077b6;
  --ocean-bright:#00b4d8;
  --foam:       #f0fbff;
}

/* Coral Reef (warm coral + teal) */
.shq-quiz[data-theme="coral-reef"] {
  --ocean-deep: #1d3557;
  --ocean-mid:  #2a9d8f;
  --ocean-bright:#e76f51;
  --foam:       #fff8f5;
}

/* Chalkboard (non-ocean: matte slate with chalk accents) */
.shq-quiz[data-theme="chalkboard"] {
  --ocean-deep:#0f1a17;   /* base board */
  --ocean-mid:#1e2d29;    /* lighter board */
  --ocean-bright:#8be28a; /* chalk green accent */
  --foam:#f2fff1;         /* chalk text */
  color: var(--foam);
}
.shq-quiz[data-theme="chalkboard"] {
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg, rgba(139,226,138,0.05), rgba(139,226,138,0) 40%),
    linear-gradient(180deg, var(--ocean-mid), var(--ocean-deep));
}
/* hide ocean waves/bubbles */
.shq-quiz[data-theme="chalkboard"]::before,
.shq-quiz[data-theme="chalkboard"]::after,
.shq-quiz[data-theme="chalkboard"] .bubble-field { display:none; }
.shq-quiz[data-theme="chalkboard"] .shq-slide{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 20px rgba(0,0,0,0.25);
}
.shq-quiz[data-theme="chalkboard"] .shq-answer label{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-color: rgba(255,255,255,0.12);
}
.shq-quiz[data-theme="chalkboard"] .shq-answer input[type="radio"]:checked + label{
  border-color: rgba(139,226,138,0.8);
  background: linear-gradient(180deg, rgba(139,226,138,0.18), rgba(139,226,138,0.05));
  box-shadow: 0 8px 20px rgba(139,226,138,0.25);
}
.shq-quiz[data-theme="chalkboard"] .shq-btn{
  background:
    radial-gradient(150% 120% at 80% -20%, rgba(255,255,255,.22), transparent),
    linear-gradient(90deg, #8be28a, #59c65a);
  color:#08210a;
}

/* Neon Arcade (non-ocean: deep-black + neon gradient highlights) */
.shq-quiz[data-theme="neon-arcade"] {
  --ocean-deep:#0a0b1a;   /* near-black blue */
  --ocean-mid:#14162e;    /* panel */
  --ocean-bright:#c471f5; /* purple-pink neon */
  --foam:#eaf2ff;
  color: var(--foam);
}
.shq-quiz[data-theme="neon-arcade"] {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(196,113,245,0.08), transparent 60%),
    linear-gradient(180deg, rgba(0,212,255,0.08), rgba(0,212,255,0) 35%),
    linear-gradient(180deg, var(--ocean-mid), var(--ocean-deep));
}
/* hide ocean waves/bubbles */
.shq-quiz[data-theme="neon-arcade"]::before,
.shq-quiz[data-theme="neon-arcade"]::after,
.shq-quiz[data-theme="neon-arcade"] .bubble-field { display:none; }
.shq-quiz[data-theme="neon-arcade"] .shq-slide{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 16px 40px rgba(124,58,237,0.22);
}
.shq-quiz[data-theme="neon-arcade"] .shq-answer label{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.shq-quiz[data-theme="neon-arcade"] .shq-answer input[type="radio"]:checked + label{
  border-color: rgba(196,113,245,0.9);
  background: linear-gradient(180deg, rgba(196,113,245,0.25), rgba(196,113,245,0.06));
  box-shadow: 0 12px 28px rgba(196,113,245,0.35);
}
.shq-quiz[data-theme="neon-arcade"] .shq-btn{
  background:
    radial-gradient(140% 120% at 80% -20%, rgba(255,255,255,.22), transparent),
    linear-gradient(90deg, #00d4ff, #c471f5);
  color:#071018;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow: 0 14px 32px rgba(0,212,255,0.35);
}
.shq-quiz[data-theme="neon-arcade"] .shq-percent{
  background: linear-gradient(90deg, #00d4ff, #c471f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Bubble Wipe (ocean themes only) ----- */
.shq-quiz{ --wipe-ms: 460ms; }

.shq-quiz:is([data-theme="shark-deep"],[data-theme="open-ocean"],[data-theme="coral-reef"]) .shq-wipe{
  position:absolute;
  inset:-8% -20%;
  pointer-events:none;
  opacity:0;
  transform: translateX(0);
  z-index: 50; /* above content but below focus ring */
  display:block;
}
.shq-quiz:is([data-theme="shark-deep"],[data-theme="open-ocean"],[data-theme="coral-reef"]).shq-wiping .shq-wipe{ opacity:1; }

/* Container fly-by */
.shq-quiz.shq-wiping[data-wipe-dir="forward"] .shq-wipe{ animation: shq-wipe-right var(--wipe-ms) ease both; }
.shq-quiz.shq-wiping[data-wipe-dir="back"]    .shq-wipe{ animation: shq-wipe-left  var(--wipe-ms) ease both; }

@keyframes shq-wipe-right{
  0%{ transform: translateX(-40%); opacity:.0 }
  10%{ opacity: .75 }
  90%{ opacity: .75 }
  100%{ transform: translateX(40%); opacity: 0 }
}
@keyframes shq-wipe-left{
  0%{ transform: translateX(40%); opacity:.0 }
  10%{ opacity: .75 }
  90%{ opacity: .75 }
  100%{ transform: translateX(-40%); opacity: 0 }
}

/* Individual bubbles */
.shq-wipe .bbl{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(ellipse at 60% 30%, rgba(255,255,255,1) 0 10%, rgba(255,255,255,.45) 15%, rgba(255,255,255,.12) 60%, transparent 72%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.45);
  filter: blur(.2px);
  will-change: transform, opacity;
  opacity:.9;
  animation: shq-bbl-float var(--wipe-ms) ease-in-out both;
}
@keyframes shq-bbl-float {
  0%   { transform: translateY(8px) scale(.92); opacity: 0 }
  15%  { opacity: 1 }
  90%  { opacity: 1 }
  100% { transform: translateY(-8px) scale(1); opacity: 0 }
}

/* Distribute 24 bubbles with varied sizes & positions */
.shq-wipe .bbl:nth-child(1){  width:18px; height:18px; top:10%; left:5%;  }
.shq-wipe .bbl:nth-child(2){  width:12px; height:12px; top:18%; left:12%; }
.shq-wipe .bbl:nth-child(3){  width:26px; height:26px; top:30%; left:8%;  }
.shq-wipe .bbl:nth-child(4){  width:14px; height:14px; top:42%; left:12%; }
.shq-wipe .bbl:nth-child(5){  width:22px; height:22px; top:56%; left:6%;  }
.shq-wipe .bbl:nth-child(6){  width:10px; height:10px; top:66%; left:14%; }
.shq-wipe .bbl:nth-child(7){  width:20px; height:20px; top:76%; left:9%;  }
.shq-wipe .bbl:nth-child(8){  width:32px; height:32px; top:12%; right:8%; }
.shq-wipe .bbl:nth-child(9){  width:14px; height:14px; top:22%; right:14%;}
.shq-wipe .bbl:nth-child(10){ width:18px; height:18px; top:38%; right:7%; }
.shq-wipe .bbl:nth-child(11){ width:28px; height:28px; top:48%; right:12%;}
.shq-wipe .bbl:nth-child(12){ width:12px; height:12px; top:60%; right:10%;}
.shq-wipe .bbl:nth-child(13){ width:16px; height:16px; top:72%; right:15%;}
.shq-wipe .bbl:nth-child(14){ width:24px; height:24px; top:82%; right:6%; }
.shq-wipe .bbl:nth-child(15){ width:20px; height:20px; top:8%;  left:40%; }
.shq-wipe .bbl:nth-child(16){ width:12px; height:12px; top:20%; left:48%; }
.shq-wipe .bbl:nth-child(17){ width:26px; height:26px; top:34%; left:44%; }
.shq-wipe .bbl:nth-child(18){ width:14px; height:14px; top:46%; left:52%; }
.shq-wipe .bbl:nth-child(19){ width:22px; height:22px; top:58%; left:46%; }
.shq-wipe .bbl:nth-child(20){ width:10px; height:10px; top:70%; left:54%; }
.shq-wipe .bbl:nth-child(21){ width:20px; height:20px; top:80%; left:42%; }
.shq-wipe .bbl:nth-child(22){ width:16px; height:16px; top:26%; left:28%; }
.shq-wipe .bbl:nth-child(23){ width:12px; height:12px; top:62%; left:32%; }
.shq-wipe .bbl:nth-child(24){ width:28px; height:28px; top:78%; left:24%; }

/* Slightly stagger the floats */
.shq-wipe .bbl:nth-child(odd){ animation-delay: 40ms; }
.shq-wipe .bbl:nth-child(3n){  animation-delay: 80ms; }
.shq-wipe .bbl:nth-child(5n){  animation-delay: 120ms; }

/* ----- Interstitial Bubble Slide (ocean themes only) ----- */
.shq-quiz{ --inter-ms: 700ms; --wipe-ms: 820ms; }

/* Panel that looks like a blank watery slide that passes between questions */
.shq-quiz:is([data-theme="shark-deep"],[data-theme="open-ocean"],[data-theme="coral-reef"]) .shq-inter{
  position:absolute; inset:0; border-radius: inherit; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, rgba(20,163,199,0.08), rgba(20,163,199,0) 40%),
    linear-gradient(180deg, var(--ocean-mid), var(--ocean-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
}
.shq-inter .inter-bubbles{
  position:absolute; inset:-8% -10%; pointer-events:none; opacity:.65;
}
.shq-inter .inter-bubbles .b{
  position:absolute; border-radius:50%;
  background: radial-gradient(ellipse at 60% 30%, rgba(255,255,255,1) 0 10%, rgba(255,255,255,.45) 15%, rgba(255,255,255,.12) 60%, transparent 72%);
  filter: blur(.3px);
  animation: shq-inter-bbl var(var(--inter-ms)) ease-in-out both;
}
@keyframes shq-inter-bbl{
  0%{ transform: translateY(16px) scale(.92); opacity:.0 }
  20%{ opacity:1 }
  80%{ opacity:1 }
  100%{ transform: translateY(-10px) scale(1); opacity:.0 }
}
/* Sprinkle bubble sizes/positions (24 bubbles) */
.shq-inter .inter-bubbles .b:nth-child(1){ width:22px; height:22px; top:10%; left:6%;  }
.shq-inter .inter-bubbles .b:nth-child(2){ width:12px; height:12px; top:20%; left:14%; }
.shq-inter .inter-bubbles .b:nth-child(3){ width:28px; height:28px; top:34%; left:8%;  }
.shq-inter .inter-bubbles .b:nth-child(4){ width:14px; height:14px; top:46%; left:12%; }
.shq-inter .inter-bubbles .b:nth-child(5){ width:24px; height:24px; top:58%; left:6%;  }
.shq-inter .inter-bubbles .b:nth-child(6){ width:10px; height:10px; top:70%; left:14%; }
.shq-inter .inter-bubbles .b:nth-child(7){ width:20px; height:20px; top:80%; left:9%;  }
.shq-inter .inter-bubbles .b:nth-child(8){ width:32px; height:32px; top:12%; right:8%; }
.shq-inter .inter-bubbles .b:nth-child(9){ width:14px; height:14px; top:22%; right:14%;}
.shq-inter .inter-bubbles .b:nth-child(10){ width:20px; height:20px; top:38%; right:7%; }
.shq-inter .inter-bubbles .b:nth-child(11){ width:28px; height:28px; top:50%; right:12%;}
.shq-inter .inter-bubbles .b:nth-child(12){ width:12px; height:12px; top:62%; right:10%;}
.shq-inter .inter-bubbles .b:nth-child(13){ width:16px; height:16px; top:74%; right:15%;}
.shq-inter .inter-bubbles .b:nth-child(14){ width:24px; height:24px; top:84%; right:6%; }
.shq-inter .inter-bubbles .b:nth-child(15){ width:22px; height:22px; top:8%;  left:40%; }
.shq-inter .inter-bubbles .b:nth-child(16){ width:12px; height:12px; top:20%; left:48%; }
.shq-inter .inter-bubbles .b:nth-child(17){ width:26px; height:26px; top:34%; left:44%; }
.shq-inter .inter-bubbles .b:nth-child(18){ width:14px; height:14px; top:46%; left:52%; }
.shq-inter .inter-bubbles .b:nth-child(19){ width:22px; height:22px; top:58%; left:46%; }
.shq-inter .inter-bubbles .b:nth-child(20){ width:12px; height:12px; top:70%; left:54%; }
.shq-inter .inter-bubbles .b:nth-child(21){ width:20px; height:20px; top:80%; left:42%; }
.shq-inter .inter-bubbles .b:nth-child(22){ width:16px; height:16px; top:26%; left:28%; }
.shq-inter .inter-bubbles .b:nth-child(23){ width:12px; height:12px; top:62%; left:32%; }
.shq-inter .inter-bubbles .b:nth-child(24){ width:28px; height:28px; top:78%; left:24%; }
.shq-inter .inter-bubbles .b:nth-child(odd){ animation-delay: 60ms }
.shq-inter .inter-bubbles .b:nth-child(3n){ animation-delay: 120ms }
.shq-inter .inter-bubbles .b:nth-child(5n){ animation-delay: 180ms }

/* Slide-in/out animations for the interstitial panel */
.shq-quiz.shq-intering[data-wipe-dir="forward"] .shq-inter{
  animation: shq-inter-slide-right var(--inter-ms) cubic-bezier(.22,.61,.36,1) both;
}
.shq-quiz.shq-intering[data-wipe-dir="back"] .shq-inter{
  animation: shq-inter-slide-left var(--inter-ms) cubic-bezier(.22,.61,.36,1) both;
}
@keyframes shq-inter-slide-right{
  0%{ transform: translateX(-12%); opacity: 0 }
  15%{ opacity: 1 }
  85%{ opacity: 1 }
  100%{ transform: translateX(12%); opacity: 0 }
}
@keyframes shq-inter-slide-left{
  0%{ transform: translateX(12%); opacity: 0 }
  15%{ opacity: 1 }
  85%{ opacity: 1 }
  100%{ transform: translateX(-12%); opacity: 0 }
}

/* Make the bubble wipe subtler and synced with interstitial */
.shq-quiz:is([data-theme="shark-deep"],[data-theme="open-ocean"],[data-theme="coral-reef"]) .shq-wipe{
  z-index: 45;
  opacity:.0;
}
.shq-quiz.shq-wiping .shq-wipe{ opacity:.45; }
@keyframes shq-wipe-right{
  0%{ transform: translateX(-55%); opacity:.0 }
  20%{ opacity: .45 }
  80%{ opacity: .45 }
  100%{ transform: translateX(55%); opacity: 0 }
}
@keyframes shq-wipe-left{
  0%{ transform: translateX(55%); opacity:.0 }
  20%{ opacity: .45 }
  80%{ opacity: .45 }
  100%{ transform: translateX(-55%); opacity: 0 }
}

/* ----- Fade mode bubble assist ----- */
.shq-quiz{ --fade-ms: 520ms; }

/* Only in FADE transition + ocean themes, we use a simple opacity reveal for the bubble overlay */
.shq-quiz[data-transition="fade"]:is([data-theme="shark-deep"],[data-theme="open-ocean"],[data-theme="coral-reef"]) .shq-wipe{
  opacity: 0;
  transition: opacity var(--fade-ms) ease;
  z-index: 50;
}
.shq-quiz[data-transition="fade"].shq-bubbles-on .shq-wipe{
  opacity: .45; /* show bubbles */
}

/* While we’re fading out the current slide (before render), force a fade-out animation */
.shq-quiz[data-transition="fade"].shq-fade-out .shq-slide{
  animation: shq-fadeOut var(--fade-ms) ease both !important;
}
@keyframes shq-fadeOut{
  from{ opacity: 1 }
  to{ opacity: 0 }
}