/* ==========================================================================
   XPLOROO · Featured Experiences module
   featured-experiences.css — Section container ONLY for now: bordered
   panel, heading, subtitle, and an empty three-slot ticket wrapper. No
   ticket visuals (colors, graphics, gradients, shapes, animations) yet —
   those come in a later pass.
   Scoped entirely under `.featured-experiences` — never touches any other
   section's classes or tokens.
   ========================================================================== */

.featured-experiences {
  position: relative;
  padding-block: var(--home-section-gap); /* homepage inter-section gap, see hero.css */
}

.featured-experiences__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------------
   Premium bordered panel — dark luxury stage with atmospheric depth.
   The tickets (untouched) are the hero; everything below is environment
   lighting around them: layered radial glows baked straight into the
   panel's own `background` (paints first, always behind every child —
   no extra DOM, no stacking-order risk), a handful of tiny particle dots
   in the same layer list, a static titanium/glass edge ring on `::after`,
   and a soft drifting spotlight on `::before` positioned behind the
   ticket stack. `z-index: 0` below turns this panel into its own
   stacking context so the `::before` spotlight's negative z-index stays
   safely contained here and never fights sibling homepage sections.
   ------------------------------------------------------------------------- */
.featured-experiences__panel {
  position: relative;
  z-index: 0;
  isolation: isolate;
  /* All decorative atmosphere (the spotlight below, the heading glow, the
     bottom-depth ellipse under the tickets) is purely absolute-positioned
     background dressing, some of it deliberately overshooting its own box
     via negative inset so the glow fades out softly instead of stopping
     abruptly. Without a clip boundary here, that overshoot bled past the
     panel's own edges and inflated the page's real scrollable width/height
     on mobile, where there's little surrounding margin to absorb it. This
     clips every decorative layer to the panel's own rounded box — box-
     shadow (the outer ambient glow) is exempt from `overflow` clipping by
     spec, so the soft glow around the OUTSIDE of the panel is unaffected;
     only content/pseudo-elements bleeding past the inside edge are cut. */
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background:
    /* tiny atmospheric particles — ~8 subtle points, purple/blue/silver/cherry */
    radial-gradient(circle 3px at 11% 16%, rgba(216, 180, 254, 0.45), transparent),
    radial-gradient(circle 2.5px at 86% 20%, rgba(147, 197, 253, 0.4), transparent),
    radial-gradient(circle 2px at 22% 80%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(circle 3px at 92% 66%, rgba(196, 181, 253, 0.4), transparent),
    radial-gradient(circle 2px at 54% 10%, rgba(165, 213, 255, 0.35), transparent),
    radial-gradient(circle 2px at 6% 52%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(circle 2.5px at 70% 88%, rgba(244, 114, 182, 0.3), transparent),
    radial-gradient(circle 2px at 40% 94%, rgba(147, 197, 253, 0.3), transparent),
    /* layered atmospheric depth — subtle, blends into black, no rainbow */
    radial-gradient(ellipse 60% 45% at 28% 6%, rgba(147, 51, 234, 0.16), transparent 70%),
    radial-gradient(ellipse 70% 55% at 72% 46%, rgba(37, 99, 235, 0.13), transparent 70%),
    radial-gradient(ellipse 45% 40% at 96% 62%, rgba(219, 39, 119, 0.1), transparent 70%),
    radial-gradient(ellipse 65% 42% at 38% 100%, rgba(6, 182, 212, 0.12), transparent 70%),
    var(--surface-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding: clamp(2rem, 1.5rem + 2.5vw, 4rem) clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 90px -30px rgba(124, 58, 237, 0.28),
    0 0 130px -40px rgba(37, 99, 235, 0.2);
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* Static titanium/glass edge ring — dark titanium base, silver highlights,
   a tiny purple/blue reflection woven into the stops. Masked down to a
   hairline that follows the panel's own rounded corners; interior is fully
   transparent so nothing beneath is ever covered. Deliberately NOT the
   rotating titanium sweep used on Trending Packages — this stays static. */
.featured-experiences__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(107, 114, 128, 0.85) 0%,
    rgba(203, 213, 225, 0.9) 22%,
    rgba(147, 197, 253, 0.55) 42%,
    rgba(196, 181, 253, 0.55) 58%,
    rgba(203, 213, 225, 0.9) 78%,
    rgba(75, 79, 86, 0.85) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Soft drifting stage spotlight, centered behind the ticket stack — an
   environmental glow, never a visible rectangle. `z-index: -1` keeps it
   behind the heading/tickets while staying inside the panel's own
   stacking context (established above), and the barely-there translate
   animation is the section's only permitted motion besides the tickets'
   own existing mobile float. */
.featured-experiences__panel::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;
  background: radial-gradient(
    ellipse 55% 50% at 50% 62%,
    rgba(124, 58, 237, 0.16) 0%,
    rgba(37, 99, 235, 0.09) 45%,
    transparent 75%
  );
  pointer-events: none;
  animation: fx-spotlight-drift 11s ease-in-out infinite alternate;
}
@keyframes fx-spotlight-drift {
  0%   { transform: translate(-1.4%, -0.8%); }
  100% { transform: translate(1.4%, 0.8%); }
}
@media (prefers-reduced-motion: reduce) {
  .featured-experiences__panel::before {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Day theme — swap the black-stage atmosphere for a translucent glass
   surface with the same subtle purple/blue/cherry lighting, controlled
   shadows, and a titanium ring tuned to read on a light background.
   Heading/subtitle colors already come from theme-aware tokens elsewhere
   in the design system, so no color overrides are needed for the text.
   Tickets are untouched by this rule.
   ------------------------------------------------------------------------- */
:root[data-theme="light"] .featured-experiences__panel {
  background:
    radial-gradient(circle 3px at 11% 16%, rgba(147, 51, 234, 0.28), transparent),
    radial-gradient(circle 2.5px at 86% 20%, rgba(37, 99, 235, 0.24), transparent),
    radial-gradient(circle 2px at 22% 80%, rgba(17, 17, 23, 0.18), transparent),
    radial-gradient(circle 3px at 92% 66%, rgba(124, 58, 237, 0.24), transparent),
    radial-gradient(circle 2px at 54% 10%, rgba(37, 99, 235, 0.2), transparent),
    radial-gradient(circle 2px at 6% 52%, rgba(17, 17, 23, 0.14), transparent),
    radial-gradient(circle 2.5px at 70% 88%, rgba(219, 39, 119, 0.2), transparent),
    radial-gradient(circle 2px at 40% 94%, rgba(37, 99, 235, 0.18), transparent),
    radial-gradient(ellipse 60% 45% at 28% 6%, rgba(147, 51, 234, 0.1), transparent 70%),
    radial-gradient(ellipse 70% 55% at 72% 46%, rgba(37, 99, 235, 0.08), transparent 70%),
    radial-gradient(ellipse 45% 40% at 96% 62%, rgba(219, 39, 119, 0.07), transparent 70%),
    radial-gradient(ellipse 65% 42% at 38% 100%, rgba(6, 182, 212, 0.08), transparent 70%),
    var(--surface-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 70px -30px rgba(124, 58, 237, 0.18),
    0 0 110px -40px rgba(37, 99, 235, 0.14);
}
:root[data-theme="light"] .featured-experiences__panel::after {
  background: linear-gradient(
    135deg,
    rgba(148, 156, 168, 0.6) 0%,
    rgba(226, 232, 240, 0.85) 22%,
    rgba(96, 165, 250, 0.45) 42%,
    rgba(167, 139, 250, 0.45) 58%,
    rgba(226, 232, 240, 0.85) 78%,
    rgba(120, 126, 136, 0.6) 100%
  );
}
:root[data-theme="light"] .featured-experiences__panel::before {
  background: radial-gradient(
    ellipse 55% 50% at 50% 62%,
    rgba(124, 58, 237, 0.1) 0%,
    rgba(37, 99, 235, 0.06) 45%,
    transparent 75%
  );
}

/* -------------------------------------------------------------------------
   Section head
   ------------------------------------------------------------------------- */
.featured-experiences__head {
  position: relative;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}
/* Tiny premium accent line above the heading — thin, static, low-key. */
.featured-experiences__head::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 0 auto clamp(0.9rem, 0.75rem + 0.6vw, 1.25rem);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.8), rgba(147, 197, 253, 0.8), transparent);
}
.featured-experiences__title {
  position: relative;
  margin: 0;
  font-size: var(--fs-3xl);
}
/* Very subtle ambient glow behind the heading text — purely decorative,
   sits behind the (already white/theme-aware) heading copy. */
.featured-experiences__title::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(124, 58, 237, 0.18), transparent 70%);
  pointer-events: none;
}
.featured-experiences__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Ticket wrapper — three empty placeholders.
   Desktop: arranged horizontally. Mobile: stacked vertically.
   Intentionally unstyled beyond layout — no background, border, radius,
   color or animation on the placeholders themselves yet.
   ------------------------------------------------------------------------- */
.featured-experiences__tickets {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-5);
}
/* Soft elliptical "product photography" shadow/glow beneath the ticket
   stack — an environmental depth cue, not a visible platform. Generated
   before the actual ticket elements in the DOM, so it paints behind them
   without needing any z-index (no risk to the tickets' own hover z-index
   or the mobile float animation's stacking). */
