/* ─────────────────────────────────────────────────────
   StudioCut — Shared Stylesheet
   Used by: JV page, Sales page, OTO pages, Bundle page
───────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Scroll-triggered animations */
.anim { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; }
.anim.visible { will-change: auto; }
.anim-up    { transform: translateY(24px); }
.anim-left  { transform: translateX(-30px); }
.anim-right { transform: translateX(30px); }
.anim-scale { transform: scale(0.92); }
.anim.visible { opacity: 1; transform: none; }

/* Infinite carousels */
@keyframes scrollFwd  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes scrollBack { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.carousel-fwd  { display: flex; animation: scrollFwd  40s linear infinite; will-change: transform; }
.carousel-back { display: flex; animation: scrollBack 40s linear infinite; will-change: transform; }

/* Misc animations */
@keyframes scalePulse { 0%,100% { transform: scale(1); }   50% { transform: scale(1.1); } }
@keyframes floatUpDown { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } }
@keyframes spinSlow   { to { transform: rotate(360deg); } }
@keyframes waveBeat   { 0%,100% { height: 8px; }  50% { height: 44px; } }
@keyframes slideBar   { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.scale-pulse { animation: scalePulse 2s ease-in-out infinite; will-change: transform; }
.float-anim  { animation: floatUpDown 4s ease-in-out infinite; will-change: transform; }
.float-anim-slow { animation: floatUpDown 6s ease-in-out infinite; will-change: transform; }
.float-anim-delay { animation: floatUpDown 4s ease-in-out infinite; animation-delay: 1.5s; will-change: transform; }
.spin-slow   { animation: spinSlow 10s linear infinite; border-style: dashed; will-change: transform; }
.wave-bar    { animation: waveBeat 1s ease-in-out infinite; will-change: transform; }
.wave-bar:nth-child(even) { animation-delay: 0.15s; animation-duration: 1.3s; }
.slide-bar   { animation: slideBar 1.5s ease-in-out infinite; will-change: transform; }

::selection { background-color: #dbeafe; }

/* ── Mobile optimizations ── */
@media (max-width: 767px) {
  /* Reduce animation distances on mobile */
  .anim-up    { transform: translateY(12px); }
  .anim-left  { transform: translateX(-16px); }
  .anim-right { transform: translateX(16px); }

  /* Disable float animations on mobile to save CPU */
  .float-anim, .float-anim-slow, .float-anim-delay { animation: none; }

  /* Prevent wide elements from causing horizontal scroll */
  section, div { max-width: 100%; }

  /* Better tap targets */
  a, button { min-height: 44px; }

  /* Reduce large rounded corners on mobile */
  .rounded-\[3rem\], .rounded-\[4rem\], .rounded-\[5rem\] { border-radius: 1.5rem !important; }
  .rounded-\[2\.5rem\] { border-radius: 1.25rem !important; }
}

/* ── Tablet (768px–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  h2 { font-size: clamp(1.75rem, 3.5vw, 3rem) !important; }
}

/* Font pair: Montserrat (headings) + Google Sans Flex (body) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

h2 {
  line-height: 1.25;
  font-size: clamp(1.6rem, 5vw, 3.75rem) !important;
  font-weight: 800 !important;
}

body {
  font-family: 'Google Sans Flex', sans-serif;
}

.tracking-tight {
  letter-spacing: -0.05em !important;
}