/* =====================================================================
   tab-effects.css — Unique animated overlays for each home-screen tab
   Each tab gets its own thematic motion behind the unified warm gradient.

   Effects implemented:
   ─ tab-fx-rainbow   : 🌈 명상 — 7-color ribbon sweep   (existing as .med-cta-rainbow)
   ─ tab-fx-dna       : 🧬 병태생리 — DNA double-helix wave (cyan/green/blue)
   ─ tab-fx-aurora    : 🍳 건강 요리 — Warm sunrise aurora (gold/coral/pink)
   ─ tab-fx-starlight : 📚 전체 질환 — Twinkling star field (white/cyan)
   ─ tab-fx-ekg       : 🩺 케이스 진료 — Heartbeat ECG line (cyan glow)
   ─ tab-fx-wave      : 🔬 영상 판독 — Ocean wave gradient (teal/aqua)
   ===================================================================== */

/* Common: every tab-fx fills its parent and stays behind content */
#screen-home .tab-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
}

/* ── 🧬 DNA helix — Pathophys ────────────────────────────────────── */
#screen-home .tab-fx-dna::before,
#screen-home .tab-fx-dna::after {
  content: '';
  position: absolute;
  left: -25%;
  width: 150%;
  height: 6px;
  border-radius: 999px;
  filter: blur(3px);
  mix-blend-mode: screen;
}
#screen-home .tab-fx-dna::before {
  top: 32%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 255, 200, 0.0) 25%,
    rgba(0, 255, 200, 0.55) 35%,
    rgba(110, 255, 220, 0.7) 45%,
    rgba(50, 200, 255, 0.7) 55%,
    rgba(0, 200, 255, 0.55) 65%,
    rgba(0, 255, 200, 0.0) 75%,
    transparent 100%);
  animation: tab-fx-dna-1 4.5s ease-in-out infinite;
}
#screen-home .tab-fx-dna::after {
  top: 64%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(50, 200, 255, 0.0) 25%,
    rgba(50, 200, 255, 0.55) 35%,
    rgba(110, 255, 220, 0.7) 45%,
    rgba(0, 255, 200, 0.7) 55%,
    rgba(50, 200, 255, 0.55) 65%,
    rgba(50, 200, 255, 0.0) 75%,
    transparent 100%);
  animation: tab-fx-dna-2 4.5s ease-in-out infinite;
}
@keyframes tab-fx-dna-1 {
  0%, 100% { transform: translateX(-30%) scaleY(1); }
  50%      { transform: translateX(30%)  scaleY(2.5); }
}
@keyframes tab-fx-dna-2 {
  0%, 100% { transform: translateX(30%)  scaleY(2.5); }
  50%      { transform: translateX(-30%) scaleY(1); }
}

/* ── 🍳 Aurora — Recipes ─────────────────────────────────────────── */
#screen-home .tab-fx-aurora::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 80%;
  height: 200%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 200, 100, 0.0) 30%,
    rgba(255, 200, 100, 0.50) 38%,
    rgba(255, 140, 100, 0.55) 44%,
    rgba(255, 100, 150, 0.55) 50%,
    rgba(255, 180, 110, 0.50) 56%,
    rgba(255, 220, 130, 0.45) 62%,
    rgba(255, 200, 100, 0.0) 70%,
    transparent 100%);
  filter: blur(8px);
  transform: translateX(-100%) rotate(6deg);
  animation: tab-fx-aurora-sweep 5.5s linear infinite;
  mix-blend-mode: screen;
}
@keyframes tab-fx-aurora-sweep {
  0%   { transform: translateX(-100%) rotate(6deg); }
  100% { transform: translateX(380%)  rotate(6deg); }
}

/* ── 📚 Starlight — All Conditions ──────────────────────────────── */
/* Six twinkling stars at fixed positions */
#screen-home .tab-fx-starlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 28%,  rgba(255, 255, 255, 0.95) 0%, transparent 0.8%),
    radial-gradient(circle at 28% 72%,  rgba(180, 230, 255, 0.95) 0%, transparent 0.7%),
    radial-gradient(circle at 45% 35%,  rgba(255, 255, 255, 0.95) 0%, transparent 0.6%),
    radial-gradient(circle at 62% 80%,  rgba(255, 230, 180, 0.95) 0%, transparent 0.7%),
    radial-gradient(circle at 78% 22%,  rgba(255, 255, 255, 0.95) 0%, transparent 0.8%),
    radial-gradient(circle at 92% 58%,  rgba(180, 255, 230, 0.95) 0%, transparent 0.6%);
  background-size: 100% 100%;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
  animation: tab-fx-starlight-twinkle 3s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes tab-fx-starlight-twinkle {
  0%, 100% { opacity: 0.4; }
  20%      { opacity: 1.0; transform: scale(1.05); }
  40%      { opacity: 0.5; }
  60%      { opacity: 0.95; transform: scale(1.05); }
  80%      { opacity: 0.5; }
}
#screen-home .tab-fx-starlight::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 22% 55%,  rgba(255, 255, 255, 0.85) 0%, transparent 0.6%),
    radial-gradient(circle at 38% 18%,  rgba(255, 230, 180, 0.85) 0%, transparent 0.5%),
    radial-gradient(circle at 55% 65%,  rgba(180, 230, 255, 0.85) 0%, transparent 0.6%),
    radial-gradient(circle at 72% 42%,  rgba(255, 255, 255, 0.85) 0%, transparent 0.7%),
    radial-gradient(circle at 88% 75%,  rgba(255, 230, 180, 0.85) 0%, transparent 0.5%);
  filter: drop-shadow(0 0 3px rgba(255, 230, 180, 0.6));
  animation: tab-fx-starlight-twinkle 3s ease-in-out 1.5s infinite;
  mix-blend-mode: screen;
}

/* ── 🩺 EKG / Heartbeat — Case Study ─────────────────────────────── */
#screen-home .tab-fx-ekg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 100%);
  /* Base — invisible */
}
#screen-home .tab-fx-ekg::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 200%;
  height: 50px;
  /* SVG ECG trace as a CSS background — encoded inline */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 50' preserveAspectRatio='none'><path d='M0,25 L120,25 L130,15 L140,35 L150,5 L160,40 L170,25 L240,25 L260,25 L268,18 L276,32 L284,8 L292,42 L300,25 L380,25 L420,25 L428,15 L436,35 L444,5 L452,40 L460,25 L540,25 L580,25 L588,18 L596,32 L604,8 L612,42 L620,25 L800,25' fill='none' stroke='%2300d4a8' stroke-width='2' opacity='0.8'/></svg>");
  background-repeat: repeat-x;
  background-size: 800px 50px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(0, 220, 180, 0.8)) blur(0.3px);
  animation: tab-fx-ekg-scroll 5s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.55;
}
@keyframes tab-fx-ekg-scroll {
  0%   { transform: translate(0%,    -50%); }
  100% { transform: translate(-50%,  -50%); }
}

/* ── 🔬 Ocean Wave — Image Reading ──────────────────────────────── */
#screen-home .tab-fx-wave::before,
#screen-home .tab-fx-wave::after {
  content: '';
  position: absolute;
  left: -25%;
  width: 150%;
  height: 100%;
  background: radial-gradient(ellipse 50% 70% at 50% 50%,
    rgba(80, 200, 230, 0.45) 0%,
    rgba(120, 220, 255, 0.30) 30%,
    transparent 70%);
  filter: blur(12px);
  mix-blend-mode: screen;
}
#screen-home .tab-fx-wave::before {
  animation: tab-fx-wave-1 6s ease-in-out infinite;
}
#screen-home .tab-fx-wave::after {
  animation: tab-fx-wave-2 6s ease-in-out infinite;
  background: radial-gradient(ellipse 40% 60% at 50% 50%,
    rgba(140, 240, 220, 0.40) 0%,
    rgba(180, 250, 255, 0.20) 40%,
    transparent 75%);
}
@keyframes tab-fx-wave-1 {
  0%, 100% { transform: translateX(-25%); }
  50%      { transform: translateX(25%); }
}
@keyframes tab-fx-wave-2 {
  0%, 100% { transform: translateX(25%); }
  50%      { transform: translateX(-25%); }
}

/* ── 🌊 Water Ripple — Self-DX, Nutrients ─────────────────────────
   Concentric rings expanding from a fixed point, like a drop in water. */
#screen-home .tab-fx-ripple::before,
#screen-home .tab-fx-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(120, 220, 255, 0.55);
  transform: translate(-50%, -50%);
  filter: blur(0.5px);
  mix-blend-mode: screen;
}
#screen-home .tab-fx-ripple::before {
  animation: tab-fx-ripple-grow 4s ease-out infinite;
}
#screen-home .tab-fx-ripple::after {
  animation: tab-fx-ripple-grow 4s ease-out 2s infinite;
  border-color: rgba(180, 240, 255, 0.65);
}
@keyframes tab-fx-ripple-grow {
  0%   { width: 12px;  height: 12px;  border-width: 2px; opacity: 0.9; }
  100% { width: 360px; height: 360px; border-width: 0.5px; opacity: 0; }
}

