/* ═══════════════════════════════════════════════════════════════════
   Médusa — dark label style
   Palette pulled out of the murals: amber = the tungsten bulb,
   teal = the cool shadow on the black wall.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ground:      #0A0C0E;
  --ground-2:    #101317;
  --ink:         #EDE7DC;
  --ink-2:       #9EA5A8;
  --muted:       #6C7378;
  --amber:       #E8913C;
  --teal:        #2E6B72;
  --hair:        rgba(237, 231, 220, .13);
  --hair-soft:   rgba(237, 231, 220, .07);

  --display: 'Pirata One', 'Sora', serif;
  --sans:    'Sora', system-ui, -apple-system, sans-serif;

  --nav-h: 58px;
  --gutter: clamp(20px, 4.4vw, 68px);

  /* ─── The wordmark ────────────────────────────────────────────────
     The bar's logo, traced off the artwork into a single path. It is
     painted through a mask rather than drawn as an image, so the
     letters take their colour from the palette like every other mark.
     ───────────────────────────────────────────────────────────────── */
  --img-mark:      url('assets/medusa-wordmark.svg');

  /* ─── Photography ─────────────────────────────────────────────────
     Relative, so the same paths work locally and on the deployed host.
     The photographs sit in assets/images/ under their camera names.
     ───────────────────────────────────────────────────────────────── */
  --img-cover:     url('assets/images/IMG_0820.jpeg');
  --img-about:     url('assets/images/IMG_0821.jpeg');
  --img-m0822:     url('assets/images/IMG_0822.jpeg');
  --img-m0823:     url('assets/images/IMG_0823.jpeg');
  --img-m0824:     url('assets/images/IMG_0824.jpeg');
  --img-m0825:     url('assets/images/IMG_0825.jpeg');
  --img-m0826:     url('assets/images/IMG_0826.jpeg');
  --img-m0827:     url('assets/images/IMG_0827.jpeg');
  --img-skeletons: url('assets/images/fresque1.jpeg');
  --img-medusa:    url('assets/images/fresque3.jpeg');
  --img-octopus:   url('assets/images/fresque2.jpeg');
}

[data-photo="cover"]     { background-image: var(--img-cover); }
[data-photo="about"]     { background-image: var(--img-about); }
[data-photo="m0822"]     { background-image: var(--img-m0822); }
[data-photo="m0823"]     { background-image: var(--img-m0823); }
[data-photo="m0824"]     { background-image: var(--img-m0824); }
[data-photo="m0825"]     { background-image: var(--img-m0825); }
[data-photo="m0826"]     { background-image: var(--img-m0826); }
[data-photo="m0827"]     { background-image: var(--img-m0827); }
[data-photo="skeletons"] { background-image: var(--img-skeletons); }
[data-photo="medusa"]    { background-image: var(--img-medusa); }
[data-photo="octopus"]   { background-image: var(--img-octopus); }

/* ─── Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* The live deck fans its sleeves out past its own box, and that reach used
   to leave the viewport — which let the page be dragged sideways and
   fought the swipe that flips the deck. Clipped at the root, so nothing
   can pan the page horizontally. `clip` and not `hidden`: hidden would
   make this a scroll container and strand the portal's sticky stage. */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

section { scroll-margin-top: var(--nav-h); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

::selection { background: var(--amber); color: var(--ground); }

:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ground);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip:focus { left: 8px; top: 8px; }

/* ─── Type utilities ───────────────────────────────────────────────── */

