/* ANIMACJA FULLSCREEN */
#animation-stage {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.6s ease;
}
#frame-img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
}

/* TEKSTY SCEN */
.scene-text {
  position: absolute; opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none; z-index: 20;
  padding: 28px 36px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, transparent 75%);
}
.scene-text.visible { opacity: 1; transform: translateY(0); }
.scene-label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px; display: block;
  text-shadow: 0 0 40px rgba(0,0,0,1), 0 2px 12px rgba(0,0,0,1);
}
.scene-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; line-height: 1.05; color: var(--text);
  text-shadow: 0 0 80px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,1);
}
.scene-sub {
  font-size: 13px; font-weight: 300; letter-spacing: 0.05em;
  color: rgba(254,254,252,0.5); margin-top: 16px; display: block;
  text-shadow: 0 0 40px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,1);
}
#text-intro {
  bottom: 15%; left: 50%;
  transform: translateX(-50%) translateY(16px);
  text-align: center; width: 100%;
}
#text-intro.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
#text-intro .scene-heading { font-size: clamp(48px, 7vw, 96px); }
#text-konstrukcja {
  top: 50%; left: 6%;
  transform: translateY(calc(-50% + 16px)); max-width: 380px;
}
#text-konstrukcja.visible { transform: translateY(-50%); }
#text-konstrukcja .scene-heading { font-size: clamp(32px, 4vw, 56px); }
#text-detal {
  top: 50%; right: 6%;
  transform: translateY(calc(-50% + 16px));
  text-align: right; max-width: 380px;
}
#text-detal.visible { transform: translateY(-50%); }
#text-detal .scene-heading { font-size: clamp(32px, 4vw, 56px); }
#text-transformacja {
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 16px));
  text-align: center; width: 100%;
}
#text-transformacja.visible { transform: translate(-50%, -50%); }
#text-transformacja .scene-heading { font-size: clamp(40px, 5.5vw, 72px); }

#text-skala {
  top: 50%; left: 6%;
  transform: translateY(calc(-50% + 16px)); max-width: 380px;
}
#text-skala.visible { transform: translateY(-50%); }
#text-skala .scene-heading { font-size: clamp(32px, 4vw, 56px); }

/* WSKAŹNIK POSTĘPU */
#progress-line {
  position: fixed; bottom: 0; left: 0;
  height: 1px; width: 0%;
  background: var(--accent); z-index: 300;
  opacity: 0; transition: opacity 0.3s;
}
#progress-line.animating { opacity: 1; }

/* KROPKI STACJI */
#station-dots {
  position: fixed; right: 24px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 300;
}
.station-dot {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.55);
  background: rgba(25,22,16,0.35);
  color: rgba(254,254,252,0.55);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 0;
  appearance: none;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.station-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: scale(1.08);
}
.station-dot:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* SCROLL HINT */
#scroll-hint {
  position: fixed; bottom: 24px; left: 48px;
  transform: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 300; pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease;
}
#scroll-hint.visible { opacity: 1; }
#scroll-hint span { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }

#skip-btn {
  position: fixed; bottom: 24px; right: 48px;
  background: none; cursor: pointer;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  padding: 10px 20px;
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease, background 0.3s, color 0.3s;
}
#skip-btn.visible { opacity: 1; pointer-events: auto; }
#skip-btn:hover { background: var(--accent); color: var(--bg); }

@keyframes skipPulse {
  0%   { background: transparent;    color: var(--accent); box-shadow: none; }
  35%  { background: #D4B896;  color: var(--bg); box-shadow: 0 0 0 4px rgba(212,184,150,0.25), 0 0 32px rgba(212,184,150,0.45); }
  100% { background: transparent;    color: var(--accent); box-shadow: none; }
}
#skip-btn.pulse {
  animation: skipPulse 1.6s ease-in-out;
}
.chevrons { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.chevron {
  width: 14px; height: 14px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg); opacity: 0;
  animation: chevPulse 2s ease-in-out infinite;
}
.chevron:nth-child(2) { animation-delay: 0.2s; }
@keyframes chevPulse {
  0%   { opacity: 0; transform: rotate(45deg) translateY(-3px); }
  40%  { opacity: 0.6; }
  100% { opacity: 0; transform: rotate(45deg) translateY(5px); }
}

/* SPACER — nie potrzebny przy crossfade, ale zostawiamy pusty żeby nie psuć struktury */
#animation-spacer { display: none; }

@media (max-width: 768px) {
  #animation-stage {
    position: fixed;
    inset: auto 0;
    top: 10vh;
    height: 55vh;
    overflow: hidden;
  }

  #frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .scene-text {
    position: fixed !important;
    top: auto !important;
    bottom: 12vh !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(12px) !important;
    text-align: center !important;
    max-width: 85vw !important;
    width: auto !important;
    padding: 0 24px !important;
    background: none !important;
  }
  .scene-text.visible {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
  }

  #text-intro .scene-heading { font-size: clamp(36px, 9vw, 52px) !important; }
  #text-intro .scene-sub { font-size: 12px; }

  #text-konstrukcja .scene-heading,
  #text-detal .scene-heading,
  #text-skala .scene-heading { font-size: clamp(28px, 7vw, 40px) !important; }

  #text-transformacja .scene-heading { font-size: clamp(32px, 8vw, 44px) !important; }

  .scene-label {
    font-size: 9px !important;
    margin-bottom: 10px !important;
    text-shadow: none !important;
  }
  .scene-heading {
    text-shadow: none !important;
    line-height: 1.15 !important;
  }
  .scene-sub {
    margin-top: 12px !important;
    font-size: 12px !important;
    text-shadow: none !important;
  }

  #scroll-hint {
    bottom: 12px;
  }

  #station-dots {
    right: 14px;
    gap: 8px;
  }
  .station-dot {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
}