/* ============================================================
   TargetSaver — Animation layer
   Smooth, organic, equilibrium-tuned
   ============================================================ */

/* Apple-inspired easing */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ============================================================
   UPGRADED REVEAL — scale + blur + staggerable
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  filter: blur(8px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo),
    filter 0.9s var(--ease-out-expo);
  will-change: opacity, transform, filter;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Skip blur on sections with heavy content or fixed layouts */
.hero-phone.reveal,
.feature-phone,
.calc-chart,
.qc-tips .reveal {
  filter: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ============================================================
   WORD REVEAL — for story paragraphs
   ============================================================ */
.word-reveal {
  margin: 0;
}
.wr-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.75;
}
.wr-inner {
  display: inline-block;
  transform: translateY(110%) rotate(3deg);
  opacity: 0;
  transition:
    transform 0.9s var(--ease-out-expo),
    opacity 0.9s var(--ease-out-expo);
  will-change: transform, opacity;
}
.word-reveal.in .wr-inner {
  transform: translateY(0) rotate(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wr-inner { transform: none; opacity: 1; transition: none; }
}

/* ============================================================
   NATIVE CURSORS (custom MagneticCursor removed — Safari perf)
   ============================================================ */
a, button, [role="button"], .btn, [data-magnetic] { cursor: pointer; }
input, textarea, select { cursor: text; }
input[type="range"] { cursor: grab; }

/* ============================================================
   LOADING CINEMATIC
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 0.7s var(--ease-out-expo);
  color: var(--primary);
}
[data-theme="light"] .loader { color: var(--primary-2); }
.loader.fading { opacity: 0; pointer-events: none; }

.loader-logo {
  position: relative;
}
.loader-svg {
  overflow: visible;
}
.loader-ring {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transform-origin: 60px 60px;
  opacity: 0;
  transition:
    stroke-dashoffset 1.4s var(--ease-out-expo),
    opacity 0.5s ease,
    transform 1.4s var(--ease-out-expo);
}
.loader-ring.r1 {
  stroke-dasharray: 315;
  stroke-dashoffset: 315;
}
.loader-ring.r2 {
  stroke-dasharray: 189;
  stroke-dashoffset: 189;
  transform: rotate(-20deg);
}
.loader.active .loader-ring.r1 {
  stroke-dashoffset: 0;
  opacity: 1;
  transition-delay: 0.2s;
}
.loader.active .loader-ring.r2 {
  stroke-dashoffset: 0;
  opacity: 1;
  transform: rotate(0);
  transition-delay: 0.5s;
}
.loader-dot {
  opacity: 0;
  transform: scale(0);
  transform-origin: 60px 60px;
  transform-box: fill-box;
  transition:
    opacity 0.5s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}
.loader.active .loader-dot {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.9s;
}

.loader-text {
  font-size: 16px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg-muted);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.6s var(--ease-out-expo) 1.2s,
    transform 0.6s var(--ease-out-expo) 1.2s;
}
.loader.active .loader-text {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HERO CINEMATIC INTRO — once past the loader
   ============================================================ */
@keyframes hero-in-fade {
  from { opacity: 0; transform: translateY(24px) scale(0.98); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes phone-in {
  from { opacity: 0; transform: translateY(60px) scale(0.9) rotate(-3deg); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
}
@keyframes chip-in {
  from { opacity: 0; transform: translateY(12px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.boot-in .hero-badge { animation: hero-in-fade 0.9s var(--ease-out-expo) both; animation-delay: 0.1s; }
body.boot-in .hero-title .l1 { animation: hero-in-fade 1s var(--ease-out-expo) both; animation-delay: 0.25s; }
body.boot-in .hero-title .l2 { animation: hero-in-fade 1s var(--ease-out-expo) both; animation-delay: 0.4s; }
body.boot-in .hero-sub { animation: hero-in-fade 0.9s var(--ease-out-expo) both; animation-delay: 0.55s; }
body.boot-in .hero-ctas { animation: hero-in-fade 0.9s var(--ease-out-expo) both; animation-delay: 0.7s; }
body.boot-in .hero-metric { animation: hero-in-fade 0.9s var(--ease-out-expo) both; animation-delay: 0.85s; }
body.boot-in .hero-phone { animation: phone-in 1.3s var(--ease-out-expo) both; animation-delay: 0.35s; }
body.boot-in .chip-a { animation: chip-in 0.7s var(--ease-out-expo) both; animation-delay: 1.3s; }
body.boot-in .chip-b { animation: chip-in 0.7s var(--ease-out-expo) both; animation-delay: 1.5s; }
body.boot-in .nav { animation: hero-in-fade 0.8s var(--ease-out-expo) both; animation-delay: 0.05s; }

/* when first-render reveals haven't kicked in yet, keep copy stable */
body.boot-in .hero .reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ============================================================
   QUIZ MORPH — result card transitions smoothly
   ============================================================ */
.quiz-result { transition: all 0.4s var(--ease-out-expo); }

.quiz-empty {
  animation: fade-scale 0.4s var(--ease-out-expo);
}
@keyframes fade-scale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Override the default quiz-in so we can morph between results */
.quiz-card {
  animation: quiz-morph 0.55s var(--ease-out-expo) !important;
}
@keyframes quiz-morph {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* The tip rows stagger in */
.qc-tip {
  animation: tip-slide 0.5s var(--ease-out-expo) both;
}
.qc-tip:nth-child(1) { animation-delay: 0.18s; }
.qc-tip:nth-child(2) { animation-delay: 0.26s; }
.qc-tip:nth-child(3) { animation-delay: 0.34s; }
@keyframes tip-slide {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Active quiz option — inner label lift */
.quiz-opt-l {
  transition: transform 0.35s var(--ease-out-expo);
}
.quiz-opt.active .quiz-opt-l {
  transform: translateX(2px);
}

/* ============================================================
   Enhanced hover on buttons/cards
   ============================================================ */
.btn,
.quiz-opt,
.faq-q,
.problem-card,
.promise-card,
.pillar-card,
.priv-col {
  transition-timing-function: var(--ease-out-expo) !important;
}

/* Magnetic button — subtle scale on hover with smooth easing */
[data-magnetic] {
  transition:
    transform 0.5s var(--ease-out-expo),
    box-shadow 0.5s var(--ease-out-expo),
    background 0.3s ease,
    border-color 0.3s ease !important;
}
[data-magnetic]:hover {
  transform: translateY(-2px);
}

/* ============================================================
   Smooth scroll
   ============================================================ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}