/* Shared visual layer for all mini web apps */

:root {
  --hero-image: none;
  --hero-glow: rgba(246, 239, 228, 0.14);
  --hero-ink: rgba(7, 11, 18, 0.45);
  --world-fog: 0.5;
  --world-brightness: 1;
  --world-scale: 1;
  --world-sat: 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 80% -5%, var(--hero-glow), transparent 62%),
    radial-gradient(900px 560px at -10% 110%, rgba(168, 191, 166, 0.08), transparent 72%);
  opacity: var(--world-fog);
  transform: scale(var(--world-scale));
  transition: opacity 850ms cubic-bezier(0.22, 0.7, 0.2, 1), transform 900ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 48%, rgba(0, 0, 0, 0.1)),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.06) 0 0.8px, transparent 1.1px);
  background-size: auto, 4px 4px;
  opacity: calc(var(--world-fog) * 0.95);
  filter: brightness(var(--world-brightness)) saturate(var(--world-sat));
  transition: opacity 850ms cubic-bezier(0.22, 0.7, 0.2, 1), filter 850ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

body[data-pressure="high"] {
  --world-fog: 0.62;
  --world-brightness: 0.92;
  --world-scale: 1;
  --world-sat: 0.9;
}

body[data-pressure="softening"] {
  --world-fog: 0.42;
  --world-brightness: 0.98;
  --world-scale: 0.992;
  --world-sat: 0.97;
}

body[data-pressure="held"] {
  --world-fog: 0.28;
  --world-brightness: 1.02;
  --world-scale: 0.986;
  --world-sat: 1.03;
}

body[data-pressure="closed"] {
  --world-fog: 0.2;
  --world-brightness: 1.04;
  --world-scale: 0.982;
  --world-sat: 1.06;
}

.screen--arrive .screen__hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(165deg, var(--hero-ink), rgba(7, 11, 18, 0.2)),
    var(--hero-image),
    linear-gradient(160deg, rgba(38, 47, 63, 0.45), rgba(10, 13, 20, 0.75));
  background-size: cover;
  background-position: center;
  padding: clamp(1rem, 2.6vw, 1.45rem);
}

.screen--arrive .screen__hero::after {
  content: "";
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  width: clamp(5.5rem, 22vw, 8rem);
  height: clamp(5.5rem, 22vw, 8rem);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 72%);
  pointer-events: none;
}

.screen--arrive .deck-card--router {
  position: relative;
  overflow: hidden;
}

.screen--arrive .deck-card__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Remove capacity circles/ratings from option cards on arrive */
.screen--arrive .deck-card .room-capacity,
.screen--arrive .deck-card .room-capacity__meters,
.screen--arrive .deck-card .room-capacity__meter,
.screen--arrive .deck-card .room-capacity__metric,
.screen--arrive .deck-card .room-capacity__label,
.screen--arrive .deck-card .room-capacity__when,
.screen--arrive .deck-card .room-capacity__ai,
.screen--arrive .deck-card .deck-card__capacity {
  display: none !important;
}

/* Remove capacity-match UI across all OS experiences */
.room-capacity-slot,
.room-capacity,
.room-capacity__label,
.room-capacity__meters,
.room-capacity__metric,
.room-capacity__metric-label,
.room-capacity__meter,
.room-capacity__when,
.room-capacity__ai,
.room-capacity__no-ai {
  display: none !important;
}

.transform-stage,
.screen--close .screen__hero {
  position: relative;
  overflow: hidden;
}

.transform-stage::after,
.screen--close .screen__hero::after {
  content: var(--room-object, "✦");
  position: absolute;
  right: 0.75rem;
  bottom: 0.6rem;
  opacity: 0.2;
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  line-height: 1;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.22, 0.7, 0.2, 1);
}

body[data-pressure="high"] .transform-stage::after {
  opacity: 0.14;
  transform: translateY(2px) scale(0.98);
}

body[data-pressure="softening"] .transform-stage::after {
  opacity: 0.2;
  transform: translateY(0) scale(1);
}

