/* ════════════════════════════════════════════════════════════════════
   apple-perf.css — SPEED MODE.
   Client experience first. Animations are decorative — speed converts.
   ════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

/* ────────────────────────────────────────────────────────────────────
   1. RADICAL: ALL SECTIONS ALWAYS VISIBLE.
   No content-visibility (was causing pop-in). No reveal animations.
   Sections render fully on page load — like Apple/Stripe/Linear.
   ──────────────────────────────────────────────────────────────────── */
section, .section, .workflow-section, .sticky-story,
#home, #works, #services, #plans, #ai, #faq, #testimonials, #trustStrip {
  content-visibility: visible !important;
}

/* ────────────────────────────────────────────────────────────────────
   1B. KILL ALL REVEAL ANIMATIONS — sections appear INSTANTLY.
   User complaint: "sections appear in halves, dark gap before"
   Root cause: opacity:0 + transform + staggered delays + content-visibility
   Solution: force everything visible from start. Instant. Solid. Pro.
   ──────────────────────────────────────────────────────────────────── */
[data-reveal],
[data-reveal] [data-reveal-child],
[data-reveal].is-revealed,
[data-reveal].is-revealed [data-reveal-child],
.tm-reveal,
.tm-reveal.in-view,
.tm-reveal-left, .tm-reveal-right, .tm-reveal-scale, .tm-reveal-rotate,
.tm-word-reveal,
.tm-word-reveal .word,
[data-words] .word,
/* Legacy `.reveal` class used by .pipe-step in the workflow section.
   Was opacity:0 by default; never had .show added → circles invisible. */
.reveal, .reveal-left, .reveal-right, .reveal-scale,
.reveal.show, .reveal-left.show, .reveal-right.show, .reveal-scale.show {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  visibility: visible !important;
}

/* No staggered child delays */
[data-reveal] [data-reveal-child] {
  transition-delay: 0s !important;
}
.tm-reveal[data-delay="1"].in-view,
.tm-reveal[data-delay="2"].in-view,
.tm-reveal[data-delay="3"].in-view,
.tm-reveal[data-delay="4"].in-view,
.tm-reveal[data-delay="5"].in-view {
  transition-delay: 0s !important;
}

/* ────────────────────────────────────────────────────────────────────
   2. KILL DECORATIVE EFFECTS PERMANENTLY (not just on scroll).
   These are pure polish — desktop GPU can take it; mobile cannot.
   ──────────────────────────────────────────────────────────────────── */
.cine-particle,
.cine-hero-streak,
.hv3-beam,
.hv3-fog-layer,
.cine-port-sweep,
.tm-anim-cover-frame,
.tm-floating[data-parallax],
.ai-orb {
  display: none !important;
}

/* Background orbs / glow: keep but stop their drift animation.
   They give depth without costing scroll perf. */
.bg-orb,
.cine-hero-glow,
.hv3-float-label {
  animation: none !important;
  will-change: auto !important;
}

/* Trust strip marquee: pause on hover only, keep slow on idle.
   This one is light (single transform). */
.trust-strip-track { animation-duration: 50s !important; }

/* ────────────────────────────────────────────────────────────────────
   FORCE workflow circles + dot animations (override any global pause).
   ──────────────────────────────────────────────────────────────────── */
.pipe-node-ring {
  animation: ringRotate 12s linear infinite !important;
  animation-play-state: running !important;
}
.pipe-dot {
  animation: pipeDotTravel 2.4s ease-in-out infinite !important;
  animation-play-state: running !important;
}
[dir="rtl"] .pipe-dot {
  animation: pipeDotTravelRTL 2.4s ease-in-out infinite !important;
}
@media (max-width: 900px) {
  .pipe-dot {
    animation: pipeDotTravelV 2s ease-in-out infinite !important;
  }
}

/* ────────────────────────────────────────────────────────────────────
   3. SCROLL-TIME — kill expensive paint while user is scrolling.
   ──────────────────────────────────────────────────────────────────── */
body.is-scrolling .nav,
body.is-scrolling .cine-hero-nav,
body.is-scrolling .cine-hero-down,
body.is-scrolling .cine-modal-nav,
body.is-scrolling .cine-modal-counter,
body.is-scrolling .cine-modal,
body.is-scrolling .pf-opt-pill,
body.is-scrolling .pf-opt-overlay,
body.is-scrolling .user-chip-dropdown,
body.is-scrolling .footer-glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Big radial / blurred backgrounds → fade during scroll */
body.is-scrolling .bg-orb,
body.is-scrolling .cine-hero-glow {
  opacity: 0.2 !important;
  filter: blur(20px) !important;
}

