/* Motion system — refined playful. One easing, one float language, everywhere. */

:root {
  --ease-flow: cubic-bezier(0.22, 1, 0.36, 1);
  --scene-bg: #1b1d22;
}

@keyframes scn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes scn-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(6px, -12px) rotate(2deg); }
  66% { transform: translate(-6px, -6px) rotate(-2deg); }
}

/* ---------- Card + project scenes ---------- */

.card-scene {
  aspect-ratio: 16 / 10;
  background: var(--scene-bg);
  overflow: hidden;
}
.card-scene .scn { width: 100%; height: 100%; display: block; }

.proj-scene {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--scene-bg);
  overflow: hidden;
  margin: 10px 0 6px;
}
.proj-scene .scn { width: 100%; height: auto; max-height: 380px; display: block; }

/* ---------- PlaneFrame: e-ink display mockup (mirrors the real Nook UI) ---------- */

.sc-plane .scn-breeze path {
  stroke-dasharray: 12 16;
  animation: scn-breeze-flow 1.1s linear infinite;
}
@keyframes scn-breeze-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -28; }
}

.sc-plane .scn-eink { animation: scn-float 9s ease-in-out infinite; }

.sc-plane .scn-jet { animation: scn-hover 6s ease-in-out infinite; }
@keyframes scn-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.sc-plane .scn-strobe { animation: scn-strobe 1.6s ease-in-out infinite; }
@keyframes scn-strobe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}

/* ---------- Kotoban: simplified app mockup ---------- */

.sc-koto .scn-phone { animation: scn-float 6.5s ease-in-out infinite; }

.sc-koto .scn-ringspin {
  transform-box: fill-box;
  transform-origin: center;
  animation: scn-spin 14s linear infinite;
}
@keyframes scn-spin {
  to { transform: rotate(360deg); }
}

.sc-koto .scn-wrow rect { animation: scn-row-cycle 9s var(--ease-flow) infinite; }
.sc-koto .scn-wrow.wr2 rect { animation-delay: -3s; }
.sc-koto .scn-wrow.wr3 rect { animation-delay: -6s; }
@keyframes scn-row-cycle {
  0%, 10% { fill: #5b6b84; }
  24%, 100% { fill: #f6f1e8; }
}
.sc-koto .scn-wrow text { animation: scn-row-text 9s var(--ease-flow) infinite; }
.sc-koto .scn-wrow.wr2 text { animation-delay: -3s; }
.sc-koto .scn-wrow.wr3 text { animation-delay: -6s; }
@keyframes scn-row-text {
  0%, 10% { fill: #fffdf8; }
  24%, 100% { fill: #1b1815; }
}

.sc-koto .scn-chip { animation: scn-float 5s ease-in-out infinite; }
.sc-koto .scn-chip.c2 { animation-delay: -2.5s; }

.sc-koto .scn-dot { animation: scn-float 5.2s ease-in-out infinite; }
.sc-koto .scn-dot.d2 { animation-delay: -1.7s; }

/* ---------- Recipe: simplified site mockup ---------- */

.sc-rui .scn-browser { animation: scn-float 7s ease-in-out infinite; }

.sc-rui .scn-pill rect { animation: scn-pill-cycle 10s var(--ease-flow) infinite; }
.sc-rui .scn-pill.p1 rect { animation-delay: -2s; }
.sc-rui .scn-pill.p2 rect { animation-delay: -4s; }
.sc-rui .scn-pill.p3 rect { animation-delay: -6s; }
.sc-rui .scn-pill.p4 rect { animation-delay: -8s; }
@keyframes scn-pill-cycle {
  0%, 10% { fill: #5b6b84; }
  20%, 100% { fill: #f1ece2; }
}
.sc-rui .scn-pill text { animation: scn-pill-text 10s var(--ease-flow) infinite; }
.sc-rui .scn-pill.p1 text { animation-delay: -2s; }
.sc-rui .scn-pill.p2 text { animation-delay: -4s; }
.sc-rui .scn-pill.p3 text { animation-delay: -6s; }
.sc-rui .scn-pill.p4 text { animation-delay: -8s; }
@keyframes scn-pill-text {
  0%, 10% { fill: #fffdf8; }
  20%, 100% { fill: #6f6a62; }
}

.sc-rui .scn-playbtn {
  transform-box: fill-box;
  transform-origin: center;
  animation: scn-pulse 2.6s ease-in-out infinite;
}
@keyframes scn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* ---------- Hero: drifting language chips (rendered by app.js) ---------- */

.hero { position: relative; }

/* ---------- DCT Asistan: spindle + app overview ---------- */

.sc-dct .scn-phone { animation: scn-float 7s ease-in-out infinite; }

.sc-dct .scn-chat { animation: scn-float 7.5s ease-in-out infinite; animation-delay: -3s; }

.sc-dct .scn-gear {
  transform-box: fill-box;
  transform-origin: center;
  animation: scn-spin 12s linear infinite;
}

.sc-dct .scn-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: scn-blink 4.2s ease-in-out infinite;
}
@keyframes scn-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}

.sc-dct .scn-okbtn {
  transform-box: fill-box;
  transform-origin: center;
  animation: scn-btn-pulse 2.8s ease-in-out infinite;
}
@keyframes scn-btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.sc-dct .scn-dot { animation: scn-float 5.2s ease-in-out infinite; }
.sc-dct .scn-dot.d2 { animation-delay: -1.7s; }

/* ---------- Scroll reveal ---------- */

.rv {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.7s var(--ease-flow), translate 0.7s var(--ease-flow);
}
.rv.in { opacity: 1; translate: 0 0; }
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .scn *, .scn, .chip-x, .chip-w, .chip-x .chip, .chip-w .chip, .mesh .blob, .stars circle.tw {
    animation: none !important;
  }
  .rv { opacity: 1; translate: none; transition: none; }
  .sc-plane .scn-display,
  .sc-plane .scn-dline { opacity: 1 !important; transform: none !important; }
  .sc-plane .scn-plane { opacity: 0 !important; }
}

@media (max-width: 700px) {
  .hero { min-height: 96vh; padding-bottom: 34vh; }
  .taurus { height: 48vh; }
}