.label {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.label--amber { color: var(--amber); }
.label--teal  { color: var(--teal); }

.head {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: .98;
  letter-spacing: -.01em;
}

.prose {
  max-width: 46ch;
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 14px;
}
.prose--muted { color: var(--muted); font-size: 13px; }

.fine {
  max-width: 40ch;
  margin-top: 20px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .04em;
}

/* Names a mark that is drawn rather than typed, for a screen reader. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ─── The wordmark ─────────────────────────────────────────────────── */

.mark {
  display: block;
  aspect-ratio: 734 / 188;
  background: currentColor;
  -webkit-mask: var(--img-mark) no-repeat center / 100% 100%;
  mask: var(--img-mark) no-repeat center / 100% 100%;
}

/* ─── Buttons ──────────────────────────────────────────────────────── */

.btns, .close__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.btn {
  padding: 12px 22px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .3s, border-color .3s;
}
.btn:hover { color: var(--amber); border-color: rgba(232, 145, 60, .45); }
.btn--solid { border-color: rgba(237, 231, 220, .3); color: var(--ink); }

/* ─── Nav ──────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 var(--gutter);
  background: rgba(10, 12, 14, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}

/* The dot is centred against the wordmark's box, which drops it onto the
   baseline the letters sit on. */
.nav__mark {
  display: flex;
  align-items: center;
  margin-right: auto;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
}
.nav__mark .mark { height: 15px; }
/* The A's swoosh sweeps up and out, leaving the top corner of the box
   empty, so the dot is pulled back under it to where the letters end. */
.nav__mark i {
  margin-left: -7px;
  color: var(--amber);
  font-style: normal;
}

.nav__links { display: flex; gap: 24px; }
.nav__links a {
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .3s;
}
.nav__links a:hover { color: var(--amber); }

.pill {
  padding: 8px 16px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .3s, border-color .3s;
}
.pill:hover { color: var(--amber); border-color: rgba(232, 145, 60, .45); }

/* ─── Eye-row divider (borrowed from the menu edges) ───────────────── */

.eyes {
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22'%3E%3Cg fill='none' stroke='rgba(237,231,220,0.3)' stroke-width='1'%3E%3Ccircle cx='13' cy='11' r='6.5'/%3E%3C/g%3E%3Ccircle cx='13' cy='11' r='2.4' fill='rgba(237,231,220,0.34)'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
}

/* ═══ 01 · Portal hero ═════════════════════════════════════════════ */

.portal { height: 250vh; }

.portal__stage {
  --p: 1;               /* no-JS / reduced-motion: the portal is open */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ground);
}

.portal__photo {
  position: absolute;
  inset: 0;
  background-position: 50% 42%;
  background-size: cover;
  transform: scale(calc(1.18 - .18 * var(--p)));
  transform-origin: 50% 45%;
}

.portal__duotone {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, var(--teal), var(--amber));
  mix-blend-mode: overlay;
  opacity: calc(.3 * var(--p));
}

.portal__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 88% at 50% 44%, transparent 22%, rgba(10, 12, 14, .58) 68%, rgba(10, 12, 14, .93) 100%);
}

.portal__vine {
  position: absolute;
  top: 0;
  height: 100%;
  width: min(22vw, 190px);
  fill: none;
  stroke: rgba(237, 231, 220, .34);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.portal__vine--l { left: 0; }
.portal__vine--r { right: 0; transform: scaleX(-1); }

.portal__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
}
.portal__dot--a {
  background: var(--amber);
  box-shadow: 0 0 12px 2px rgba(232, 145, 60, .7);
  transform: translate(calc(var(--p) * -34vmin), calc(var(--p) * -24vmin));
}
.portal__dot--b {
  background: var(--teal);
  box-shadow: 0 0 12px 2px rgba(46, 107, 114, .8);
  transform: translate(calc(var(--p) * 34vmin), calc(var(--p) * 24vmin));
}

.portal__panel {
  position: absolute;
  top: 0;
  width: 52%;
  height: 100%;
  background: var(--ground);
}
/* The panels overlap by 4% so no seam can open between them; the two
   accent dots, not a hairline, mark the centre. */
.portal__panel--l {
  left: 0;
  transform: translate3d(calc(-105% * var(--p)), 0, 0);
}
.portal__panel--r {
  right: 0;
  transform: translate3d(calc(105% * var(--p)), 0, 0);
}

.portal__title {
  --mark-w: clamp(276px, 54vw, 760px);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(var(--mark-w) / 734 * 188);
  display: flex;
  justify-content: center;
  transform: translateY(-50%) scale(calc(1 + .34 * var(--p)));
}

