/* design-to-motion, Elaya, 5e57840: website mode. Original layout at rest.
   Intro once; one story per visual, clipped to its card and paused offscreen. */
:root {
  --motion-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fade: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-io: cubic-bezier(0.65, 0, 0.35, 1);
}
.hero-h { background: none; color: inherit; }
.hero-line { display: block; background: linear-gradient(90deg, #000000, #666666);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.js [data-appear] { animation: hero-appear 800ms var(--motion-enter) both;
  animation-delay: calc(var(--appear-order, 0) * 60ms); }
@keyframes hero-appear {
  from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}
.motion-photo { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-2xl); }
.motion-photo img { border-radius: 0; }
.js .motion-photo img { animation: photo-appear 1050ms var(--motion-fade) 240ms both; }
@keyframes photo-appear {
  from { opacity: 0; filter: blur(14px) saturate(0.6); }
  to { opacity: 1; filter: none; }
}
.hero-media { isolation: isolate; }
.hero-media .hero-chip { z-index: 2; }
.scene-points { position: absolute; inset: 0; pointer-events: none; }
.scene-point { position: absolute; display: flex; align-items: center; gap: var(--s-75);
  opacity: 0; transform: translateY(10px); color: var(--ink); }
.scene-point i { display: block; width: 12px; height: 12px; border: 2px solid var(--surface);
  border-radius: var(--r-full); background: var(--ink); box-shadow: 0 0 0 4px rgba(255,255,255,0.28); }
.scene-point > span { padding: var(--s-75) var(--s-100); border-radius: var(--r-xl);
  background: rgba(255,255,255,0.94); font-size: 14px; line-height: 20px; font-weight: 600; }
.point-light { left: 42%; top: 22%; }
.point-material { left: 16%; top: 47%; }
.point-space { right: 12%; top: 69%; }
.motion-toggle { position: absolute; z-index: 3; top: var(--s-200); right: var(--s-200);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); cursor: pointer;
  transition: transform 500ms var(--ease), background-color 300ms var(--ease); }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { background: var(--sunken); }
.motion-toggle:active { transform: scale(0.98); }
.motion-toggle-icon { width: 12px; height: 14px; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon { width: 0; height: 0;
  border: 7px solid transparent; border-left: 12px solid var(--ink); border-right: 0; }

/* Clip the animated child rows inside the existing rounded visual surface. */
.js .tile[data-motion][data-reveal] { transform: translateY(24px) scale(0.985); filter: blur(6px);
  transition: transform 900ms var(--motion-enter), opacity 600ms var(--motion-fade), filter 800ms var(--motion-fade);
  transition-delay: calc(var(--i, 0) * 90ms); }
.js .tile[data-motion][data-reveal].is-in { transform: none; filter: none; }
.tile[data-motion] .mock-in li { position: relative; isolation: isolate; }
.tile[data-motion] .mock-in li::before { content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--new-bg); opacity: var(--row-active, 0); }
.tile[data-motion] .mock-in .chip { transform-origin: center; }
.vr-focus { position: absolute; width: 32%; height: 38%; left: 34%; top: 25%; opacity: 0; pointer-events: none; }
.vr-focus span { position: absolute; width: 24px; height: 24px; border-color: var(--surface); border-style: solid; border-width: 0; }
.vr-focus span:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vr-focus span:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vr-focus span:nth-child(3) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.vr-focus span:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.drawing-focus { position: absolute; left: 10%; top: 14%; width: 28%; height: 56%;
  border: 2px solid var(--new-ink); background: rgba(237,228,218,0.2); border-radius: var(--r-lg);
  opacity: 0; pointer-events: none; }

/* Still and reduced-motion preserve all text and the source composition. */
.motion-still [data-appear], .motion-still .motion-photo img { animation: none; }
.motion-still [data-reveal], .no-js [data-appear] { opacity: 1; transform: none; filter: none; }
.motion-still .tagline-text .w { opacity: 1; }
.motion-still .motion-toggle { display: none; }
.no-js .scene-points, .no-js .vr-focus, .no-js .drawing-focus { display: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-appear], .js .motion-photo img { animation: none; }
  .js .tile[data-motion][data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .scene-points, .vr-focus, .drawing-focus, .motion-toggle { display: none !important; }
}