/* === HERO CSS FALLBACK (mobile / no WebGL) === */
.hero-gradient-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(45, 90, 61, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(200, 150, 60, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 20% 60%, rgba(26, 58, 42, 0.4) 0%, transparent 55%);
  animation: hero-breathe 8s ease-in-out infinite alternate;
}

@keyframes hero-breathe {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}

/* === GLOW PULSE (VSL ramka, karty) === */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(200,150,60,0.15), 0 0 40px rgba(200,150,60,0.05); }
  50%       { box-shadow: 0 0 35px rgba(200,150,60,0.3),  0 0 70px rgba(200,150,60,0.12); }
}

.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* === SHIMMER (skeleton placeholders) === */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-card) 0%,
    rgba(45, 90, 61, 0.15) 40%,
    rgba(200, 150, 60, 0.08) 50%,
    rgba(45, 90, 61, 0.15) 60%,
    var(--color-bg-card) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 2s linear infinite;
}

/* === GRADIENT TEXT ANIMATION === */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-gradient-animated {
  background: linear-gradient(270deg, var(--color-text), var(--color-gold-light), var(--color-gold), var(--color-green-accent), var(--color-text));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

/* === SCAN LINE OVERLAY === */
@keyframes scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* === FLOAT === */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.float { animation: float 4s ease-in-out infinite; }

/* === BORDER GRADIENT ANIMATE === */
@keyframes border-rotate {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* === FADE IN UP (fallback bez GSAP) === */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === STAGGER DELAYS === */
.stagger > * { --stagger-delay: 0s; }
.stagger > *:nth-child(1) { transition-delay: 0.1s; }
.stagger > *:nth-child(2) { transition-delay: 0.2s; }
.stagger > *:nth-child(3) { transition-delay: 0.3s; }
.stagger > *:nth-child(4) { transition-delay: 0.4s; }
.stagger > *:nth-child(5) { transition-delay: 0.5s; }

/* === SPINNING GOLD RING === */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* === CTA SECTION BACKGROUND === */
@keyframes cta-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === CHAR ANIMATION PREP (Splitting.js) === */
.char {
  display: inline-block;
  overflow: visible;
  padding-bottom: 0.12em;
}

[data-splitting] .char {
  --char-index: 0;
}

/* === PRICE FLIP === */
.price-flip {
  perspective: 400px;
}

.price-flip__inner {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  position: relative;
}

.price-flip.flipped .price-flip__inner {
  transform: rotateY(180deg);
}

.price-flip__front,
.price-flip__back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.price-flip__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}