/* ─────────────────────────────────────────────────────
   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; }
html { overflow-x: clip; } /* clip instead of hidden — avoids scroll-container side effects on iOS Safari that interact badly with sticky header */

/* Scroll-triggered animations */
.anim { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.anim.visible { opacity: 1; transform: none; }
.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; }

/* NOTE: content-visibility: auto removed — it caused Web Process crashes on iOS Safari
   (iPhone 12 reloading 2-3 times then "problem repeatedly occurred"). */

/* ── Mobile optimizations ── */
@media (max-width: 767px) {
  /* Kill ALL scroll-reveal animations — no IntersectionObserver overhead on mobile */
  .anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .anim-up, .anim-left, .anim-right, .anim-scale { transform: none !important; }

  /* Hide and disable ALL animated decoration elements */
  .float-anim, .float-anim-slow, .float-anim-delay { animation: none; display: none !important; }
  .blur-orb { display: none !important; }
  .scale-pulse, .wave-bar, .slide-bar, .spin-slow { animation: none !important; }
  .carousel-fwd, .carousel-back { animation-duration: 80s !important; }

  /* Kill ALL Tailwind animate-* classes (animate-bounce, animate-pulse, etc.) */
  [class*="animate-"] { animation: none !important; }

  /* Kill ALL backdrop-blur — biggest iOS Safari memory crash cause */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
  }

  /* Disable ALL CSS transitions on mobile — each one is a compositor layer candidate */
  *, *::before, *::after { transition: none !important; }
  /* Restore only the scroll-reveal fade-in */
  .anim { transition: opacity 0.5s ease, transform 0.5s ease !important; }

  /* Solid header bg — transparent bg-white/90 forces compositing on every scroll */
  header { background: #ffffff !important; }

  /* Remove heavy box shadows — each shadow-2xl is a composited layer */
  .shadow-2xl, .shadow-xl { box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }

  /* Hide heavy blur glow orbs */
  .blur-orb { display: none !important; }

  /* Affiliate section — reduce padding so cards don't overflow on small screens */
  .aff-wrap { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .aff-wrap p { font-size: 1rem !important; }
  .aff-card { padding: 1.25rem !important; }
  .aff-card > .flex { gap: 0.75rem !important; align-items: flex-start !important; }
  .aff-card a[class], .aff-card button[class] { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; padding-left: 1rem !important; padding-right: 1rem !important; white-space: nowrap !important; }
  .aff-card .flex-col { gap: 0.5rem !important; }
  .aff-card h3 { font-size: 1rem !important; }

  /* 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; }

  /* Nuke multi-layer/gradient section backgrounds — each stacked gradient allocates a
     full-section compositor texture on iOS Safari. Section IDs targeted are ones with
     complex inline gradient backgrounds (multiple linear + radial stacked).
     Replace with lightweight single-color fills. */
  #Funnel { background: #f3e8ff !important; background-image: none !important; }
  #Section10, #Section11, #Section12, #Section13 { background-image: none !important; }
  section[style*="linear-gradient"] { background-image: none !important; }
  section[style*="radial-gradient"] { background-image: none !important; }

  /* Solid neutral bg for previously gradient sections */
  section:not(#Funnel):not(header):not(footer) { background-color: #ffffff; }

  /* Dark/white-text sections must NOT fall back to white — that makes their
     white text invisible. Force a solid dark fill instead so text stays legible. */
  section.dark-section-mb { background: #0f172a !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;
}