/* ==========================================================================
   AMPLIFIED SMOOTHNESS — portable silky-motion system
   Namespaced under .am-* so it drops into any project without collisions.
   Copy this file in once, then add the classes/data-attrs documented in SKILL.md.
   Pair with amplified-smoothness.js for scroll-trigger, counters, parallax, magnetic.
   ========================================================================== */

:root{
  /* --- Brand accents (override these to re-theme every effect) --- */
  --am-accent:        #00aeef;             /* primary glow / line draw */
  --am-accent-2:      #ff6f00;             /* secondary glow / dots */
  --am-glow:          rgba(0,174,239,.22);
  --am-glow-soft:     rgba(0,174,239,.12);
  --am-glow-strong:   rgba(0,174,239,.28);
  --am-accent-2-soft: rgba(255,111,0,.5);
  --am-shadow:        0 24px 60px rgba(0,0,0,.42);

  /* --- Motion tokens --- */
  --am-ease-silk:   cubic-bezier(0.25, 1, 0.5, 1);   /* general settle */
  --am-ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);   /* long, expensive settle */
  --am-duration:        1.65s;   /* standard entrance */
  --am-dramatic:        2.15s;   /* hero / large blocks */
  --am-stagger:         180ms;
}

/* ==========================================================================
   1. CORE REVEAL — opacity 0 -> 1, preset supplies the start transform/blur.
   The base only animates; presets below define WHERE it starts.
   ========================================================================== */
.am-reveal{
  opacity:0;
  transition:
    transform var(--am-duration) var(--am-ease-silk),
    opacity   var(--am-duration) ease-out,
    filter    calc(var(--am-duration) * .8) ease-out,
    clip-path var(--am-duration) var(--am-ease-silk);
  will-change:transform, opacity, filter, clip-path;
}

/* Resting (revealed) state. NOTE: clip-path is intentionally NOT reset here —
   resetting it globally clips children that legitimately overflow (e.g. stack
   spread). It is reset only on the wipe presets that actually use it. */
.am-reveal.am-in{
  opacity:1;
  filter:blur(0);
  transform:none;
}

/* ==========================================================================
   2. ENTRANCE PRESETS — add one alongside .am-reveal
   ========================================================================== */
.am-from-left  {transform:translateX(-130px) translateY(22px) scale(.96);filter:blur(5px)}
.am-from-right {transform:translateX(130px)  translateY(22px) scale(.96);filter:blur(5px)}
.am-from-bottom{transform:translateY(68px) scale(.96);filter:blur(5px)}
.am-from-top   {transform:translateY(-58px) scale(.975);filter:blur(4px)}
.am-fly-left   {transform:translateX(-175px) translateY(46px) rotate(-2.5deg) scale(.94);filter:blur(6px)}
.am-fly-right  {transform:translateX(175px)  translateY(46px) rotate(2.5deg)  scale(.94);filter:blur(6px)}
.am-zoom       {transform:scale(.9) translateY(30px);filter:blur(5px)}
.am-rise       {transform:translateY(48px);filter:blur(3px)}
.am-tilt       {transform:perspective(900px) rotateX(7deg) translateY(62px) scale(.955);transform-origin:center bottom;filter:blur(5px)}
.am-rotate-left {transform:translateX(-82px) rotate(-2deg) scale(.965);transform-origin:left center;filter:blur(4px)}
.am-rotate-right{transform:translateX(82px)  rotate(2deg)  scale(.965);transform-origin:right center;filter:blur(4px)}
.am-spin       {transform:rotate(-4deg) scale(.95) translateY(34px);filter:blur(4px)}
.am-skew       {transform:translateX(-94px) skewX(-3deg) scale(.965);filter:blur(4px)}
.am-blur       {transform:translateY(22px) scale(.985);filter:blur(9px)}
.am-glow-pop   {transform:scale(.95) translateY(30px);filter:blur(5px);box-shadow:0 0 0 rgba(0,0,0,0)}
.am-glow-pop.am-in{box-shadow:0 0 46px var(--am-glow), var(--am-shadow)}

/* Flip entrances — 3D rotate that settles flat. */
.am-flip-x{transform:perspective(900px) rotateX(34deg) translateY(52px) scale(.955);transform-origin:center bottom;filter:blur(5px)}
.am-flip-y{transform:perspective(900px) rotateY(-32deg) translateY(24px) scale(.955);transform-origin:left center;filter:blur(5px)}

