/* =====================================================
   hero-polish.css — Hero Reinvention (A3)
   Additive on top of existing .home-hero styles.
   ===================================================== */
@layer components {

  /* ─────────────────────────────────────────────
     Cinematic load choreography — 7 steps
     ───────────────────────────────────────────── */
  [data-animate-step] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--motion-medium) var(--ease-emphasized),
      transform var(--motion-medium) var(--ease-emphasized);
    will-change: opacity, transform;
  }
  [data-animate-step].is-visible,
  .hero-loaded [data-animate-step] {
    opacity: 1;
    transform: translateY(0);
  }
  .hero-loaded [data-animate-step="1"] { transition-delay: 80ms; }
  .hero-loaded [data-animate-step="2"] { transition-delay: 180ms; }
  .hero-loaded [data-animate-step="3"] { transition-delay: 320ms; }
  .hero-loaded [data-animate-step="4"] { transition-delay: 440ms; }
  .hero-loaded [data-animate-step="5"] { transition-delay: 540ms; }
  .hero-loaded [data-animate-step="6"] { transition-delay: 640ms; }
  .hero-loaded [data-animate-step="7"] { transition-delay: 200ms; }

  @media (prefers-reduced-motion: reduce) {
    [data-animate-step] { opacity: 1; transform: none; transition: none; }
  }

  /* ─────────────────────────────────────────────
     Eyebrow — small uppercase tag above title
     ───────────────────────────────────────────── */
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
    padding: 0.4rem 0.9rem;
    background: rgba(201, 168, 76, 0.10);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: var(--radius-full);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* ─────────────────────────────────────────────
     Rating badge — surfaces social proof above fold
     ───────────────────────────────────────────── */
  .hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-block: 1rem 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    color: var(--white);
    font-size: var(--text-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .hero-rating-stars {
    color: var(--gold-400);
    letter-spacing: 0.05em;
    font-size: var(--text-base);
    line-height: 1;
  }
  .hero-rating strong {
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .hero-rating-count {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-xs);
  }

  /* ─────────────────────────────────────────────
     Trust strip — 3 quick reassurance signals
     ───────────────────────────────────────────── */
  .hero-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .hero-trust-strip .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    font-weight: var(--fw-medium);
  }
  .hero-trust-strip .trust-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  }

  /* ─────────────────────────────────────────────
     CTA shimmer — 1-time premium signal on primary
     ───────────────────────────────────────────── */
  .btn-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(255, 255, 255, 0.25) 50%,
      transparent 70%
    );
    transform: translateX(-100%);
    pointer-events: none;
    animation: heroShimmer 4s ease-in-out 2.2s 1;
  }
  @keyframes heroShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-shimmer { animation: none; }
  }

  /* Make primary CTA the visual anchor on first paint */
  .hero-buttons .btn-primary-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
    color: var(--navy-900);
    font-weight: var(--fw-bold);
    box-shadow: var(--shadow-lg);
    transition:
      transform var(--motion) var(--ease-spring),
      box-shadow var(--motion) var(--ease-out),
      filter var(--motion-fast) var(--ease-out);
  }
  .hero-buttons .btn-primary-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl), var(--shadow-gold-glow);
    filter: brightness(1.05);
  }
  .hero-buttons .btn-primary-cta:active { transform: translateY(0); }

  /* ─────────────────────────────────────────────
     Hero visual decoration — soft gold radial
     behind portrait. Pure CSS, no extra DOM.
     ───────────────────────────────────────────── */
  .hero-image-wrap {
    position: relative;
  }
  .hero-image-wrap::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: radial-gradient(
      circle at 50% 45%,
      rgba(201, 168, 76, 0.22) 0%,
      rgba(201, 168, 76, 0.08) 30%,
      transparent 65%
    );
    z-index: -1;
    pointer-events: none;
    animation: heroGlow 6s ease-in-out infinite alternate;
  }
  @keyframes heroGlow {
    from { opacity: 0.8; transform: scale(1); }
    to   { opacity: 1.0; transform: scale(1.05); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-image-wrap::before { animation: none; }
  }
}