/* ==========================================================================
   amgb-anim.css
   Shared animation stylesheet for all 10 Phase 1 pages.
   Source: handover-claude-design/09-animation-and-readability-rules.md
   --------------------------------------------------------------------------
   Five animation primitives, every one with prefers-reduced-motion fallback.
   No infinite loops. No autoplay. No carousel.

   Usage in HTML:
     <h2 data-amgb-anim="rise">Heading</h2>
     <p data-amgb-anim="fade-in">Body</p>
     <ul data-amgb-anim="stagger">
       <li data-amgb-anim-child>Item 1</li>
       <li data-amgb-anim-child>Item 2</li>
     </ul>
     <figure data-amgb-anim="hero-photo-fade">...</figure>
     <span data-amgb-anim="gold-shimmer" aria-hidden="true"></span>

   amgb-anim.js adds the .amgb-anim-in-view class via IntersectionObserver,
   sets stagger transition-delays per child, and skips the observer entirely
   when prefers-reduced-motion is set.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rise: opacity 0 to 1 plus translateY 12px to 0, 500ms ease-out-quart.
   For section headlines, callout blocks, card grids.
   -------------------------------------------------------------------------- */
[data-amgb-anim="rise"] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-amgb-anim="rise"].amgb-anim-in-view {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* --------------------------------------------------------------------------
   Fade-in: opacity 0 to 1, 400ms ease-out.
   For supporting copy, icons, secondary content.
   -------------------------------------------------------------------------- */
[data-amgb-anim="fade-in"] {
  opacity: 0;
  transition: opacity 400ms ease-out;
}
[data-amgb-anim="fade-in"].amgb-anim-in-view {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Hero photo fade: opacity 0.92 to 1, 600ms ease-out.
   Runs on page load (no observer; transition triggers via .amgb-anim-loaded
   class added by amgb-anim.js on DOMContentLoaded).
   -------------------------------------------------------------------------- */
[data-amgb-anim="hero-photo-fade"] {
  opacity: 0.92;
  transition: opacity 600ms ease-out;
}
[data-amgb-anim="hero-photo-fade"].amgb-anim-loaded {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Gold shimmer: a single 1200ms gradient pass across a gold accent strip.
   One-shot only. No loop. The element itself is the strip; the shimmer is
   a pseudo-element overlay with pointer-events: none.
   -------------------------------------------------------------------------- */
[data-amgb-anim="gold-shimmer"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--amgb-gold) 0%, var(--amgb-gold-warm) 50%, var(--amgb-gold-deep) 100%);
}
[data-amgb-anim="gold-shimmer"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-110%);
  pointer-events: none; /* Rule 7, clicks pass through */
}
[data-amgb-anim="gold-shimmer"].amgb-anim-in-view::after {
  animation: amgb-shimmer-pass 1200ms ease-in-out 1 forwards;
}
@keyframes amgb-shimmer-pass {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}

/* --------------------------------------------------------------------------
   Stagger: children with [data-amgb-anim-child] enter in sequence with an
   80ms offset, each child running the rise animation.
   amgb-anim.js sets transition-delay on each child via inline style.
   -------------------------------------------------------------------------- */
[data-amgb-anim="stagger"] > [data-amgb-anim-child] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-amgb-anim="stagger"].amgb-anim-in-view > [data-amgb-anim-child] {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Icon draw-in: SVG stroke paths draw themselves on, one-shot, 700ms.
   Apply to outline icons. The script reads each <path>/<line>/<circle>'s
   length and sets dasharray + dashoffset so the line "writes" into view.
   Premium and quiet, no bounce, no scale.
   -------------------------------------------------------------------------- */
[data-amgb-anim="icon-draw"] {
  opacity: 0;
  transition: opacity 350ms ease-out;
}
[data-amgb-anim="icon-draw"] svg [stroke],
[data-amgb-anim="icon-draw"] [stroke] {
  stroke-dasharray: var(--amgb-icon-len, 200);
  stroke-dashoffset: var(--amgb-icon-len, 200);
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-amgb-anim="icon-draw"].amgb-anim-in-view {
  opacity: 1;
}
[data-amgb-anim="icon-draw"].amgb-anim-in-view svg [stroke],
[data-amgb-anim="icon-draw"].amgb-anim-in-view [stroke] {
  stroke-dashoffset: 0;
}

/* --------------------------------------------------------------------------
   Count-up: number animates from 0 to the value in data-amgb-count-to over
   1200ms. One-shot on view. Plain text node swap, no layout shift.
   Apply: <span data-amgb-anim="count-up" data-amgb-count-to="640"
                data-amgb-count-prefix="$">$640</span>
   -------------------------------------------------------------------------- */
[data-amgb-anim="count-up"] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Premium card hover: gentle gold halo on hover. Applied via class so
   pages can opt-in without changing existing :hover behaviour.
   -------------------------------------------------------------------------- */
.amgb-hover-gleam {
  position: relative;
  isolation: isolate;
}
.amgb-hover-gleam::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    140px circle at var(--amgb-gleam-x, 50%) var(--amgb-gleam-y, 50%),
    rgba(214, 154, 43, 0.14),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 260ms ease-out;
  pointer-events: none;
  z-index: -1;
}
.amgb-hover-gleam:hover::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Sheen: a single diagonal shine pass across a card or photo when it
   enters view. Premium, ONE-SHOT, ~900ms.
   --------------------------------------------------------------------------
   Refined for premium feel: honeyed gold-tint instead of pure white, so the
   sheen reads as "lamplight catching gold" not "shopfront billboard shine".
   -------------------------------------------------------------------------- */
