/* ══════════════════════════════════════════
   SHARED DESIGN SYSTEM
   ══════════════════════════════════════════ */
@import url('../shared/shared.css');

/* ══════════════════════════════════════════
   SVG COLOR UTILITIES
   Presentational classes for funnel elements.
   Light-mode overrides below change these values.
   ══════════════════════════════════════════ */

/* Stroke colors */
.s-orange  { stroke: #ff6f00; }
.s-neck    { stroke: #d4a054; }
.s-p1      { stroke: #8bc34a; }
.s-p2      { stroke: #42a5f5; }
.s-p3      { stroke: #ab47bc; }
.s-gray    { stroke: #484848; }
.s-white   { stroke: white; }
.s-idea    { stroke: #a3a3a3; }

/* Fill colors */
.f-orange  { fill: #ff6f00; }
.f-neck    { fill: #d4a054; }
.f-p1      { fill: #8bc34a; }
.f-p2      { fill: #42a5f5; }
.f-p3      { fill: #ab47bc; }
.f-gray    { fill: #484848; }
.f-idea    { fill: #a3a3a3; }
.f-white-4 { fill: var(--glass-4); }
.f-orange-8  { fill: rgba(255,111,0,0.08); }
.f-orange-6  { fill: rgba(255,111,0,0.06); }
.f-neck-text { fill: #d4a054; }

/* ══════════════════════════════════════════
   MISSION CLOCK LINK (header)
   ══════════════════════════════════════════ */
.mission-clock-link {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  transition: color var(--ease-default), filter var(--ease-default);
  text-decoration: none;
}
.mission-clock-link:hover {
  color: var(--orange);
  filter: drop-shadow(0 0 6px rgba(255,111,0,0.4));
}

/* ══════════════════════════════════════════
   FUNNEL-SPECIFIC OVERRIDES
   ══════════════════════════════════════════ */
html, body {
  overflow: hidden;
}

/* ══════════════════════════════════════════
   LAYOUT - 100vh, no scroll
   ══════════════════════════════════════════ */
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  padding: 12px 20px 10px;
  position: relative;
  overflow: hidden;
}

/* -- Star field -- */
.stars, .stars-medium, .stars-faint {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.stars {
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 40% 22%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 55% 5%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 95% 25%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 15% 45%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 35% 55%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 65% 50%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 80% 42%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 92% 48%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 8% 70%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 22% 78%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 45% 72%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 60% 82%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 75% 68%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 88% 75%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 5% 92%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 88%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 55% 95%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 78% 90%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 93% 85%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 3% 35%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 17% 62%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 42% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 63% 38%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 87% 55%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 97% 42%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 28% 95%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 48% 58%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 82% 28%, rgba(255,255,255,0.4), transparent);
  animation: twinkle 8s ease-in-out infinite alternate;
}
.stars-medium {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 32%, rgba(180,200,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 38% 65%, rgba(180,200,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 58% 28%, rgba(200,180,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 82% 58%, rgba(180,200,255,0.3), transparent),
    radial-gradient(2px 2px at 48% 85%, rgba(200,180,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 72% 35%, rgba(180,200,255,0.35), transparent),
    radial-gradient(2px 2px at 20% 60%, rgba(255,200,150,0.3), transparent),
    radial-gradient(1.5px 1.5px at 90% 20%, rgba(200,180,255,0.4), transparent),
    radial-gradient(1.8px 1.8px at 6% 78%, rgba(180,200,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 52% 12%, rgba(200,180,255,0.35), transparent),
    radial-gradient(2px 2px at 95% 52%, rgba(180,200,255,0.3), transparent),
    radial-gradient(1.8px 1.8px at 28% 42%, rgba(255,200,150,0.25), transparent),
    radial-gradient(1.5px 1.5px at 65% 88%, rgba(200,180,255,0.35), transparent),
    radial-gradient(2.5px 2.5px at 15% 18%, rgba(255,220,180,0.25), transparent),
    radial-gradient(2px 2px at 78% 72%, rgba(180,200,255,0.3), transparent);
  animation: twinkle 12s ease-in-out 2s infinite alternate;
}
.stars-faint {
  background-image:
    radial-gradient(0.8px 0.8px at 5% 10%, var(--glass-20), transparent),
    radial-gradient(0.8px 0.8px at 18% 52%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 33% 38%, var(--glass-20), transparent),
    radial-gradient(0.8px 0.8px at 47% 15%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 62% 68%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 77% 82%, var(--glass-20), transparent),
    radial-gradient(0.8px 0.8px at 88% 45%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 95% 70%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 42% 92%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 68% 5%, var(--glass-20), transparent),
    radial-gradient(0.8px 0.8px at 14% 28%, rgba(255,255,255,0.16), transparent),
    radial-gradient(0.8px 0.8px at 56% 48%, rgba(255,255,255,0.14), transparent),
    radial-gradient(0.8px 0.8px at 83% 15%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 37% 75%, rgba(255,255,255,0.16), transparent),
    radial-gradient(0.8px 0.8px at 92% 62%, rgba(255,255,255,0.14), transparent),
    radial-gradient(0.8px 0.8px at 25% 5%, rgba(255,255,255,0.17), transparent),
    radial-gradient(0.8px 0.8px at 72% 42%, var(--glass-15), transparent),
    radial-gradient(0.8px 0.8px at 8% 88%, rgba(255,255,255,0.18), transparent);
  animation: twinkle 15s ease-in-out 4s infinite alternate;
}
@keyframes twinkle {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* -- Nebula glow (subtle atmosphere) -- */
.nebula-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(255,111,0,0.04), transparent 50%),
    radial-gradient(ellipse at 75% 65%, rgba(66,100,180,0.05), transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(80,40,100,0.03), transparent 55%),
    radial-gradient(ellipse at 90% 20%, rgba(66,165,245,0.03), transparent 40%);
}

/* ══════════════════════════════════════════
   FUNNEL CONTAINER
   ══════════════════════════════════════════ */
.funnel-container {
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: 0;
}
.funnel-container > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG click zones */
.svg-click-zone {
  cursor: pointer;
  fill: transparent;
}
.svg-click-zone:hover {
  fill: var(--glass-7);
  cursor: pointer;
}
.svg-click-zone:active {
  fill: var(--glass-8);
}

/* ══════════════════════════════════════════
   DIMMING - inactive phases
   ══════════════════════════════════════════ */
.funnel-container.has-active .funnel-phase {
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.funnel-container.has-active .funnel-phase.phase-active {
  opacity: 1;
}

/* ══════════════════════════════════════════
   SHINE - animated border on HOVER (not click)
   ══════════════════════════════════════════ */
@keyframes shineForward {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: -200; }
}
.shine-overlay {
  fill: none;
  pointer-events: none;
  stroke-dasharray: 30 170;
  stroke-dashoffset: 200;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Hover state (JS-toggled via .phase-hover) */
.funnel-phase.shine-overlay.phase-hover {
  opacity: 1;
  animation: shineForward var(--shine-dur, 2.5s) ease-in-out infinite;
}
.funnel-phase.shine-overlay.shine-b.phase-hover {
  animation-delay: 0s;
}

/* Per-phase shine durations — normalized to ~80px/s visual speed */
.shine-overlay[data-section="vorarbeit"] { --shine-dur: 2.4s; }
.shine-overlay[data-section="imkurs"]    { --shine-dur: 3.5s; }
.shine-overlay[data-phase="neck"]        { --shine-dur: 1.5s; }
.shine-overlay[data-phase="p1"]          { --shine-dur: 2.1s; }
.shine-overlay[data-phase="p2a"]         { --shine-dur: 1.9s; }
.shine-overlay[data-phase="p2b"]         { --shine-dur: 2.5s; }
.shine-overlay[data-phase="p3"]          { --shine-dur: 6s; }

/* ══════════════════════════════════════════
   FLOATING IDEAS - asteroid drift
   ══════════════════════════════════════════ */
@keyframes drift1 { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(4px,-6px) rotate(-5deg); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) rotate(5deg); } 50% { transform: translate(-5px,4px) rotate(8deg); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) rotate(-3deg); } 50% { transform: translate(3px,5px) rotate(0deg); } }
@keyframes drift4 { 0%,100% { transform: translate(0,0) rotate(7deg); } 50% { transform: translate(-4px,-3px) rotate(4deg); } }
@keyframes drift5 { 0%,100% { transform: translate(0,0) rotate(-5deg); } 50% { transform: translate(5px,3px) rotate(-2deg); } }
@keyframes drift6 { 0%,100% { transform: translate(0,0) rotate(3deg); } 50% { transform: translate(-3px,-5px) rotate(6deg); } }
@keyframes drift7 { 0%,100% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(4px,4px) rotate(-3deg); } }
.idea-drift-1 { animation: drift1 7s ease-in-out infinite; }
.idea-drift-2 { animation: drift2 9s ease-in-out infinite; }
.idea-drift-3 { animation: drift3 8s ease-in-out infinite; }
.idea-drift-4 { animation: drift4 10s ease-in-out infinite; }
.idea-drift-5 { animation: drift5 7.5s ease-in-out infinite; }
.idea-drift-6 { animation: drift6 8.5s ease-in-out infinite; }
.idea-drift-7 { animation: drift7 9.5s ease-in-out infinite; }

/* ══════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ══════════════════════════════════════════ */
[data-theme="light"] .stars,
[data-theme="light"] .stars-medium,
[data-theme="light"] .stars-faint,
[data-theme="light"] .nebula-glow {
  display: none;
}

/* Funnel click zones: stronger hover on light bg */
[data-theme="light"] .svg-click-zone:hover {
  fill: rgba(0, 0, 0, 0.08);
}

/* ── Light-mode SVG color overrides ── */
[data-theme="light"] .s-orange { stroke: #e65100; }
[data-theme="light"] .s-neck   { stroke: #bf8c3e; }
[data-theme="light"] .s-p1     { stroke: #558b2f; }
[data-theme="light"] .s-p2     { stroke: #1565c0; }
[data-theme="light"] .s-p3     { stroke: #7b1fa2; }
[data-theme="light"] .s-gray   { stroke: #1a1a2e; }
[data-theme="light"] .s-white  { stroke: rgba(0,0,0,0.3); }
[data-theme="light"] .s-idea   { stroke: #5a5a7a; }

[data-theme="light"] .f-orange { fill: #e65100; }
[data-theme="light"] .f-neck   { fill: #bf8c3e; }
[data-theme="light"] .f-p1     { fill: #558b2f; }
[data-theme="light"] .f-p2     { fill: #1565c0; }
[data-theme="light"] .f-p3     { fill: #7b1fa2; }
[data-theme="light"] .f-gray   { fill: #2d2d44; }
[data-theme="light"] .f-idea   { fill: #3d3d5c; }
[data-theme="light"] .f-white-4  { fill: rgba(0,0,0,0.04); }
[data-theme="light"] .f-orange-8,
[data-theme="light"] .f-orange-6 { fill: rgba(230,81,0,0.10); }

/* Arrow marker (inside defs — can't use class) */
[data-theme="light"] #arrow polygon {
  fill: #1a1a2e;
  fill-opacity: 0.7;
}

/* Phase 3 grid pattern (inside defs — can't use class) */
[data-theme="light"] #dim-grid line {
  stroke: #7b1fa2;
  stroke-opacity: 0.12;
}

/* Neck title text — unique darker shade */
[data-theme="light"] .f-neck-text { fill: #8d6e3d; }

/* Kbd legend elements */
[data-theme="light"] .legend kbd {
  border-color: #5a5a7a !important;
  color: #3d3d5c !important;
}

/* Legend mini-SVG strokes */
[data-theme="light"] .legend svg line,
[data-theme="light"] .legend svg ellipse {
  opacity: 0.7;
}

/* ══════════════════════════════════════════
   REDUCED MOTION — accessibility
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .stars, .stars-medium, .stars-faint {
    animation: none;
  }
  .idea-drift-1, .idea-drift-2, .idea-drift-3,
  .idea-drift-4, .idea-drift-5, .idea-drift-6,
  .idea-drift-7 {
    animation: none;
  }
  .shine-overlay {
    animation: none !important;
  }
  .detail-panel {
    transition-duration: 0.01s;
  }
}

@media print {
  body { background: var(--bg); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}