/* M'Imbarco, Voyage layer
   Modern sea adventure (charts, routes, compass), not pirate kitsch */

:root{
  --voyage-sea:#041825;
  --voyage-foam:#9ec9c0;
  --voyage-brass:#c4a574;
  --voyage-chart:#e8e0d4;
}

/* Chart paper atmosphere on soft sections */
.process-section.process-tickets,
.promise.ticket-promise,
.inspirations,
.page-hero,
.archive-head{
  background-image:
    linear-gradient(rgba(8,42,58,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,42,58,.03) 1px,transparent 1px);
  background-size:48px 48px,48px 48px;
}

/* Animated sea routes (SVG layer) */
.voyage-routes{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.55;
}
.voyage-routes path{
  fill:none;stroke:var(--turquoise);
  stroke-width:1.4;stroke-dasharray:4 10;
  stroke-linecap:round;
  animation:route-dash 18s linear infinite;
  opacity:.55;
}
.voyage-routes path:nth-child(2){stroke:var(--voyage-foam);animation-duration:24s;opacity:.4}
.voyage-routes path:nth-child(3){stroke:rgba(8,42,58,.35);animation-duration:30s}
@keyframes route-dash{to{stroke-dashoffset:-280}}

.section.destinations,
.section.seasonal,
.final-cta.ticket-cta{
  position:relative;isolation:isolate;
}
.section.destinations > .shell,
.section.seasonal > .shell,
.final-cta.ticket-cta > .shell{position:relative;z-index:1}

/* Compass rose, hero + ticket stub */
.voyage-compass{
  position:absolute;right:6%;bottom:12%;
  width:min(160px,22vw);height:min(160px,22vw);
  opacity:.28;pointer-events:none;z-index:1;
  animation:compass-drift 20s ease-in-out infinite;
}
.voyage-compass svg{width:100%;height:100%;display:block}
@keyframes compass-drift{
  0%,100%{transform:rotate(-8deg)}
  50%{transform:rotate(10deg)}
}

.hero .voyage-compass{opacity:.22;color:#fff;bottom:18%;right:5%}
@media(max-width:900px){.hero .voyage-compass{display:none}}

/* Hero: deeper sea adventure */
.hero-shade{
  background:
    radial-gradient(ellipse 50% 45% at 88% 18%,rgba(196,165,116,.18),transparent 50%),
    radial-gradient(ellipse 55% 70% at 85% 20%,rgba(239,108,87,.2),transparent 55%),
    linear-gradient(105deg,rgba(4,24,37,.88) 0%,rgba(4,31,43,.58) 45%,rgba(4,31,43,.22) 72%,rgba(4,31,43,.1) 100%),
    linear-gradient(0deg,rgba(4,24,37,.6),transparent 42%);
}
.hero-gate{
  border-color:rgba(196,165,116,.45);
  background:rgba(4,24,37,.4);
}
.hero-gate b{
  border-color:var(--voyage-brass);
  color:#f0d9a8;
}

/* Treasure mark on destination cards */
.destination-card:before,
.season-card:before{
  content:"✕";
  position:absolute;z-index:3;top:14px;right:14px;
  width:28px;height:28px;display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
  font:700 11px/1 var(--ticket-mono,"Space Mono",monospace);
  color:#fff;letter-spacing:0;
  background:rgba(4,31,43,.35);backdrop-filter:blur(4px);
  opacity:0;transform:scale(.7);
  transition:opacity .35s,transform .35s var(--ease,cubic-bezier(.2,.75,.25,1));
}
.destination-card:hover:before,
.season-card:hover:before,
.destination-card:focus-visible:before{opacity:1;transform:scale(1)}

/* Modern chart frame for seasonal strip */
.season-intro.ticket-strip{
  background:
    linear-gradient(90deg,rgba(196,165,116,.12),transparent 40%),
    var(--ticket-cream,#f5f0ed);
  border-color:rgba(196,165,116,.35);
}
.season-intro.ticket-strip [data-season-label]{
  border-color:var(--voyage-brass);
  color:#8a6b3a;
}

/* Boarding pass: brass stamp + chart edge */
.mi-stamp,
.board-pass-top .mi-stamp{
  border-color:var(--turquoise);
}
.board-pass{
  box-shadow:
    0 40px 100px rgba(0,0,0,.45),
    0 0 0 1px rgba(43,184,166,.18);
}
.board-pass-stub{
  background:
    linear-gradient(180deg,rgba(43,184,166,.1),transparent 40%),
    rgba(255,255,255,.5);
}
.final-cta.ticket-cta{
  background:
    radial-gradient(circle at 18% 20%,rgba(31,78,119,.5),transparent 36%),
    radial-gradient(circle at 82% 80%,rgba(43,184,166,.12),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(74,163,217,.1),transparent 40%),
    var(--voyage-sea);
}
.final-cta.ticket-cta .voyage-routes{opacity:.35}

/* Mood stubs: brass top rule */
.mood-row.ticket-moods a:before{
  background:repeating-linear-gradient(90deg,var(--voyage-brass) 0 8px,transparent 8px 14px);
  opacity:.35;
}

/* Service featured: deep sea chart */
.service-featured{
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    radial-gradient(ellipse 80% 70% at 100% 0%,rgba(239,108,87,.28),transparent 50%),
    linear-gradient(145deg,#041825 0%,#0d3348 55%,#123f50 100%)!important;
  background-size:28px 28px,28px 28px,auto,auto!important;
}

/* Editorial band: night voyage */
.editorial-band{
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(ellipse 40% 50% at 90% 10%,rgba(239,108,87,.2),transparent 50%),
    linear-gradient(160deg,#041825,#082a3a 40%,#0b3548)!important;
  background-size:40px 40px,40px 40px,auto,auto!important;
}

/* Compass ring on board-pass stub */
.board-pass-stub .voyage-ring{
  width:54px;height:54px;margin:0 auto 8px;
  border:1.5px solid rgba(196,165,116,.55);border-radius:50%;
  display:grid;place-items:center;position:relative;
}
.board-pass-stub .voyage-ring:before{
  content:"";position:absolute;inset:6px;border:1px dashed rgba(8,42,58,.2);border-radius:50%;
}
.board-pass-stub .voyage-ring span{
  font:700 11px/1 var(--ticket-mono,"Space Mono",monospace);
  letter-spacing:.08em;color:var(--coral);
}

/* Route legend under destinations heading */
.voyage-legend{
  display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:18px;
  font:700 9px/1 var(--ticket-mono,"Space Mono",monospace);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#60727a);
}
.voyage-legend i{
  display:inline-block;width:28px;height:2px;margin-right:8px;vertical-align:middle;
  background:repeating-linear-gradient(90deg,var(--coral) 0 4px,transparent 4px 8px);
}
.voyage-legend i.foam{
  background:repeating-linear-gradient(90deg,var(--voyage-foam) 0 4px,transparent 4px 8px);
}

@media(max-width:760px){
  .voyage-legend{margin-top:12px}
  .destination-card:before,.season-card:before{opacity:.7;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .voyage-routes path,.voyage-compass{animation:none!important}
}
