/* ==========================================================================
   studio-marks.css — shared motion + ink for StudioMarks.

   Hairline monochrome. One orange accent. Arrival once. Quiet life at rest.
   Loaded before studios-entry.css so room surfaces can refine without forking.
   ========================================================================== */

.sm {
  --sm-orange: var(--se-orange, var(--lp-orange, #fc9b4c));
  --sm-ease: var(--se-ease, cubic-bezier(0.22, 1, 0.36, 1));
  --sm-ease-soft: var(--se-ease-soft, cubic-bezier(0.4, 0, 0.2, 1));
  display: block;
  width: 100%;
  height: auto;
  color: currentColor;
  overflow: visible;
}

/* ── Ink weight ──────────────────────────────────────────────────────────── */
.sm-ink { fill: currentColor; stroke: currentColor; }

.sm-ghost { fill: currentColor; opacity: 0.22; }
.sm-dot { fill: currentColor; opacity: 0.55; }

.sm-hair,
.sm-thread,
.sm-baseline,
.sm-frame,
.sm-guide,
.sm-stratum,
.sm-link,
.sm-rule,
.sm-tick-mark,
.sm-axes,
.sm-linear,
.sm-easing,
.sm-tick {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
}

.sm-frame,
.sm-guide,
.sm-stratum,
.sm-axes { opacity: 0.18; stroke-width: 1; }
.sm-linear { opacity: 0.2; stroke-dasharray: 2.5 4; }
.sm-thread {
  opacity: 0.2;
  stroke-width: 1;
  stroke-dasharray: 1.5 3;
}
.sm--arrive.sm--room .sm-thread,
.sm--arrive.sm--hero .sm-thread,
.se--js.is-entered .sm--research .sm-thread {
  opacity: 0;
  animation: sm-thread-in 0.7s var(--sm-ease) forwards;
  animation-delay: calc(0.05s * var(--i, 0) + 0.35s);
}
@keyframes sm-thread-in { to { opacity: 0.22; } }
.sm-baseline { opacity: 0.42; stroke-width: 1.35; }
.sm-link { opacity: 0.34; stroke-width: 1.25; }
.sm-rule,
.sm-tick-mark { opacity: 0.28; }
.sm-easing { opacity: 0.42; stroke-width: 1.45; }
.sm-tick { stroke-width: 1.3; }

.sm-tile { fill: currentColor; opacity: 0.16; }
.sm-layout .sm-tile:nth-child(2),
.sm-layout .sm-tile:nth-child(3),
.sm-layout .sm-tile:nth-child(4) { opacity: 0.12; }
.sm-layout .sm-tile:nth-child(5) { opacity: 0.15; }

.sm-bar { fill: currentColor; opacity: 0.26; }

/* Single orange note — the whole accent budget for the mark. */
.sm-lit,
.sm-lit-core,
.sm-crop,
.sm-tick.sm-lit,
.sm-travel,
.sm-caret {
  fill: var(--sm-orange);
  stroke: var(--sm-orange);
  color: var(--sm-orange);
}
.sm-crop path {
  fill: none;
  stroke: var(--sm-orange);
  opacity: 0.9;
}
.sm-tile.sm-lit { opacity: 0.88; fill: var(--sm-orange); stroke: none; }
.sm-bar.sm-lit { opacity: 1; fill: var(--sm-orange); stroke: none; }
.sm-caret { opacity: 0; }

/* ── Arrival (performed once when a parent marks the sheet entered) ─────── */
.sm-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* Index cells wait for sheet entry; room/hero marks may arrive on mount. */
.sm--arrive.sm--room .sm-draw,
.sm--arrive.sm--hero .sm-draw,
.se--js.is-entered .sm .sm-draw,
.se--js.is-entered .se-cell .se-draw {
  animation: sm-draw 1.05s var(--sm-ease) forwards;
  animation-delay: calc(0.09s * var(--i, 0) + 0.18s);
}
@keyframes sm-draw { to { stroke-dashoffset: 0; } }

.sm-tile,
.sm-bar,
.se-tile,
.se-line {
  transform-box: fill-box;
}
.sm--arrive.sm--room .sm-tile,
.sm--arrive.sm--room .sm-bar,
.sm--arrive.sm--hero .sm-tile,
.sm--arrive.sm--hero .sm-bar,
.se--js.is-entered .se-cell .se-tile,
.se--js.is-entered .se-cell .se-line,
.se--js.is-entered .sm .sm-tile,
.se--js.is-entered .sm .sm-bar {
  opacity: 0;
  transform: translateY(4px);
  animation: sm-settle 0.65s var(--sm-ease) forwards;
  animation-delay: calc(0.07s * var(--i, 0) + 0.22s);
}
@keyframes sm-settle {
  to { opacity: var(--sm-op, 1); transform: translateY(0); }
}

.sm-layout .sm-tile { --sm-op: 0.16; }
.sm-layout .sm-tile:nth-child(2),
.sm-layout .sm-tile:nth-child(3),
.sm-layout .sm-tile:nth-child(4) { --sm-op: 0.12; }
.sm-layout .sm-tile:nth-child(5) { --sm-op: 0.15; }
.sm-tile.sm-lit,
.se-tile--lit { --sm-op: 0.88; }
.sm-impl .sm-bar { --sm-op: 0.26; }
.sm-bar.sm-lit,
.se-line--lit { --sm-op: 1; }

/* Crop marks arrive after the chosen tile. */
.sm--arrive.sm--room .sm-crop,
.sm--arrive.sm--hero .sm-crop,
.se--js.is-entered .sm-crop {
  opacity: 0;
  animation: sm-crop-in 0.7s var(--sm-ease) 0.55s forwards;
}
@keyframes sm-crop-in { to { opacity: 1; } }

/* Motion traveler — path set inline from the grammar's data-path. */
.sm-travel,
.se-fig__travel {
  offset-path: path("M24 116 C 78 116, 92 34, 176 34");
  offset-distance: 0%;
  offset-rotate: 0deg;
}
.sm--arrive.sm--room .sm-travel,
.sm--arrive.sm--hero .sm-travel,
.se--js.is-entered .se-cell--motion .se-fig__travel,
.se--js.is-entered .sm--motion .sm-travel {
  animation: sm-travel 1.55s var(--sm-ease) 0.35s forwards;
}
@keyframes sm-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.sm-lit-core,
.se-fig__pulse {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Quiet life — the mark breathes while the room is idle ────────────────
   Extremely restrained. Never a countable beat. Never a shop window. */
.sm--life .sm-ghost {
  animation: sm-ghost-life 7.5s var(--sm-ease-soft) infinite;
  animation-delay: calc(var(--i, 0) * 0.55s);
}
@keyframes sm-ghost-life {
  0%, 100% { opacity: 0.16; }
  50% { opacity: 0.3; }
}

.sm--life .sm-lit-core {
  animation: sm-ember 5.2s var(--sm-ease-soft) infinite;
}
@keyframes sm-ember {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

.sm--life .sm-crop {
  animation: sm-crop-life 6s var(--sm-ease-soft) infinite;
}
@keyframes sm-crop-life {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.sm--life .sm-tile.sm-lit {
  animation: sm-tile-life 6.5s var(--sm-ease-soft) infinite;
}
@keyframes sm-tile-life {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 0.95; }
}

.sm--life .sm-link {
  animation: sm-link-life 8s var(--sm-ease-soft) infinite;
  animation-delay: calc(var(--i, 0) * 0.35s);
}
@keyframes sm-link-life {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.42; }
}

.sm--life .sm-caret {
  animation: sm-caret-life 1.35s steps(1) infinite;
}
@keyframes sm-caret-life {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

.sm--life.sm--motion .sm-travel,
.sm--life .sm-travel {
  /* Room/hero: travel once, then orbit. Index cells keyed off sheet entry below. */
  animation: sm-travel 1.55s var(--sm-ease) 0.2s forwards,
             sm-orbit 12s var(--sm-ease) 1.9s infinite;
}
.se--js.is-entered .sm--life.sm--motion .sm-travel {
  animation: sm-travel 1.55s var(--sm-ease) 0.35s forwards,
             sm-orbit 12s var(--sm-ease) 2.1s infinite;
}
@keyframes sm-orbit {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

/* Hover on an index cell: a slightly clearer breath, never a new trick. */
.se-cell:hover .sm-lit-core,
.se-cell:focus-visible .sm-lit-core {
  animation: sm-ember 1.6s var(--sm-ease-soft);
}
.se-cell--motion:hover .sm-travel,
.se-cell--motion:focus-visible .sm-travel {
  animation: sm-travel 1.3s var(--sm-ease);
}
.se-cell--code:hover .sm-caret,
.se-cell--code:focus-visible .sm-caret {
  animation: sm-caret-life 1s steps(1) 3;
}

/* Room-scale mark (empty states) — larger presence, same grammar. */
.sm--room {
  max-width: 220px;
  margin: 0 auto 22px;
  color: inherit;
}
.sm--hero {
  max-width: min(280px, 70%);
  margin: 0 auto 28px;
}

/* Interior accent — identity only. Hosts size the box; the SVG fills it. */
.sm--interior {
  width: 100%;
  height: 100%;
  max-width: 96px;
  max-height: 72px;
  margin: 0;
  display: block;
  /* Outer box never transforms — only internal SVG elements animate. */
  transform: none !important;
}

/* Public Studios — detail marks perform on approach. */
.st-sig.is-in .sm-draw {
  animation: sm-draw 1.05s var(--sm-ease) forwards;
  animation-delay: calc(0.09s * var(--i, 0) + 0.1s);
}
.st-sig.is-in .sm-tile,
.st-sig.is-in .sm-bar {
  opacity: 0;
  transform: translateY(4px);
  animation: sm-settle 0.65s var(--sm-ease) forwards;
  animation-delay: calc(0.07s * var(--i, 0) + 0.18s);
}
.st-sig.is-in .sm-crop {
  opacity: 0;
  animation: sm-crop-in 0.7s var(--sm-ease) 0.5s forwards;
}
.st-sig.is-in .sm-thread {
  opacity: 0;
  animation: sm-thread-in 0.7s var(--sm-ease) forwards;
  animation-delay: calc(0.05s * var(--i, 0) + 0.28s);
}
.st-sig.is-in .sm-travel {
  animation: sm-travel 1.55s var(--sm-ease) 0.3s forwards;
}

.st-door__sig.sm,
.st-door__sig .sm,
.st-sig.sm,
.st-sig .sm {
  width: 100%;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .sm--arrive .sm-draw,
  .sm--arrive .sm-tile,
  .sm--arrive .sm-bar,
  .sm--arrive .sm-crop,
  .sm--arrive .sm-travel,
  .sm--life .sm-ghost,
  .sm--life .sm-lit-core,
  .sm--life .sm-crop,
  .sm--life .sm-tile.sm-lit,
  .sm--life .sm-link,
  .sm--life .sm-caret,
  .sm--life .sm-travel,
  .se--js.is-entered .sm .sm-draw,
  .se--js.is-entered .se-cell .se-tile,
  .se--js.is-entered .se-cell .se-line,
  .se-cell:hover .sm-lit-core,
  .se-cell--motion:hover .sm-travel,
  .se-cell--code:hover .sm-caret {
    animation: none !important;
    transition: none !important;
  }
  .sm-draw { stroke-dashoffset: 0; }
  .sm-tile, .sm-bar { opacity: var(--sm-op, 1); transform: none; }
  .sm-crop { opacity: 1; }
  .sm-caret { opacity: 1; }
  .sm-travel { offset-distance: 70%; }
}