/* Mask wipes — these DO use clip-path, so reset it on reveal. */
.am-wipe-right{clip-path:inset(0 100% 0 0);transform:translateY(18px);filter:blur(1.5px)}  /* reveals L->R */
.am-wipe-left {clip-path:inset(0 0 0 100%);transform:translateY(18px);filter:blur(1.5px)}  /* reveals R->L */
.am-wipe-up   {clip-path:inset(100% 0 0 0);transform:translateY(24px);filter:blur(1.5px)}  /* reveals bottom->top */
.am-wipe-right.am-in,
.am-wipe-left.am-in,
.am-wipe-up.am-in{clip-path:inset(0 0 0 0)}

/* ==========================================================================
   3. TIMING CLASSES — pair ONE with any preset to set duration + easing.
   ========================================================================== */
.am-core{       /* standard content */
  transition-duration:2.05s, 2.05s, 1.75s, 2.05s;
  transition-timing-function:var(--am-ease-luxury), ease-out, ease-out, var(--am-ease-luxury);
}
.am-special{    /* heavier flips / emphasis */
  transition-duration:2.35s, 2.35s, 1.95s, 2.35s;
  transition-timing-function:var(--am-ease-luxury), ease-out, ease-out, var(--am-ease-luxury);
}
.am-dramatic{transition-duration:var(--am-dramatic)}   /* hero / large blocks */

/* CRITICAL specificity guard: two-class presets like `.am-flip-x.am-special`
   tie `.am-reveal.am-in` on specificity and would win by source order, leaving
   the element stuck in its start transform/blur. These restore the resting
   state at higher specificity. Add one per two-class preset you create. */
.am-flip-x.am-special.am-in,
.am-flip-y.am-special.am-in{
  transform:none;
  filter:blur(0);
}

.am-delay-1{transition-delay:120ms}
.am-delay-2{transition-delay:260ms}
.am-delay-3{transition-delay:400ms}
.am-delay-4{transition-delay:540ms}

/* ==========================================================================
   4. SECTION CASCADE — parent reveals, children follow with a stagger.
   ========================================================================== */
.am-cascade > *{
  opacity:0;
  transform:translateY(34px) scale(.96);
  filter:blur(5px);
  transition:
    transform var(--am-duration) var(--am-ease-silk),
    opacity   var(--am-duration) ease-out,
    filter    calc(var(--am-duration) * .8) ease-out;
}
.am-cascade.am-in > *{opacity:1;transform:none;filter:blur(0)}
.am-cascade.am-in > *:nth-child(1){transition-delay:120ms}
.am-cascade.am-in > *:nth-child(2){transition-delay:260ms}
.am-cascade.am-in > *:nth-child(3){transition-delay:400ms}
.am-cascade.am-in > *:nth-child(4){transition-delay:540ms}
.am-cascade.am-in > *:nth-child(5){transition-delay:680ms}
.am-cascade.am-in > *:nth-child(6){transition-delay:820ms}

/* ==========================================================================
   5. HOVER MICROINTERACTIONS (apply after the element is visible)
   ========================================================================== */
.am-hover-lift{
  transition:
    transform var(--am-duration) var(--am-ease-silk),
    opacity   var(--am-duration) ease-out,
    filter    calc(var(--am-duration) * .8) ease-out,
    clip-path var(--am-duration) var(--am-ease-silk),
    box-shadow .7s var(--am-ease-silk),
    border-color .7s ease;
}
.am-hover-lift.am-core{
  transition-duration:2.05s, 2.05s, 1.75s, 2.05s, .7s, .7s;
  transition-timing-function:var(--am-ease-luxury), ease-out, ease-out, var(--am-ease-luxury), var(--am-ease-silk), ease;
}
.am-hover-lift.am-special{
  transition-duration:2.35s, 2.35s, 1.95s, 2.35s, .7s, .7s;
  transition-timing-function:var(--am-ease-luxury), ease-out, ease-out, var(--am-ease-luxury), var(--am-ease-silk), ease;
}
.am-hover-lift.am-in:hover{
  transform:translateY(-6px);
  box-shadow:0 0 46px var(--am-glow), 0 34px 70px rgba(0,0,0,.48);
  transition:transform .72s var(--am-ease-silk), box-shadow .72s var(--am-ease-silk), border-color .72s ease;
}

