/* ============================================================
   SPINDL WEB — Animations
   Motion-path skier on slope, hiker on winding trail
   ============================================================ */

/* ============================================================
   WINTER SCENE — slope + skier on CSS motion path
   ============================================================ */
.ski-scene {
  position: relative;
  width: 100%;
  height: 180px;
  margin: var(--space-md) 0;
  overflow: hidden;
}

.ski-scene svg.slope-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Skier follows the slope path via offset-path */
.skier-mover {
  position: absolute;
  top: 0; left: 0;
  width: 64px;
  height: 64px;
  offset-path: path('M -30,10 C 120,-10 250,60 420,100 C 580,138 720,160 960,170');
  offset-distance: 0%;
  offset-rotate: auto;
  opacity: 0;
}

.skier-mover.animate {
  animation: ski-down 5s cubic-bezier(0.4,0,0.6,1) forwards;
  animation-delay: 0.3s;
  opacity: 1;
}

@keyframes ski-down {
  0%   { offset-distance: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Repeating lean animation on skier body */
.skier-svg .skier-body {
  animation: skierLean 1.1s ease-in-out infinite alternate;
  transform-origin: 32px 28px;
}

@keyframes skierLean {
  0%   { transform: rotate(-5deg); }
  100% { transform: rotate(6deg); }
}

.skier-svg .pole-l {
  transform-origin: 16px 38px;
  animation: poleL 0.55s ease-in-out infinite alternate;
}
.skier-svg .pole-r {
  transform-origin: 48px 38px;
  animation: poleR 0.55s ease-in-out infinite alternate;
}
@keyframes poleL {
  0%   { transform: rotate(-12deg); }
  100% { transform: rotate(10deg); }
}
@keyframes poleR {
  0%   { transform: rotate(10deg); }
  100% { transform: rotate(-12deg); }
}

/* Snow spray at skis */
.skier-svg .snow {
  animation: snowPuff 0.35s ease-in-out infinite;
}
@keyframes snowPuff {
  0%,100% { opacity: 0.2; transform: scaleX(0.7); }
  50%      { opacity: 0.7; transform: scaleX(1.1); }
}

/* ============================================================
   SUMMER SCENE — winding trail + hiker embedded in SVG
   Hiker animated via SMIL animateMotion (no offset-path needed).
   Walking cycle still uses CSS animations on the nested <svg>.
   transform-box: fill-box makes transform-origin relative to
   each element's own bounding box → correct pivot in SVG space.
   ============================================================ */
.summer-scene {
  position: relative;
  width: 100%;
  /* height intentionally omitted — aspect-ratio: 960/180 in style.css controls height */
  margin: var(--space-md) 0 var(--space-lg);
  overflow: visible; /* allow hiker head to show above viewBox */
}

/* Hiker walking cycle — applied to the nested <svg> inside hikerGroup */
.hiker-svg .hiker-leg-l {
  transform-box: fill-box;
  transform-origin: 50% 0%;  /* top of bounding box = hip joint */
  animation: legL 0.55s ease-in-out infinite alternate;
}
.hiker-svg .hiker-leg-r {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: legR 0.55s ease-in-out infinite alternate;
}
@keyframes legL {
  0%   { transform: rotate(-20deg); }
  100% { transform: rotate(16deg); }
}
@keyframes legR {
  0%   { transform: rotate(16deg); }
  100% { transform: rotate(-20deg); }
}

.hiker-svg .hiker-arm-l {
  transform-box: fill-box;
  transform-origin: 80% 0%;  /* shoulder is near right-top of arm bounding box */
  animation: armL 0.55s ease-in-out infinite alternate;
}
.hiker-svg .hiker-arm-r {
  transform-box: fill-box;
  transform-origin: 20% 0%;
  animation: armR 0.55s ease-in-out infinite alternate;
}
@keyframes armL {
  0%   { transform: rotate(14deg); }
  100% { transform: rotate(-12deg); }
}
@keyframes armR {
  0%   { transform: rotate(-12deg); }
  100% { transform: rotate(14deg); }
}

/* Head bob */
.hiker-svg .hiker-head {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: headBob 0.55s ease-in-out infinite alternate;
}
@keyframes headBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1px); }
}

/* ============================================================
   CHAIRLIFT — CSS offset-path on SVG <g> (uses SVG coord space)
   ============================================================ */
#chairGroup {
  offset-path: path('M 42,100 C 140,80 290,60 450,44 C 580,32 720,22 918,14');
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: ride-chair 11s ease-in-out infinite;
  opacity: 0;
}

@keyframes ride-chair {
  0%   { offset-distance: 0%;   opacity: 0; }
  5%   { offset-distance: 4%;   opacity: 1; }
  88%  { offset-distance: 94%;  opacity: 1; }
  95%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ============================================================
   HIKER — path movement via SMIL animateMotion (in HTML),
   walking cycle only via CSS (legs / arms / head bob).
   ============================================================ */
/* No CSS offset-path needed — SMIL handles path motion */

/* ============================================================
   HERO ENTRANCE — elements start hidden, GSAP reveals them
   ============================================================ */
.hero-content > .eyebrow,
.hero-content > .hero-sub,
.hero-content > .hero-actions,
.hero-content > .hero-scroll {
  opacity: 0;
}
/* .gsap-word spans created by word-splitter — start visible,
   GSAP.set() hides them immediately before animation            */

/* ============================================================
   PARALLAX HERO
   ============================================================ */
.hero-bg { will-change: transform; }

/* ============================================================
   LONG STAY — CONFETTI
   ============================================================ */
.confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
}

.confetti-piece.burst {
  animation: confettiFall 1.4s ease-out forwards;
}

@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(-10px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(200px) rotate(720deg); }
}

/* ============================================================
   DISCOUNT NUMBER BUMP
   ============================================================ */
.discount-number.bump {
  animation: numBump 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes numBump {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ============================================================
   CARD STAGGER (handled by JS adding .visible)
   ============================================================ */
.room-card,
.ski-card,
.summer-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              box-shadow 0.35s ease;
}
.room-card.visible,
.ski-card.visible,
.summer-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   KEYFRAMES (shared)
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   VERTICAL SECTION LABELS — luxury hotel style side text
   Reads bottom-to-top on the left edge of each section.
   Sourced from data-label="…" attribute on <section>.
   Only shown at ≥1100px where there's gutter space.
   ============================================================ */
section[data-label] { position: relative; }

section[data-label]::before {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;

  font-family: var(--font-body, 'Lato', sans-serif);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.28);

  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Winter section — lighter text (dark bg) */
#zima[data-label]::before {
  color: rgba(201, 168, 76, 0.40);
}

/* Hide on viewports too narrow for a gutter */
@media (max-width: 1100px) {
  section[data-label]::before { display: none; }
}

/* ============================================================
   3D CARD TILT — perspective container for GSAP rotateX/Y
   ============================================================ */
.room-card,
.ski-card,
.summer-card {
  transform-style: preserve-3d;
}

/* ============================================================
   REDUCED MOTION — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  /* Keep reveal elements visible even without animation */
  .reveal, .room-card, .ski-card, .summer-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}