/* ============================================================
   AG Digitalz — full "social-media-cool" animation layer
   Scoped to .anim-page so it never touches the real site.
   ============================================================ */
.anim-page { --ag-ease: cubic-bezier(.16, 1, .3, 1); }

/* Hide native cursor on desktop; custom cursor takes over */
@media (pointer: fine) {
  .anim-page, .anim-page * { cursor: none; }
  .anim-page input, .anim-page textarea, .anim-page select { cursor: auto; }
}

/* ---------- Page loader curtain ---------- */
.ag-loader {
  position: fixed; inset: 0; z-index: 10000;
  background: #070708;
  display: grid; place-items: center;
  transition: opacity .7s var(--ag-ease), visibility .7s;
}
.ag-loader.is-done { opacity: 0; visibility: hidden; }
.ag-loader-inner { text-align: center; }
.ag-loader img {
  width: min(360px, 72vw);
  height: auto;
  margin: 0 auto;
  filter: brightness(1.12) contrast(1.08) drop-shadow(0 0 22px rgba(255, 41, 41, 0.22));
  animation: agLoadPop .8s var(--ag-ease) both;
}
.ag-loader b {
  font: 800 clamp(26px, 6vw, 56px)/1 Inter, sans-serif;
  letter-spacing: 2px; color: #fff;
  display: block;
  animation: agLoadPop .8s var(--ag-ease) both;
}
.ag-loader b span { color: var(--red-hot); }
.ag-load-bar {
  margin: 20px auto 0; height: 2px; width: 220px; max-width: 60vw;
  background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden;
}
.ag-load-bar i {
  display: block; height: 100%; width: 38%;
  background: linear-gradient(90deg, var(--red-hot), var(--red));
  box-shadow: 0 0 14px rgba(255, 41, 41, .7);
  animation: agLoadSlide 1s var(--ag-ease) infinite;
}
@keyframes agLoadSlide { 0% { transform: translateX(-130%); } 100% { transform: translateX(420%); } }
@keyframes agLoadPop { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }

/* ---------- Scroll progress bar ---------- */
.ag-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--red-hot), var(--red));
  box-shadow: 0 0 16px rgba(255, 41, 41, .7);
  z-index: 9990; will-change: transform;
}

/* ---------- Custom cursor ---------- */
.ag-glow {
  position: fixed; left: 0; top: 0; width: 460px; height: 460px;
  margin: -230px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 41, 41, .20), rgba(255, 41, 41, .05) 42%, transparent 66%);
  mix-blend-mode: screen; pointer-events: none; z-index: 9985;
  opacity: 0; transition: opacity .5s; will-change: transform;
}
.ag-ring {
  position: fixed; left: 0; top: 0; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%; pointer-events: none; z-index: 9995; will-change: transform;
  transition: width .25s var(--ag-ease), height .25s var(--ag-ease),
              margin .25s var(--ag-ease), border-color .25s, background .25s;
}
.ag-dot {
  position: fixed; left: 0; top: 0; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%; background: #fff;
  mix-blend-mode: difference; pointer-events: none; z-index: 9996; will-change: transform;
  transition: width .2s, height .2s, margin .2s;
}
.ag-ring.is-hot {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: rgba(255, 41, 41, .9); background: rgba(255, 41, 41, .08);
}
.ag-dot.is-hot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
body.ag-ready .ag-glow { opacity: 1; }