body[data-pressure="held"] .transform-stage::after,
body[data-pressure="closed"] .transform-stage::after {
  opacity: 0.26;
  transform: translateY(-2px) scale(1.02);
}

body[data-metaphor="noise-landing"] { --room-object: "⌂"; }
body[data-metaphor="filing-cabinet"] { --room-object: "🗂"; }
body[data-metaphor="door-shrink"] { --room-object: "🚪"; }
body[data-metaphor="lantern-vault"] { --room-object: "🏮"; }
body[data-metaphor="scoreboard-glass"] { --room-object: "🪞"; }
body[data-metaphor="hold-cloud"] { --room-object: "☁"; }
body[data-metaphor="baseline-dial"] { --room-object: "◎"; }
body[data-metaphor="noise-mixer"] { --room-object: "⋮"; }
body[data-metaphor="shadow-split"] { --room-object: "◐"; }
body[data-metaphor="skull-leave"] { --room-object: "◫"; }
body[data-metaphor="idea-orbit"] { --room-object: "◎"; }
body[data-metaphor="handoff-bridge"] { --room-object: "⎯"; }
body[data-metaphor="ping-gate"] { --room-object: "◯"; }

body.os-low-capacity {
  --hero-image: linear-gradient(145deg, rgba(142, 108, 255, 0.28), rgba(11, 13, 28, 0.82));
  --hero-glow: rgba(142, 108, 255, 0.16);
}

body.os-founder {
  --hero-image: linear-gradient(145deg, rgba(182, 138, 58, 0.22), rgba(15, 24, 40, 0.84));
  --hero-glow: rgba(182, 138, 58, 0.15);
}

body.os-caregiver {
  --hero-image: linear-gradient(145deg, rgba(168, 191, 166, 0.22), rgba(10, 21, 24, 0.82));
  --hero-glow: rgba(168, 191, 166, 0.14);
}

body.os-shutdown {
  --hero-image: linear-gradient(145deg, rgba(107, 140, 174, 0.18), rgba(7, 16, 30, 0.85));
  --hero-glow: rgba(107, 140, 174, 0.12);
}

body.os-performance-identity {
  --hero-image: linear-gradient(145deg, rgba(196, 160, 184, 0.2), rgba(20, 14, 26, 0.84));
  --hero-glow: rgba(196, 160, 184, 0.12);
}

body.os-chronic-illness {
  --hero-image: linear-gradient(145deg, rgba(168, 191, 166, 0.2), rgba(24, 28, 22, 0.84));
  --hero-glow: rgba(168, 191, 166, 0.12);
}

body.os-digital-detox {
  --hero-image: linear-gradient(145deg, rgba(143, 168, 154, 0.2), rgba(12, 19, 30, 0.86));
  --hero-glow: rgba(143, 168, 154, 0.12);
}

body.os-ai-anxiety {
  --hero-image: linear-gradient(145deg, rgba(232, 196, 168, 0.18), rgba(19, 23, 35, 0.86));
  --hero-glow: rgba(232, 196, 168, 0.14);
}

body.os-ai-clarity {
  --hero-image: linear-gradient(145deg, rgba(143, 162, 191, 0.2), rgba(15, 22, 36, 0.9));
  --hero-glow: rgba(143, 162, 191, 0.14);
}

body.os-mental-load {
  --hero-image: linear-gradient(145deg, rgba(196, 163, 90, 0.2), rgba(11, 16, 24, 0.86));
  --hero-glow: rgba(196, 163, 90, 0.13);
}