.featured-experiences__tickets::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -10%;
  height: 60%;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(88, 28, 135, 0.28), rgba(0, 0, 0, 0.35) 55%, transparent 80%);
  pointer-events: none;
}
:root[data-theme="light"] .featured-experiences__tickets::before {
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(124, 58, 237, 0.12), rgba(17, 17, 23, 0.1) 55%, transparent 80%);
}

.featured-experiences__ticket {
  flex: 1 1 0%;
  min-height: 154px; /* ~30% shorter than the original 220px */
}

@media (max-width: 768px) {
  .featured-experiences__tickets {
    flex-direction: column;
  }
  .featured-experiences__ticket {
    flex: none;
    min-height: 126px; /* ~30% shorter than the original 180px */
  }
}

/* All three ticket slots hold the real component — center each one so its
   tilt reads as an intentional rotation rather than shifting the layout. */
.featured-experiences__ticket.ticket-1,
.featured-experiences__ticket.ticket-2,
.featured-experiences__ticket.ticket-3 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Per-ticket rotation: ticket-1 tilts left, ticket-2 sits level,
   ticket-3 tilts right. The base .ticket rule below carries the -5deg
   default (ticket-1); these overrides adjust ticket-2 / ticket-3 only. */
.ticket-2 .ticket {
  transform: rotate(0deg);
}
.ticket-3 .ticket {
  transform: rotate(5deg);
}

