/* Coquette Jewelry Co. — base + motion layer (things the builder stylesheet cannot express) */

html { -webkit-text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-stopped { overflow: hidden; }

body.cjc {
  background: var(--cjc-ivory, #F8F4F1);
  color: var(--cjc-ink, #221C1E);
  font-family: var(--cjc-font-sans, 'Jost', sans-serif);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.cjc img { max-width: 100%; height: auto; }
body.cjc :focus-visible { outline: 2px solid var(--cjc-ink, #221C1E); outline-offset: 3px; border-radius: 4px; }
body.cjc ::selection { background: var(--cjc-blush, #EAD7DB); color: var(--cjc-ink, #221C1E); }

/* film grain: fixed, pointer-events none, GPU cheap */
body.cjc::after {
  content: "";
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

/* skip link */
.cjc-skip { position: absolute; left: 16px; top: -80px; z-index: 1000; background: var(--cjc-ink); color: var(--cjc-ivory); padding: 10px 16px; border-radius: 999px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.cjc-skip:focus { top: 16px; }

/* ---------- reveal primitives (JS adds .is-in) ---------- */
.cjc-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.cjc-reveal.is-in { opacity: 1; transform: none; }
.cjc-reveal[data-delay="1"] { transition-delay: 90ms; }
.cjc-reveal[data-delay="2"] { transition-delay: 180ms; }
.cjc-reveal[data-delay="3"] { transition-delay: 270ms; }
.cjc-reveal[data-delay="4"] { transition-delay: 360ms; }

/* masked line reveal for the hero headline */
.cjc-lines .cjc-line { display: block; overflow: hidden; }
.cjc-lines .cjc-line > span { display: block; transform: translate3d(0, 110%, 0); }
.cjc-hero-ready .cjc-lines .cjc-line > span { transform: none; }
.no-js .cjc-lines .cjc-line > span { transform: none; }

/* hero intro pre-state (GSAP animates to final). Only applied when JS + motion allowed. */
html.cjc-motion .cjc-intro { opacity: 0; transform: translate3d(0, 24px, 0); }
html.cjc-motion .cjc-intro-img { opacity: 0; transform: translate3d(0, 40px, 0) rotate(-4deg); }

/* magnetic buttons */
.cjc-magnet { transition: transform 400ms cubic-bezier(.22,1,.36,1); }

/* marquee */
.cjc-marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cjc-marquee__track { display: inline-flex; gap: 48px; padding-right: 48px; animation: cjc-marquee 38s linear infinite; will-change: transform; }
@keyframes cjc-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* cursor quick-add label (desktop, pointer:fine only) */
.cjc-cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; transform: translate3d(-50%, -50%, 0) scale(0); opacity: 0; width: 84px; height: 84px; border-radius: 999px; background: var(--cjc-ink); color: var(--cjc-ivory); font: 500 10px/1.2 var(--cjc-font-sans); letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; text-align: center; transition: opacity 250ms, transform 350ms cubic-bezier(.22,1,.36,1); mix-blend-mode: normal; }
.cjc-cursor.is-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }

/* bag bounce */
@keyframes cjc-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.cjc-pop { animation: cjc-pop 500ms cubic-bezier(.32,.72,0,1); }

/* sticky PDP buy bar */
.cjc-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; transform: translate3d(0, 110%, 0); transition: transform 380ms cubic-bezier(.22,1,.36,1); padding-bottom: env(safe-area-inset-bottom, 0px); }
.cjc-buybar.is-on { transform: none; }

/* mobile: cheaper reveals, no parallax */
@media (max-width: 1023px) {
  .cjc-reveal { transform: translate3d(0, 16px, 0); transition-duration: 600ms; }
  .cjc-parallax { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cjc-reveal, .cjc-intro, .cjc-intro-img, .cjc-lines .cjc-line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cjc-marquee__track { animation: none; }
  .cjc-buybar { transition: none; }
  html.cjc-motion .cjc-intro, html.cjc-motion .cjc-intro-img { opacity: 1; transform: none; }
}