/* Visor boot HUD — shop-notes atmosphere + four-corner blob field
   (blob-four physics: leashed center mass + one mass per door).
   No card-back.png overlay: that texture is a full-viewport screen-blend
   on the other splashes; the HUD stays a clean black construct. */

/* HUD field fills the *visible* viewport so TOP masses sit flush like BOTTOM.
   shop-notes.html keeps the 56px hamburger clearance; do not change that.

   Mobile Safari: `body.shop-notes` at ≤860px is height:auto / overflow-y:auto
   (notes scroll). Combined with 100% of the layout viewport, PIN y=100 and
   `.os-door--bl/br { bottom: 0 }` sat behind the collapsing URL bar once the
   accidental 56px top pad left. Lock html+body.os to svh/dvh and inset the
   home indicator; do not restore +56px padding-top (that pulls top blobs down). */
html:has(body.os) {
  height: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}

body.os {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: 100%;
  height: 100svh;
  height: 100dvh;
  max-height: 100%;
  max-height: 100svh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.os .landing-cracks {
  display: none;
}

/* Shared splash circuits are min(280px, 38vw). HUD corners reach a little
   further in; opacity stays on shop-notes.css (TL 0.42, others 0.28). */
body.os .landing-pcb {
  width: min(340px, 44vw);
  height: min(340px, 44vw);
}

@media (max-width: 720px) {
  body.os .landing-pcb {
    width: min(196px, 42vw);
    height: min(196px, 42vw);
  }
  /* shop-notes flattens the 3D floor at ≤720px (iOS GPU blank on busy
     landing). The HUD is a static field — keep the same receding grid. */
  body.os .landing-construct {
    transform: perspective(560px) rotateX(64deg);
    opacity: 0.7;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 70%, transparent 100%);
  }
}

.os-hud {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  touch-action: none;
}

.os-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  contain: layout paint;
  pointer-events: auto;
  touch-action: none;
}

.os-goo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
}

/* Coarse overflow only when not forcing desktop goo (filter needs clip). */
@media (pointer: coarse), (any-pointer: coarse) {
  .os-hud:not(.is-desktop-theme) .os-goo {
    contain: layout;
    overflow: visible;
  }
}

.os-mass {
  position: absolute;
  border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #b8c0c4;
}

.os-mass--center {
  background: transparent;
  overflow: visible;
  animation: none;
}

.os-mass--center::after {
  content: none;
}

/* Lab metaball: overlapping circles; SVG goo (or overlap on lite) welds them.
   Explicit sRGB lime — Chrome on wide-gamut Windows can wash #hex through goo. */
.os-meta {
  position: absolute;
  border-radius: 50%;
  background: #c2ffa8;
  background: color(srgb 0.761 1 0.659);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.os-mass.is-reaching {
  animation-duration: 6.2s;
}

.os-mass.is-absorbing {
  animation-duration: 0.28s;
}

/* Inner membrane — visible on lite/coarse (no goo); smears as extra skin under goo. */
.os-mass::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 42% 58% 47% 53% / 55% 43% 57% 45%;
  background: inherit;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.86);
}

.os-mass.is-absorbing::after {
  opacity: 0.4;
  animation: os-mass-shell 0.22s ease-in-out infinite;
}

/* Phone/desktop-theme: idle membrane is opacity 0 under goo — skip the pseudo. */
.os-hud.is-desktop-theme .os-mass:not(.is-absorbing)::after {
  content: none;
}

/* White rabbit mark, centered above the center mass rest (50%, 50%). */
.os-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(68px, 13vmin);
  height: auto;
  margin: 0;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  transform: translate(-50%, calc(-100% - min(7.2vmin, 58px)));
}

.os-mark__body {
  display: block;
  width: 100%;
  height: auto;
}

/* Cover the silhouette's punched-out eyes for a slow blink. */
.os-mark__lid {
  position: absolute;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scaleY(0);
  transform-origin: 50% 50%;
}

.os-mark__lid--near {
  left: 5.02%;
  top: 47.39%;
  width: 9.2%;
}

.os-mark__lid--far {
  left: 24.22%;
  top: 47.82%;
  width: 11%;
}

.os-doors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.os-door {
  --icon-size: 96px;
  /* Hit box ≈ visible quarter of the corner mass; icon sits at its center. */
  --hit: min(22vmin, 200px);
  --ring-r: 52px;
  --dot-x: 45px;
  --dot-y: 26px;
  pointer-events: auto;
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  text-decoration: none;
  color: #231f20;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.os-door--tl { top: 0; left: 0; }
.os-door--tr { top: 0; right: 0; }
.os-door--bl { bottom: 0; left: 0; }
.os-door--br { bottom: 0; right: 0; }

/*
  Door glyphs — meatball-on-a-leash passengers on the corner mass.
  JS (os2Orb/osOrb paintDoorIcons) pins left/top to the painted mass
  center, springs toward the pointer when that corner is hot, and hard-
  clamps the glyph inside ~78% of painted radius. Upright sticker.
  Outside #lava-goo (sharp stroke). Idle #000 on grey mass.
*/
.os-door__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #231f20;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  transition: color 0.15s ease-in;
}