/* Each half masks the whole wordmark and shows its own slice of it, so
   the two together are the mark with no seam. The cut falls in the gap
   between the E and the D — 39% along, not at the middle — and both
   halves travel the same distance so the mark stays centred as it parts. */
.portal__half {
  height: 100%;
  -webkit-mask-size: var(--mark-w) 100%;
  mask-size: var(--mark-w) 100%;
}
.portal__half[data-half="a"] {
  width: calc(var(--mark-w) * .39);
  -webkit-mask-position: left center;
  mask-position: left center;
  transform: translateX(calc(var(--p) * var(--mark-w) * -.17));
}
.portal__half[data-half="b"] {
  width: calc(var(--mark-w) * .61);
  -webkit-mask-position: right center;
  mask-position: right center;
  transform: translateX(calc(var(--p) * var(--mark-w) * .17));
}

.corner {
  position: absolute;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.corner--tl { top: calc(var(--nav-h) + 20px); left: var(--gutter); }
.corner--tr { top: calc(var(--nav-h) + 20px); right: var(--gutter); }
.corner--bl { bottom: 24px; left: var(--gutter); }
.corner--br { bottom: 24px; right: var(--gutter); }

/* ═══ 02 · Statement fold ══════════════════════════════════════════ */

.ort {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 110px var(--gutter);
  overflow: hidden;
}

.index {
  position: absolute;
  top: 8vh;
  right: 6vw;
  font-family: var(--display);
  font-size: clamp(120px, 22vw, 300px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(237, 231, 220, .12);
  pointer-events: none;
}

.ort__col { position: relative; z-index: 2; max-width: 760px; }

.statement {
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(24px, 3.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -.01em;
}
.statement em { color: var(--amber); font-style: normal; }

.serpent {
  display: block;
  width: min(420px, 70%);
  height: auto;
  margin: 34px 0 4px;
  fill: none;
  stroke: rgba(237, 231, 220, .34);
  stroke-width: 1.15;
}

.ort__orb {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -14vw;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  opacity: .34;
  transform: translateY(-50%);
}

/* ═══ 03 · Karte + deck ════════════════════════════════════════════ */

.karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
  padding: clamp(80px, 12vh, 150px) var(--gutter);
}

.karte__col { max-width: 46ch; }
.karte__deck { min-width: 0; }

.deck {
  /* How far the fanned stack reaches past the front sleeve: four fixed
     12px steps, plus the swing the tilt adds — and that swing pivots on
     the bottom edge, so it widens as the sleeves themselves grow. */
  --fan: calc(62px + 4%);
  position: relative;
  width: 100%;
  touch-action: pan-y;
  outline-offset: 8px;
}
.deck--live { aspect-ratio: 1 / 1; }

/* No-JS: the sleeves simply stack down the page and stay readable. */
.card {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--ground-2);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .95);
}

.deck--live .card {
  position: absolute;
  /* Held off the deck's right edge by as much of the fan as the page
     gutter cannot absorb. Left flush, the back sleeves cleared the
     viewport, and a document wider than the screen both stretched the
     fixed nav and let a swipe drag the page sideways. */
  inset: 0 max(0px, var(--fan) - var(--gutter)) 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  transform-origin: 50% 100%;
  will-change: transform;
}
.deck--live .card:not(.card--top) { pointer-events: none; }
.deck--live .card--top { cursor: grab; }
.deck--live .card--top:active { cursor: grabbing; }

.card__bg {
  position: absolute;
  inset: 0;
  background-position: 50% 30%;
  background-size: cover;
  opacity: .13;
  filter: grayscale(1) contrast(1.15);
  pointer-events: none;
}

.card__head {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(to bottom, rgba(16, 19, 23, .96), rgba(16, 19, 23, .78));
}
.card__head .label { margin-bottom: 8px; }

.card__title {
  font-family: var(--display);
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1;
}
.card__note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card__scroll {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}
.card__scroll::-webkit-scrollbar { width: 6px; }
.card__scroll::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 3px; }

