html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
::selection { background: #0a0a0a; color: #fff; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.text-outline { color: transparent; -webkit-text-stroke: 1.5px #0a0a0a; }
.text-outline-light { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85); }
@media (min-width: 1024px) {
  .text-outline, .text-outline-light { -webkit-text-stroke-width: 2px; }
}

.stripes-dark {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 9px);
}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.marquee { animation: marquee 40s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.float-a { animation: floatY 7s ease-in-out infinite; }
.float-b { animation: floatY 9s ease-in-out -3s infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.scroll-cue { animation: scrollCue 2.2s cubic-bezier(0.76, 0, 0.24, 1) infinite; }
@keyframes scrollCue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

.pulse-ring { animation: pulseRing 2.8s ease-out infinite; }
@keyframes pulseRing { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }

/* Hero floating frames: barely-there idle drift, each on its own rhythm */
.hf-float-a { animation: hfFloatA 7.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.hf-float-b { animation: hfFloatB 6.3s cubic-bezier(0.45, 0, 0.55, 1) -2.1s infinite; }
.hf-float-c { animation: hfFloatC 9.4s cubic-bezier(0.45, 0, 0.55, 1) -4.7s infinite; }
@keyframes hfFloatA { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 35% { transform: translate3d(1px, -5px, 0) rotate(0.12deg); } 70% { transform: translate3d(-1px, -2px, 0) rotate(-0.08deg); } }
@keyframes hfFloatB { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 40% { transform: translate3d(-2px, -8px, 0) rotate(-0.35deg); } 75% { transform: translate3d(1px, -3px, 0) rotate(0.15deg); } }
@keyframes hfFloatC { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(2px, -4px, 0); } }
.hf-spin { animation: hfSpin 14s linear infinite; }
.hf-spin-rev { animation: hfSpin 9s linear infinite reverse; }
.hf-bar { transform-box: view-box; animation: hfBar 1.8s ease-in-out infinite alternate; }
.hf-sweep { animation: hfSweep 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes hfSpin { to { transform: rotate(360deg); } }
@keyframes hfBar { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes hfSweep { 0% { transform: translateX(-40px); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(160px); opacity: 0; } }

/* Featured gallery: the centred project gains emphasis */
.feat-item .card-3d { transition: box-shadow 0.6s ease; }
.feat-item[data-active] .card-3d { box-shadow: 0 50px 90px -40px rgba(10, 10, 10, 0.7); }
.feat-item[data-active] .card-thumb { filter: none; }

/* Process illustrations: only the current stage moves */
.is-active .art-playhead { animation: artScan 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.is-active .art-blink { animation: artBlink 1.8s ease-in-out infinite; }
@keyframes artScan { to { transform: translateX(118px); } }
@keyframes artBlink { 50% { opacity: 0.25; } }

/* Shown until React mounts */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: #fff; }
.boot img { width: clamp(120px, 22vw, 180px); height: auto; animation: bootPulse 1.4s ease-in-out infinite; }
@keyframes bootPulse { 50% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee, .float-a, .float-b, .scroll-cue, .pulse-ring, .boot img,
  .is-active .art-playhead, .is-active .art-blink,
  .hf-float-a, .hf-float-b, .hf-float-c, .hf-spin, .hf-spin-rev, .hf-bar, .hf-sweep { animation: none; }
}