/* ============================================
   THREE WORLDS HERO
   3 panes — Wedding / Executive / Party
   Grid with :has() hover expansion on desktop.
   Stacks vertically on tablet/mobile.
   ============================================ */

.hero-three-worlds {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--nav-height);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-deep);
}

.hero-panes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex: 1;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  transition: grid-template-columns var(--duration-slow) var(--ease-out);
}

/* :has() hover expansion — desktop only */
@media (min-width: 1024px) {
  .hero-panes:has(.pane-wedding:hover) {
    grid-template-columns: 3fr 1fr 1fr;
  }
  .hero-panes:has(.pane-executive:hover) {
    grid-template-columns: 1fr 3fr 1fr;
  }
  .hero-panes:has(.pane-party:hover) {
    grid-template-columns: 1fr 1fr 3fr;
  }
  .hero-panes:hover .pane:not(:hover) {
    opacity: 0.55;
  }
  .pane {
    transition:
      opacity var(--duration-slow) var(--ease-out),
      filter var(--duration-slow) var(--ease-out);
  }
}

/* Tablet/mobile — stack vertically */
@media (max-width: 1023px) {
  .hero-panes {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 60vh);
    min-height: auto;
  }
}

/* Phone — shorter panes so all 3 worlds stay scannable */
@media (max-width: 540px) {
  .hero-panes {
    grid-template-rows: repeat(3, 52vh);
  }
}

/* ============================================
   Pane — shared structure
   Photo layer (background-image) + overlay (::before) +
   decorations (.pane-bg) + content (.pane-content on top)
   ============================================ */
.pane {
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--color-champagne-soft);
  min-height: 0;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  transition: transform var(--duration-slow) var(--ease-out);
}

.pane:last-child {
  border-right: none;
}

/* Dark overlay sits directly above the photo, below decorations */
.pane::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .pane {
    transition:
      opacity var(--duration-slow) var(--ease-out),
      background-position var(--duration-slow) var(--ease-out);
  }
  .pane:hover {
    background-position: center 30%;
  }
}

@media (max-width: 1023px) {
  .pane {
    border-right: none;
    border-bottom: 1px solid var(--color-champagne-soft);
  }
  .pane:last-child {
    border-bottom: none;
  }
}

/* Decoration layer (svg glimmer/grid/orbs, scan pseudo on executive) */
.pane-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.pane-bg svg {
  width: 100%;
  height: 100%;
}

.pane-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: var(--space-xl);
}

/* Subtle text shadow for readability over photos.
   Each text pixel gets its own soft dark halo so contrast
   holds regardless of underlying photo brightness. */
.pane-content,
.pane-content p,
.pane-content span,
.pane-content em,
.pane-content h2,
.pane-content li,
.pane-content a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.5);
}

/* CTAs with borders/backgrounds don't need text-shadow — remove to avoid glow */
.pane-content .cta-border,
.pane-content .cta-gradient {
  text-shadow: none;
}

.pane-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 80px;
}

.pane-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.eyebrow {
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

.pane-desc {
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 260px;
  margin: 0;
}

.pane-title {
  margin: 0;
  line-height: 0.9;
}

/* ============================================
   Pane — WEDDING
   ============================================ */
.pane-wedding {
  background-color: var(--w-bg-to);
  background-image: url('../img/weddings-01-bride-limo.webp');
}

.pane-wedding::before {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(26, 20, 16, 0.40) 30%,
    rgba(26, 20, 16, 0.65) 60%,
    rgba(10, 10, 10, 0.95) 100%
  );
}

.pane-wedding .eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-champagne);
  font-size: 9px;
  letter-spacing: 0.4em;
}

.pane-wedding .quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--w-quote);
  font-size: 13px;
  line-height: 1.6;
  max-width: 280px;
  margin: 0;
}

/* Executive quote — mono, techy echo of wedding's italic quote */
/* Executive quote — mono, same visual weight as Wedding quote.
   Reads as a deliberate hero line, not as metadata. */