.menu__sub {
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--teal);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.menu__sub:first-child { margin-top: 12px; }

.menu__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.menu__name { font-size: 13.5px; font-weight: 500; }
.menu__price {
  color: var(--amber);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}
.menu__desc {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.menu__note {
  padding: 10px 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.deck__hint {
  margin-top: 22px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.deck__hint kbd {
  padding: 1px 6px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 10px;
}

.deck__dots { display: flex; gap: 7px; margin-top: 14px; }
.deck__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background .3s, border-color .3s;
}
.deck__dots button[aria-current="true"] {
  background: var(--amber);
  border-color: var(--amber);
}

.deck__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ═══ 04 · Index / roster ══════════════════════════════════════════ */

.roster {
  position: relative;
  padding: clamp(80px, 12vh, 150px) var(--gutter);
  overflow: hidden;
}
.roster__wall {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  background-position: 30% 20%;
  background-size: cover;
  opacity: .1;
  filter: grayscale(1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
  mask-image: linear-gradient(to right, transparent, #000 55%);
  pointer-events: none;
}
.roster > *:not(.roster__wall) { position: relative; }

.roster__head { margin-bottom: 46px; }

.row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--hair);
}
.row:last-child { border-bottom: 1px solid var(--hair); }

.row__label {
  color: var(--teal);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.row__name {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1;
}
.row__count {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

/* ═══ 05 · Galerie ═════════════════════════════════════════════════ */

.galerie { padding: clamp(80px, 12vh, 150px) var(--gutter); }
.galerie__head { margin-bottom: 46px; }

.galerie__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 14px;
}

.galerie__cell {
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 10px;
}

/* Every photograph is 2:3, so width alone gives an even grid. Held a
   little back until hovered, rather than greyed out — a phone has no
   hover, and the room's own colour is the point of the section. */
.galerie__cell img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .82;
  transition: opacity .5s ease;
}
.galerie__cell:hover img { opacity: 1; }

/* ═══ 06 · Kontakt ═════════════════════════════════════════════════ */

.kontakt { padding: clamp(80px, 12vh, 150px) var(--gutter); }
.kontakt__head { margin-bottom: 46px; }

.kontakt__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 30px;
  margin: 0;
}

.kontakt__pair {
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}
.kontakt__pair dt {
  margin-bottom: 14px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.kontakt__pair dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.25;
}
.kontakt__pair address { font-style: normal; }

.kontakt__pair a {
  border-bottom: 1px solid var(--hair);
  color: inherit;
  text-decoration: none;
}
.kontakt__pair a:hover { border-bottom-color: var(--amber); color: var(--amber); }

/* ═══ 07 · Close ═══════════════════════════════════════════════════ */

.close {
  position: relative;
  padding: clamp(80px, 12vh, 150px) 0 0;
  overflow: hidden;
}

.close__line {
  display: block;
  width: 100%;
  height: 90px;
  margin-bottom: 60px;
  fill: none;
  stroke: rgba(237, 231, 220, .2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.close__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 var(--gutter);
}
.close__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  /* The happy-hour block asks for 460px; cap the column so it can shrink
     on a narrow screen instead of being clipped by .close's overflow. */
  max-width: 100%;
}

.happy {
  position: relative;
  width: 460px;
  max-width: 100%;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  overflow: hidden;
}

.happy__bg {
  position: absolute;
  inset: 0;
  background-position: 60% 30%;
  background-size: cover;
  opacity: .08;
  filter: grayscale(1);
  pointer-events: none;
}
.happy > *:not(.happy__bg) { position: relative; }
.happy__list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 13px;
}
.happy__list li span:last-child {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.close__btns { justify-content: flex-end; margin-top: 0; }

.close__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 72px var(--gutter) 0;
  padding: 18px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* All four of the artwork's tips taper to a point on the edge of its own
   canvas, so the mark is held inside the gutter, on the same line as the
   strip above it, and given room underneath: a taper that stops exactly on
   the edge of the page reads as a crop rather than as a point. */
.close__mark {
  margin: clamp(34px, 5vw, 76px) var(--gutter) clamp(30px, 4.5vw, 64px);
}

/* ═══ Motion models ════════════════════════════════════════════════
   Every rule below is scoped to .motion, which JS adds only after it
   has confirmed prefers-reduced-motion is not set. The reduced-motion
   and no-JS renders are therefore the finished page.
   ═══════════════════════════════════════════════════════════════════ */

.motion .portal__stage { --p: 0; }

.motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22, .8, .28, 1),
              transform .8s cubic-bezier(.22, .8, .28, 1);
}
.motion .reveal.in { opacity: 1; transform: none; }