/* World verb accents */
body[data-world-verb="shrink"] .screen--arrive .screen__hero { border-color: rgba(142, 108, 255, 0.28); }
body[data-world-verb="file"] .screen--arrive .screen__hero { border-color: rgba(196, 163, 90, 0.28); }
body[data-world-verb="park"] .screen--arrive .screen__hero { border-color: rgba(182, 138, 58, 0.28); }
body[data-world-verb="hold"] .screen--arrive .screen__hero { border-color: rgba(107, 140, 174, 0.3); }
body[data-world-verb="relay"] .screen--arrive .screen__hero { border-color: rgba(168, 191, 166, 0.3); }
body[data-world-verb="unfuse"] .screen--arrive .screen__hero { border-color: rgba(196, 160, 184, 0.3); }
body[data-world-verb="pace"] .screen--arrive .screen__hero { border-color: rgba(168, 191, 166, 0.26); }
body[data-world-verb="quiet"] .screen--arrive .screen__hero { border-color: rgba(143, 168, 154, 0.3); }
body[data-world-verb="contain"] .screen--arrive .screen__hero { border-color: rgba(232, 196, 168, 0.3); }
body[data-world-verb="compress"] .screen--arrive .screen__hero { border-color: rgba(143, 162, 191, 0.32); }

/* World response pulse: action -> response -> settle */
body[data-world-response="acting"] .screen__hero,
body[data-world-response="acting"] .transform-stage {
  transform: translateY(-1px) scale(1.004);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

body[data-world-response="responding"] .screen__hero,
body[data-world-response="responding"] .transform-stage {
  transform: translateY(0) scale(1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* OS-by-OS verbs feel distinct in the world response */
body[data-world-verb="shrink"][data-pressure="softening"] .app-main {
  transform: scale(0.992);
}

body[data-world-verb="file"] .transform-stage::before {
  content: "";
  position: absolute;
  inset: auto 0.75rem 0.75rem auto;
  width: 4.2rem;
  height: 2.8rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(196, 163, 90, 0.35);
  background: linear-gradient(180deg, rgba(196, 163, 90, 0.16), rgba(11, 16, 24, 0.08));
  opacity: 0.45;
}

body[data-world-verb="park"] .transform-stage::before {
  content: "";
  position: absolute;
  inset: auto 0.65rem 0.65rem auto;
  width: 4.6rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(182, 138, 58, 0.42);
  opacity: 0.55;
}

body[data-world-verb="hold"] .screen__hero::after {
  opacity: 0.12;
}

body[data-world-verb="relay"] .transform-stage::after {
  text-shadow: 0 0 18px rgba(196, 163, 90, 0.28);
}

body[data-world-verb="unfuse"] .transform-stage::before {
  content: "";
  position: absolute;
  inset: 0.9rem 0.9rem auto auto;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(196, 160, 184, 0.3);
  background: rgba(196, 160, 184, 0.08);
  backdrop-filter: blur(2px);
}

body[data-world-verb="pace"] .screen--arrive .deck-card.is-selected {
  box-shadow: 0 0 0 1px rgba(168, 191, 166, 0.45), 0 8px 24px rgba(0, 0, 0, 0.2);
}

body[data-world-verb="quiet"][data-pressure="held"]::after {
  opacity: 0.18;
}

body[data-world-verb="contain"] .transform-stage::before {
  content: "";
  position: absolute;
  inset: 0.8rem;
  border: 1px dashed rgba(232, 196, 168, 0.24);
  border-radius: 0.65rem;
  pointer-events: none;
}

/* Per-room premium emphasis (top moments) */
body[data-metaphor="noise-landing"][data-pressure="softening"] .transform-stage::after {
  filter: drop-shadow(0 0 12px rgba(142, 108, 255, 0.35));
}

body[data-metaphor="filing-cabinet"][data-pressure="softening"] .transform-stage::after {
  filter: drop-shadow(0 0 10px rgba(196, 163, 90, 0.3));
}

body[data-metaphor="door-shrink"][data-pressure="held"] .transform-stage::after {
  transform: translateY(-3px) scale(1.06);
}

body[data-metaphor="hold-cloud"][data-pressure="held"] .transform-stage::after {
  opacity: 0.32;
}

body[data-metaphor="lantern-vault"][data-pressure="held"] .transform-stage::after {
  filter: drop-shadow(0 0 12px rgba(196, 163, 90, 0.34));
}

body[data-metaphor="scoreboard-glass"][data-pressure="softening"] .transform-stage::after {
  opacity: 0.24;
}

body[data-metaphor="baseline-dial"][data-pressure="softening"] .transform-stage::after {
  transform: rotate(-5deg) scale(1.02);
}

body[data-metaphor="noise-mixer"][data-pressure="softening"] .transform-stage::after {
  letter-spacing: 0.08em;
}

body[data-metaphor="shadow-split"][data-pressure="softening"] .transform-stage::after {
  opacity: 0.28;
}

body[data-metaphor="skull-leave"][data-pressure="softening"] .transform-stage::after {
  filter: drop-shadow(0 0 14px rgba(182, 138, 58, 0.38));
  transform: translateY(-2px) scale(1.03);
}

body[data-metaphor="idea-orbit"][data-pressure="held"] .transform-stage::after {
  transform: scale(0.94);
  opacity: 0.22;
}

body[data-metaphor="handoff-bridge"][data-pressure="held"] .screen__hero,
body[data-metaphor="handoff-bridge"][data-pressure="softening"] .screen__hero {
  filter: drop-shadow(0 0 16px rgba(196, 163, 90, 0.28));
}

body[data-metaphor="ping-gate"][data-pressure="held"] .transform-stage::after,
body[data-metaphor="ping-gate"][data-pressure="softening"] .screen__hero {
  opacity: 0.2;
  letter-spacing: 0.06em;
}

body[data-metaphor="handoff-bridge"][data-world-response="acting"] .visual-stage,
body[data-metaphor="skull-leave"][data-world-response="acting"] .visual-stage,
body[data-metaphor="ping-gate"][data-world-response="acting"] .visual-stage {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.28));
}

body[data-world-verb="park"][data-pressure="softening"] .app-main {
  transform: scale(0.994);
}

body[data-world-verb="relay"][data-pressure="softening"] .app-main {
  filter: brightness(1.02);
}

body[data-world-verb="quiet"][data-pressure="softening"]::after {
  opacity: 0.14;
}

@media (prefers-reduced-motion: reduce) {
  .screen--arrive .screen__hero::after {
    display: none;
  }
}

/* When shared stagecraft fills a visual slot, hide legacy pseudo-element fallbacks */
.visual-stage:has(.sc-stage)::before,
.visual-stage:has(.sc-stage)::after {
  display: none !important;
  animation: none !important;
}

.visual-stage .sc-stage {
  width: 100%;
}

/* Emotional pacing: slow, readable motion across OS experiences */
[class*="--revealing"],
[class*="--lowering"],
[class*="--dimming"],
[class*="--resizing"],
[class*="--sealing"],
[class*="--building"],
[class*="--shrinking"],
[class*="--opening"],
[class*="--pulse"],
[class*="--holding"],
[class*="--rising"],
[class*="--landing"] {
  animation-duration: 1.35s !important;
  animation-timing-function: cubic-bezier(0.22, 0.7, 0.2, 1) !important;
}

[class*="--revealing"]::before,
[class*="--revealing"]::after,
[class*="--lowering"]::before,
[class*="--lowering"]::after,
[class*="--sealing"]::before,
[class*="--sealing"]::after,
[class*="--opening"]::before,
[class*="--opening"]::after,
[class*="--building"]::before,
[class*="--building"]::after,
[class*="--holding"]::before,
[class*="--holding"]::after {
  animation-duration: 1.35s !important;
  animation-timing-function: cubic-bezier(0.22, 0.7, 0.2, 1) !important;
}

.transform-stage [class*="--revealing"],
.transform-stage [class*="--landing"],
.transform-stage [class*="--lowering"],
.transform-stage [class*="--shrinking"] {
  animation-duration: 1.55s !important;
}

.transform-count,
.transform-sub,
.transform-cards,
.guided-chip,
.deck-card,
.screen__hero,
.close-hero,
.container-zone {
  transition-duration: 0.5s !important;
  transition-timing-function: cubic-bezier(0.22, 0.7, 0.2, 1) !important;
}

/* Stagger should breathe, not flash */
.transform-cards--landing .load-card:nth-child(2) { animation-delay: 0.16s !important; }
.transform-cards--landing .load-card:nth-child(3) { animation-delay: 0.32s !important; }
.transform-cards--landing .load-card:nth-child(4) { animation-delay: 0.48s !important; }