.pane-executive .quote-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0;
  max-width: 280px;
  margin: var(--space-md) 0 var(--space-lg);
}

/* Party quote — Bebas uppercase with pink→gold→pink gradient.
   Drop-shadow anchors text over photo. Reads as a mantra. */
.pane-party .quote-party {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 340px;
  margin: var(--space-md) 0 var(--space-lg);
  background: linear-gradient(
    90deg,
    var(--p-pink) 0%,
    var(--p-gold) 50%,
    var(--p-pink) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* Party top row — eyebrow on left, dots on right (mirror of executive) */
.party-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.pane-wedding .pane-title span {
  display: block;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text-primary);
}

.pane-wedding .pane-title em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--w-accent);
  font-size: 56px;
  line-height: 0.9;
}

/* ============================================
   Pane — EXECUTIVE
   ============================================ */
.pane-executive {
  background-color: var(--e-bg-to);
  background-image: url('../img/fleet-mercedes-s-class.webp');
}

.pane-executive::before {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.55) 35%,
    rgba(10, 10, 10, 0.82) 65%,
    rgba(10, 10, 10, 0.95) 100%
  );
}

.pane-executive .pane-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    transparent
  );
  animation: scan 8s linear infinite;
  pointer-events: none;
}

/* Executive eyebrow — mono champagne, same size as other world eyebrows */
.pane-executive .eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--color-champagne);
  text-transform: uppercase;
}

/* Legacy generic .pane-executive .mono — kept for backward-compat on
   anything else that might hit it (currently none on homepage hero) */
.pane-executive .mono {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}

/* Vehicle spec label under photo zone */
.vehicle-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-sm);
}

.kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pane-title-display {
  font-family: var(--font-display);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
}

.pane-executive .pane-title-display {
  font-size: 56px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.dot-gold {
  color: var(--e-signal);
}

.pane-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pane-bullets li {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/* ============================================
   Pane — PARTY
   ============================================ */
.pane-party {
  background-color: var(--p-bg-to);
  background-image: url('../img/fleet-party-bus.webp');
  position: relative;
}

.pane-party::before {
  background: linear-gradient(
    180deg,
    rgba(30, 10, 40, 0.45) 0%,
    rgba(131, 56, 236, 0.18) 30%,
    rgba(60, 10, 40, 0.55) 60%,
    rgba(10, 0, 20, 0.95) 100%
  );
}

/* Keep the neon radial orbs as a secondary decoration layer above overlay,
   but drop intensity so photo reads through */
.pane-party .pane-bg {
  background:
    radial-gradient(
      circle at 30% 70%,
      rgba(255, 0, 110, 0.28) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(131, 56, 236, 0.28) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(212, 175, 55, 0.22) 0%,
      transparent 40%
    );
  mix-blend-mode: screen;
}

.pane-party .eyebrow,
.party-eyebrow {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--p-pink);
  text-transform: uppercase;
}

.dot-cluster {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pane-party .pane-title-display {
  font-size: 56px;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}

.gradient-text {
  background: linear-gradient(
    90deg,
    var(--p-pink),
    var(--p-purple),
    var(--p-gold)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================
   CTAs — unified shape across all 3 worlds.
   Same geometry, different colors per world.
   ============================================ */
.pane-cta {
  align-self: flex-start;
  margin-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition:
    background var(--duration-base) ease,
    color var(--duration-base) ease,
    gap var(--duration-base) ease;
  min-height: 46px;
  box-sizing: border-box;
}

.pane-cta:hover,
.pane-cta:focus-visible {
  gap: 14px;
}

/* Legacy aliases (cta-link / cta-border / cta-gradient) now inherit
   the shared .pane-cta shape. Only color/hover differs per world. */

/* Wedding — champagne outline, serif italic text, fills on hover */
.cta-link {
  color: var(--color-champagne);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: none;
}

.cta-link:hover,
.cta-link:focus-visible {
  background: var(--color-champagne);
  color: var(--color-bg-deep);
}

/* Executive — champagne outline, mono text, fills on hover (same pattern) */
.cta-border {
  color: var(--color-champagne);
}

.cta-border:hover,
.cta-border:focus-visible {
  background: var(--color-champagne);
  color: var(--color-bg-deep);
}

.cta-border .pulse-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
}

/* Party — gradient text + gradient border via color mix, fills gradient on hover */
.cta-gradient {
  color: var(--p-pink);
  border-color: var(--p-pink);
  position: relative;
  overflow: hidden;
}

.cta-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--p-pink), var(--p-purple));
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  z-index: 0;
}

