/* "What We Create" as a journey through a mystic, half-cyborg cave. js/voyage.js adds .is-voyage:
   the section pins to the screen, the WebGL cave (js/voyage-cave.js) moves past and six glass
   worlds, one per service, drift in from the sides. Without JavaScript, or with reduced motion, the worlds are a calm static grid. */
.medusa-voyage { --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; position: relative; color: #e0e5ef; }
.medusa-voyage__viewport { position: relative; padding: clamp(80px, 9vw, 140px) 3.2rem; }
.medusa-voyage__warp, .medusa-voyage__cave, .medusa-voyage__hud, .medusa-voyage__cue { display: none; }
.medusa-voyage__intro { max-width: 900px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.medusa-voyage__label { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 0 0 18px; font: 300 10px/1.4 var(--_font-default); letter-spacing: .14em; color: #aab6c8; }
.medusa-voyage__label span { width: 70px; height: 1px; background: #aab6c82b; }
.medusa-voyage h2 { margin: 0 0 20px; font: 400 clamp(34px, 3.7vw, 64px)/1.03 var(--_font-default); letter-spacing: -.04em; color: #e0e5ef; }
.medusa-voyage__intro p { margin: 0 auto; max-width: 520px; font: 300 clamp(14px, 1.05vw, 17px)/1.45 var(--_font-default); letter-spacing: -.015em; color: #afb9cc; }
.medusa-voyage__worlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px; max-width: 1400px; margin: 0 auto; padding: 0; list-style: none; }

/* A world: its animated stone beside its story, with no frame of its own. */
.medusa-voyage__bubble { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(16px, 2vw, 32px); width: min(100%, 620px); margin: 0 auto; text-align: left; }
.medusa-voyage__bubble > :not(.medusa-voyage__stone) { grid-column: 2; }
.medusa-voyage__stone { position: relative; grid-column: 1; grid-row: 1 / span 5; width: 100%; aspect-ratio: 1; }
.medusa-voyage__stone::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, #7657f040, transparent 70%); }
.medusa-voyage__render { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.medusa-voyage__stone.is-rendered .medusa-voyage__render { opacity: 1; }
.medusa-voyage__coords { margin: 0 0 10px; font: 400 10px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #a79ac8; }
.medusa-voyage h3 { margin: 0 0 10px; font: 400 clamp(20px, 1.9vw, 30px)/1.1 var(--_font-default); letter-spacing: -.03em; color: #f1f3f9; }
.medusa-voyage__lead { margin: 0 0 6px; font: 400 clamp(13px, 1vw, 16px)/1.35 var(--_font-default); color: #d6dcea; }
.medusa-voyage__text { max-width: 34ch; margin: 0 0 18px; font: 300 clamp(12px, .9vw, 14px)/1.45 var(--_font-default); color: #afb9cc; }
.medusa-voyage__link { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border: 1px solid #e0e5ef2e; border-radius: 20px; background: linear-gradient(145deg, #222c4a8c, #0c122273); color: #f1f3f9; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: border-color .3s; }
.medusa-voyage__link svg { width: 26px; height: 26px; padding: 7px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #7657f0, #a58cff); transition: transform .3s; }
.medusa-voyage__link:hover { border-color: #e0e5ef66; }
.medusa-voyage__link:hover svg { transform: rotate(45deg); }
.medusa-voyage__link:focus-visible { outline: 2px solid #a3b8d2; outline-offset: 4px; }
.medusa-voyage__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Voyage mode ---- */
.medusa-voyage.is-voyage { height: calc((var(--worlds) + 2.4) * 100svh); }
.is-voyage .medusa-voyage__viewport { position: sticky; top: 0; height: 100svh; padding: 0; overflow: hidden; perspective: 1200px; }
.is-voyage .medusa-voyage__warp, .is-voyage .medusa-voyage__cave { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
/* The cave (js/voyage-cave.js) replaces the starfield once WebGL is up. */
.has-cave .medusa-voyage__warp { display: none; }
/* Soft top and bottom edges, so the pinned layer never draws a seam against the page sky. */
.is-voyage .medusa-voyage__warp, .is-voyage .medusa-voyage__cave, .is-voyage .medusa-voyage__viewport::after { -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.is-voyage .medusa-voyage__viewport::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, #05080f59 100%); }
.is-voyage .medusa-voyage__intro { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(900px, 90vw); margin: 0; transform: translate(-50%, -50%); }
.is-voyage .medusa-voyage__cue { display: inline-block; margin-top: 28px; padding: 9px 18px; border: 1px solid #e0e5ef2e; border-radius: 20px; font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #c9d2e2; background: linear-gradient(145deg, #222c4a59, #0c122240); }
.is-voyage .medusa-voyage__worlds { position: absolute; inset: 0; display: block; max-width: none; }
.is-voyage .medusa-voyage__world { position: absolute; top: 52%; width: min(46vw, 640px); visibility: hidden; will-change: transform, opacity; }
.is-voyage .medusa-voyage__world.is-left { left: max(3.2rem, 4vw); }
.is-voyage .medusa-voyage__world.is-right { right: max(3.2rem, 4vw); }
.is-voyage .medusa-voyage__bubble { width: 100%; }
.is-voyage .is-right .medusa-voyage__bubble { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.is-voyage .is-right .medusa-voyage__stone { grid-column: 2; }
.is-voyage .is-right .medusa-voyage__bubble > :not(.medusa-voyage__stone) { grid-column: 1; }
.is-voyage .medusa-voyage h3, .is-voyage .medusa-voyage__lead, .is-voyage .medusa-voyage__text { text-shadow: 0 2px 18px #05030c; }
/* A shadow reaching in from the edge on the side that holds the current service. */
.medusa-voyage__shade { display: none; }
.is-voyage .medusa-voyage__shade { display: block; position: absolute; z-index: 2; top: 0; bottom: 0; width: 62%; opacity: 0; pointer-events: none; }
.medusa-voyage__shade--left { left: 0; background: linear-gradient(90deg, #04030bf2 0%, #06040fbf 38%, #0805124d 70%, transparent 100%); }
.medusa-voyage__shade--right { right: 0; background: linear-gradient(270deg, #04030bf2 0%, #06040fbf 38%, #0805124d 70%, transparent 100%); }
/* The chamber plaque: a carved, bronze-edged cartouche with the chamber's numeral, its name, and a
   path of six diamonds (one per chamber) lit as the journey goes. --hud-accent changes per chamber. */
.is-voyage .medusa-voyage__hud {
  --hud-accent: #c9bdf2;
  display: flex; position: absolute; z-index: 4; left: 50%; bottom: max(22px, 3.5svh); transform: translateX(-50%);
  align-items: center; gap: 18px; width: min(600px, calc(100vw - 32px)); padding: 9px 26px 9px 12px; isolation: isolate;
  color: #ece6f4; white-space: nowrap;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hud-accent) 75%, transparent), #ffffff26 45%, color-mix(in srgb, var(--hud-accent) 55%, transparent));
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
}
.is-voyage .medusa-voyage__hud::before { /* the dark inlay inside a 1px accent edge */
  content: ''; position: absolute; inset: 1px; z-index: -1;
  background: radial-gradient(ellipse at 12% 50%, color-mix(in srgb, var(--hud-accent) 22%, transparent), transparent 60%), linear-gradient(180deg, #1c1626f2, #0b0912fa);
  clip-path: polygon(15.5px 0, calc(100% - 15.5px) 0, 100% 50%, calc(100% - 15.5px) 100%, 15.5px 100%, 0 50%);
}
.medusa-voyage__hud-seal { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; }
.medusa-voyage__hud-seal::before { /* a diamond medallion */
  content: ''; position: absolute; inset: 7px; transform: rotate(45deg);
  border: 1px solid var(--hud-accent); background: radial-gradient(circle, color-mix(in srgb, var(--hud-accent) 30%, #120e1a), #0d0a14 75%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--hud-accent) 45%, transparent), inset 0 0 8px color-mix(in srgb, var(--hud-accent) 35%, transparent);
  transition: border-color .8s, box-shadow .8s;
}
.medusa-voyage__hud-numeral { position: relative; font: italic 400 15px/1 Georgia, "Times New Roman", serif; letter-spacing: .04em; color: var(--hud-accent); text-shadow: 0 0 10px color-mix(in srgb, var(--hud-accent) 60%, transparent); transition: color .8s; }
.medusa-voyage__hud-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.medusa-voyage__hud-label.is-new { animation: medusa-hud-in .7s ease both; }
.medusa-voyage__hud-code { font: 400 9px/1.2 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--hud-accent); opacity: .85; overflow: hidden; text-overflow: ellipsis; transition: color .8s; }
.medusa-voyage__hud-name { font: 400 17px/1.15 var(--_font-default); letter-spacing: .01em; color: #f4eff9; overflow: hidden; text-overflow: ellipsis; }
.medusa-voyage__hud-path { position: relative; flex: 1; min-width: 110px; height: 14px; display: flex; align-items: center; justify-content: space-between; margin-left: auto; }
.medusa-voyage__hud-track { position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: #ffffff24; }
.medusa-voyage__hud-track i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--voyage-progress, 0)); background: linear-gradient(90deg, transparent, var(--hud-accent)); box-shadow: 0 0 6px var(--hud-accent); }
.medusa-voyage__hud-path b { position: relative; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid #ffffff40; background: #0d0a14; transition: background .5s, border-color .5s, box-shadow .5s, transform .5s; }
.medusa-voyage__hud-path b.is-passed { border-color: var(--hud-accent); background: color-mix(in srgb, var(--hud-accent) 55%, #0d0a14); }
.medusa-voyage__hud-path b.is-current { border-color: var(--hud-accent); background: var(--hud-accent); transform: rotate(45deg) scale(1.45); box-shadow: 0 0 10px var(--hud-accent), 0 0 22px color-mix(in srgb, var(--hud-accent) 50%, transparent); animation: medusa-hud-flame 2.4s ease-in-out infinite; }
@keyframes medusa-hud-in { from { opacity: 0; transform: translateY(4px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes medusa-hud-flame { 0%, 100% { opacity: 1; } 40% { opacity: .72; } 55% { opacity: .95; } 70% { opacity: .8; } }
@media (max-width: 767px) {
  .is-voyage .medusa-voyage__hud { gap: 12px; padding-right: 20px; }
  .medusa-voyage__hud-seal { width: 40px; height: 40px; }
  .medusa-voyage__hud-name { font-size: 14px; }
  .medusa-voyage__hud-path { min-width: 74px; }
}
@media (prefers-reduced-motion: reduce) { .medusa-voyage__hud-label.is-new, .medusa-voyage__hud-path b.is-current { animation: none; } }
@media (max-width: 767px) {
  .medusa-voyage__viewport { padding-inline: 2.2rem; }
  /* Phones: stone above the text, the service across the lower part of the chamber. */
  .is-voyage .medusa-voyage__world, .is-voyage .medusa-voyage__world.is-left, .is-voyage .medusa-voyage__world.is-right { left: 2.2rem; right: 2.2rem; width: auto; top: 56%; }
  .medusa-voyage__bubble, .is-voyage .is-right .medusa-voyage__bubble { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .medusa-voyage__stone, .is-voyage .is-right .medusa-voyage__stone { grid-column: 1; grid-row: auto; width: 46%; }
  .medusa-voyage__bubble > :not(.medusa-voyage__stone), .is-voyage .is-right .medusa-voyage__bubble > :not(.medusa-voyage__stone) { grid-column: 1; }
  .is-voyage .medusa-voyage__shade { width: 100%; }
  .medusa-voyage__text { display: none; }
}
/* Voyage mode on wider screens: the stone sits beside a compact text block (no grid rows to stretch). */
@media (min-width: 768px) {
  .is-voyage .medusa-voyage__bubble { display: block; padding-left: calc(40% + 28px); }
  .is-voyage .medusa-voyage__stone { position: absolute; left: 0; top: 50%; width: 40%; transform: translateY(-50%); }
  .is-voyage .is-right .medusa-voyage__bubble { padding-left: 0; padding-right: calc(40% + 28px); }
  .is-voyage .is-right .medusa-voyage__stone { left: auto; right: 0; }
  .is-voyage .medusa-voyage__link { display: inline-flex; }
}