.os-door__icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: scale(1);
}

/* ≤6 soft dots on ring path — flash/pulse with rim; no spray / no idle. */
.os-door__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 calc(var(--ring-r) * -1) 0 0 rgba(255, 255, 255, 0.5),
    var(--dot-x) calc(var(--dot-y) * -1) 0 0 rgba(255, 255, 255, 0.5),
    var(--dot-x) var(--dot-y) 0 0 rgba(255, 255, 255, 0.5),
    0 var(--ring-r) 0 0 rgba(255, 255, 255, 0.5),
    calc(var(--dot-x) * -1) var(--dot-y) 0 0 rgba(255, 255, 255, 0.5),
    calc(var(--dot-x) * -1) calc(var(--dot-y) * -1) 0 0 rgba(255, 255, 255, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: scale(1);
}

.os-door__icon svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform-origin: center center;
}

.os-door__glyph--mark {
  /* Filled brand mark — scales with --icon-size box */
}


.os-door.is-selected .os-door__icon {
  color: #231f20;
}

.os-door:focus-visible {
  outline: 1.5px solid rgba(0, 0, 0, 0.45);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Unread pip sits on the notes icon (top-right of the glyph). */
a.os-door .rv-unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 4;
}

/* Fine-pointer desktop: larger glyphs in the corner blob (leash still clamps). */
@media (pointer: fine) {
  .os-door {
    --icon-size: 144px;
    --ring-r: 78px;
    --dot-x: 67.5px;
    --dot-y: 39px;
  }
}

@media (max-width: 720px) {
  .os-door {
    --icon-size: 80px;
    --hit: min(28vmin, 200px);
    --ring-r: 44px;
    --dot-x: 38px;
    --dot-y: 22px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .os-hud {
    animation: os-settle 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Skin morph only — JS owns transform/size each frame. */
  .os-mass {
    animation: os-mass-skin 6.2s ease-in-out infinite;
  }
  .os-mass--tr { animation-delay: -1.4s; }
  .os-mass--bl { animation-delay: -2.2s; }
  .os-mass--br { animation-delay: -3.1s; }
  .os-mark__lid--near {
    animation: os-mark-blink 5.4s ease-in-out 0.8s infinite;
  }
  .os-mark__lid--far {
    animation: os-mark-blink 5.4s ease-in-out 0.85s infinite;
  }
}


/* Grab/select: shared pulse source for ring + dots + glyph scale. No idle ambient. */
.os-door__icon {
  --os-pulse-dur: 1.4s;
  --os-pulse-ease: ease-in-out;
  --os-pulse-scale: 1.18;
  --os-pulse-op: 0.22;
  --os-flash-dur: 360ms;
  --os-flash-ease: ease-out;
  --os-flash-scale: 1.42;
  --os-flash-op: 0.55;
  --os-lime: 194, 255, 168;
}


/* Dye tip wisp — soft kiss-side motion while contacting (not capture fill). */
.os-mass:not(.os-mass--center)::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 130% 165% at var(--os-tip-x, 100%) var(--os-tip-y, 50%),
      rgba(194, 255, 168, 0.55) 0%,
      rgba(194, 255, 168, 0.18) 14%,
      transparent 28%
    ),
    radial-gradient(
      ellipse 120% 150% at calc(var(--os-tip-x, 100%) - 3%) calc(var(--os-tip-y, 50%) + 2%),
      rgba(194, 255, 168, 0.3) 0%,
      transparent 10%
    );
  mix-blend-mode: screen;
  transform-origin: var(--os-tip-x, 100%) var(--os-tip-y, 50%);
}
.os-mass:not(.os-mass--center).is-dyeing::before {
  opacity: clamp(0.08, calc(var(--os-contact, 0) * 0.32), 0.28);
  animation: os-dye-wisp 2.4s ease-in-out infinite;
}
@keyframes os-dye-wisp {
  0%, 100% { transform: scale(0.97); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .os-mass:not(.os-mass--center).is-dyeing::before {
    animation: none;
  }
}

@keyframes os-door-pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: var(--os-pulse-op); transform: scale(var(--os-pulse-scale)); }
}

@keyframes os-door-flash {
  0% { opacity: var(--os-flash-op); transform: scale(1); }
  100% { opacity: 0; transform: scale(var(--os-flash-scale)); }
}

/* Glyph scale uses same timing/scale vars — stays black (no lime currentColor). */
@keyframes os-door-glyph-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--os-pulse-scale)); }
}

@keyframes os-door-glyph-flash {
  0% { transform: scale(1); }
  100% { transform: scale(var(--os-flash-scale)); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Soft lime ring/dots while selected only — deselect stops immediately. */
  .os-door.is-selected .os-door__icon::after {
    border-color: rgba(var(--os-lime), 0.65);
    background: radial-gradient(circle, rgba(var(--os-lime), 0.12) 0%, transparent 68%);
    animation: os-door-pulse var(--os-pulse-dur) var(--os-pulse-ease) infinite;
  }
  .os-door.is-selected .os-door__icon::before {
    box-shadow:
      0 calc(var(--ring-r) * -1) 0 0 rgba(var(--os-lime), 0.55),
      var(--dot-x) calc(var(--dot-y) * -1) 0 0 rgba(var(--os-lime), 0.55),
      var(--dot-x) var(--dot-y) 0 0 rgba(var(--os-lime), 0.55),
      0 var(--ring-r) 0 0 rgba(var(--os-lime), 0.55),
      calc(var(--dot-x) * -1) var(--dot-y) 0 0 rgba(var(--os-lime), 0.55),
      calc(var(--dot-x) * -1) calc(var(--dot-y) * -1) 0 0 rgba(var(--os-lime), 0.55);
    animation: os-door-pulse var(--os-pulse-dur) var(--os-pulse-ease) infinite;
  }
  .os-door.is-selected .os-door__icon svg {
    animation: os-door-glyph-pulse var(--os-pulse-dur) var(--os-pulse-ease) infinite;
  }
  /* Stronger first flash on select/grab edge, then continue gentle pulse. */
  .os-door.is-selected .os-door__icon.is-shimmer::after {
    animation:
      os-door-flash var(--os-flash-dur) var(--os-flash-ease),
      os-door-pulse var(--os-pulse-dur) var(--os-pulse-ease) var(--os-flash-dur) infinite;
  }
  .os-door.is-selected .os-door__icon.is-shimmer::before {
    animation:
      os-door-flash var(--os-flash-dur) var(--os-flash-ease),
      os-door-pulse var(--os-pulse-dur) var(--os-pulse-ease) var(--os-flash-dur) infinite;
  }
  .os-door.is-selected .os-door__icon.is-shimmer svg {
    animation:
      os-door-glyph-flash var(--os-flash-dur) var(--os-flash-ease),
      os-door-glyph-pulse var(--os-pulse-dur) var(--os-pulse-ease) var(--os-flash-dur) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .os-door__icon {
    animation: none !important;
    transition: none;
  }
  .os-door__icon::after,
  .os-door__icon::before {
    animation: none !important;
    opacity: 0;
    background: none;
  }
  .os-door.is-selected .os-door__icon svg,
  .os-door__icon.is-shimmer svg {
    animation: none !important;
  }
  .os-mass {
    animation: none !important;
  }
  .os-mass::after {
    animation: none !important;
    opacity: 0;
  }
  .os-mark__lid {
    animation: none !important;
  }
}



@keyframes os-settle {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes os-mass-skin {
  0%, 100% { border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%; }
  34% { border-radius: 56% 44% 52% 48% / 46% 54% 48% 52%; }
  67% { border-radius: 44% 56% 48% 52% / 54% 46% 56% 44%; }
}

@keyframes os-mark-blink {
  0%, 4.5%, 100% { transform: translate(-50%, -50%) scaleY(0); }
  1.2%, 3.2% { transform: translate(-50%, -50%) scaleY(1); }
}

@keyframes os-mass-shell {
  0%, 100% {
    inset: 20%;
    border-radius: 42% 58% 47% 53% / 55% 43% 57% 45%;
    transform: scale(0.88);
  }
  35% {
    inset: 11%;
    border-radius: 58% 40% 54% 46% / 44% 58% 46% 54%;
    transform: scale(1.08);
  }
  62% {
    inset: 24%;
    border-radius: 46% 54% 40% 60% / 58% 46% 54% 42%;
    transform: scale(0.8);
  }
}

/* Desktop only: no ring / orbit-dot halo around door glyphs. */
@media (pointer: fine) {
  .os-door__icon::before,
  .os-door__icon::after,
  .os-door.is-selected .os-door__icon::before,
  .os-door.is-selected .os-door__icon::after,
  .os-door.is-selected .os-door__icon.is-shimmer::before,
  .os-door.is-selected .os-door__icon.is-shimmer::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
}