/* ============================================================
   template-hero-slider.css — v22.1 "Southern Ocean"
   Primali Travels — Hero Slider
   ⚠  ALL color/font/spacing tokens from main.css variables only
   ⚠  NO hardcoded hex values, NO hardcoded px/rem spacing
   ⚠  NO hardcoded font-family strings — use var(--font-*)
   ============================================================ */

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes ptFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes ptSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes ptScaleFade {
  0%   { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1);    }
}

@keyframes ptRailPip {
  0%,100% { top: 4px; }
  50%      { top: calc(100% - 12px); }
}

@keyframes ptMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes ptGemPulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* ── ELEMENT ENTRY STATE ─────────────────────────────────────── */
.pt-anim--in {
  animation: ptFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pt-hero__eyebrow.pt-anim--in  { animation-delay: 0.00s; }
.pt-hero__headline.pt-anim--in { animation-delay: 0.10s; }
.pt-hero__rule.pt-anim--in     { animation-delay: 0.18s; }
.pt-hero__desc.pt-anim--in     { animation-delay: 0.24s; }
.pt-hero__stats.pt-anim--in    { animation-delay: 0.30s; }
.pt-hero__actions.pt-anim--in  { animation-delay: 0.38s; }

/* ── SECTION ─────────────────────────────────────────────────── */
.pt-hero {
  position:       relative;
  width:          100%;
  height:         100svh;
  min-height:     600px;
  max-height:     900px;
  overflow:       hidden;
  display:        flex;
  align-items:    center;
  background:     var(--color-teal-abyss);
  font-family:    var(--font-primary);
}

/* ── SLIDE BACKGROUNDS ───────────────────────────────────────── */
.pt-hero__slides {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.pt-hero__slide {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             0;
  transition:          opacity 1.1s ease;
  transform:           scale(1.04);
  animation:           ptScaleFade 12s ease-in-out infinite alternate;
}

.pt-hero__slide.pt-slide--active {
  opacity: 1;
}

/* ── VIDEO LAYER ─────────────────────────────────────────────── */
/*
   FIX v22.1: Was 0.55 — video appeared murky and unclear.
   Raised to 0.85 so the video reads crisply as the hero visual.
   Overlays above handle text legibility — video opacity is for clarity only.
*/
.pt-hero__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    1;
  opacity:    0;
  transition: opacity 1.2s ease;
}

.pt-hero__video.pt-video--ready {
  opacity: 0.85;
}

/* ── OVERLAYS ────────────────────────────────────────────────── */
/*
   FIX v22.1: The old 4-layer stack was cumulatively suffocating:
     base 0.50 + left peak 0.82 + bottom 0.70 + vignette 0.35
   Destination photography was almost completely buried.

   Redesigned strategy — lighter, more cinematic:
     base:     0.50 → 0.28  (atmospheric tint, not a blackout)
     left:     peak 0.82 → 0.62, fade-out edge 0.60 → 0.55
     bottom:   0.70 → 0.42  (subtle lift, not a dark bar)
     vignette: 0.35 → 0.18  (edge frame only)

   Net result: destination is visible and beautiful,
   text legibility is maintained through the directional left panel.
*/
.pt-hero__overlay {
  position:       absolute;
  inset:          0;
  z-index:        2;
  pointer-events: none;
}

/* Light atmospheric base — removes colour cast without crushing blacks */
.pt-hero__overlay--base {
  background: var(--color-dark-30);
}

/* Left text-legibility gradient — directional, not a full-bleed wall */
.pt-hero__overlay--left {
  background: linear-gradient(
    to right,
    rgba(var(--color-teal-rgb), 0.62) 0%,
    rgba(var(--color-teal-rgb), 0.35) 38%,
    rgba(var(--color-teal-rgb), 0.08) 58%,
    transparent                        100%
  );
}

/* Bottom cinematic fade — horizon ground, not a dark floor */
.pt-hero__overlay--bottom {
  background: linear-gradient(
    to top,
    rgba(var(--color-teal-rgb), 0.42) 0%,
    rgba(var(--color-teal-rgb), 0.10) 20%,
    transparent                        100%
  );
}

/* Hairline edge vignette — perceptual frame, not a dark cloud */
.pt-hero__overlay--vignette {
  background: radial-gradient(
    ellipse at center,
    transparent                        55%,
    rgba(var(--color-teal-rgb), 0.18) 100%
  );
}

/* ── STAGE (text content block) ──────────────────────────────── */
.pt-hero__stage {
  position:         relative;
  z-index:          10;
  width:            100%;
  max-width:        580px;
  padding:          0 var(--spacing-16);
  display:          flex;
  flex-direction:   column;
  gap:              0;
}

/* ── EYEBROW ─────────────────────────────────────────────────── */
.pt-hero__eyebrow {
  display:       flex;
  align-items:   center;
  gap:           var(--spacing-2-5);
  margin-bottom: var(--spacing-4);
}

.pt-hero__eyebrow-line {
  display:     block;
  width:       28px;
  height:      1.5px;
  background:  var(--color-gold);
  flex-shrink: 0;
}

.pt-hero__eyebrow-text {
  font-family:    var(--font-primary);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--color-gold-light);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* ── HEADLINE ────────────────────────────────────────────────── */
.pt-hero__headline {
  font-family:    var(--font-display);
  font-size:      clamp(1.9rem, 3.8vw, 3.0rem);
  font-weight:    var(--font-weight-normal);
  line-height:    var(--leading-tight);
  letter-spacing: var(--ls-tight);
  color:          var(--color-white);
  margin:         0 0 var(--spacing-3-5);
}

/* Italic accent on first word */
.pt-hl-italic {
  font-style: italic;
  color:      var(--color-gold-pale);
}

/* ── GOLD RULE ───────────────────────────────────────────────── */
.pt-hero__rule {
  display:       flex;
  align-items:   center;
  gap:           var(--spacing-2);
  margin-bottom: var(--spacing-3-5);
}

.pt-hero__rule-gem {
  font-size:  0.5rem;
  color:      var(--color-gold);
  animation:  ptGemPulse 3s ease-in-out infinite;
}

/* ── DESCRIPTION ─────────────────────────────────────────────── */
.pt-hero__desc {
  font-family:  var(--font-primary);
  font-size:    clamp(0.82rem, 1.3vw, 0.92rem);
  font-weight:  var(--font-weight-normal);
  line-height:  var(--leading-relaxed);
  color:        var(--color-white-70);
  margin:       0 0 var(--spacing-6);
  max-width:    460px;
}

/* ── STATS STRIP ─────────────────────────────────────────────── */
.pt-hero__stats {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--spacing-6);
  flex-wrap:     wrap;
  margin-bottom: var(--spacing-7);
}