/* Light sweep across the surface on hover. Element needs position:relative + overflow:hidden. */
.am-glow-sweep{position:relative;overflow:hidden}
.am-glow-sweep::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -70%;
  width:50%;
  background:linear-gradient(105deg,transparent,color-mix(in srgb,var(--am-accent) 28%,transparent),color-mix(in srgb,var(--am-accent-2) 16%,transparent),transparent);
  transform:skewX(-18deg);
  opacity:0;
  transition:transform 1.1s var(--am-ease-silk), opacity .35s ease;
  pointer-events:none;
}
.am-glow-sweep:hover::after{transform:translateX(360%) skewX(-18deg);opacity:1}

/* Arrow that slides forward on hover. Wrap the glyph in .am-arrow. */
.am-nudge .am-arrow{display:inline-block;margin-left:6px;transition:transform .38s var(--am-ease-silk)}
.am-nudge:hover .am-arrow{transform:translateX(7px)}

/* Looping attention glow — use sparingly (active/processing states). */
.am-pulse{animation:am-pulse 2.9s ease-in-out infinite}
@keyframes am-pulse{
  0%,100%{box-shadow:0 0 26px var(--am-glow-soft), var(--am-shadow)}
  50%    {box-shadow:0 0 58px var(--am-glow-strong), 0 30px 76px rgba(0,0,0,.48)}
}

/* Shimmer band sweeping a skeleton/loading bar. Element needs overflow:hidden. */
.am-shimmer{position:relative;overflow:hidden}
.am-shimmer::after{
  content:"";
  position:absolute;
  inset:0;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-140%);
  animation:am-shimmer 2.4s ease-in-out infinite;
}
@keyframes am-shimmer{0%,38%{transform:translateX(-140%)} 74%,100%{transform:translateX(260%)}}

/* ==========================================================================
   6. TRUE FRONT/BACK FLIP CARD (hover/focus) — both faces in one slot.
   Markup: .am-flipcard > .am-flip-inner > (.am-flip-face, .am-flip-face.am-flip-back)
   ========================================================================== */
.am-flipcard{position:relative;perspective:1200px}
.am-flip-inner{
  position:relative;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .9s var(--am-ease-luxury);
}
.am-flipcard:hover .am-flip-inner,
.am-flipcard:focus-within .am-flip-inner{transform:rotateY(180deg)}
.am-flip-face{position:absolute;inset:0;backface-visibility:hidden}
.am-flip-back{transform:rotateY(180deg)}

/* ==========================================================================
   7. CARD STACK SPREAD — overlapped cards fan out on reveal.
   The host must allow overflow so the fanned cards aren't clipped.
   ========================================================================== */
.am-stack{position:relative;overflow:visible}
.am-stack-card{
  opacity:0;
  transform:translateY(50px) scale(.92);
  transition:
    transform var(--am-dramatic) var(--am-ease-silk),
    opacity   var(--am-dramatic) ease-out;
}
.am-stack.am-in .am-stack-card{opacity:1}
.am-stack.am-in .am-stack-card:nth-child(1){transform:translateX(-34%) translateY(18px) rotate(-7deg) scale(.96);transition-delay:100ms}
.am-stack.am-in .am-stack-card:nth-child(2){transform:translateX(0)     translateY(0)    rotate(0deg)  scale(1);  transition-delay:240ms}
.am-stack.am-in .am-stack-card:nth-child(3){transform:translateX(34%)  translateY(18px) rotate(7deg)  scale(.96);transition-delay:380ms}

/* ==========================================================================
   8. SVG LINE DRAW — stroke draws on reveal; --am-draw-len set by JS.
   ========================================================================== */
.am-draw-line{
  fill:none;
  stroke:var(--am-accent);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:var(--am-draw-len, 1000);
  stroke-dashoffset:var(--am-draw-len, 1000);
  transition:stroke-dashoffset 2.2s var(--am-ease-silk);
}
.am-in .am-draw-line{stroke-dashoffset:0}
.am-draw-dot{fill:var(--am-accent-2);opacity:0;transition:opacity .45s ease}
.am-in .am-draw-dot{opacity:1}
/* Dots light up as the line passes each one — tune delays to your path. */
.am-in .am-draw-dot:nth-of-type(1){transition-delay:.2s}
.am-in .am-draw-dot:nth-of-type(2){transition-delay:1.2s}
.am-in .am-draw-dot:nth-of-type(3){transition-delay:2.05s}

