/* ============================================================
   Act Intro — article introduction between photo and animation
   Prefix: ai-  (act-intro)
   ============================================================ */

/* ── Section root ────────────────────────────────────────────── */
.ai-section {
  background:   var(--act-bg);
  position:     relative;
}

/* Soft gradient from the dark photo section above */
.ai-section::before {
  content:      '';
  position:     absolute;
  top:          0;
  left:         0;
  right:        0;
  height:       80px;
  background:   linear-gradient(to bottom, #050c05, var(--act-bg));
  pointer-events: none;
}

/* ── Inner content wrapper ───────────────────────────────────── */
.ai-inner {
  max-width:    1400px;
  margin:       0 auto;
  padding:      5rem clamp(1.5rem, 5vw, 5rem) 4rem;
}

/* ── Title ───────────────────────────────────────────────────── */
.ai-header {
  margin-bottom: 3rem;
}

.ai-title {
  font-family:   Georgia, 'Times New Roman', serif;
  font-size:     clamp(1.6rem, 3.8vw, 2.8rem);
  color:         var(--act-text-primary);
  font-weight:   normal;
  line-height:   1.24;
  letter-spacing: -0.01em;
  margin:        0;
  max-width:     22ch;
}

/* ── Prose block: map floats left, text wraps ────────────────── */
.ai-prose {
  display:       flow-root;  /* BFC contains the float */
}

.ai-prose p {
  font-family:   Georgia, 'Times New Roman', serif;
  font-size:     var(--act-prose-size);
  color:         var(--act-text-body);
  line-height:   1.74;
  margin:        0 0 1.4em;
}

/* ── Germany map ─────────────────────────────────────────────── */
.ai-map-figure {
  float:         left;
  width:         min(180px, 30%);
  margin:        0 2.8rem 1.4rem 0;
}

.ai-map-svg {
  display:       block;
  width:         100%;
  height:        auto;
  overflow:      visible;
}

.ai-map-germany {
  fill:          rgba(26, 40, 16, 0.08);
  stroke:        rgba(26, 40, 16, 0.38);
  stroke-width:  1.8;
  stroke-linejoin: round;
}

/* Harz highlight: pulsing dot */
.ai-map-harz-glow {
  fill:          rgba(184, 48, 16, 0.15);
}

.ai-map-harz {
  fill:          #B83010;
}

.ai-map-label {
  font-family:   'Courier New', Courier, monospace;
  font-size:     9px;
  fill:          rgba(26, 40, 16, 0.65);
  letter-spacing: 0.04em;
}

.ai-map-connector {
  stroke:        rgba(26, 40, 16, 0.30);
  stroke-width:  0.8;
}

.ai-map-caption {
  display:       block;
  margin-top:    0.5rem;
  font-family:   var(--act-font-mono);
  font-size:     0.50rem;
  letter-spacing: 0.06em;
  color:         rgba(26, 40, 16, 0.38);
  text-align:    center;
  text-transform: uppercase;
}

/* ── NDVI colour scale ───────────────────────────────────────── */
.ai-ndvi-scale {
  clear:         both;
  margin-top:    2.8rem;
}

.ai-ndvi-header {
  display:       flex;
  justify-content: space-between;
  font-family:   var(--act-font-mono);
  font-size:     0.54rem;
  color:         rgba(26, 40, 16, 0.50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.ai-ndvi-bar {
  height:        12px;
  border-radius: 4px;
  background:    linear-gradient(to right,
    #6e5a3a  0%,
    #a07840 18%,
    #d4b458 26%,
    #ede070 33%,
    #c8dc50 41%,
    #88c030 52%,
    #409818 63%,
    #1e7008 76%,
    #0a4806 88%,
    #052803 100%
  );
  border:        1px solid rgba(26, 40, 16, 0.10);
}

.ai-ndvi-ticks {
  display:       flex;
  justify-content: space-between;
  font-family:   var(--act-font-mono);
  font-size:     0.52rem;
  color:         rgba(26, 40, 16, 0.42);
  letter-spacing: 0.02em;
  margin-top:    0.32rem;
}

.ai-ndvi-label {
  font-family:   var(--act-font-mono);
  font-size:     0.54rem;
  color:         rgba(26, 40, 16, 0.48);
  margin-top:    0.9rem;
  letter-spacing: 0.02em;
}

/* ── Orbit strip: parchment panoramic band ───────────────────── */
.ai-orbit-strip {
  position:       relative;
  background:     var(--act-bg);
  width:          100%;
  overflow:       visible;  /* popup allowed to overflow upward over NDVI scale */
  padding:        2.4rem 0 0;
}

/* Inner clip wrapper — clips only the SVG so the satellite
   stays hidden off-screen during fly-in without trapping the popup */
.ai-orbit-svg-clip {
  overflow:       hidden;
}

.ai-orbit-svg {
  display:       block;
  width:         100%;
  height:        auto;
}

/* Earth arc */
.ai-earth-arc {
  fill:          none;
  stroke:        rgba(26, 40, 16, 0.22);
  stroke-width:  1.5;
}

/* Earth fill (ground tint) */
.ai-earth-fill {
  fill:          rgba(26, 40, 16, 0.05);
}

/* Orbit path */
.ai-orbit-path {
  fill:          none;
  stroke:        rgba(26, 40, 16, 0.28);
  stroke-width:  1;
  stroke-dasharray: 6 6;
}

/* Pulsing dot at resting position */
.ai-orbit-pulse {
  fill:          #2D6A1B;
  transform-box: fill-box;
  transform-origin: center;
  opacity:       0;
  transition:    opacity 400ms ease 0ms;
}

.ai-orbit-pulse.is-visible {
  opacity:       1;
  animation:     ai-pulse 2s ease-in-out infinite;
}

@keyframes ai-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.75; }
  50%       { transform: scale(3.0); opacity: 0;    }
}

/* Label group (fades in after satellite arrives) */
.ai-sat-label {
  opacity:        0;
  transition:     opacity 500ms ease 0ms;
}

.ai-sat-label.is-visible {
  opacity:        1;
}

/* ── Satellite model ─────────────────────────────────────────── */
.ai-satellite {
  cursor:          help;
}

/* ── Satellite body parts — dark-on-parchment theme ─────────── */
.ai-sat-bus {
  fill:          rgba(26, 40, 16, 0.07);
  stroke:        rgba(26, 40, 16, 0.72);
  stroke-width:  1.2;
}
.ai-sat-mlid {
  stroke:        rgba(26, 40, 16, 0.18);
  stroke-width:  0.55;
  fill:          none;
}
.ai-sat-face {
  fill:          rgba(26, 40, 16, 0.10);
  stroke:        rgba(26, 40, 16, 0.45);
  stroke-width:  0.8;
}
.ai-sat-face-line {
  stroke:        rgba(26, 40, 16, 0.16);
  stroke-width:  0.5;
  fill:          none;
}
.ai-sat-mast {
  stroke:        rgba(26, 40, 16, 0.55);
  stroke-width:  1;
  fill:          none;
}
.ai-sat-mast-tube {
  fill:          rgba(26, 40, 16, 0.07);
  stroke:        rgba(26, 40, 16, 0.45);
  stroke-width:  0.7;
}
.ai-sat-solar {
  fill:          rgba(50, 72, 195, 0.09);
  stroke:        rgba(26, 40, 16, 0.65);
  stroke-width:  1.1;
}
.ai-sat-solar-seam {
  stroke:        rgba(26, 40, 16, 0.55);
  stroke-width:  1;
  fill:          none;
}
.ai-sat-cell {
  stroke:        rgba(26, 40, 16, 0.17);
  stroke-width:  0.55;
  fill:          none;
}
.ai-sat-msi {
  fill:          rgba(26, 40, 16, 0.11);
  stroke:        rgba(26, 40, 16, 0.68);
  stroke-width:  1.1;
}
.ai-sat-msi-aper {
  fill:          rgba(26, 40, 16, 0.28);
  stroke:        rgba(26, 40, 16, 0.58);
  stroke-width:  0.8;
}
.ai-sat-detail {
  stroke:        rgba(26, 40, 16, 0.40);
  stroke-width:  0.8;
  fill:          none;
}
.ai-sat-detail-dot {
  fill:          rgba(26, 40, 16, 0.42);
  stroke:        none;
}
.ai-sat-strtrk {
  fill:          rgba(26, 40, 16, 0.07);
  stroke:        rgba(26, 40, 16, 0.52);
  stroke-width:  0.7;
}

/* ── Satellite popup tooltip ─────────────────────────────────── */
.ai-sat-popup {
  position:       absolute;
  bottom:         58%;
  left:           clamp(16px, calc(50% - 150px), calc(100% - 316px));
  width:          300px;
  padding:        0.85rem 1rem 0.9rem;
  background:     rgba(10, 18, 7, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:         1px solid rgba(45, 106, 27, 0.30);
  border-radius:  10px;
  box-shadow:     0 16px 48px rgba(0, 0, 0, 0.50),
                  0  4px 12px rgba(0, 0, 0, 0.30);
  font-family:    var(--act-font-mono);
  font-size:      0.60rem;
  color:          rgba(235, 248, 228, 0.80);
  line-height:    1.60;
  opacity:        0;
  pointer-events: none;
  transform:      translateY(8px);
  transition:     opacity 200ms ease,
                  transform 240ms cubic-bezier(0.34, 1.38, 0.64, 1);
  z-index:        100;
}

.ai-sat-popup.is-open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}

.ai-sat-popup::after {
  content:        '';
  position:       absolute;
  top:            100%;
  left:           50%;
  transform:      translateX(-50%);
  border:         7px solid transparent;
  border-top-color: rgba(10, 18, 7, 0.97);
  border-bottom-width: 0;
}

.ai-sat-popup-label {
  display:        block;
  font-size:      0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(235, 248, 228, 0.45);
  margin-bottom:  0.45rem;
}

.ai-sat-popup p {
  margin:         0 0 0.6rem;
}

.ai-sat-popup ul {
  margin:         0;
  padding-left:   1.1em;
}

.ai-sat-popup li {
  margin-bottom:  0.2rem;
}

.ai-sat-popup-src {
  display:        block;
  margin-top:     0.6rem;
  color:          rgba(150, 210, 90, 0.85);
  text-decoration: none;
  font-size:      0.58rem;
  transition:     color 140ms ease;
}

.ai-sat-popup-src:hover {
  color:           rgba(180, 235, 120, 0.95);
  text-decoration: underline;
}

/* ── Orbit strip footer label ────────────────────────────────── */
.ai-orbit-footer {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  padding:        0.7rem clamp(1.5rem, 5vw, 5rem) 0.9rem;
  font-family:    var(--act-font-mono);
  font-size:      0.50rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          rgba(26, 40, 16, 0.32);
  border-top:     1px solid rgba(26, 40, 16, 0.08);
}

/* ── Parchment-to-dark transition ────────────────────────────── */
.ai-to-dark {
  height:         80px;
  background:     linear-gradient(to bottom, var(--act-bg), #050c05);
}

/* ── Entrance animation (shared .act-enter pattern) ─────────── */
.ai-section .act-enter {
  opacity:       0;
  transform:     translateY(var(--entrance-dist, 36px));
}

.ai-section .act-enter.is-visible {
  opacity:       1;
  transform:     translateY(0);
  transition:    opacity var(--entrance-dur, 600ms) var(--entrance-ease, cubic-bezier(0.22,1,0.36,1)),
                 transform var(--entrance-dur, 600ms) var(--entrance-ease, cubic-bezier(0.22,1,0.36,1));
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .ai-map-figure {
    float:      none;
    width:      min(160px, 50%);
    margin:     0 auto 1.6rem;
  }

  .ai-orbit-strip {
    padding-top: 1.6rem;
  }
}