.cta-gradient > * {
  position: relative;
  z-index: 1;
}

.cta-gradient:hover,
.cta-gradient:focus-visible {
  color: #fff;
  border-color: transparent;
}

.cta-gradient:hover::before,
.cta-gradient:focus-visible::before {
  opacity: 1;
}

/* ============================================
   Background SVG helpers
   ============================================ */
.bg-curve {
  fill: none;
  stroke: var(--color-champagne);
  stroke-width: 0.4;
  opacity: 0.3;
}

.bg-glow {
  fill: url(#weddingGlow);
  opacity: 0.6;
}

.bg-grid-line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 0.4;
}

.corner-marker {
  fill: rgba(255, 255, 255, 0.2);
}

.glimmer-dot {
  animation: glimmer 3s ease-in-out infinite;
}

.glimmer-dot:nth-child(2n) { animation-delay: 0.4s; }
.glimmer-dot:nth-child(3n) { animation-delay: 0.8s; }
.glimmer-dot:nth-child(5n) { animation-delay: 1.6s; }

/* ============================================
   Animations
   ============================================ */
@keyframes scan {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}

@keyframes blink {
  0%, 60%, 100% { opacity: 1; }
  30%           { opacity: 0.4; }
}

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
  flex-shrink: 0;
}

.pulse-dot.pink   { background: var(--p-pink); }
.pulse-dot.purple { background: var(--p-purple); animation-delay: 0.3s; }
.pulse-dot.gold   { background: var(--p-gold);   animation-delay: 0.6s; }

@keyframes glimmer {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.9; }
}

/* ============================================
   Hero footer strip
   ============================================ */
.hero-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-xl);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-deep);
  flex-shrink: 0;
}

.hero-footer span {
  white-space: nowrap;
}

.hero-footer .scroll-hint {
  text-align: center;
}

@media (max-width: 768px) {
  .hero-footer {
    flex-direction: column;
    gap: 8px;
    padding: var(--space-md);
    text-align: center;
  }
  .hero-footer span {
    white-space: normal;
  }
}

/* ============================================
   Pane responsive font scaling (<1024px stack)
   ============================================ */
@media (max-width: 1023px) {
  .pane {
    padding: var(--space-xl) var(--space-lg);
  }
  .pane-wedding .pane-title em { font-size: 44px; }
  .pane-wedding .pane-title span { font-size: 26px; }
  .pane-executive .pane-title-display { font-size: 44px; }
  .pane-party .pane-title-display { font-size: 44px; }
}

@media (max-width: 480px) {
  .pane {
    padding: var(--space-lg) var(--space-md);
  }
  .pane-wedding .pane-title em { font-size: 34px; }
  .pane-wedding .pane-title span { font-size: 20px; }
  .pane-executive .pane-title-display { font-size: 34px; }
  .pane-party .pane-title-display { font-size: 34px; }
  .pane-wedding .quote { font-size: 12px; max-width: 100%; }
  .pane-executive .quote-mono { font-size: 12px; max-width: 100%; }
  .pane-party .quote-party { font-size: 18px; max-width: 100%; }
  .pane-bullets li { font-size: 12px; }
  .pane-desc { font-size: 12px; max-width: 100%; }
  .pane-cta {
    padding: 12px 18px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .pane-top { min-height: 60px; }
}

/* Very narrow — iPhone SE (320px) */
@media (max-width: 360px) {
  .pane-wedding .pane-title em { font-size: 30px; }
  .pane-executive .pane-title-display { font-size: 30px; }
  .pane-party .pane-title-display { font-size: 30px; }
}