/* ============================================================
   INNER CIRCLE · CINEMATIC MOTION (21st.dev / Magic UI / Framer)
   Vanilla ports of popular motion patterns:
   blur-fade · text shimmer · border beam · magnetic CTA ·
   parallax · aurora mesh · grain · spring stagger ·
   spotlight cards · scroll progress · float orbs.
   Pair with motion.js. Respects prefers-reduced-motion + Easy View.
   ============================================================ */

:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-duration: 0.85s;
  --motion-stagger: 90ms;
  --motion-gold: 184, 137, 63;
  --motion-green: 53, 90, 50;
  --motion-ink: 12, 26, 13;
}

/* ── Scroll progress (glowing gold line) ─────────────────── */
.ic-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 10000;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--motion-green), 1),
    rgba(var(--motion-gold), 1) 55%,
    #e9c977);
  box-shadow: 0 0 16px rgba(var(--motion-gold), 0.55);
  transition: width 0.08s linear;
}

/* ── Page grain (cinematic film) ─────────────────────────── */
.cine-page-grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Blur Fade (Magic UI) ────────────────────────────────── */
[data-motion="fade-up"],
[data-motion="blur-fade"] {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(32px);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    filter var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  will-change: opacity, transform, filter;
}
[data-motion="fade-up"].is-in,
[data-motion="blur-fade"].is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

[data-motion="fade-in"] {
  opacity: 0;
  transition: opacity 1s var(--motion-ease);
}
[data-motion="fade-in"].is-in { opacity: 1; }

[data-motion="blur-in"] {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 1s var(--motion-ease),
    filter 1s var(--motion-ease),
    transform 1s var(--motion-ease);
}
[data-motion="blur-in"].is-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

[data-motion="scale-in"] {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.9s var(--motion-ease),
    transform 0.9s var(--motion-spring);
}
[data-motion="scale-in"].is-in {
  opacity: 1;
  transform: scale(1);
}

[data-motion="slide-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s var(--motion-ease), transform 0.9s var(--motion-ease);
}
[data-motion="slide-left"].is-in { opacity: 1; transform: none; }

[data-motion="slide-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s var(--motion-ease), transform 0.9s var(--motion-ease);
}
[data-motion="slide-right"].is-in { opacity: 1; transform: none; }

/* Optional delay via data-delay="1" … "6" */
[data-delay="1"] { transition-delay: calc(var(--motion-stagger) * 1); }
[data-delay="2"] { transition-delay: calc(var(--motion-stagger) * 2); }
[data-delay="3"] { transition-delay: calc(var(--motion-stagger) * 3); }
[data-delay="4"] { transition-delay: calc(var(--motion-stagger) * 4); }
[data-delay="5"] { transition-delay: calc(var(--motion-stagger) * 5); }
[data-delay="6"] { transition-delay: calc(var(--motion-stagger) * 6); }

/* Stagger children (Framer staggerChildren) */
[data-stagger] > * {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--motion-ease),
    filter 0.7s var(--motion-ease),
    transform 0.7s var(--motion-ease);
}
[data-stagger].is-in > * {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
[data-stagger].is-in > *:nth-child(1) { transition-delay: calc(var(--motion-stagger) * 0); }
[data-stagger].is-in > *:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 1); }
[data-stagger].is-in > *:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
[data-stagger].is-in > *:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }
[data-stagger].is-in > *:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); }
[data-stagger].is-in > *:nth-child(6) { transition-delay: calc(var(--motion-stagger) * 5); }
[data-stagger].is-in > *:nth-child(7) { transition-delay: calc(var(--motion-stagger) * 6); }
[data-stagger].is-in > *:nth-child(8) { transition-delay: calc(var(--motion-stagger) * 7); }
[data-stagger].is-in > *:nth-child(9) { transition-delay: calc(var(--motion-stagger) * 8); }

/* ── Animated shiny / shimmer text ───────────────────────── */
.shiny-text {
  display: inline-block;
  background: linear-gradient(
    110deg,
    currentColor 0%,
    currentColor 38%,
    rgba(var(--motion-gold), 1) 50%,
    currentColor 62%,
    currentColor 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: shiny-sweep 3.8s linear infinite;
}
.shiny-text.on-dark {
  background: linear-gradient(
    110deg,
    #f5f1e8 0%,
    #f5f1e8 36%,
    #e9c977 50%,
    #f5f1e8 64%,
    #f5f1e8 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
@keyframes shiny-sweep {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Word-by-word reveal (split by motion.js) */
.word-reveal .w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.55em);
  transition:
    opacity 0.55s var(--motion-ease),
    filter 0.55s var(--motion-ease),
    transform 0.55s var(--motion-ease);
}
.word-reveal.is-in .w {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ── Magnetic / shimmer button (Magic UI interactive) ───── */
.btn-magnetic {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--motion-ease), box-shadow 0.35s var(--motion-ease) !important;
}
.btn-magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.7s var(--motion-ease);
  pointer-events: none;
}
.btn-magnetic:hover::before { transform: translateX(120%); }
.btn-magnetic:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(var(--motion-gold), 0.35);
}