.pt-hero__stat {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-1);
}

.pt-hero__stat-icon {
  color:     var(--color-gold);
  font-size: var(--text-sm);
}

.pt-hero__stat-value {
  font-family:  var(--font-display);
  font-size:    var(--text-xl);
  font-weight:  var(--font-weight-bold);
  color:        var(--color-white);
}

.pt-hero__stat-label {
  font-family:    var(--font-primary);
  font-size:      0.65rem;
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--color-white-50);
  line-height:    var(--leading-snug);
}

/* ── CTA BUTTONS ─────────────────────────────────────────────── */
.pt-hero__actions {
  display:   flex;
  gap:       var(--spacing-3);
  flex-wrap: wrap;
}

.pt-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--spacing-2);
  padding:         var(--spacing-2-5) var(--spacing-6);
  border-radius:   var(--radius-xs);
  font-family:     var(--font-primary);
  font-size:       0.78rem;
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  var(--ls-wide);
  text-transform:  uppercase;
  text-decoration: none;
  cursor:          pointer;
  transition:      var(--transition-base);
  white-space:     nowrap;
  border:          none;
}

.pt-btn--primary {
  background: var(--gradient-gold);
  color:      var(--color-white);
  box-shadow: var(--shadow-gold);
}

.pt-btn--primary:hover {
  background: var(--gradient-gold-hover);
  box-shadow: var(--shadow-gold-lg);
  transform:  translateY(-1px);
  color:      var(--color-white);
}

