/* Digital Vision motion layer. Pair with dv-motion.js.
   Everything that moves sits inside prefers-reduced-motion: no-preference;
   without the script nothing is hidden. */

body { overflow-x: clip; }
.window { position: relative; }

/* Stickers: placed per page with inline --r (tilt), --w (width) and position. */
.sticker { position: absolute; z-index: 5; width: var(--w, 120px); height: auto; transform: rotate(var(--r, 0deg)); filter: drop-shadow(2px 3px 0 rgba(24,20,16,0.85)); user-select: none; -webkit-user-drag: none; }
@media (max-width: 700px) {
  .sticker { top: auto !important; bottom: -34px; right: 12px !important; left: auto !important; width: calc(var(--w, 120px) * 0.5); }
}
@media print { .sticker { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Boot cursor on the top strip */
  .strip::after { content: ""; width: 9px; height: 16px; background: var(--phosphor); align-self: center; margin-left: 2px; animation: dv-blink 1.1s steps(1) infinite; }
  @keyframes dv-blink { 50% { opacity: 0; } }

  /* Windows rise into place as they scroll in */
  html.mo-on .window, html.mo-on footer { opacity: 0; transform: translateY(24px); }
  html.mo-on .window.mo-in, html.mo-on footer.mo-in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; }
  html.mo-on .window.mo-in:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); transition-duration: 0.2s; }
  .window:hover .lights b { animation: dv-chase 0.9s steps(1) infinite; }
  .window:hover .lights b:nth-child(2) { animation-delay: 0.3s; }
  .window:hover .lights b:nth-child(3) { animation-delay: 0.6s; }
  @keyframes dv-chase { 0%, 66% { filter: none; } 33% { filter: brightness(1.25) saturate(1.4); } }

  /* Headings type in with a stepped pixel wipe */
  html.mo-on .window .win-body > h2 { width: fit-content; max-width: 100%; clip-path: inset(0 100% 0 0); }
  html.mo-on .window.mo-in .win-body > h2 { animation: dv-wipe 0.7s steps(14) 0.25s forwards; }
  @keyframes dv-wipe { to { clip-path: inset(0 0 0 0); } }

  /* Eyebrow dash grows */
  html.mo-on .window .dash { transform: scaleX(0); transform-origin: left; }
  html.mo-on .window.mo-in .dash { animation: dv-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
  @keyframes dv-grow { to { transform: scaleX(1); } }

  /* Folder cards pop in one after another */
  html.mo-on .three > div { opacity: 0; }
  html.mo-on .window.mo-in .three > div { animation: dv-pop 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both; opacity: 1; }
  html.mo-on .window.mo-in .three > div:nth-child(1) { animation-delay: 0.45s; }
  html.mo-on .window.mo-in .three > div:nth-child(2) { animation-delay: 0.6s; }
  html.mo-on .window.mo-in .three > div:nth-child(3) { animation-delay: 0.75s; }
  @keyframes dv-pop { from { opacity: 0; transform: translateY(20px) rotate(-2deg) scale(0.96); } }
  .three > div { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .three > div:hover { transform: translate(-2px, -3px) rotate(-0.6deg); box-shadow: 5px 6px 0 var(--ink); }
  .three > div:hover .tab { transform: translateY(-3px); }
  .three .tab { transition: transform 0.2s ease; }

  /* List squares and table rows arrive in a stagger */
  html.mo-on .window.mo-in .cols li { animation: dv-slide 0.5s ease both; }
  html.mo-on .window.mo-in .cols li:nth-child(1) { animation-delay: 0.4s; }
  html.mo-on .window.mo-in .cols li:nth-child(2) { animation-delay: 0.5s; }
  html.mo-on .window.mo-in .cols li:nth-child(3) { animation-delay: 0.6s; }
  html.mo-on .window.mo-in .cols li:nth-child(4) { animation-delay: 0.7s; }
  html.mo-on .window.mo-in .apps tbody tr { animation: dv-slide 0.5s ease both; }
  html.mo-on .window.mo-in .apps tbody tr:nth-child(1) { animation-delay: 0.4s; }
  html.mo-on .window.mo-in .apps tbody tr:nth-child(2) { animation-delay: 0.48s; }
  html.mo-on .window.mo-in .apps tbody tr:nth-child(3) { animation-delay: 0.56s; }
  html.mo-on .window.mo-in .apps tbody tr:nth-child(4) { animation-delay: 0.64s; }
  html.mo-on .window.mo-in .apps tbody tr:nth-child(5) { animation-delay: 0.72s; }
  html.mo-on .window.mo-in .apps tbody tr:nth-child(6) { animation-delay: 0.8s; }
  @keyframes dv-slide { from { opacity: 0; transform: translateX(-12px); } }
  .cols li::before { transition: transform 0.2s ease; }
  .cols li:hover::before { transform: rotate(45deg) scale(1.15); }
  .apps tbody tr { transition: background-color 0.2s ease; }
  .apps tbody tr:hover { background: rgba(232, 74, 44, 0.06); }

  /* Links underline-nudge */
  a { transition: text-underline-offset 0.2s ease, text-decoration-color 0.2s ease; }
  a:hover { text-underline-offset: 5px; text-decoration-color: var(--coral); }

  /* Stickers get slapped on, then wiggle when touched */
  html.mo-on .sticker { opacity: 0; }
  html.mo-on .window.mo-in .sticker { opacity: 1; animation: dv-slap 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) 0.5s backwards; }
  @keyframes dv-slap {
    0% { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 16deg)) scale(1.9); }
    60% { opacity: 1; transform: rotate(calc(var(--r, 0deg) + 3deg)) scale(0.93); }
    100% { transform: rotate(var(--r, 0deg)) scale(1); }
  }
  .sticker { translate: var(--dx, 0px) var(--dy, 0px); transition: filter 0.2s ease; }
  .sticker:hover { animation: dv-wiggle 0.55s ease; }
  @keyframes dv-wiggle { 25% { rotate: -5deg; } 50% { rotate: 4deg; } 75% { rotate: -2deg; } }
  .sticker.is-dragging { cursor: grabbing; animation: none; scale: 1.07; filter: drop-shadow(5px 8px 0 rgba(24,20,16,0.55)); transition: none; z-index: 20; }
  @media (hover: hover) { .sticker { cursor: grab; } }
}

@media print { html.mo-on .window, html.mo-on footer { opacity: 1 !important; transform: none !important; } }