/* Motion refinements: layout, window geometry and video playback stay separate. */
:root {
  --section-motion-ms: 680;
  --section-leave-ms: 260;
  --home-reveal-ms: 800;
  --slide-reveal-ms: 700;
  --slide-leave-ms: 380;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* The original five-line, 3.1-second boot now has a clear current beat. */
#boot.boot-staged .bl {
  position: relative;
  padding-left: 12px;
  transition: opacity .22s ease, transform .22s var(--motion-ease), color .22s ease;
}
#boot.boot-staged .bl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .22s ease;
}
#boot.boot-staged .bl.current { color: var(--accent-bright); }
#boot.boot-staged .bl.current::before { opacity: 1; }
#boot.boot-staged .bl.complete { color: var(--dim2); }
#boot.boot-staged .bl.complete::before { opacity: .45; }
#boot.done { transition-duration: .24s; }

/* Each section moves in the navigation direction. Individual windows supply
   the small offsets; the whole screen no longer needs a large blur/zoom. */
.section.entering {
  animation: joeySectionIn calc(var(--section-motion-ms) * 1ms) var(--motion-ease) both;
  pointer-events: none;
}
.section.leaving {
  animation: joeySectionOut calc(var(--section-leave-ms) * 1ms) ease both;
  pointer-events: none;
}
@keyframes joeySectionIn {
  from { opacity: 0; transform: translate3d(0, calc(var(--section-direction, 1) * 10px), 0); }
  to { opacity: 1; transform: none; }
}
@keyframes joeySectionOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(0, calc(var(--section-direction, 1) * -8px), 0); }
}

#sections .frame {
  --frame-enter-x: -12px;
  --frame-enter-y: 10px;
  --frame-enter-delay: 0ms;
  transform: translate3d(var(--frame-parallax-x, 0px), var(--frame-parallax-y, 0px), 0);
}
#sections .frame:nth-child(2) { --frame-enter-x: 8px; --frame-enter-y: -12px; --frame-enter-delay: 45ms; }
#sections .frame:nth-child(3) { --frame-enter-x: 12px; --frame-enter-y: 6px; --frame-enter-delay: 90ms; }
#sections .frame:nth-child(4) { --frame-enter-x: -6px; --frame-enter-y: 14px; --frame-enter-delay: 135ms; }
#sections .frame:nth-child(5) { --frame-enter-x: 10px; --frame-enter-y: 12px; --frame-enter-delay: 180ms; }
#sections .frame:nth-child(6) { --frame-enter-x: -8px; --frame-enter-y: 8px; --frame-enter-delay: 225ms; }
.section.entering .frame {
  animation: joeyWindowIn 420ms var(--motion-ease) both;
  animation-delay: var(--frame-enter-delay);
}
.section.boot-reveal .frame {
  animation: joeyWindowIn 540ms var(--motion-ease) both;
  animation-delay: var(--frame-enter-delay);
}
@keyframes joeyWindowIn {
  from {
    opacity: 0;
    transform: translate3d(var(--frame-enter-x), calc(var(--frame-enter-y) * var(--section-direction, 1)), 0) scale(.992);
  }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.section.entering .center-title > *,
.section.boot-reveal .center-title > * {
  animation: joeyTitleIn 420ms var(--motion-ease) both;
}
.section.entering .center-title .ct-tag,
.section.boot-reveal .center-title .ct-tag { animation-delay: 100ms; }
.section.entering .center-title .ct-h,
.section.boot-reveal .center-title .ct-h { animation-delay: 170ms; }
.section.entering .center-title .ct-sub,
.section.boot-reveal .center-title .ct-sub { animation-delay: 240ms; }
@keyframes joeyTitleIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.section.entering .about-col { animation-duration: 420ms; }

/* A sweep completes once on arrival or hover, then leaves the work still. */
.frame:hover::before { animation: bordersweep 720ms ease-out 1 both; }
#sections .section.entering .frame::before {
  animation: bordersweep 420ms var(--motion-ease) 1 both;
  animation-delay: var(--frame-enter-delay);
}
#sections .section.boot-reveal .frame::before {
  animation: bordersweep 520ms var(--motion-ease) 1 both;
  animation-delay: var(--frame-enter-delay);
}
#sections .section.leaving .frame::before { animation: none; opacity: 0; }
.frame-header { transition: background-color .18s ease, border-color .18s ease; }
.frame:hover .frame-header { border-bottom-color: rgba(227, 185, 107, .28); }
.frame.dragging .frame-header,
.frame.resizing .frame-header { background-color: rgba(41, 34, 24, .96); }
.frame.dragging::before,
.frame.resizing::before { animation: none; opacity: 0; }
.sec-btn, .icon-btn, .chat-send { transition-duration: .18s; }
.sec-btn:active, .icon-btn:active, .chat-send:active { background-color: rgba(227, 185, 107, .19); }
.sec-btn:focus-visible, .icon-btn:focus-visible, .chat-send:focus-visible {
  outline: 1px solid var(--accent-bright);
  outline-offset: 3px;
}
.product-section .resize-handle { display: none; }
@media (max-width: 760px) {
  #sections .resize-handle { display: none; }
}

/* Keep the timed boot and content; replace spatial choreography with a short
   fade when the visitor asks for less motion. JS reads these same durations. */
@media (prefers-reduced-motion: reduce) {
  :root { --section-motion-ms: 120; --section-leave-ms: 100; --home-reveal-ms: 160; --slide-reveal-ms: 120; --slide-leave-ms: 100; }
  #boot.boot-staged .bl { transform: none; transition-property: opacity, color; }
  .section.entering { animation-name: joeyFadeIn; }
  .section.leaving { animation-name: joeyFadeOut; }
  .section.entering .frame,
  .section.boot-reveal .frame { animation: joeyFadeIn 120ms ease both; }
  .section.entering .center-title > *,
  .section.boot-reveal .center-title > *,
  .section.entering .about-col,
  #sections .avatar-ring { animation: none; }
  .frame::before { animation: none !important; opacity: 0 !important; }
  .slide.entering { animation: joeyFadeIn 120ms ease both; }
  .slide.leaving { animation: joeyFadeOut 100ms ease both; }
}
@keyframes joeyFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes joeyFadeOut { from { opacity: 1; } to { opacity: 0; } }