/* ── 🌊 Tide — Cancer, Lab Tests ──────────────────────────────────
   Smooth horizontal swell sweeping back and forth, like an ocean tide. */
#screen-home .tab-fx-tide::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(80, 200, 230, 0.0) 40%,
    rgba(80, 200, 230, 0.45) 48%,
    rgba(140, 240, 255, 0.55) 50%,
    rgba(80, 200, 230, 0.45) 52%,
    rgba(80, 200, 230, 0.0) 60%,
    transparent 70%);
  filter: blur(10px);
  animation: tab-fx-tide-swell 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
#screen-home .tab-fx-tide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 200%;
  height: 60%;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(40, 160, 200, 0.0) 40%,
    rgba(40, 160, 200, 0.30) 50%,
    rgba(40, 160, 200, 0.0) 60%,
    transparent 70%);
  filter: blur(8px);
  animation: tab-fx-tide-swell 8s ease-in-out infinite reverse;
  mix-blend-mode: screen;
}
@keyframes tab-fx-tide-swell {
  0%, 100% { transform: translateX(-25%); }
  50%      { transform: translateX(25%); }
}

/* ── 🫧 Bubbles — Bodyex, Community ──────────────────────────────
   Small floating bubbles rising up, evoking effervescence and life. */
#screen-home .tab-fx-bubbles::before,
#screen-home .tab-fx-bubbles::after {
  content: '';
  position: absolute;
  bottom: -10px;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle 4px at 10% 100%, rgba(180, 230, 255, 0.85), transparent 60%),
    radial-gradient(circle 6px at 30% 100%, rgba(255, 200, 220, 0.85), transparent 60%),
    radial-gradient(circle 3px at 50% 100%, rgba(220, 255, 230, 0.85), transparent 60%),
    radial-gradient(circle 5px at 70% 100%, rgba(255, 230, 180, 0.85), transparent 60%),
    radial-gradient(circle 4px at 90% 100%, rgba(220, 200, 255, 0.85), transparent 60%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  animation: tab-fx-bubbles-rise 7s linear infinite;
  mix-blend-mode: screen;
}
#screen-home .tab-fx-bubbles::after {
  background-image:
    radial-gradient(circle 5px at 20% 100%, rgba(255, 220, 180, 0.85), transparent 60%),
    radial-gradient(circle 3px at 40% 100%, rgba(180, 255, 220, 0.85), transparent 60%),
    radial-gradient(circle 6px at 60% 100%, rgba(220, 200, 255, 0.85), transparent 60%),
    radial-gradient(circle 4px at 80% 100%, rgba(180, 230, 255, 0.85), transparent 60%);
  animation: tab-fx-bubbles-rise 9s linear 2.5s infinite;
}
@keyframes tab-fx-bubbles-rise {
  0%   { transform: translateY(0);    opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translateY(-110%); opacity: 0; }
}

/* ── 🌈 Rainbow Arc — Funcmed, Anatomy ───────────────────────────
   A curved rainbow arc rising and setting, like a real rainbow on a card. */
#screen-home .tab-fx-rainbow-arc::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  width: 140%;
  height: 280%;
  border-radius: 50%;
  border: 12px solid;
  border-color:
    rgba(255, 80, 80, 0.0)
    rgba(255, 180, 80, 0.0)
    rgba(120, 220, 120, 0.0)
    rgba(120, 180, 255, 0.0);
  background: conic-gradient(from 270deg at 50% 100%,
    rgba(255, 80, 80, 0.0) 0deg,
    rgba(255, 80, 80, 0.45) 30deg,
    rgba(255, 180, 80, 0.5)  45deg,
    rgba(255, 240, 100, 0.55) 60deg,
    rgba(120, 220, 120, 0.55) 75deg,
    rgba(120, 180, 255, 0.55) 90deg,
    rgba(180, 120, 255, 0.5) 105deg,
    rgba(255, 80, 200, 0.45) 120deg,
    rgba(255, 80, 80, 0.0) 150deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 47%, black 50%, black 56%, transparent 60%);
          mask: radial-gradient(circle at 50% 100%, transparent 47%, black 50%, black 56%, transparent 60%);
  transform: translateX(-50%);
  filter: blur(2px);
  animation: tab-fx-rainbow-arc-rotate 8s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.85;
}
@keyframes tab-fx-rainbow-arc-rotate {
  0%   { transform: translateX(-50%) rotate(-12deg); }
  50%  { transform: translateX(-50%) rotate(12deg); }
  100% { transform: translateX(-50%) rotate(-12deg); }
}