.motion .reveal:nth-child(2) { transition-delay: .06s; }
.motion .reveal:nth-child(3) { transition-delay: .12s; }
.motion .reveal:nth-child(4) { transition-delay: .18s; }
.motion .reveal:nth-child(5) { transition-delay: .24s; }
.motion .reveal:nth-child(6) { transition-delay: .30s; }
.motion .reveal:nth-child(7) { transition-delay: .36s; }
.motion .reveal:nth-child(8) { transition-delay: .42s; }

/* Line art draws itself, following the mural's own strokes. */
.motion .draw path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.motion .draw.in path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.9s cubic-bezier(.3, .7, .2, 1);
}
.motion .portal__vine.draw path {
  stroke-dashoffset: calc(var(--len) * (1 - var(--p)));
  transition: none;
}

.motion .ort__orb { will-change: transform; }

.motion .menu__row,
.motion .menu__sub {
  opacity: 0;
  transform: translateY(10px);
}
/* The sleeve being thrown keeps its list while it is still on screen:
   the stack closes up the moment it is let go, so without this the text
   would blink out and a blank card would fly off. */
.motion .card--top .menu__row,
.motion .card--top .menu__sub,
.motion .card--flung .menu__row,
.motion .card--flung .menu__sub {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}
.motion .card:not(.card--top):not(.card--flung) .menu__row,
.motion .card:not(.card--top):not(.card--flung) .menu__sub { transition: none; }

/* The list walks in from the top when a sleeve reaches the front. */
.motion .card--top .menu li:nth-child(1)  { transition-delay: .04s; }
.motion .card--top .menu li:nth-child(2)  { transition-delay: .08s; }
.motion .card--top .menu li:nth-child(3)  { transition-delay: .12s; }
.motion .card--top .menu li:nth-child(4)  { transition-delay: .16s; }
.motion .card--top .menu li:nth-child(5)  { transition-delay: .20s; }
.motion .card--top .menu li:nth-child(6)  { transition-delay: .24s; }
.motion .card--top .menu li:nth-child(7)  { transition-delay: .28s; }
.motion .card--top .menu li:nth-child(8)  { transition-delay: .32s; }
.motion .card--top .menu li:nth-child(9)  { transition-delay: .36s; }
.motion .card--top .menu li:nth-child(10) { transition-delay: .40s; }

/* The deck itself is a user-driven control, so it stays interactive
   under reduced motion — only its easing is removed. The stack re-forms
   under a sleeve that is still in the air, so it closes up briskly; the
   throw itself is timed in the script, off the flick that threw it. */
.deck--live .card { transition: transform .32s cubic-bezier(.2, .8, .25, 1), opacity .32s ease; }
.reduced .deck--live .card { transition-duration: 1ms; }

/* ═══ Responsive ═══════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .karte { grid-template-columns: 1fr; }
  .deck--live { aspect-ratio: 4 / 5; }
  .ort__orb { right: -28vw; width: 70vw; height: 70vw; opacity: .22; }
}

@media (max-width: 720px) {
  .nav { gap: 14px; }
  .nav__links { display: none; }
  .corner--tr, .corner--br { display: none; }
  .portal { height: 220vh; }

  .row { grid-template-columns: 1fr auto; }
  .row__label { grid-column: 1 / -1; }

  .close__side { align-items: flex-start; }
  .close__btns { justify-content: flex-start; }
}