[data-amgb-anim="sheen"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
[data-amgb-anim="sheen"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255, 248, 230, 0) 0%,
    rgba(255, 248, 230, 0) 38%,
    rgba(255, 243, 210, 0.22) 50%,
    rgba(255, 248, 230, 0) 62%,
    rgba(255, 248, 230, 0) 100%
  );
  transform: translateX(-110%);
  pointer-events: none;
  z-index: 1;
}
[data-amgb-anim="sheen"].amgb-anim-in-view::after {
  animation: amgb-sheen-pass 1100ms cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
@keyframes amgb-sheen-pass {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}

/* --------------------------------------------------------------------------
   Reduced-motion fallback (Rule 5, mandatory).
   Suppresses translate, scale, shimmer. Opacity-only transitions are kept
   at 200ms (no jarring instant pop).
   -------------------------------------------------------------------------- */@media (prefers-reduced-motion: reduce) {
  [data-amgb-anim="rise"],
  [data-amgb-anim="fade-in"],
  [data-amgb-anim="hero-photo-fade"],
  [data-amgb-anim="stagger"] > [data-amgb-anim-child] {
    transform: none !important;
    transition: opacity 200ms ease !important;
    animation: none !important;
  }
  [data-amgb-anim="gold-shimmer"]::after,
  [data-amgb-anim="sheen"]::after {
    display: none !important;
    animation: none !important;
  }
  [data-amgb-anim="icon-draw"] svg [stroke],
  [data-amgb-anim="icon-draw"] [stroke] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .amgb-hover-gleam::before { display: none !important; }

  /* Tier 1 additions, reduced-motion */
  [data-amgb-anim="rule-slide"]::after { width: 100% !important; transition: none !important; }
  [data-amgb-anim="halo-flash"]::after { display: none !important; animation: none !important; }
  [data-amgb-anim="trust-strip"] { transform: none !important; transition: opacity 200ms ease !important; }
  [data-amgb-anim="step-ring"]::before { display: none !important; animation: none !important; }
  [data-amgb-anim="process-line"] path { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   TIER 1 ANIMATIONS
   -------------------------------------------------------------------------- */

/* Rule slide: gold underline expands left-to-right on hover.
   Apply to a card or tile. The ::after pseudo is the rule itself. */
[data-amgb-anim="rule-slide"] {
  position: relative;
}
[data-amgb-anim="rule-slide"]::after {
  content: "";
  position: absolute;
  left: var(--amgb-space-5, 24px);
  right: var(--amgb-space-5, 24px);
  bottom: var(--amgb-space-5, 24px);
  height: 2px;
  background: var(--amgb-gold);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
[data-amgb-anim="rule-slide"]:hover::after,
[data-amgb-anim="rule-slide"]:focus-visible::after {
  transform: scaleX(1);
}

/* Halo flash: a soft gold radial behind the element pulses once when the
   parent enters view. The pulse is opacity-only, no scale on parent.
   Refined: lower max opacity (cheap → premium), gentler timing. */
[data-amgb-anim="halo-flash"] {
  position: relative;
  isolation: isolate;
}
[data-amgb-anim="halo-flash"]::after {
  content: "";
  position: absolute;
  inset: -6px -14px;
  border-radius: var(--amgb-radius-md, 8px);
  background: radial-gradient(closest-side, rgba(214, 154, 43, 0.18), transparent 78%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
[data-amgb-anim="halo-flash"].amgb-anim-in-view::after {
  animation: amgb-halo-flash 900ms ease-out 280ms 1 forwards;
}
@keyframes amgb-halo-flash {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Trust strip: closing-CTA reassurance line. Tilts up 6px + fades. */
[data-amgb-anim="trust-strip"] {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 350ms ease-out 100ms,
    transform 350ms ease-out 100ms;
}
[data-amgb-anim="trust-strip"].amgb-anim-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Step ring: when a numbered step circle enters view, a 1px gold ring
   expands outward from the circle and dissipates once. */
[data-amgb-anim="step-ring"] {
  position: relative;
  isolation: isolate;
}
[data-amgb-anim="step-ring"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--amgb-gold);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
[data-amgb-anim="step-ring"].amgb-anim-in-view::before {
  animation: amgb-step-ring 900ms ease-out 1 forwards;
}
@keyframes amgb-step-ring {
  0%   { transform: scale(1);    opacity: 0;   }
  20%  { transform: scale(1.02); opacity: 0.9; }
  100% { transform: scale(1.9);  opacity: 0;   }
}

/* Process line: a single SVG path between the three step cards on
   /how-it-works/. Draws once on view. Desktop only. */
[data-amgb-anim="process-line"] path {
  stroke-dasharray: var(--amgb-line-len, 1000);
  stroke-dashoffset: var(--amgb-line-len, 1000);
  transition: stroke-dashoffset 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-amgb-anim="process-line"].amgb-anim-in-view path {
  stroke-dashoffset: 0;
}
@media (max-width: 767px) {
  [data-amgb-anim="process-line"] { display: none !important; }
}
  [data-amgb-anim].amgb-anim-in-view,
  [data-amgb-anim].amgb-anim-loaded,
  [data-amgb-anim="stagger"].amgb-anim-in-view > [data-amgb-anim-child] {
    opacity: 1 !important;
    transform: none !important;
  }
}