/* NML Club motion layer: intro, hero entrance, scroll reveals, tapes, cursor.
   Hidden-until-revealed states only apply when JS is running (.js), motion is
   on (.motion), we're not in the theme editor (.design-mode) and the visitor
   visitor still gets the intro and fades with reduced motion on, just without
   movement (see the block at the end). .motion-fallback (set by the layout
   if motion.js never loads) shows everything. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --hero-delay: .15s;
}

/* ---------- film grain ---------- */
.grain body::after {
  content: ""; position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }

/* ---------- header hide on scroll ---------- */
.motion .site-header { transition: transform .45s var(--ease-out), background .3s; }
.motion .site-header.is-hidden { transform: translateY(-100%); }

/* ---------- intro ---------- */
.intro { display: none; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: var(--dark); color: var(--dark-text);
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s var(--ease-io);
  /* Safety net: clears itself even if the inline script never runs. */
  animation: introFailsafe 0s linear 4.5s forwards;
}
.intro-done .intro { clip-path: inset(0 0 100% 0); pointer-events: none; }
@keyframes introFailsafe { to { visibility: hidden; pointer-events: none; } }
.intro-on body { overflow: hidden; }
.intro-done body { overflow: auto; }

.intro__grain { position: absolute; inset: -50%; opacity: .12; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .8s steps(5) infinite; }
.intro__record { position: absolute; width: min(90vmin, 760px); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--accent) 0 13%, var(--dark) 13.5% 14%, var(--accent) 14.5% 27%, #0b0a09 27.5%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  animation: introRecord 2.2s var(--ease-out) forwards; }
.intro__record::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 3px, rgba(255,255,255,.045) 3px 4px);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 28.5%); mask: radial-gradient(circle, transparent 28%, #000 28.5%); }
@keyframes introRecord {
  0% { opacity: 0; transform: scale(.6) rotate(-120deg); }
  40% { opacity: .9; }
  100% { opacity: .9; transform: scale(1) rotate(200deg); }
}
.intro__center { position: relative; z-index: 1; line-height: .8; text-align: center; }
.intro__word { display: flex; font-family: var(--display); font-size: clamp(110px, 26vw, 360px); letter-spacing: -.05em; overflow: hidden; padding-inline: .06em; }
.intro__word span { display: inline-block; transform: translateY(105%); animation: introChar .8s var(--ease-out) forwards; animation-delay: calc(.2s + var(--c) * .09s); }
@keyframes introChar { to { transform: none; } }
.intro__script { position: absolute; right: -8%; bottom: -12%; font-family: var(--script); font-size: clamp(56px, 11vw, 150px); color: var(--accent);
  opacity: 0; transform: rotate(-10deg) scale(2.2); animation: introStamp .5s cubic-bezier(.3, 1.6, .5, 1) .85s forwards; }
@keyframes introStamp { to { opacity: 1; transform: rotate(-10deg) scale(1); } }
.intro__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; align-items: end; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; animation: fadeIn .5s ease .3s forwards; }
.intro__count { font-size: clamp(40px, 7vw, 88px); letter-spacing: -.02em; line-height: .8; font-variant-numeric: tabular-nums; }
@keyframes fadeIn { to { opacity: 1; } }

/* ---------- hero entrance ---------- */
.intro-on { --hero-delay: 2.15s; }
.motion .hero .char { display: inline-block; }
.js.motion:not(.design-mode) .hero .wordmark__big { overflow: hidden; padding-inline: .04em; margin-inline: -.04em; }
.js.motion:not(.design-mode) .hero .char { transform: translateY(105%); animation: charUp .9s var(--ease-out) forwards; animation-delay: calc(var(--hero-delay) + var(--c) * .08s); }
.js.motion:not(.design-mode) .hero-stamp { opacity: 0; animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--hero-delay) + .45s); }
.js.motion:not(.design-mode) .hero-in { opacity: 0; transform: translateY(24px); animation: riseIn .9s var(--ease-out) forwards; animation-delay: calc(var(--hero-delay) + var(--d) * .08s); }
.js.motion:not(.design-mode) .hero-media-in { opacity: 0; transform: translateY(40px) rotate(2deg); animation: mediaIn 1.1s var(--ease-out) forwards; animation-delay: calc(var(--hero-delay) + .2s); }
@keyframes charUp { to { transform: none; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-9deg) scale(2); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes riseIn { to { opacity: 1; transform: none; } }
@keyframes mediaIn { to { opacity: 1; transform: none; } }

.hero__img { overflow: hidden; border-radius: calc(var(--radius) / 2); }
.hero__img img, .hero__img svg { transform: scale(1.12); will-change: transform; }
.hero__sticker { transition: transform .2s linear; }

/* ---------- scroll reveals ---------- */
.js.motion:not(.design-mode):not(.motion-fallback) [data-reveal]:not(.is-in) { opacity: 0; }
.js.motion:not(.design-mode) [data-reveal] {
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), clip-path 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="up"]:not(.is-in) { transform: translateY(48px); }
.js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="clip"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(40%); }
.js.motion:not(.design-mode) [data-reveal="clip"] { clip-path: inset(-10% -5% -25% -5%); }
.js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="tilt"]:not(.is-in) { transform: translateY(60px) rotate(-8deg); }
.js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="card"]:not(.is-in) { transform: translateY(80px) rotate(-14deg) scale(.9); }
.js.motion:not(.design-mode) [data-reveal="card"].is-in { transition-timing-function: cubic-bezier(.3, 1.4, .5, 1); }