/* Desktop only — nudge Ticket 2 up ~10% of its own height while keeping
   its 0° rotation and horizontal position untouched. */
@media (min-width: 769px) {
  .ticket-2 .ticket {
    transform: rotate(0deg) translateY(-10%);
  }
}

/* -------------------------------------------------------------------------
   Desktop-only hover interaction (>=1024px). Lifts + scales the hovered
   ticket on top of its existing rotation, deepens its shadow/brightness,
   and dims the other two — purely transform/opacity/filter, no layout
   shift, rotations preserved.
   ------------------------------------------------------------------------- */
.ticket {
  transition: transform 280ms ease-out, box-shadow 280ms ease-out, filter 280ms ease-out;
}
.featured-experiences__ticket {
  position: relative;
  transition: opacity 280ms ease-out;
}

@media (min-width: 1024px) {
  .featured-experiences__tickets:hover .featured-experiences__ticket {
    opacity: 0.93;
  }
  .featured-experiences__tickets:hover .featured-experiences__ticket:hover {
    opacity: 1;
    z-index: 5;
  }

  .ticket-1:hover .ticket {
    transform: rotate(-5deg) translateY(-14px) scale(1.03);
  }
  .ticket-2:hover .ticket {
    transform: rotate(0deg) translateY(calc(-10% - 14px)) scale(1.03);
  }
  .ticket-3:hover .ticket {
    transform: rotate(5deg) translateY(-14px) scale(1.03);
  }

  .featured-experiences__ticket:hover .ticket {
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    filter: brightness(1.04) saturate(1.04);
  }
}

/* Mobile: stack with a slight overlap between cards, keeping each
   ticket's rotation (ticket-1 -5°, ticket-2 0°, ticket-3 +5°) intact. */
@media (max-width: 768px) {
  .featured-experiences__ticket.ticket-2,
  .featured-experiences__ticket.ticket-3 {
    margin-top: -44px;
  }
}

/* ==========================================================================
   Ticket component — original design, inspired only by the reference's
   proportions/structure (wide landscape stub, ~28/72 split, rounded outer
   corners, circular top/bottom cutouts at the seam, right-edge perforation,
   slight tilt). All colors, copy and gradient are Xploroo's own.
   No animation yet, per spec.
   ========================================================================== */
.ticket {
  --ticket-radius: 20px;
  --ticket-notch: 18px;

  position: relative;
  display: flex;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 460 / 147;
  border-radius: var(--ticket-radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: rotate(-5deg);
  isolation: isolate;
}

/* ---- Left panel — step number + gradient + barcode ---- */
.ticket__left {
  position: relative;
  flex: 0 0 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.5rem 0.2rem;
  color: #fff;
  background: linear-gradient(160deg, #ff9d5c 0%, #ec4899 48%, #7c3aed 100%);
  border-right: 2px dashed rgba(255, 255, 255, 0.35);
}
/* Ticket-2 / Ticket-3 — same gradient style/direction/brightness as
   Ticket-1's left panel, only the color stops change. */
.ticket-2 .ticket__left {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 35%),
    linear-gradient(135deg, #8bcbff 0%, #4f8dff 30%, #2563eb 65%, #1e3a8a 100%);
}
.ticket-3 .ticket__left {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.20), transparent 35%),
    linear-gradient(135deg, #8cf7b3 0%, #4ade80 30%, #22c55e 65%, #166534 100%);
}
/* Invisible spacer reserving the barcode's footprint (its bottom offset +
   height) as a real flex item, so `justify-content: space-between` splits
   the remaining vertical space into two equal gaps: number-to-label and
   label-to-barcode. Keeps the barcode's own position untouched. */
.ticket__left::after {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: calc(11px + 0.49rem);
}
.ticket__step-number {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 2.33rem + 2.75vw, 4.1rem); /* ~38% larger */
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.ticket__step-label {
  font-family: var(--font-mono, var(--font-body));
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  opacity: 0.85;
}
.ticket__barcode {
  position: absolute;
  bottom: 0.49rem;
  left: 12%;
  right: 12%;
  height: 11px;
  opacity: 0.8;
  background-image: repeating-linear-gradient(
    90deg,
    #fff 0px, #fff 2px,
    transparent 2px, transparent 3px,
    #fff 3px, #fff 4px,
    transparent 4px, transparent 6px,
    #fff 6px, #fff 7px,
    transparent 7px, transparent 10px
  );
}

/* ---- Right panel — dark premium texture + heading/copy ---- */
.ticket__right {
  position: relative;
  flex: 1 1 72%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: clamp(0.7rem, 0.56rem + 0.7vw, 1.225rem) clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, transparent 45%),
    linear-gradient(155deg, #1c1c26 0%, #0a0a10 100%);
  overflow: hidden;
}
/* Subtle diagonal texture so the dark panel doesn't read as flat */
.ticket__right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 10px
  );
  pointer-events: none;
}
.ticket__heading {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.52rem + 1.78vw, 2.67rem); /* ~27% larger */
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.ticket__text {
  position: relative;
  margin: 0;
  max-width: 34ch;
  font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.875rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---- Circular cutouts at the seam (top + bottom) ----
   Filled with the page/panel background so they read as real punch-holes;
   `overflow:hidden` on .ticket clips each circle to a semicircular bite. */
.ticket__notch {
  position: absolute;
  left: 28%;
  transform: translateX(-50%);
  width: var(--ticket-notch);
  height: var(--ticket-notch);
  border-radius: 50%;
  background: var(--surface-panel);
  z-index: 2;
}
.ticket__notch--top { top: calc(var(--ticket-notch) / -2); }
.ticket__notch--bottom { bottom: calc(var(--ticket-notch) / -2); }

/* ---- Perforated tear-strip near the far right edge ---- */
.ticket__perforation {
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 14px;
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.45) 0px,
    rgba(255, 255, 255, 0.45) 4px,
    transparent 4px,
    transparent 10px
  );
  z-index: 2;
}