.pt-btn__arrow {
  font-size:  1rem;
  transition: transform var(--transition-fast);
}

.pt-btn--primary:hover .pt-btn__arrow {
  transform: translateX(4px);
}

.pt-btn--ghost {
  background:      transparent;
  color:           var(--color-white-80);
  border:          1px solid var(--color-white-30);
  backdrop-filter: blur(6px);
}

.pt-btn--ghost:hover {
  background:   var(--color-white-12);
  border-color: var(--color-white-50);
  color:        var(--color-white);
}

/* ── TRUST BADGE ─────────────────────────────────────────────── */
.pt-hero__trust {
  position:   absolute;
  right:      var(--spacing-14);
  top:        50%;
  transform:  translateY(-50%);
  z-index:    12;
  text-align: center;
}

.pt-hero__trust-inner {
  display:                 flex;
  flex-direction:          column;
  align-items:             center;
  gap:                     var(--spacing-1-5);
  padding:                 var(--spacing-5) var(--spacing-4);
  background:              rgba(var(--color-teal-rgb), 0.28);
  border:                  1px solid var(--border-gold);
  border-radius:           var(--radius-sm);
  backdrop-filter:         blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-width:               96px;
}

.pt-hero__trust-icon {
  font-size:     var(--text-lg);
  color:         var(--color-gold-light);
  margin-bottom: var(--spacing-1);
}

.pt-hero__trust-value {
  font-family:  var(--font-display);
  font-size:    var(--text-2xl);
  font-weight:  var(--font-weight-bold);
  color:        var(--color-white);
  line-height:  var(--leading-none);
}

.pt-hero__trust-label {
  font-family:    var(--font-primary);
  font-size:      0.6rem;
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--color-gold-pale);
  line-height:    var(--leading-snug);
  text-align:     center;
  white-space:    pre-line;
}

/* ── SLIDE NAVIGATION ────────────────────────────────────────── */
.pt-hero__nav {
  position:    absolute;
  bottom:      var(--spacing-16);
  left:        var(--spacing-16);
  z-index:     12;
  display:     flex;
  align-items: center;
  gap:         var(--spacing-4);
}

.pt-hero__dots {
  display: flex;
  gap:     var(--spacing-1-5);
}

.pt-hero__dot {
  width:         22px;
  height:        2px;
  background:    var(--color-white-30);
  border:        none;
  cursor:        pointer;
  transition:    var(--transition-base);
  padding:       0;
  border-radius: var(--radius-xs);
}

.pt-hero__dot.pt-dot--active {
  background: var(--color-gold);
  width:      36px;
}

.pt-hero__rail {
  width:         72px;
  height:        1.5px;
  background:    var(--color-white-20);
  border-radius: var(--radius-xs);
  overflow:      hidden;
}

.pt-hero__rail-fill {
  height:     100%;
  width:      0%;
  background: var(--color-gold);
  transition: width 0s linear;
}

.pt-hero__counter {
  font-family:  var(--font-primary);
  font-size:    0.72rem;
  font-weight:  var(--font-weight-medium);
  color:        var(--color-white-60);
  display:      flex;
  align-items:  center;
  gap:          var(--spacing-1);
}

.pt-hero__counter-cur {
  color:       var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.pt-hero__counter-sep {
  color: var(--color-white-40);
}

/* ── MEDIA CONTROLS ──────────────────────────────────────────── */
.pt-hero__media {
  position:                absolute;
  bottom:                  var(--spacing-16);
  right:                   var(--spacing-14);
  z-index:                 12;
  display:                 flex;
  align-items:             center;
  gap:                     0;
  background:              var(--color-white-08);
  border:                  1px solid var(--color-white-12);
  border-radius:           var(--radius-xs);
  backdrop-filter:         blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:                hidden;
}

.pt-hero__media-btn {
  background:  transparent;
  border:      none;
  cursor:      pointer;
  color:       var(--color-white-70);
  padding:     var(--spacing-2-5) var(--spacing-3-5);
  font-size:   0.78rem;
  transition:  var(--transition-fast);
  display:     flex;
  align-items: center;
}

.pt-hero__media-btn:hover {
  color:      var(--color-white);
  background: var(--color-white-08);
}

.pt-hero__media-sep {
  width:      1px;
  height:     16px;
  background: var(--color-white-20);
}

/* ── SCROLL CUE ──────────────────────────────────────────────── */
.pt-hero__scroll {
  position:        absolute;
  bottom:          var(--spacing-16);
  left:            50%;
  transform:       translateX(-50%);
  z-index:         12;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--spacing-1-5);
  transition:      opacity var(--transition-slow);
}

