/* ═══════════════════════════════════════════════════════════
   DeepScreens — animations.css
   Animation-only additions. NOTE: this site has no css/style.css
   (all original styling is inline in the <x-dc> template), so
   there is nothing to override — and nothing here touches
   existing layout, typography, or colour rules.

   html.ds-anim is added by js/animations/index.js ONLY when the
   animation stack actually boots. Every rule that changes an
   existing behaviour is gated behind it, so if the CDN scripts
   fail to load the site renders exactly as it did before.
   ═══════════════════════════════════════════════════════════ */

/* ── Lenis smooth scroll ──────────────────────────────────── */
/* The template sets html { scroll-behavior: smooth } inline — it
   would fight Lenis, so it is neutralised only once JS boots.  */
html.ds-anim { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Entrance hand-off ────────────────────────────────────── */
/* The template's slideUp CSS entrance on #hero-content is replaced
   by the GSAP load timeline (hero.js). The pre-hide is applied as
   INLINE styles from js/animations/index.js — deliberately NOT a
   CSS rule here, so if the runtime remounts nodes or a module
   fails, elements fall back to visible instead of stuck-hidden. */
html.ds-anim #hero-content { animation: none !important; }

/* SplitText turns headline characters into inline-blocks, which introduces
   mid-word wrap points the plain text never had ("UNFORGETTABLE" is wider
   than #hero-content and is DESIGNED to overflow across the phone fan).
   nowrap restores the original <br>-only line breaks; overflow stays visible
   exactly as before. */
html.ds-anim #hero-headline { white-space: nowrap; }

/* ── Footer link backstop ─────────────────────────────────── */
/* The template carries ALL typography as inline styles and the body sets
   no font-family, so if the dc-runtime's post-load re-render drops an
   anchor's inline style (observed on the deployed host: "Privacy Policy"
   fell back to white Times), the link renders unstyled. These values are
   an exact copy of the template's own — invisible when inline styles are
   present, correct when they're lost. */
footer a { font: 400 11px/1 'DM Sans', sans-serif; color: #2a2a2a; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: #555; }

/* ── Custom Cursor ────────────────────────────────────────── */
/* .ds-cursor is added by cursor.js (desktop, fine pointer only) */
html.ds-cursor, html.ds-cursor * { cursor: none !important; }

#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  will-change: transform;
}
#cursor-dot {
  width: 6px; height: 6px;
  background: #ffffff;
}
#cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: transparent;
}
.cursor-trail {
  position: fixed;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 237, 232, 0.9), transparent);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
}

/* ── Card 3D (gallery cards = div[data-idx], per audit) ───── */
#gallery-grid [data-idx] {
  transform-style: preserve-3d;
  will-change: transform;
}
.card-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.13),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.2s;
}

/* ── Phone mockup 3D (hero phone <img>s, per audit) ───────── */
#hero-fan-wrap img {
  will-change: transform;
}

/* ── Social icon sizing — intentionally omitted ───────────────
   The audit found no assets/icons/*.svg files (all four flagged
   MISSING); the social links already carry inline <svg> icons,
   so no <img> icons were added and no icon sizing is needed.   */

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  #cursor-dot,
  #cursor-ring,
  .cursor-trail { display: none !important; }
}