/* Pause only the animated decorative elements during scroll.
   The universal "*" selector was forcing every element through the
   property cascade — expensive on long pages. */
body.is-scrolling .cine-particle,
body.is-scrolling .cine-hero-streak,
body.is-scrolling .cine-hero-glow,
body.is-scrolling .bg-orb,
body.is-scrolling .hv3-fog-layer,
body.is-scrolling .hv3-beam,
body.is-scrolling .trust-strip-track,
body.is-scrolling .cine-hero-down-icon,
body.is-scrolling .cine-port-sweep,
body.is-scrolling .pf-opt-pill-spin,
body.is-scrolling .tm-anim-cover-frame,
body.is-scrolling .hv3-float-label,
body.is-scrolling .ai-orb {
  animation-play-state: paused !important;
}

/* ────────────────────────────────────────────────────────────────────
   4. iOS / Safari VIDEO COMPAT
   ──────────────────────────────────────────────────────────────────── */
video.cine-card-cover-video,
video.reel-preview-video,
video.cine-modal-video {
  -webkit-playsinline: true;
  playsinline: true;
}
.cine-card, .reel-card, .design-card { touch-action: manipulation; }

/* ────────────────────────────────────────────────────────────────────
   5. NAV — theme/lang moved to user dropdown
   ──────────────────────────────────────────────────────────────────── */
#homeThemeBtn, #homeLangBtn { display: none !important; }

/* ────────────────────────────────────────────────────────────────────
   6. MOBILE NAV — tight + no overflow
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav { padding-inline: 12px !important; gap: 6px !important; }
  .nav-logo { font-size: 16px !important; letter-spacing: 0.5px; }
  .nav-links { display: none !important; }
  .nav-cta, .btn-login { padding: 8px 14px !important; font-size: 13px !important; }
  .user-chip-btn { padding: 4px 8px 4px 4px !important; }
  .user-chip-btn img { width: 28px !important; height: 28px !important; }
}
@media (max-width: 480px) {
  #guestStart { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────────
   7. HERO ON MOBILE — full viewport
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #heroFrameCanvas, .cine-hero-video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
  .cine-hero, .cine-hero-stage { min-height: 100svh !important; }
  .cine-scene-content { padding: 24px !important; max-width: 100% !important; }
  .cine-hero-title { font-size: clamp(28px, 8vw, 44px) !important; }
  .cine-hero-subtitle, .cine-hero-desc { font-size: 14px !important; }
  .cine-hero-ctas { flex-direction: column !important; gap: 10px !important; width: 100%; }
  .cine-hero-ctas > * { width: 100% !important; justify-content: center; }
}

/* ────────────────────────────────────────────────────────────────────
   8. SIDEBAR — cleaner
   ──────────────────────────────────────────────────────────────────── */
.mobile-menu, .mobile-drawer, .mobile-sidebar {
  padding: 28px 20px !important;
}
.mobile-menu a, .mobile-drawer a, .mobile-sidebar a, .mobile-user-link {
  padding: 14px 16px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.mobile-menu a:hover, .mobile-drawer a:hover, .mobile-sidebar a:hover {
  background: rgba(99, 102, 241, 0.10) !important;
}
.mobile-menu hr, .mobile-drawer hr {
  margin: 16px 0 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ────────────────────────────────────────────────────────────────────
   9. ROCKET MODE — kill heavy 3D transforms on portfolio cards.
   The gallery had perspective + rotateY/rotateX driven by mouse,
   creating a GPU layer per card. On weak devices, scrolling a grid
   of layered cards stutters badly. Replace with simple lift on hover.
   ──────────────────────────────────────────────────────────────────── */
.cine-port-gallery,
.cine-port-stage {
  transform: none !important;
  perspective: none !important;
}
.cine-card {
  transform: none !important;
  transform-style: flat !important;
}
.cine-card:hover {
  transform: translateY(-4px) !important;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out !important;
}

/* Disable hover transform entirely on touch devices (no hover anyway,
   but iOS Safari triggers :hover on tap and leaves the card translated). */
@media (hover: none) {
  .cine-card:hover {
    transform: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────────
   10. REDUCED MOTION
   ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}