/* ==========================================================================
   9. PARALLAX + MAGNETIC (JS-driven; these are just the transition smoothing)
   ========================================================================== */
.am-parallax{position:relative}
.am-parallax [data-am-depth]{transition:transform .28s ease-out}
.am-magnetic{transition:transform .12s ease-out}

/* ==========================================================================
   10. MARQUEE DRIFT — duplicate the track's children twice for a seamless loop.
   ========================================================================== */
.am-marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)}
.am-marquee-track{display:flex;gap:14px;min-width:max-content;animation:am-marquee 24s linear infinite}
@keyframes am-marquee{to{transform:translateX(calc(-50% - 7px))}}

/* ==========================================================================
   11. EXTREME TIER — high-drama, award-tier motion.
   Kinetic = massive travel, heavy blur, rotation.
   Slam = drops in with physical overshoot.
   am-extreme timing = 3.2s very wide ease.
   Use for key moments only, not every element.
   ========================================================================== */

.am-extreme{
  transition-duration:3.2s, 3.2s, 2.6s, 3.2s;
  transition-timing-function:
    cubic-bezier(0.12, 1, 0.2, 1),
    ease-out,
    ease-out,
    cubic-bezier(0.12, 1, 0.2, 1);
}

.am-kinetic-left {transform:translateX(-220px) translateY(60px) rotate(-4deg) scale(.88);filter:blur(12px)}
.am-kinetic-right{transform:translateX(220px)  translateY(60px) rotate(4deg)  scale(.88);filter:blur(12px)}
.am-kinetic-up   {transform:translateY(-180px) scale(.88);filter:blur(10px)}
.am-kinetic-down {transform:translateY(180px)  scale(.88);filter:blur(10px)}

.am-slam{transform:translateY(-120px) scale(1.08);filter:blur(8px)}
.am-slam.am-extreme{
  transition-timing-function:
    cubic-bezier(0.34, 1.4, 0.64, 1),
    ease-out,
    ease-out,
    cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Specificity guards for extreme two-class presets */
.am-kinetic-left.am-extreme.am-in,
.am-kinetic-right.am-extreme.am-in,
.am-kinetic-up.am-extreme.am-in,
.am-kinetic-down.am-extreme.am-in,
.am-slam.am-extreme.am-in{transform:none;filter:blur(0)}

/* ==========================================================================
   12. SPLIT TEXT — word-by-word or char-by-char kinetic entrance.
   JS splits text into .am-split-unit spans with --am-split-i index.
   Works with am-reveal (IO-triggered) or standalone (add am-in directly).
   ========================================================================== */
.am-split-unit{
  display:inline-block;
  opacity:0;
  transform:translateY(0.45em) rotate(-2deg);
  filter:blur(4px);
  transition:
    transform 0.72s var(--am-ease-luxury),
    opacity   0.6s  ease-out,
    filter    0.5s  ease-out;
  transition-delay:calc(var(--am-split-i, 0) * 55ms + 80ms);
}
.am-in .am-split-unit,
[data-am-split].am-in .am-split-unit{opacity:1;transform:none;filter:blur(0)}

/* ==========================================================================
   13. NO-JS FALLBACK — if the JS file fails to load, all reveal elements
   stay visible. Requires <html class="no-js"> + inline script that replaces
   it with "js" so this block only activates when JS truly isn't running.
   ========================================================================== */
.no-js .am-reveal,
.no-js .am-cascade > *,
.no-js .am-stack-card{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  clip-path:none !important;
}
.no-js .am-draw-line{stroke-dashoffset:0 !important}
.no-js .am-draw-dot,.no-js .am-split-unit{opacity:1 !important;transform:none !important;filter:none !important}

/* ==========================================================================
   14. ACCESSIBILITY — honour reduced-motion. Keep this block; removing it
   fails accessibility audits.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .am-reveal,
  .am-cascade > *,
  .am-stack-card{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
    clip-path:none !important;
  }
  .am-pulse,
  .am-shimmer::after,
  .am-marquee-track{animation:none !important}
  .am-draw-line{stroke-dashoffset:0 !important;transition:none !important}
  .am-draw-dot,.am-split-unit{opacity:1 !important;transition:none !important;transform:none !important}
  .am-flip-inner{transition:none !important}
}