/* ---------- Upgraded scroll reveals (blur + scale + rise) ---------- */
.anim-page [data-reveal] {
  transition: opacity .9s var(--ag-ease), transform .9s var(--ag-ease), filter .9s var(--ag-ease) !important;
  will-change: opacity, transform, filter;
}
.anim-page [data-reveal]:not(.is-visible) {
  opacity: 0; transform: translateY(42px) scale(.985); filter: blur(7px);
}
.anim-page [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* ---------- Word-by-word heading reveal ---------- */
.anim-page .ag-split { overflow: hidden; }
.ag-word { display: inline-block; overflow: hidden; vertical-align: top; }
.ag-word > i {
  display: inline-block; font-style: inherit;
  transform: translateY(115%);
  transition: transform .85s var(--ag-ease);
}
.ag-split.is-in .ag-word > i { transform: none; }

/* ---------- 3D tilt + shine on cards ---------- */
.anim-page .ag-tilt {
  transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .3s var(--ag-ease);
  position: relative; will-change: transform;
}
.anim-page .ag-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 45%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.anim-page .ag-tilt:hover::after { opacity: 1; }

/* ---------- Magnetic buttons get a smooth spring back ---------- */
.anim-page .btn { transition: transform .25s var(--ag-ease), box-shadow .25s ease, background .25s ease, border-color .25s ease; }

/* ---------- Ambient floating particles in the hero ---------- */
.anim-page .motion-hero .hero-grid { position: relative; z-index: 1; }
.ag-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ag-orb {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 41, 41, .55); box-shadow: 0 0 12px rgba(255, 41, 41, .85);
  animation: agFloat linear infinite;
}
@keyframes agFloat {
  0% { transform: translateY(18px) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: .8; }
  100% { transform: translateY(-120px) scale(1); opacity: 0; }
}

/* ============================================================
   IMMERSIVE LIVING BACKGROUND
   Full-page animated canvas + drifting aurora behind everything,
   with every section turned translucent so it shows through.
   ============================================================ */
.anim-page {
  position: relative;
  background: #060608;
}
.ag-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: #060608;
}
.ag-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ag-aurora { position: absolute; inset: 0; }
.ag-aurora span {
  position: absolute; border-radius: 50%; filter: blur(72px);
  opacity: .72; mix-blend-mode: screen; will-change: transform;
}
.ag-aurora span:nth-child(1) {
  width: 60vw; height: 60vw; left: -12vw; top: -16vw;
  background: radial-gradient(circle, rgba(255, 41, 41, .72), transparent 60%);
  animation: agAur1 14s ease-in-out infinite;
}
.ag-aurora span:nth-child(2) {
  width: 54vw; height: 54vw; right: -14vw; top: 14vh;
  background: radial-gradient(circle, rgba(210, 10, 10, .6), transparent 62%);
  animation: agAur2 18s ease-in-out infinite;
}
.ag-aurora span:nth-child(3) {
  width: 48vw; height: 48vw; left: 22vw; bottom: -18vh;
  background: radial-gradient(circle, rgba(255, 110, 70, .5), transparent 64%);
  animation: agAur3 16s ease-in-out infinite;
}
.ag-aurora span:nth-child(4) {
  width: 38vw; height: 38vw; left: 42vw; top: 32vh;
  background: radial-gradient(circle, rgba(255, 60, 60, .45), transparent 60%);
  animation: agAur4 12s ease-in-out infinite;
}
@keyframes agAur1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10vw,8vh) scale(1.25); } }
@keyframes agAur2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-9vw,-6vh) scale(.85); } }
@keyframes agAur3 { 0%,100% { transform: translate(0,0) scale(.9); } 50% { transform: translate(7vw,-9vh) scale(1.3); } }
@keyframes agAur4 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8vw,7vh) scale(1.2); } }

/* drifting tech grid + sweeping light beam */
.ag-grid {
  position: absolute; inset: -2px; opacity: .5;
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 70px 70px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 70px 70px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 28%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 38%, #000 28%, transparent 78%);
  animation: agGrid 11s linear infinite;
}
@keyframes agGrid { to { background-position: 70px 70px, 70px 70px; } }
.ag-beam {
  position: absolute; inset: 0; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 70, 60, .16) 48%, rgba(255, 130, 95, .3) 50%, rgba(255, 70, 60, .16) 52%, transparent 60%);
  background-size: 280% 100%;
  animation: agBeam 7.5s ease-in-out infinite;
}
@keyframes agBeam { 0% { background-position: 130% 0; } 100% { background-position: -70% 0; } }

/* Dim the static texture so the living background reads */
.anim-page::before { opacity: .22; }