/* ── Lift + border beam cards ────────────────────────────── */
.motion-lift,
.abt-exp-card,
.ic2-tier,
.ic-simple-services li,
.ic2-how-step {
  transition:
    transform 0.45s var(--motion-ease),
    box-shadow 0.45s var(--motion-ease),
    border-color 0.35s ease;
}
.motion-lift:hover,
.abt-exp-card:hover,
.ic2-tier:hover,
.ic-simple-services li:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(var(--motion-ink), 0.12);
  border-color: rgba(var(--motion-gold), 0.4);
}

/* Border beam (animated conic border) */
.border-beam {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.border-beam::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0%,
    rgba(var(--motion-gold), 0.9) 12%,
    transparent 28%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: beam-spin 4.5s linear infinite;
  pointer-events: none;
  z-index: 3;
  opacity: 0.85;
}
@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Spotlight (cursor glow) — enhanced ─────────────────── */
[data-spotlight] {
  position: relative;
  overflow: hidden;
}
[data-spotlight]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--motion-gold), 0.14),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.4s var(--motion-ease);
  pointer-events: none;
  z-index: 1;
}
[data-spotlight]:hover::after { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 2; }

/* ── Hero cinematic stack (IC flagship + AFG homepage) ─── */
.ic2-hero,
#hero.tsection {
  overflow: hidden;
  isolation: isolate;
}
.ic2-hero .cine-broll,
#hero.tsection .cine-broll {
  transform: scale(1.08);
  transition: opacity 1.6s var(--motion-ease), transform 8s var(--motion-ease);
}
.ic2-hero .cine-broll.cine-broll-ready,
#hero.tsection .cine-broll.cine-broll-ready {
  opacity: 1;
  transform: scale(1);
  animation: ken-slow 18s ease-in-out infinite alternate;
}
@keyframes ken-slow {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.5%, -1%); }
}

/* Aurora mesh behind hero content */
.hero-aurora {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(var(--motion-gold), 0.22), transparent 55%),
    radial-gradient(ellipse 45% 50% at 80% 20%, rgba(var(--motion-green), 0.28), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(var(--motion-gold), 0.12), transparent 55%);
  filter: blur(40px);
  animation: aurora-drift 14s ease-in-out infinite alternate;
  opacity: 0.9;
}
@keyframes aurora-drift {
  from { transform: translate(-2%, -1%) scale(1); }
  to   { transform: translate(3%, 2%) scale(1.08); }
}

/* Floating orbs */
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.45;
  animation: orb-float 9s ease-in-out infinite;
}
.hero-orbs span:nth-child(1) {
  width: 8px; height: 8px; left: 18%; top: 28%;
  background: #e9c977;
  animation-duration: 7s;
}
.hero-orbs span:nth-child(2) {
  width: 5px; height: 5px; left: 72%; top: 36%;
  background: #a9c1a2;
  animation-duration: 9s; animation-delay: -2s;
}
.hero-orbs span:nth-child(3) {
  width: 10px; height: 10px; left: 58%; top: 62%;
  background: rgba(233, 201, 119, 0.7);
  animation-duration: 11s; animation-delay: -4s;
}
.hero-orbs span:nth-child(4) {
  width: 4px; height: 4px; left: 30%; top: 70%;
  background: #fff;
  animation-duration: 8s; animation-delay: -1s;
}
.hero-orbs span:nth-child(5) {
  width: 6px; height: 6px; left: 85%; top: 55%;
  background: #d4a574;
  animation-duration: 10s; animation-delay: -3s;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0); opacity: 0.35; }
  50% { transform: translate(12px, -22px); opacity: 0.75; }
}

.ic2-hero-inner { position: relative; z-index: 3; }
.ic2-hero .ic2-scroll-cue { z-index: 4; }
#hero.tsection .tsection-top,
#hero.tsection .tsection-bottom,
#hero.tsection .ic-orb-wrap { z-index: 3; }
#hero.tsection .hero-aurora,
#hero.tsection .hero-orbs { z-index: 1; }
#hero.tsection .hero-vignette { z-index: 2; }

/* Lineup cards cinematic lift */
.lineup-card {
  transition: transform 0.5s var(--motion-ease), box-shadow 0.5s var(--motion-ease) !important;
}
.lineup-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 28px 60px rgba(12, 26, 13, 0.18);
}
.lineup-card--gold.border-beam { border-radius: inherit; }

/* Bill benchmark tool polish */
.bb-tool {
  transition: box-shadow 0.45s var(--motion-ease), transform 0.45s var(--motion-ease);
}
.bb-tool:hover {
  box-shadow: 0 24px 60px rgba(12, 26, 13, 0.1);
}
.bb-cat {
  transition: transform 0.3s var(--motion-ease), border-color 0.2s ease, box-shadow 0.3s ease !important;
}
.bb-cat:hover { transform: translateY(-3px); }
.bb-check.btn-magnetic:not(:disabled):hover {
  box-shadow: 0 14px 36px rgba(184, 137, 63, 0.4);
}
.bb-result.show {
  animation: result-rise 0.7s var(--motion-ease) both;
}
@keyframes result-rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Vignette + bottom fade */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(var(--motion-ink), 0.45) 100%),
    linear-gradient(180deg, rgba(var(--motion-ink), 0.25) 0%, transparent 35%, rgba(var(--motion-ink), 0.75) 100%);
}