.pt-hero__scroll-track {
  width:         1.5px;
  height:        34px;
  background:    var(--color-white-20);
  border-radius: var(--radius-xs);
  position:      relative;
  overflow:      hidden;
}

.pt-hero__scroll-pip {
  position:      absolute;
  left:          0;
  width:         100%;
  height:        10px;
  background:    var(--color-gold);
  border-radius: var(--radius-xs);
  animation:     ptRailPip 1.8s ease-in-out infinite;
}

.pt-hero__scroll-lbl {
  font-family:    var(--font-primary);
  font-size:      0.6rem;
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--color-white-40);
}

/* ── BOTTOM MARQUEE ──────────────────────────────────────────── */
.pt-hero__marquee {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  z-index:     12;
  height:      34px;
  overflow:    hidden;
  background:  var(--color-dark-70);
  border-top:  1px solid var(--color-white-08);
  display:     flex;
  align-items: center;
}

.pt-hero__marquee-track {
  display:     flex;
  align-items: center;
  gap:         0;
  white-space: nowrap;
  animation:   ptMarquee 40s linear infinite;
  will-change: transform;
}

.pt-hero__marquee-track span {
  font-family:    var(--font-primary);
  font-size:      0.62rem;
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--color-white-50);
  padding:        0 var(--spacing-7);
  display:        flex;
  align-items:    center;
  gap:            var(--spacing-3);
}

.pt-hero__marquee-track span i {
  color:     var(--color-gold);
  font-size: 0.3rem;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pt-hero {
    max-height: none;
    min-height: 100svh;
  }

  .pt-hero__stage {
    padding:         0 var(--spacing-6);
    max-width:       100%;
    justify-content: flex-end;
    padding-bottom:  var(--spacing-28);
    align-self:      flex-end;
  }

  .pt-hero__headline {
    font-size: clamp(1.55rem, 6.5vw, 2.2rem);
  }

  .pt-hero__desc {
    font-size: 0.82rem;
  }

  .pt-hero__trust {
    right:     var(--spacing-4);
    top:       var(--spacing-5);
    transform: none;
  }

  .pt-hero__trust-inner {
    padding:   var(--spacing-3-5) var(--spacing-3);
    min-width: 72px;
  }

  .pt-hero__trust-value {
    font-size: var(--text-xl);
  }

  .pt-hero__nav {
    bottom: var(--spacing-12);
    left:   var(--spacing-6);
    gap:    var(--spacing-3);
  }

  .pt-hero__rail { display: none; }

  .pt-hero__media {
    bottom: var(--spacing-12);
    right:  var(--spacing-6);
  }

  .pt-hero__scroll {
    display: none;
  }

  .pt-hero__stats {
    gap: var(--spacing-4);
  }

  .pt-btn {
    padding:   var(--spacing-2-5) var(--spacing-4);
    font-size: 0.72rem;
  }

  /* Slightly stronger left panel on portrait mobile for readability */
  .pt-hero__overlay--left {
    background: linear-gradient(
      to right,
      rgba(var(--color-teal-rgb), 0.68) 0%,
      rgba(var(--color-teal-rgb), 0.36) 55%,
      transparent 100%
    );
  }
}

@media (max-width: 480px) {
  .pt-hero__stage {
    padding:        0 var(--spacing-5);
    padding-bottom: var(--spacing-24);
  }

  .pt-hero__eyebrow-text {
    font-size: 0.60rem;
  }

  .pt-hero__actions {
    flex-direction: column;
    gap:            var(--spacing-2);
  }

  .pt-btn--ghost {
    display: none;
  }
}