/* All content is visible by default. Animation is a progressive enhancement. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.footer-actions { display: flex; align-items: center; gap: 24px; }
.motion-toggle { border: 0; padding: 10px 0; min-height: 40px; background: none; color: var(--muted); font-size: 10px; }
.motion-toggle:hover { color: var(--accent); }
.motion-toggle:disabled { cursor: default; }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; bottom: 5px; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .hero-visual {
    transform: perspective(1000px) rotate(var(--frame-angle, 2deg)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 360ms var(--motion-ease);
  }
  :root:not([data-motion="off"]) .main-nav a::after { transition: transform 260ms var(--motion-ease); }
  :root:not([data-motion="off"]) :is(.text-link, .email-link, .button, .back-top) .icon,
  :root:not([data-motion="off"]) .back-top span { transition: transform 220ms var(--motion-ease); }
  :root:not([data-motion="off"]) .button:active,
  :root:not([data-motion="off"]) .icon-button:active { transform: scale(.96); }
  :root:not([data-motion="off"]) .icon-button { transition: transform 180ms ease-out, background 180ms ease-out; }
  :root:not([data-motion="off"]) .picture-frame img { transition: transform 650ms var(--motion-ease); }
  :root:not([data-motion="off"]) :is(.idea-art svg, .launch-art svg, .mini-window) { transition: transform 450ms var(--motion-ease); }
  @media (hover: hover) and (pointer: fine) {
    :root:not([data-motion="off"]) .text-link:hover .icon,
    :root:not([data-motion="off"]) .email-link:hover .icon { transform: translate(2px, -2px); }
    :root:not([data-motion="off"]) .button-primary:hover .icon { transform: translateX(4px); }
    :root:not([data-motion="off"]) .back-top:hover span { transform: translateY(-3px); }
    :root:not([data-motion="off"]) .hero-visual:hover .picture-frame img { transform: scale(1.025); }
    :root:not([data-motion="off"]) .process-item:hover .idea-art svg { transform: rotate(-4deg) translateY(-4px); }
    :root:not([data-motion="off"]) .process-item:hover .mini-window { transform: rotate(0) translateY(-4px); }
    :root:not([data-motion="off"]) .process-item:hover .launch-art svg { transform: rotate(3deg) translate(4px, -4px); }
  }
}
@media (max-width: 740px) {
  .hero-visual { --frame-angle: 1.8deg; }
  .footer-actions { gap: 20px; }
  .motion-toggle { font-size: 9px; }
}
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; }
:root[data-motion="off"] .button-primary:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-visual { transform: rotate(var(--frame-angle, 2deg)); }
  .button-primary:hover { transform: none; }
}