/* Hero entrance sequence */
.ic2-hero.hero-ready .ic2-eyebrow { transition-delay: 0.1s; }
.ic2-hero.hero-ready .ic2-headline { transition-delay: 0.22s; }
.ic2-hero.hero-ready .ic2-sub { transition-delay: 0.4s; }
.ic2-hero.hero-ready .ic2-hero-cta { transition-delay: 0.55s; }
.ic2-hero.hero-ready .ic2-trust { transition-delay: 0.7s; }

/* Trust strip polish */
.ic2-trust {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--motion-ease), transform 0.8s var(--motion-ease);
}
.ic2-trust.is-in,
.ic2-hero.hero-ready .ic2-trust.is-in {
  opacity: 1;
  transform: none;
}

/* ── Parallax (data-parallax="0.15") ─────────────────────── */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── Section dividers / glass bands ──────────────────────── */
.abt-band {
  position: relative;
}
.abt-band-head h2 {
  background: linear-gradient(180deg, var(--text, #1c1a14) 0%, var(--warmgray-400, #635f50) 160%);
  -webkit-background-clip: text;
  background-clip: text;
}
.abt-exp-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Number steps pulse on reveal */
.ic2-how-num {
  transition: transform 0.5s var(--motion-spring), box-shadow 0.5s ease;
}
[data-stagger].is-in .ic2-how-step .ic2-how-num {
  animation: num-pop 0.6s var(--motion-spring) both;
}
[data-stagger].is-in .ic2-how-step:nth-child(2) .ic2-how-num { animation-delay: 0.1s; }
[data-stagger].is-in .ic2-how-step:nth-child(3) .ic2-how-num { animation-delay: 0.2s; }
@keyframes num-pop {
  from { transform: scale(0.6); opacity: 0.4; }
  to   { transform: scale(1); opacity: 1; }
}

/* Intro photo cinematic frame */
.ic2-intro-photo {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.ic2-intro-photo img {
  transition: transform 1.2s var(--motion-ease);
  display: block;
  width: 100%;
}
.ic2-intro-photo:hover img {
  transform: scale(1.05);
}
.ic2-intro-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  pointer-events: none;
}

/* Pricing cards border beam on featured */
.ic2-tier-featured.border-beam {
  box-shadow: 0 20px 60px rgba(var(--motion-gold), 0.18);
}

/* Infinite soft marquee utility (if used) */
.motion-marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.motion-marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee-x 48s linear infinite;
}
.motion-marquee:hover .motion-marquee-track { animation-play-state: paused; }
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* FAQ polish */
.bb-faq details {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color .25s ease, box-shadow .35s var(--motion-ease), transform .35s var(--motion-ease);
}
.bb-faq details:hover {
  border-color: rgba(var(--motion-gold), 0.4);
  box-shadow: 0 12px 32px rgba(var(--motion-ink), 0.06);
}
.bb-faq summary {
  cursor: pointer; font-weight: 600; font-size: 15.5px;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary::after { content: '+'; color: var(--accent); font-weight: 700; transition: transform .25s ease; }
.bb-faq details[open] summary::after { content: '−'; }
.bb-faq details p {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--text-muted);
}

/* Contact CTA glow */
.ic2-contact {
  position: relative;
  overflow: hidden;
}
.ic2-contact::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--motion-gold), 0.18), transparent 65%);
  pointer-events: none;
  animation: contact-glow 6s ease-in-out infinite alternate;
}
@keyframes contact-glow {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-motion],
  [data-stagger] > *,
  .shiny-text,
  .word-reveal .w,
  .motion-marquee-track,
  .ic-scroll-progress,
  .hero-aurora,
  .hero-orbs span,
  .border-beam::before,
  .ic2-hero .cine-broll,
  .cine-page-grain {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .shiny-text,
  .shiny-text.on-dark {
    background: none !important;
    color: inherit !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }
  .ic-scroll-progress,
  .cine-page-grain,
  .hero-orbs { display: none !important; }
  .cine-broll { animation: none !important; }
}

html.easy [data-motion],
html.easy [data-stagger] > *,
html.easy .word-reveal .w {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
html.easy .shiny-text {
  animation: none !important;
  background: none !important;
  color: inherit !important;
  -webkit-background-clip: unset !important;
}
html.easy .ic-scroll-progress,
html.easy .cine-page-grain,
html.easy .hero-orbs,
html.easy .hero-aurora,
html.easy .border-beam::before { display: none !important; }
html.easy .motion-marquee-track { animation: none !important; }