/* Make sections translucent so the canvas glows through every one */
.anim-page .dark-section { background: rgba(6, 6, 8, .5) !important; }
.anim-page .motion-hero { background: rgba(6, 6, 8, .28) !important; }
.anim-page .light-section {
  background: rgba(8, 9, 12, .42) !important;
  color: #eef0f4;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.anim-page .light-section h2,
.anim-page .light-section h3,
.anim-page .light-section strong { color: #fff; }
.anim-page .light-section p,
.anim-page .light-section .section-copy { color: #c7cbd3; }
.anim-page .light-section .map-info-grid article h3,
.anim-page .light-section .deliverable-panel h3,
.anim-page .light-section .news-card h3,
.anim-page .light-section .video-card h3,
.anim-page .light-section .resource-card h3,
.anim-page .light-section .tool-card h3,
.anim-page .light-section .glossary-card h3,
.anim-page .light-section .upgrade-card h3,
.anim-page .light-section .tech-card h3,
.anim-page .light-section .journey-map h3 {
  color: #fff;
}
.anim-page .light-section .map-info-grid article p,
.anim-page .light-section .map-info-grid article li,
.anim-page .light-section .deliverable-panel li,
.anim-page .light-section .deliverable-panel p,
.anim-page .light-section .news-card p,
.anim-page .light-section .video-card p,
.anim-page .light-section .resource-card p,
.anim-page .light-section .tool-card p,
.anim-page .light-section .glossary-card p,
.anim-page .light-section .upgrade-card p,
.anim-page .light-section .tech-card p,
.anim-page .light-section .journey-map li {
  color: #c7cbd3;
}
.anim-page .light-section .problem-tile {
  background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #eef0f4;
}
.anim-page .light-section .lesson-list article,
.anim-page .light-section .price-row article {
  background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12);
}
.anim-page .light-section .btn-dark {
  background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
}

/* Convert all white content cards/panels to dark glass so text stays readable
   over the living background (covers every inner page consistently). */
.anim-page .article-card,
.anim-page .map-info-grid article,
.anim-page .flow-stack article,
.anim-page .deliverable-panel,
.anim-page .news-card,
.anim-page .video-card,
.anim-page .resource-card,
.anim-page .tool-card,
.anim-page .glossary-card,
.anim-page .upgrade-card,
.anim-page .tech-card,
.anim-page .problem-grid button,
.anim-page .problem-grid a,
.anim-page .problem-choice,
.anim-page .pricing-card,
.anim-page .audit-card,
.anim-page .contact-card,
.anim-page .result-panel,
.anim-page .builder-questions,
.anim-page .builder-output,
.anim-page .recommendation-item,
.anim-page .system-row,
.anim-page .resource-detail-panel {
  background: rgba(16, 16, 20, .62) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #dfe3ea;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.anim-page .problem-choice.is-selected {
  background: linear-gradient(135deg, var(--red), var(--red-deep)) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
.anim-page .article-card h2, .anim-page .article-card h3, .anim-page .article-card h4, .anim-page .article-card strong,
.anim-page .map-info-grid article h2, .anim-page .map-info-grid article h3, .anim-page .map-info-grid article h4, .anim-page .map-info-grid article strong,
.anim-page .flow-stack article h2, .anim-page .flow-stack article h3, .anim-page .flow-stack article h4, .anim-page .flow-stack article strong,
.anim-page .deliverable-panel h2, .anim-page .deliverable-panel h3, .anim-page .deliverable-panel h4, .anim-page .deliverable-panel strong,
.anim-page .news-card h2, .anim-page .news-card h3, .anim-page .news-card h4, .anim-page .news-card strong,
.anim-page .video-card h2, .anim-page .video-card h3, .anim-page .video-card h4, .anim-page .video-card strong,
.anim-page .resource-card h2, .anim-page .resource-card h3, .anim-page .resource-card h4, .anim-page .resource-card strong,
.anim-page .tool-card h2, .anim-page .tool-card h3, .anim-page .tool-card h4, .anim-page .tool-card strong,
.anim-page .glossary-card h2, .anim-page .glossary-card h3, .anim-page .glossary-card h4, .anim-page .glossary-card strong,
.anim-page .upgrade-card h2, .anim-page .upgrade-card h3, .anim-page .upgrade-card h4, .anim-page .upgrade-card strong,
.anim-page .tech-card h2, .anim-page .tech-card h3, .anim-page .tech-card h4, .anim-page .tech-card strong,
.anim-page .problem-grid button, .anim-page .problem-grid a, .anim-page .problem-choice,
.anim-page .pricing-card h2, .anim-page .pricing-card h3, .anim-page .pricing-card h4, .anim-page .pricing-card strong,
.anim-page .audit-card h2, .anim-page .audit-card h3, .anim-page .audit-card h4, .anim-page .audit-card strong,
.anim-page .contact-card h2, .anim-page .contact-card h3, .anim-page .contact-card h4, .anim-page .contact-card strong,
.anim-page .result-panel h2, .anim-page .result-panel h3, .anim-page .result-panel h4, .anim-page .result-panel strong,
.anim-page .builder-questions h2, .anim-page .builder-questions h3, .anim-page .builder-questions h4, .anim-page .builder-questions strong,
.anim-page .builder-output h2, .anim-page .builder-output h3, .anim-page .builder-output h4, .anim-page .builder-output strong,
.anim-page .recommendation-item h2, .anim-page .recommendation-item h3, .anim-page .recommendation-item h4, .anim-page .recommendation-item strong,
.anim-page .system-row h2, .anim-page .system-row h3, .anim-page .system-row h4, .anim-page .system-row strong,
.anim-page .resource-detail-panel h2, .anim-page .resource-detail-panel h3, .anim-page .resource-detail-panel h4, .anim-page .resource-detail-panel strong { color: #fff; }
.anim-page .article-card p, .anim-page .article-card li, .anim-page .article-card small, .anim-page .article-card label,
.anim-page .map-info-grid article p, .anim-page .map-info-grid article li, .anim-page .map-info-grid article small, .anim-page .map-info-grid article label,
.anim-page .flow-stack article p, .anim-page .flow-stack article li, .anim-page .flow-stack article small, .anim-page .flow-stack article label,
.anim-page .deliverable-panel p, .anim-page .deliverable-panel li, .anim-page .deliverable-panel small, .anim-page .deliverable-panel label,
.anim-page .news-card p, .anim-page .news-card li, .anim-page .news-card small, .anim-page .news-card label,
.anim-page .video-card p, .anim-page .video-card li, .anim-page .video-card small, .anim-page .video-card label,
.anim-page .resource-card p, .anim-page .resource-card li, .anim-page .resource-card small, .anim-page .resource-card label,
.anim-page .tool-card p, .anim-page .tool-card li, .anim-page .tool-card small, .anim-page .tool-card label,
.anim-page .glossary-card p, .anim-page .glossary-card li, .anim-page .glossary-card small, .anim-page .glossary-card label,
.anim-page .upgrade-card p, .anim-page .upgrade-card li, .anim-page .upgrade-card small, .anim-page .upgrade-card label,
.anim-page .tech-card p, .anim-page .tech-card li, .anim-page .tech-card small, .anim-page .tech-card label,
.anim-page .pricing-card p, .anim-page .pricing-card li, .anim-page .pricing-card small, .anim-page .pricing-card label,
.anim-page .audit-card p, .anim-page .audit-card li, .anim-page .audit-card small, .anim-page .audit-card label,
.anim-page .contact-card p, .anim-page .contact-card li, .anim-page .contact-card small, .anim-page .contact-card label,
.anim-page .result-panel p, .anim-page .result-panel li, .anim-page .result-panel small, .anim-page .result-panel label,
.anim-page .builder-questions p, .anim-page .builder-questions li, .anim-page .builder-questions small, .anim-page .builder-questions label,
.anim-page .builder-output p, .anim-page .builder-output li, .anim-page .builder-output small, .anim-page .builder-output label,
.anim-page .recommendation-item p, .anim-page .recommendation-item li, .anim-page .recommendation-item small, .anim-page .recommendation-item label,
.anim-page .system-row p, .anim-page .system-row li, .anim-page .system-row small, .anim-page .system-row label,
.anim-page .resource-detail-panel p, .anim-page .resource-detail-panel li, .anim-page .resource-detail-panel small, .anim-page .resource-detail-panel label { color: #c3c7cf; }

/* Form fields readable on the dark glass */
.anim-page input, .anim-page textarea, .anim-page select {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
.anim-page input::placeholder, .anim-page textarea::placeholder { color: #9aa0a8; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-page [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ag-glow, .ag-ring, .ag-dot, .ag-orbs, .ag-aurora, .ag-grid, .ag-beam { display: none !important; }
  @media (pointer: fine) { .anim-page, .anim-page * { cursor: auto; } }
}