/* big footer word: letters rise one by one */
.footer__giant { overflow: hidden; }
.footer__giant .char { display: inline-block; }
.js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="chars"]:not(.is-in) { opacity: 1; }
.js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="chars"]:not(.is-in) .char { transform: translateY(100%); }
.js.motion:not(.design-mode) [data-reveal="chars"] .char { transition: transform 1s var(--ease-out); transition-delay: calc(var(--c) * 55ms); }

/* ---------- product cards ---------- */
.card__media { isolation: isolate; }
.card__media img { transition: opacity .4s, transform .9s var(--ease-out), filter .4s; }
.card:hover .card__media img:not(.card__alt):only-of-type,
.card:hover .card__media img.card__alt { transform: scale(1.06); }
.card .price-tag { transition: background .25s, color .25s; padding: 2px 6px; margin: -2px -6px; }
.card:hover .price-tag { background: var(--accent); color: var(--accent-contrast); }
.card__title { transition: transform .35s var(--ease-out); }
.card:hover .card__title { transform: translateX(4px); }

/* ---------- tape marquee ---------- */
.tapes { position: relative; overflow: hidden; padding-block: clamp(36px, 5vw, 64px); }
.tape { position: relative; overflow: hidden; white-space: nowrap; padding-block: 14px; transform: rotate(calc(var(--tape-tilt) * -1)); margin-inline: -4vw; }
.tape--b { transform: rotate(var(--tape-tilt)); margin-top: calc(var(--tape-tilt) * -9); }
.tape__track { display: inline-flex; align-items: center; will-change: transform; }
.tape__item { font-family: var(--display); font-size: clamp(28px, 4.4vw, 60px); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; padding-inline: .45em; }
.tape__star { font-size: clamp(16px, 2vw, 26px); }
.tapes--accent .tape--a { background: var(--accent); color: var(--accent-contrast); z-index: 2; }
.tapes--accent .tape--b { background: var(--dark); color: var(--dark-text); }
.tapes--dark .tape--a { background: var(--dark); color: var(--dark-text); z-index: 2; }
.tapes--dark .tape--b { background: var(--surface); color: var(--ink); border-block: 1px solid var(--line); }
.tapes--outline .tape { border-block: 1px solid var(--ink); }
.tapes--outline .tape__item { color: transparent; -webkit-text-stroke: 1.5px var(--ink); font-size: clamp(40px, 7vw, 104px); }
.tapes--outline .tape__item:nth-of-type(3n+2) { color: var(--ink); -webkit-text-stroke: 0; }
.tapes--outline .tape__star { color: var(--accent); }
/* Without motion.js the first tape still drifts with CSS. */
.tape__track { animation: tapeDrift 40s linear infinite; }
.motion-ready .tape__track { animation: none; }
.tape--b .tape__track { animation-direction: reverse; }
@keyframes tapeDrift { to { transform: translateX(-50%); } }

/* ---------- custom cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 500; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--accent); pointer-events: none; display: grid; place-items: center;
  transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, opacity .3s; opacity: 0; }
.cursor.is-active { opacity: 1; }
.cursor__label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-contrast); opacity: 0; transition: opacity .2s; }
.cursor.is-view { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cursor.is-view .cursor__label { opacity: 1; }
.cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cursor.is-down { transform: scale(.8); }

/* magnetic buttons */
.motion .btn { transition: background .2s, color .2s, border-color .2s, transform .15s, translate .4s var(--ease-out); }

/* ---------- reduced motion / editor ---------- */
/* Reduced motion = gentle mode: same intro and reveals, as fades only.
   No sliding, scaling, spinning, parallax or scroll-speed effects. */
@media (prefers-reduced-motion: reduce) {
  .grain body::after, .intro__grain { animation: none; }
  .intro__record { transform: none; animation: fadeIn 1.2s ease forwards; }
  .intro__word span { transform: none; opacity: 0; animation-name: fadeIn; }
  .intro__script { transform: rotate(-10deg); animation-name: fadeIn; }

  .js.motion:not(.design-mode) .hero .char { transform: none; opacity: 0; animation-name: fadeIn; }
  .js.motion:not(.design-mode) .hero-stamp { animation-name: fadeIn; }
  .js.motion:not(.design-mode) .hero-in,
  .js.motion:not(.design-mode) .hero-media-in { transform: none; animation-name: fadeIn; }

  .js.motion:not(.design-mode):not(.motion-fallback) [data-reveal]:not(.is-in) { transform: none; clip-path: none; }
  .js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="clip"]:not(.is-in),
  .js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="chars"]:not(.is-in) { opacity: 0; }
  .js.motion:not(.design-mode):not(.motion-fallback) [data-reveal="chars"]:not(.is-in) .char { transform: none; }
  .js.motion:not(.design-mode) [data-reveal] { transition: opacity .8s ease; transition-delay: calc(var(--i, 0) * 60ms); }
  .js.motion:not(.design-mode) [data-reveal="chars"] { transition: opacity 1s ease; }
  .motion .site-header { transition: none; }
}
.design-mode .intro, .design-mode .cursor { display: none !important; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }