/* Cinematic layer: loaded after app.css. All motion is switched off under prefers-reduced-motion at the bottom. */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.app { position: relative; z-index: 1; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad); box-shadow: 0 0 12px var(--cyan); pointer-events: none; }
.spot { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 30%), rgba(0, 240, 255, .07), transparent 60%); }
:root[data-theme='light'] .spot, :root[data-theme='light'] #fx { display: none; }

/* reveal on scroll (uses translate so it never fights a transform) */
.rv { opacity: 0; translate: 0 14px; transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), filter .8s ease var(--d, 0s); }
.rv.in { opacity: 1; translate: 0 0; filter: none; }

/* page transition */
.view { animation: enter .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes enter { from { opacity: 0; translate: 0 16px; filter: blur(8px); } }

/* ---------- sections ---------- */
.sec-head h2 { font-size: clamp(26px, 7vw, 40px); letter-spacing: -.035em; }
.sec-head h2::after { content: ''; display: block; height: 3px; width: 0; margin-top: 8px; border-radius: 2px; background: var(--grad); transition: width .9s cubic-bezier(.2, .7, .2, 1) .25s; }
.sec-head.in h2::after { width: 56px; }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .35s, background .35s; }
.dots i.on { width: 26px; background: var(--grad); }

/* slides: add cinematic glow + slow zoom */
.slide { min-height: 240px; border: 1px solid rgba(255, 255, 255, .07); }
.slide .ghost { animation: drift 9s ease-in-out infinite alternate; }
.slide::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .07) 50%, transparent 62%); transform: translateX(-120%); animation: sweep 6s ease-in-out infinite; }
@keyframes drift { from { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); } to { transform: translate3d(-14px, 10px, 0) rotate(2deg) scale(1.06); } }
@keyframes sweep { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* product cards */
.card .pic { border: 1px solid var(--line); transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out, border-color .3s; will-change: transform; background: radial-gradient(120% 90% at 80% 0%, rgba(255, 255, 255, .05), transparent 60%), var(--tile); }
.card .pic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 240, 255, .22), transparent 60%); opacity: 0; transition: opacity .3s; }
.card:hover .pic { border-color: rgba(0, 240, 255, .5); } .card:hover .pic::after { opacity: 1; }
.card .pic .art { transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .card:hover .pic .art, .card:hover .pic img { transform: scale(1.08); }
.card .pic img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.add { background: var(--grad); color: #05050a; box-shadow: 0 0 18px rgba(0, 240, 255, .35); }
.add:hover, .add:active { background: var(--text); }

.fly { position: fixed; z-index: 95; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 20px 4px rgba(0, 240, 255, .7); pointer-events: none; }
.badge.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.6); } }

/* product page */
.gallery { border: 1px solid var(--line); position: relative; }
.gallery .art { animation: breathe 7s ease-in-out infinite; }
.gallery::before { content: ''; position: absolute; z-index: 1; inset: 10%; border-radius: 50%; border: 1px dashed rgba(0, 240, 255, .3); animation: spin 30s linear infinite; pointer-events: none; }
@keyframes breathe { 50% { transform: scale(1.07); } }
.pdp h1 { font-size: clamp(30px, 8vw, 46px); letter-spacing: -.04em; }
.buybar { background: rgba(5, 5, 10, .78); }
:root[data-theme='light'] .buybar { background: rgba(249, 249, 250, .85); }

/* intro polish: light sweep across the splash */
.splash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .09) 50%, transparent 60%); transform: translateX(-120%); animation: sweep 1.5s ease 1.2s forwards; pointer-events: none; }

@media (min-width: 700px) {
  .world { flex-basis: 280px; height: 380px; }
  .hl { max-width: 14ch; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; translate: none; filter: none; }
  .hl .w > span { transform: none; }
  .sub, .cta-row { opacity: 1; }
  .splash { display: none; }
}