@media (max-width: 480px) {
  .ticket {
    aspect-ratio: 340 / 133;
  }
}

/* ==========================================================================
   Mobile-only entrance + floating animation (<=768px). Purely additive —
   no existing rule above is modified, and none of this runs above the
   768px breakpoint, so desktop is completely untouched. Ticket-2 stays
   fixed/centered (its own layout position is never animated); Ticket-1
   and Ticket-3 start tucked behind its upper/lower edge and glide out to
   their existing static resting position (the same -44px overlap already
   defined above), then all three drift forever. Only `transform`
   (translateY combined with each ticket's existing rotation) and
   `opacity` are animated — never width/height/margin — so this stays on
   the compositor for a smooth 60fps.
   ========================================================================== */
@media (max-width: 768px) {
  .featured-experiences__ticket.ticket-1,
  .featured-experiences__ticket.ticket-3 {
    z-index: 1;
  }
  .featured-experiences__ticket.ticket-2 {
    z-index: 2;
  }

  .ticket-1 .ticket,
  .ticket-2 .ticket,
  .ticket-3 .ticket {
    will-change: transform, opacity;
  }

  /* Entrance — slow, luxurious ease, holds its start state during the
     short delay (animation-fill-mode: both) so tickets 1/3 render already
     tucked behind ticket 2 on first paint, before sliding out. */
  .ticket-1 .ticket {
    animation:
      ticket-enter-up 1200ms 300ms ease-in-out both,
      ticket-float-1 4.6s 1500ms ease-in-out infinite;
  }
  .ticket-2 .ticket {
    animation: ticket-float-2 4s ease-in-out infinite;
  }
  .ticket-3 .ticket {
    animation:
      ticket-enter-down 1200ms 300ms ease-in-out both,
      ticket-float-3 5.2s 1500ms ease-in-out infinite;
  }

  @keyframes ticket-enter-up {
    0%   { transform: rotate(-5deg) translateY(48px); opacity: 0.6; }
    100% { transform: rotate(-5deg) translateY(0); opacity: 1; }
  }
  @keyframes ticket-enter-down {
    0%   { transform: rotate(5deg) translateY(-48px); opacity: 0.6; }
    100% { transform: rotate(5deg) translateY(0); opacity: 1; }
  }

  /* Continuous float — Ticket 1 and Ticket 3 move in opposite phase
     (6-8px swing), Ticket 2 barely drifts (2-3px), each on its own timing. */
  @keyframes ticket-float-1 {
    0%, 100% { transform: rotate(-5deg) translateY(-3.5px); }
    50%      { transform: rotate(-5deg) translateY(3.5px); }
  }
  @keyframes ticket-float-2 {
    0%, 100% { transform: rotate(0deg) translateY(-1.25px); }
    50%      { transform: rotate(0deg) translateY(1.25px); }
  }
  @keyframes ticket-float-3 {
    0%, 100% { transform: rotate(5deg) translateY(3.5px); }
    50%      { transform: rotate(5deg) translateY(-3.5px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ticket-1 .ticket,
    .ticket-2 .ticket,
    .ticket-3 .ticket {
      animation: none;
    }
  }
}