/* Concept C: a scale model of the clinic on warm wood, one object per plinth */
.mx { --t: 0.74 0.115 188; --wd: 0.1 0.014 58; --sala: url("/assets/img/roda/sala-p.webp"); position: relative; height: 330vh; background: oklch(0.19 0.012 50); }
.mx__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(104% 40% at var(--cx, 50%) var(--cy, 64%), transparent 48%, oklch(0.14 0.015 54 / .32) 76%, oklch(0.14 0.015 54 / .54)), linear-gradient(100deg, oklch(0.13 0.012 50 / .82), oklch(0.13 0.012 50 / .3) 34%, oklch(0.13 0.012 50 / .05) 58%, oklch(0.13 0.012 50 / .35)), var(--sala, none) 50% 62%/cover no-repeat, oklch(0.17 0.012 50); }
.mx__view { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }
.mx__ground, .mx__gring { position: absolute; left: 0; top: 0; will-change: transform; }
.mx__iso, .mx__ring, .m, .hub, .obw { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.f, .sp, .fl, .lg, .cap, .obs, .obb, .ob { position: absolute; left: 0; top: 0; }
.f { backface-visibility: hidden; overflow: visible; }

/* vertical faces: <i> the light shade, <b> the LED seam, lit only once the piece seats */
.w { background: var(--sala) 24% 70%/240px, linear-gradient(to top, oklch(0.72 0.085 62 / .3), transparent 30%), linear-gradient(to top, oklch(var(--t) / .17), transparent 46%), oklch(0.34 0.012 200); background-blend-mode: soft-light, normal, normal, normal; }
.w i { position: absolute; inset: 0; background: oklch(0.1 0.014 48); opacity: .3; }
.w b { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: oklch(0.88 0.08 188); box-shadow: 0 0 5px 1px oklch(var(--t) / .95), 0 -2px 10px 2px oklch(var(--t) / .4); opacity: 0; transition: opacity .5s var(--ease-out); }
.m.is-seat .w b, .hub .w b { opacity: 1; }
/* the chosen plinth keeps its material, lit from below */
.m.is-sel .w { background: linear-gradient(to top, oklch(0.9 0.11 188 / .72), oklch(var(--t) / .3) 34%, transparent 72%), oklch(0.37 0.014 198); }
.m.is-sel .w i { opacity: .12; }
.m.is-sel .w b { background: oklch(0.96 0.06 188); box-shadow: 0 0 8px 2px oklch(var(--t)), 0 0 34px 10px oklch(var(--t) / .5); }

/* top faces */
.t .s { fill: url(#gt); }
.t .g { fill: url(#gr); opacity: .3; mix-blend-mode: soft-light; }
.t .r { fill: oklch(0.21 0.012 200); stroke: oklch(var(--t) / .5); }
.t .p { fill: none; stroke: var(--tq); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .5; transition: stroke-dashoffset 1.1s var(--ease-out); }
.t .k { fill: oklch(0.1 0.014 48); opacity: 0; transition: opacity .5s; }
.t .sm { fill: none; stroke: oklch(0.84 0.085 188); stroke-width: 1.3; opacity: 0; transition: opacity .6s; }
.m.is-seat .p { stroke-dashoffset: 0; }
.m.is-seat .sm { opacity: 1; }
.has-sel .m:not(.is-sel) :is(.k, .w em) { opacity: .4; }
.hub .hs { fill: url(#gh); stroke: oklch(var(--t) / .8); stroke-width: 1.6; }
.hub .hc { fill: none; stroke: oklch(var(--t) / .4); stroke-dasharray: 3 7; }
.w em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 22px/1 var(--f-display); font-style: normal; color: oklch(0.29 0.013 200); text-shadow: 1px 1px 0 oklch(var(--t) / .42), -1px -1px 0 oklch(0.1 0.012 46 / .65); letter-spacing: -.03em; transition: opacity .5s; }
.mx.is-tower .w em { font-size: 13px; }

/* the object: shadow on the face, image upright, rim on the side its own LED is */
.obs { border-radius: 50%; background: radial-gradient(closest-side, oklch(var(--wd) / .96) 14%, oklch(var(--wd) / .62) 40%, oklch(var(--wd) / .2) 66%, transparent 84%); }
.obb { transform: rotateX(var(--rx, -49deg)); }
.ob { max-width: calc(var(--ow) * var(--s)); max-height: calc(var(--oh) * var(--s)); transform: translate(-50%, -100%); filter: drop-shadow(calc(var(--rim, 1) * 3px) -1px 3px oklch(var(--t) / .62)) drop-shadow(2px 3px 4px oklch(var(--wd) / .62)); }
.ob, .obs { opacity: 0; transition: opacity .55s var(--ease-out); }
.m.is-in :is(.ob, .obs) { opacity: 1; }

/* on the wood: <i> is the cast shadow, the body is the contact core, ::after is the lit slot */
.sp { border-radius: 50%; background: radial-gradient(closest-side, oklch(var(--wd) / var(--c, 0)) 62%, oklch(var(--wd) / calc(var(--c, 0) * .4)) 74%, transparent 86%); }
.sp i { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, oklch(var(--wd) / .82) 14%, oklch(var(--wd) / .48) 44%, oklch(var(--wd) / .17) 70%, transparent 88%); }
.sp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity .9s var(--ease-out); background: radial-gradient(closest-side, oklch(0.84 0.11 188 / .92), oklch(var(--t) / .3) 58%, transparent); }
.sp.is-lit::after { opacity: 1; transition-duration: .15s; }
.cap { border-radius: 50%; background: radial-gradient(closest-side, oklch(var(--t) / .3), oklch(0.3 0.014 200) 70%); box-shadow: inset 0 0 0 1.5px var(--tq), 0 0 24px 6px oklch(var(--t) / .2); }
.lg { width: var(--lw); height: auto; margin: calc(var(--lw) * -0.26) 0 0 calc(var(--lw) / -2); overflow: visible; filter: drop-shadow(0 0 9px oklch(var(--t) / .55)); }
.lg .a { fill: none; stroke: oklch(0.97 0.01 185); stroke-width: 6; }
.lg .b { fill: none; stroke: var(--tq); stroke-width: 6; stroke-linecap: round; }
.fl .cl { fill: none; stroke: oklch(var(--wd) / .5); stroke-width: 12; }

/* 2D layer: callouts and plain names */
.mx__over { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mx__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
.mx__lines path { fill: none; stroke: oklch(var(--t) / .5); stroke-width: 1; }
.mx__lines .guide { stroke-dasharray: 2 6; stroke: oklch(var(--t) / .7); }
.lab { position: absolute; left: 0; top: 0; pointer-events: auto; padding: .3rem .15rem; border: 0; border-radius: 2px; background: none; color: oklch(0.95 0.014 82); font: 500 var(--step--1)/1.15 var(--f-body); white-space: nowrap; cursor: pointer; opacity: 0; text-shadow: 0 1px 4px oklch(var(--wd)), 0 0 14px oklch(var(--wd) / .9); transition: opacity .45s var(--ease-out), color .25s; }
.lab b { font-weight: inherit; }
.lab small, .is-js .mx__nj { display: none; }
.lab.is-on { opacity: 1; }
.lab:hover, .lab.is-hot { color: oklch(0.86 0.1 188); }
.lab[aria-expanded="true"] { color: oklch(0.88 0.11 188); font-weight: 600; opacity: 1; }
.lab:focus-visible, .card__close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.lab:focus-visible { opacity: 1; }

.mx__copy { position: absolute; z-index: 3; left: var(--gutter); top: clamp(5.4rem, 12vh, 7rem); width: min(25rem, 30vw); }
.mx__copy .h2 { color: var(--paper); }
.mx__invite { margin-top: .9rem; font-size: var(--step-0); line-height: 1.5; color: var(--mist-soft); max-width: 28ch; }
.card { position: absolute; z-index: 3; left: var(--gutter); top: var(--card-top, 40vh); width: min(21rem, 28vw); padding: 1.5rem 1.5rem 1.4rem; border: 1px solid oklch(var(--t) / .45); border-radius: 4px; clip-path: inset(0 0 0 100%); transition: clip-path .75s var(--ease-out); background: linear-gradient(180deg, oklch(0.26 0.013 198 / .97), oklch(0.21 0.011 200 / .97)); }
.card.is-open { clip-path: inset(0 0 0 0); }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tq); }
/* .mx beats pages.css .card p */
.mx .card__n { font: 700 var(--step-2)/1 var(--f-display); color: var(--tq); letter-spacing: -.03em; }
.card__t { margin-top: .5rem; font: 600 var(--step-1)/1.15 var(--f-display); letter-spacing: -.015em; color: var(--paper); }
.mx .card__what { margin-top: .7rem; color: var(--mist); max-width: 36ch; }
.mx .card__ask { margin: 1.1rem 0 0; padding: .85rem 1rem; border-radius: 4px; background: oklch(0.16 0.012 48 / .7); color: var(--mist-soft); font-size: var(--step--1); }
.card__ask b { display: block; margin-bottom: .3rem; font-weight: 600; color: var(--tq); }
.card__ask q { color: var(--mist); font-size: var(--step-0); }
.card__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.2rem; }
.card__close { padding: .6rem .2rem; border: 0; background: none; color: var(--mist-soft); font: 500 var(--step--1)/1 var(--f-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.card__close:hover { color: var(--paper); }
.card__grip { display: none; }

/* no script: the nine areas stay a readable list with their description */
.mx:not(.is-js) { height: auto;
  & .mx__stage { position: static; height: auto; padding: 3rem var(--gutter) 4rem; }
  & .mx__view, & .card, & .mx__roll { display: none; }
  & .mx__over, & .mx__copy { position: static; width: auto; }
  & .lab { position: static; display: block; opacity: 1; margin-top: 1rem; padding: 0; text-align: left; }
  & .lab b { font: 600 var(--step-0)/1.3 var(--f-body); }
  & .lab small { display: block; max-width: 48ch; white-space: normal; color: var(--mist-soft); } }

/* under 1180 the card is a bottom sheet, so the model keeps the whole width */
.mx.is-sheet .card { z-index: 4; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: 34rem; margin: 0 auto; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 1.1rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom)); clip-path: none; transform: translateY(105%); transition: transform .6s var(--ease-out); box-shadow: 0 -20px 60px oklch(var(--wd) / .72); touch-action: none; background: oklch(0.225 0.012 200);
  &.is-open { transform: translateY(0); }
  &::before { left: var(--gutter); right: var(--gutter); }
  & .card__grip { display: block; width: 44px; height: 4px; margin: 0 auto .9rem; border-radius: 4px; background: oklch(0.95 0.008 185 / .3); }
  & .card__n { font-size: var(--step-1); display: inline; }
  & .card__t { display: inline; margin-left: .4rem; }
  & .btn { flex: 1 1 100%; }
  & .card__close { position: absolute; top: .55rem; right: calc(var(--gutter) - .4rem); padding: .7rem .4rem; } }

/* Tower mode: phones, one shelf per area */
.mx.is-tower {
  /* the ceiling strip of the plate runs right behind the heading on a phone */
  & .mx__stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 34%; background: linear-gradient(oklch(0.12 0.012 50 / .92), oklch(0.12 0.012 50 / .5) 46%, transparent); }
  /* under the top bar */
  & .mx__copy { top: 5.4rem; width: auto; right: var(--gutter); }
  & .mx__copy > * { transition: opacity .3s; }
  & .is-off { pointer-events: none; & > * { opacity: 0; } }
  &.is-short .card__ask { display: none; }
  & .mx__copy .h2 { font-size: var(--step-2); }
  & .mx__invite { margin-top: .5rem; font-size: var(--step--1); max-width: none; } }

@media (prefers-reduced-motion: reduce) { .mx *, .mx *::after { transition: none !important; animation: none !important; } }