/* landing/landing-tweaks.css — apply Tweak panel values via CSS hooks */

/* Pattern multiplier — every overlay reads --zb-pattern-mult */
:root { --zb-pattern-mult: 0.5; --zb-density: 1.25; --zb-radius-scale: 1; --zb-pattern-size: 100px; }

/* Density: scale section vertical padding (heuristic — affects all sections via inline padding using calc when possible).
   We apply a transform-free padding override using attr selector. */
:root[data-density] section { /* no-op anchor */ }

/* Radius scaling — multiply card-ish radii. Browsers don't support direct calc on var() multiplication everywhere reliably,
   so we override the radius tokens themselves. */
:root { 
  --zb-radius-md: calc(14px * var(--zb-radius-scale));
  --zb-radius-lg: calc(20px * var(--zb-radius-scale));
  --zb-radius-xl: calc(28px * var(--zb-radius-scale));
}

/* Accent override: when --zb-accent is set, swap gold variables */
:root[style*="--zb-accent"] {
  --zb-gold: var(--zb-accent, var(--zb-gold));
  --zb-gold-deep: var(--zb-accent-deep, var(--zb-gold-deep));
}

/* Ribbon flag: hide playful gold ribbons when off */
:root[data-ribbons="off"] [data-ribbon] { display: none !important; }

/* Rotation flag: zero out playful tilts when off */
:root[data-rotations="off"] [data-tilt] { transform: none !important; }

/* "Try the app" attention magnet — physics-shaped single-shot.
   Beat:  pause (1.2s) → anticipation lean → strike → damped settle (~1.4s) → quiet.
   A gold halo blooms at the strike moment, syncing light to motion.
   Hover after the animation ends gives a subtle lift so the phone still
   reads as interactive. .zb-attract-quiet kills everything if the user
   taps mid-animation. */

/* Easing — Linear/Vercel-style "expo-out": sharp start, gentle landing.
   Variables let us swap curves without hunting through the file. */
:root {
  --zb-ease-strike: cubic-bezier(.22, 1, .36, 1);
  --zb-ease-settle: cubic-bezier(.16, 1, .3, 1);
}

@keyframes zb-attract-wiggle {
  /* Anticipation: phone leans back like winding up */
  0%   { transform: translateY(0)    rotate(0deg);    }
  12%  { transform: translateY(0.5px) rotate(0.9deg); }
  /* Strike: crisp, off-center kick — biggest amplitude, slight lift */
  26%  { transform: translateY(-4px) rotate(-2.6deg); }
  /* Damped pendulum settle — each swing ~halves the previous */
  42%  { transform: translateY(-2px) rotate(1.5deg);  }
  58%  { transform: translateY(-1px) rotate(-0.8deg); }
  72%  { transform: translateY(0)    rotate(0.4deg);  }
  86%  { transform: translateY(0)    rotate(-0.1deg); }
  100% { transform: translateY(0)    rotate(0deg);    }
}

/* Halo blooms outward on impact — opacity AND ring size both fade. */
@keyframes zb-attract-halo {
  0%   { box-shadow: 0 0 0 0    rgba(232, 176, 74, 0.65); opacity: 0; }
  10%  { box-shadow: 0 0 0 4px  rgba(232, 176, 74, 0.55); opacity: 1; }
  60%  { box-shadow: 0 0 0 22px rgba(232, 176, 74, 0.16); opacity: 0.6; }
  100% { box-shadow: 0 0 0 34px rgba(232, 176, 74, 0);    opacity: 0; }
}

.zb-attract {
  animation: zb-attract-wiggle 1.4s var(--zb-ease-settle) 1.2s 1 both;
  transform-origin: center 75%;
  border-radius: 48px;
  transition: transform .4s var(--zb-ease-strike);
  will-change: transform;
}
.zb-attract::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 56px; pointer-events: none;
  /* Halo starts ~250ms into the wiggle, right at the strike peak */
  animation: zb-attract-halo 1.6s var(--zb-ease-strike) 1.45s 1 both;
}

/* Persistent micro-affordance — once the phone is at rest, hovering
   nudges it up 3px. The :hover transform overrides the keyframe's
   final state, so we get smooth handover from animation → interaction. */
.zb-attract:hover { transform: translateY(-3px); }

.zb-attract.zb-attract-quiet,
.zb-attract.zb-attract-quiet::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .zb-attract,
  .zb-attract::after { animation: none !important; transition: none !important; }
}