/* ── 💎 Rainbow Prism — Bookmarks, Integrative ──────────────────
   Light passing through a prism, fanning out into a rainbow spectrum. */
#screen-home .tab-fx-rainbow-prism::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10%;
  width: 60%;
  height: 220%;
  background: linear-gradient(95deg,
    rgba(255, 80, 80, 0.0) 0%,
    rgba(255, 80, 80, 0.40) 12%,
    rgba(255, 180, 80, 0.50) 22%,
    rgba(255, 240, 100, 0.55) 32%,
    rgba(120, 220, 120, 0.55) 42%,
    rgba(120, 180, 255, 0.55) 52%,
    rgba(180, 120, 255, 0.50) 62%,
    rgba(255, 80, 200, 0.40) 72%,
    rgba(255, 80, 200, 0.0) 100%);
  filter: blur(14px);
  transform: translateY(-50%) rotate(-25deg);
  transform-origin: 0% 50%;
  animation: tab-fx-rainbow-prism-fan 7s ease-in-out infinite;
  mix-blend-mode: screen;
}
#screen-home .tab-fx-rainbow-prism::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -5%;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.95),
    0 0 16px rgba(180, 220, 255, 0.7),
    0 0 24px rgba(255, 230, 180, 0.5);
  transform: translate(-50%, -50%);
  animation: tab-fx-prism-pulse 7s ease-in-out infinite;
}
@keyframes tab-fx-rainbow-prism-fan {
  0%, 100% { transform: translateY(-50%) rotate(-25deg); opacity: 0.7; }
  50%      { transform: translateY(-50%) rotate(-15deg); opacity: 1;   }
}
@keyframes tab-fx-prism-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  50%      { transform: translate(-50%, -50%) scale(1.4); opacity: 1;   }
}

/* Hover speed-up — subtle interactivity reward */
#screen-home button:hover .tab-fx-dna::before,
#screen-home button:hover .tab-fx-dna::after,
#screen-home button:hover .tab-fx-aurora::before,
#screen-home button:hover .tab-fx-ekg::after,
#screen-home button:hover .tab-fx-wave::before,
#screen-home button:hover .tab-fx-wave::after,
#screen-home div:hover .tab-fx-dna::before,
#screen-home div:hover .tab-fx-dna::after,
#screen-home div:hover .tab-fx-aurora::before,
#screen-home div:hover .tab-fx-ekg::after,
#screen-home div:hover .tab-fx-wave::before,
#screen-home div:hover .tab-fx-wave::after {
  animation-duration: 2.5s;
}

/* Reduced-motion — turn off all the new effects */
@media (prefers-reduced-motion: reduce) {
  #screen-home .tab-fx-dna::before,
  #screen-home .tab-fx-dna::after,
  #screen-home .tab-fx-aurora::before,
  #screen-home .tab-fx-starlight::before,
  #screen-home .tab-fx-starlight::after,
  #screen-home .tab-fx-ekg::after,
  #screen-home .tab-fx-wave::before,
  #screen-home .tab-fx-wave::after,
  #screen-home .tab-fx-ripple::before,
  #screen-home .tab-fx-ripple::after,
  #screen-home .tab-fx-tide::before,
  #screen-home .tab-fx-tide::after,
  #screen-home .tab-fx-bubbles::before,
  #screen-home .tab-fx-bubbles::after,
  #screen-home .tab-fx-rainbow-arc::before,
  #screen-home .tab-fx-rainbow-prism::before,
  #screen-home .tab-fx-rainbow-prism::after {
    animation: none !important;
  }
}

/* z-index — ensure tab content stays above the .tab-fx overlay.
   ⚠ Use :has() so the rule applies ONLY to tabs that actually contain
   a .tab-fx child. Otherwise it forces position:relative on AI card
   overlays (.pai-bg-gradient, .pai-shimmer) that need to stay absolute,
   collapsing the layout. */
#screen-home button:has(> .tab-fx) > *:not(.tab-fx),
#screen-home div:has(> .tab-fx) > *:not(.tab-fx) {
  position: relative;
  z-index: 2;
}