/* ===========================================================
   AUREMIX — Animations & Motion Graphics
   =========================================================== */

/* ===========================================================
   1. KEYFRAMES
   =========================================================== */

/* Fade + slide up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade + slide in from left */
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade + slide in from right */
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Gentle floating */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Pulse glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(87, 229, 211, 0); }
  50%      { box-shadow: 0 0 24px 6px rgba(87, 229, 211, 0.15); }
}

/* Shimmer sweep for cards */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Typing cursor blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Rotating orbit (for decorative use) */
@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Gradient shift */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle breathing scale */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* Counter dot pulse */
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1); }
}

/* ===========================================================
   2. SCROLL REVEAL CLASSES (driven by Intersection Observer)
   =========================================================== */

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Direction variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stagger-children.revealed > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 0.1s;  }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 0.2s;  }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 0.3s;  }
.stagger-children.revealed > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.revealed > *:nth-child(8) { transition-delay: 0.4s;  }

.stagger-children.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================
   3. HEADER SCROLL STATE
   =========================================================== */

.site-header.scrolled {
  background: rgba(0, 26, 29, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.site-header.scrolled .logo img {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}

/* ===========================================================
   4. LOAD-IN ANIMATIONS (page load, no scroll needed)
   =========================================================== */

/* Hero content load-in */
.hero .eyebrow,
.about-hero .eyebrow,
.page-hero .eyebrow,
.contact-info .eyebrow {
  animation: fadeUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
}

.hero-heading,
.about-hero h1,
.page-hero h1,
.contact-info h1 {
  animation: fadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

.hero-copy,
.about-hero-copy,
.services-intro-copy,
.page-hero p,
.contact-info > p {
  animation: fadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s both;
}

.hero-btns,
.about-checklist {
  animation: fadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

.hero-badges {
  animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.75s both;
}

/* Hero background subtle scale-in */
.hero-bg-photo,
.about-hero-bg-photo {
  animation: scaleIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

/* ===========================================================
   5. HOVER ENHANCEMENTS
   =========================================================== */

/* Card hover with glow */
.card,
.work-card,
.service-card-lg,
.narrative-card,
.tech-card,
.service-offer-item,
.faq-item {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.card:hover,
.work-card:hover,
.service-card-lg:hover,
.tech-card:hover {
  box-shadow: 0 8px 32px rgba(87, 229, 211, 0.08);
  border-color: rgba(87, 229, 211, 0.35);
}

/* Icon badge hover */
.icon-badge {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.35s ease;
}

.card:hover .icon-badge,
.service-card-lg:hover .icon-badge,
.narrative-card:hover .icon-badge {
  transform: scale(1.08);
  background: rgba(87, 229, 211, 0.14);
}

/* SVG icon spin on card hover */
.card:hover .icon-badge svg,
.service-card-lg:hover .icon-badge svg,
.service-offer-item:hover svg {
  animation: float 2s ease-in-out infinite;
}

/* Button hover with glow */
.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(87, 229, 211, 0.25);
  transform: translateY(-2px);
}

.btn-outline:hover {
  box-shadow: 0 4px 20px rgba(87, 229, 211, 0.1);
}

/* Link arrow extra animation */
.link-arrow:hover svg {
  animation: none;
}

/* ===========================================================
   6. WORK CARD IMAGE HOVER
   =========================================================== */

.work-thumb img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.5s ease;
}

.work-card:hover .work-thumb img {
  transform: scale(1.06);
  filter: brightness(1.1);
}

/* Work tag hover */
.work-tag {
  transition: background 0.3s ease, transform 0.3s ease;
}

.work-card:hover .work-tag {
  background: rgba(87, 229, 211, 0.2);
  backdrop-filter: blur(6px);
}

/* ===========================================================
   7. CTA BANNER ENHANCEMENTS
   =========================================================== */

.cta-banner {
  transition: box-shadow 0.5s ease;
}

.cta-banner:hover {
  box-shadow: 0 8px 40px rgba(87, 229, 211, 0.06);
}

/* CTA banner image — kept static as per user request */

/* ===========================================================
   8. NAV LINK HOVER ANIMATION
   =========================================================== */

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-links a.active::after {
  transform: scaleX(1);
}

/* ===========================================================
   9. TECH STRIP SCROLLING MARQUEE
   =========================================================== */

.tech-strip-inner {
  overflow: hidden;
  position: relative;
}

.tech-strip-inner::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--bg));
  pointer-events: none;
  z-index: 1;
}

.tech-strip-inner > * {
  flex-shrink: 0;
}

/* ===========================================================
   10. COUNTER NUMBER ANIMATION
   =========================================================== */

.stat-item .num {
  display: inline-block;
  transition: opacity 0.3s ease;
}

/* ===========================================================
   11. FLOATING DECORATIVE ELEMENTS
   =========================================================== */

.hero-visual {
  position: relative;
}

.hero-visual::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 229, 211, 0.06) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulseGlow 4s ease-in-out infinite;
  pointer-events: none;
}

/* ===========================================================
   12. MOBILE NAV OPEN ANIMATION
   =========================================================== */

.nav-links.nav-open {
  animation: fadeUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Hamburger to X animation */
.nav-toggle span {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===========================================================
   13. ABOUT PAGE SPECIFIC
   =========================================================== */

/* Founder quote mark entrance */
.founder-quote-mark {
  animation: fadeRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ===========================================================
   14. PAGE HERO DECORATIVE LINE
   =========================================================== */

.page-hero {
  position: relative;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(87, 229, 211, 0.15) 30%,
    rgba(87, 229, 211, 0.15) 70%,
    transparent 100%
  );
}

/* ===========================================================
   15. FORM INTERACTION ANIMATIONS
   =========================================================== */

.form-group input,
.form-group select,
.form-group textarea {
  transition: border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(87, 229, 211, 0.08);
  background: rgba(255, 255, 255, 0.07);
}

/* Submit button loading state */
.contact-form-panel .btn-primary:disabled {
  opacity: 0.7;
  transform: scale(0.98);
}

/* ===========================================================
   16. CUSTOM CURSOR — agency premium feel (desktop only)
   =========================================================== */

.custom-cursor {
  position: fixed;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(87, 229, 211, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.custom-cursor-dot {
  position: fixed;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.15s ease, height 0.15s ease;
}

.custom-cursor.hover-link {
  width: 48px;
  height: 48px;
  border-color: rgba(87, 229, 211, 0.7);
  background: rgba(87, 229, 211, 0.06);
}

.custom-cursor-dot.hover-link {
  width: 0;
  height: 0;
}

@media (hover: hover) and (pointer: fine) {
  body.custom-cursor-active,
  body.custom-cursor-active a,
  body.custom-cursor-active button,
  body.custom-cursor-active .btn,
  body.custom-cursor-active .link-arrow,
  body.custom-cursor-active .work-card,
  body.custom-cursor-active .service-card-lg,
  body.custom-cursor-active .nav-links a {
    cursor: none !important;
  }
}

/* 3D tilt base — cards get smooth 3D rotation on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .work-card,
  .service-card-lg,
  .service-offer-item,
  .tech-card {
    transition: transform 0.15s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
  }
}

/* ===========================================================
   17. CURTAIN LOAD ANIMATION
   =========================================================== */

.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  pointer-events: all;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1),
              opacity 0.3s ease;
}

.page-curtain.curtain-up {
  transform: translateY(-100%);
  pointer-events: none;
}

.page-curtain.curtain-up .curtain-logo {
  opacity: 0;
  transform: scale(0.9);
}

.curtain-logo {
  width: 80px;
  height: auto;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: curtainLogo 1.4s ease-in-out infinite alternate;
}

@keyframes curtainLogo {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.06); opacity: 1; }
}

/* Curtain loading bar */
.curtain-loader {
  margin-top: 24px;
  width: 120px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.curtain-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 4px;
  animation: curtainBar 0.7s ease-in-out forwards;
  transform-origin: left;
}

@keyframes curtainBar {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Delay hero load-ins until curtain is done */
body.curtain-done .hero .eyebrow,
body.curtain-done .about-hero .eyebrow,
body.curtain-done .page-hero .eyebrow,
body.curtain-done .contact-info .eyebrow,
body.curtain-done .hero-heading,
body.curtain-done .about-hero h1,
body.curtain-done .page-hero h1,
body.curtain-done .contact-info h1,
body.curtain-done .hero-copy,
body.curtain-done .about-hero-copy,
body.curtain-done .services-intro-copy,
body.curtain-done .page-hero p,
body.curtain-done .contact-info > p,
body.curtain-done .hero-btns,
body.curtain-done .about-checklist,
body.curtain-done .hero-badges,
body.curtain-done .hero-bg-photo,
body.curtain-done .about-hero-bg-photo {
  animation-play-state: running;
}

/* Before curtain is done, pause all hero load-in animations */
.hero .eyebrow,
.about-hero .eyebrow,
.page-hero .eyebrow,
.contact-info .eyebrow,
.hero-heading,
.about-hero h1,
.page-hero h1,
.contact-info h1,
.hero-copy,
.about-hero-copy,
.services-intro-copy,
.page-hero p,
.contact-info > p,
.hero-btns,
.about-checklist,
.hero-badges,
.hero-bg-photo,
.about-hero-bg-photo {
  animation-play-state: paused;
}

/* ===========================================================
   17. DECORATIVE BACKGROUND PATTERNS
   =========================================================== */

/* --- Floating Geometric Shapes (white/teal mix for visibility) --- */
.hero::before,
.about-hero::before,
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Shape 1 — Large floating diamond (white) */
.hero::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.015);
  top: 8%;
  right: 6%;
  z-index: 0;
  pointer-events: none;
  transform: rotate(45deg);
  animation: shapeFloat1 20s ease-in-out infinite;
}

.about-hero::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.015);
  top: 8%;
  right: 6%;
  z-index: 0;
  pointer-events: none;
  transform: rotate(45deg);
  animation: shapeFloat1 20s ease-in-out infinite;
}

@keyframes shapeFloat1 {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  25%      { transform: rotate(55deg) translate(25px, -35px); opacity: 1; }
  50%      { transform: rotate(40deg) translate(45px, 15px); opacity: 0.6; }
  75%      { transform: rotate(50deg) translate(10px, -25px); opacity: 0.9; }
}

/* Shape 2 — Large circle ring (white) */
.contact-hero::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.012);
  top: -8%;
  right: -5%;
  z-index: 0;
  pointer-events: none;
  animation: shapeFloat2 24s ease-in-out infinite;
}

@keyframes shapeFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  33%      { transform: translate(-35px, 45px) scale(1.1); opacity: 0.7; }
  66%      { transform: translate(25px, -25px) scale(0.92); opacity: 0.5; }
}

/* Shape 3 — Small diamond on left side (teal accent) */
.hero .container::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  border: 1.5px solid rgba(87, 229, 211, 0.1);
  border-radius: 10px;
  background: rgba(87, 229, 211, 0.02);
  bottom: 15%;
  left: 2%;
  z-index: 0;
  pointer-events: none;
  transform: rotate(60deg);
  animation: shapeFloat3 16s ease-in-out infinite;
}

@keyframes shapeFloat3 {
  0%, 100% { transform: rotate(60deg) translate(0, 0) scale(1); opacity: 0.4; }
  50%      { transform: rotate(80deg) translate(15px, -20px) scale(1.15); opacity: 0.8; }
}

/* Gradient Orbs — more visible */
.hero-grid::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 229, 211, 0.07) 0%, rgba(87, 229, 211, 0.02) 30%, transparent 65%);
  top: -15%;
  left: -10%;
  pointer-events: none;
  z-index: 0;
  animation: orbDrift1 14s ease-in-out infinite;
}

.about-hero .container::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 229, 211, 0.07) 0%, rgba(87, 229, 211, 0.02) 30%, transparent 65%);
  top: -15%;
  left: -10%;
  pointer-events: none;
  z-index: 0;
  animation: orbDrift1 14s ease-in-out infinite;
}

.page-hero .container::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 229, 211, 0.06) 0%, rgba(87, 229, 211, 0.015) 30%, transparent 60%);
  top: -25%;
  right: 0%;
  pointer-events: none;
  z-index: 0;
  animation: orbDrift2 16s ease-in-out infinite;
}

.contact-hero .contact-grid::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 229, 211, 0.06) 0%, rgba(87, 229, 211, 0.015) 30%, transparent 60%);
  top: -15%;
  right: 10%;
  pointer-events: none;
  z-index: 0;
  animation: orbDrift1 14s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(50px, -35px) scale(1.2); }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-25px, 45px) scale(1.15); }
  66%      { transform: translate(-45px, -15px) scale(0.92); }
}

/* Second orb + sparkle dots — accent-tinted white */
.hero-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* Orb glow */
    radial-gradient(circle 120px at 80% 70%, rgba(255, 255, 255, 0.04) 0%, transparent 200%),
    /* Sparkle dots */
    radial-gradient(2px 2px at 15% 25%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(2px 2px at 75% 15%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.04), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(255, 255, 255, 0.07), transparent),
    radial-gradient(1px 1px at 30% 85%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(1px 1px at 65% 45%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(1px 1px at 10% 50%, rgba(255, 255, 255, 0.04), transparent),
    radial-gradient(1px 1px at 55% 90%, rgba(255, 255, 255, 0.05), transparent),
    radial-gradient(1px 1px at 90% 35%, rgba(255, 255, 255, 0.03), transparent),
    radial-gradient(1px 1px at 45% 10%, rgba(255, 255, 255, 0.06), transparent);
  animation: orbDrift3 20s ease-in-out infinite;
}

@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50%      { transform: translate(-30px, 20px) scale(1.25); opacity: 0.7; }
}

/* ===========================================================
   18. ANIMATED BORDER SHIMMER ON CARDS
   =========================================================== */

.card::before,
.narrative-card::before,
.work-card::before,
.service-offer-item::before,
.tech-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(87, 229, 211, 0.05) 50%,
    transparent 70%
  );
  background-size: 250% 250%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.card,
.narrative-card,
.work-card,
.service-offer-item,
.tech-card {
  position: relative;
  overflow: hidden;
}

.card:hover::before,
.narrative-card:hover::before,
.work-card:hover::before,
.service-offer-item:hover::before,
.tech-card:hover::before {
  opacity: 1;
  animation: borderShimmer 1.8s ease-in-out infinite;
}

@keyframes borderShimmer {
  0%   { background-position: 100% 100%; }
  50%  { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ===========================================================
   19. ACCENT LINE SWEEP (section dividers)
   =========================================================== */

.section-pad::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(87, 229, 211, 0.12) 30%,
    rgba(87, 229, 211, 0.12) 70%,
    transparent
  );
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section-pad.revealed::before {
  width: 80%;
  max-width: 600px;
}

/* Fix for alt sections */
.section-pad.alt {
  position: relative;
}

/* Don't show line on first section or hero */
.section-pad:first-of-type::before {
  display: none;
}

/* ===========================================================
   20. SUBTLE NOISE TEXTURE OVERLAY
   =========================================================== */

.hero::before,
.about-hero::before,
.page-hero::before,
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  pointer-events: none;
  overflow: hidden;
  animation: noiseShift 0.5s steps(3) infinite;
}

@keyframes noiseShift {
  0%   { background-position: 0 0; }
  33%  { background-position: 5px -3px; }
  66%  { background-position: -3px 4px; }
  100% { background-position: 2px -2px; }
}

/* ===========================================================
   20. MOUSE PARALLAX SHIFT
   =========================================================== */

/* Mouse-driven depth parallax on hero content */
.hero .hero-grid,
.about-hero .container,
.page-hero .container,
.contact-hero .contact-grid {
  transition: transform 0.1s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .hero:hover .hero-grid,
  .page-hero:hover .container,
  .contact-hero:hover .contact-grid {
    transform:
      translate(
        calc(var(--mouse-x, 0) * 12px),
        calc(var(--mouse-y, 0) * 12px)
      );
  }
}

/* ===========================================================
   21. MORE FLOATING SHAPES — visible white/teal mix
   =========================================================== */

/* --- Floating Triangle on Hero (white, visible) --- */
.hero-visual::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 70px;
  background: rgba(255, 255, 255, 0.04);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  top: 15%;
  left: 10%;
  pointer-events: none;
  z-index: 0;
  animation: triFloat 14s ease-in-out infinite;
}

@keyframes triFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
  25%      { transform: translate(35px, -30px) rotate(12deg); opacity: 1; }
  50%      { transform: translate(10px, 25px) rotate(-6deg); opacity: 0.6; }
  75%      { transform: translate(-25px, -15px) rotate(8deg); opacity: 0.8; }
}

/* --- Many Mini Floating Squares on About/Hero Pages (white) --- */
.about-hero .container::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  bottom: 20%;
  left: 8%;
  pointer-events: none;
  z-index: 0;
  animation: squareFloat 16s ease-in-out infinite;
  box-shadow:
    80px -50px 0 -2px rgba(87, 229, 211, 0.08),
    -70px 90px 0 -2px rgba(255, 255, 255, 0.04),
    180px 0px 0 -3px rgba(87, 229, 211, 0.06),
    -120px -140px 0 -1px rgba(255, 255, 255, 0.03),
    100px -180px 0 -2px rgba(87, 229, 211, 0.05);
}

@keyframes squareFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.5; }
  33%      { transform: translate(30px, -25px) rotate(20deg) scale(1.15); opacity: 0.9; }
  66%      { transform: translate(-20px, 30px) rotate(-15deg) scale(0.9); opacity: 0.5; }
}

/* --- Floating Dot Particles on ALL Page Heroes (white) --- */
.page-hero .container::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  top: 25%;
  right: 20%;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    70px 90px 0 0 rgba(255, 255, 255, 0.12),
    -50px 140px 0 1px rgba(255, 255, 255, 0.08),
    120px -50px 0 0 rgba(255, 255, 255, 0.1),
    -100px -30px 0 2px rgba(87, 229, 211, 0.1),
    180px 50px 0 0 rgba(255, 255, 255, 0.08),
    25px -120px 0 1px rgba(87, 229, 211, 0.12),
    -200px -60px 0 0 rgba(255, 255, 255, 0.06),
    300px 30px 0 2px rgba(87, 229, 211, 0.07),
    -80px -200px 0 0 rgba(255, 255, 255, 0.05),
    220px -150px 0 1px rgba(255, 255, 255, 0.06);
  animation: dotCluster 25s linear infinite;
}

@keyframes dotCluster {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(25px, -20px) scale(1.2); }
  50%  { transform: translate(-15px, 25px) scale(0.8); }
  75%  { transform: translate(-30px, -15px) scale(1.15); }
  100% { transform: translate(0, 0) scale(1); }
}

/* --- Decorative Ring on Contact Page (white) --- */
.contact-hero .contact-grid::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.012);
  bottom: 8%;
  left: 3%;
  pointer-events: none;
  z-index: 0;
  animation: ringFloat 15s ease-in-out infinite;
  box-shadow:
    inset 0 0 0 15px rgba(255, 255, 255, 0.015),
    0 0 60px rgba(87, 229, 211, 0.03);
}

@keyframes ringFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  40%      { transform: translate(35px, -25px) scale(1.15); opacity: 0.7; }
  80%      { transform: translate(-25px, 15px) scale(0.9); opacity: 0.5; }
}


/* --- Triangle on section heroes (via hero-specific pages) --- */
/* (triangle shapes handled via ::before/after on other elements above) */

/* ===========================================================
   22. EYEBROW STYLES — clean, no gradient-clip
   =========================================================== */

/* Eyebrow uses original color: var(--accent) from style.css — no gradient
   clip that could hide the text. Keeping it clean and always visible. */

/* ===========================================================
   23. CTA BANNER EXTRA EFFECTS
   =========================================================== */

/* Floating shapes inside CTA — white, visible */
.cta-banner::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1.5px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.01);
  top: -30px;
  left: 12%;
  pointer-events: none;
  z-index: 0;
  animation: ctaShapeFloat 20s ease-in-out infinite;
  box-shadow:
    inset 0 0 40px rgba(87, 229, 211, 0.02),
    0 0 60px rgba(87, 229, 211, 0.02);
}

.cta-banner::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1.5px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  bottom: -15px;
  right: 28%;
  pointer-events: none;
  z-index: 0;
  transform: rotate(45deg);
  animation: ctaShapeFloat2 18s ease-in-out infinite reverse;
}

@keyframes ctaShapeFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  33%      { transform: translate(20px, 30px) scale(1.1); opacity: 0.6; }
  66%      { transform: translate(-20px, 10px) scale(0.9); opacity: 0.4; }
}

@keyframes ctaShapeFloat2 {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.2; }
  50%      { transform: rotate(65deg) translate(15px, -25px); opacity: 0.5; }
}

/* Subtle pulsing on the CTA button */
.cta-banner .btn-primary {
  animation: ctaBtnPulse 3s ease-in-out infinite;
}

.cta-banner .btn-primary:hover {
  animation: none;
  box-shadow: 0 4px 20px rgba(87, 229, 211, 0.25);
}

@keyframes ctaBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(87, 229, 211, 0); }
  50%      { box-shadow: 0 0 24px 8px rgba(87, 229, 211, 0.12); }
}

/* ===========================================================
   24. EXTRA DECORATIVE PATTERNS (visible mesh + grid)
   =========================================================== */

.section-head h2 {
  position: relative;
  display: block;
}

.section-eyebrow-block {
  display: flex;
  flex-direction: column;
}

/* Enhanced visible dot grid on alt section backgrounds - white dots */
.section-pad.alt::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Primary dot grid - visible white dots */
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* --- Diagonal hash grid pattern on primary sections --- */
.section-pad:not(.alt):not(.page-hero):not(.cta-section)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* Very fine diagonal lines - barely visible */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 30px,
      rgba(255, 255, 255, 0.012) 30px,
      rgba(255, 255, 255, 0.012) 31px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(255, 255, 255, 0.012) 30px,
      rgba(255, 255, 255, 0.012) 31px
    );
}

/* --- Animated Mesh Gradient on Work/Featured Section --- */
.section-pad.work-section,
.section-pad.alt {
  position: relative;
}

.section-pad.alt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Soft glowing orb in one corner */
    radial-gradient(ellipse 600px 400px at 10% 20%, rgba(87, 229, 211, 0.03) 0%, transparent 70%),
    radial-gradient(ellipse 400px 500px at 90% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 70%),
    /* Scattered dot cluster */
    radial-gradient(1px 1px at 20% 40%, rgba(255,255,255,0.08), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.06), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,0.05), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.07), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.04), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.06), transparent),
    radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.05), transparent),
    radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,0.07), transparent);
}

/* Make sure grid content is above the decorations */
.section-pad.alt .container,
.section-pad:not(.alt):not(.page-hero):not(.cta-section) .container {
  position: relative;
  z-index: 1;
}

/* ===========================================================
   26. PREMIUM AGENCY EFFECTS — mesh, glow, particles
   =========================================================== */

/* --- Animated mesh gradient overlay on hero (via hero-bg-overlay) --- */
.hero-bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Primary glow — teal */
    radial-gradient(ellipse 800px 500px at 20% 30%, rgba(87, 229, 211, 0.06) 0%, transparent 60%),
    /* Secondary glow — white */
    radial-gradient(ellipse 500px 600px at 80% 50%, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
    /* Tertiary glow — accent */
    radial-gradient(ellipse 400px 400px at 50% 80%, rgba(87, 229, 211, 0.03) 0%, transparent 50%);
  animation: meshGradient 12s ease-in-out infinite alternate;
}

@keyframes meshGradient {
  0% {
    background:
      radial-gradient(ellipse 800px 500px at 20% 30%, rgba(87, 229, 211, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 500px 600px at 80% 50%, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
      radial-gradient(ellipse 400px 400px at 50% 80%, rgba(87, 229, 211, 0.03) 0%, transparent 50%);
  }
  33% {
    background:
      radial-gradient(ellipse 600px 700px at 30% 40%, rgba(87, 229, 211, 0.07) 0%, transparent 55%),
      radial-gradient(ellipse 700px 400px at 60% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
      radial-gradient(ellipse 500px 500px at 40% 70%, rgba(87, 229, 211, 0.04) 0%, transparent 50%);
  }
  66% {
    background:
      radial-gradient(ellipse 500px 600px at 60% 30%, rgba(87, 229, 211, 0.05) 0%, transparent 50%),
      radial-gradient(ellipse 800px 500px at 30% 60%, rgba(255, 255, 255, 0.02) 0%, transparent 60%),
      radial-gradient(ellipse 400px 600px at 70% 70%, rgba(87, 229, 211, 0.06) 0%, transparent 50%);
  }
  100% {
    background:
      radial-gradient(ellipse 700px 500px at 40% 20%, rgba(87, 229, 211, 0.06) 0%, transparent 55%),
      radial-gradient(ellipse 500px 700px at 70% 60%, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
      radial-gradient(ellipse 600px 400px at 25% 75%, rgba(87, 229, 211, 0.04) 0%, transparent 50%);
  }
}

/* --- Animated glow underline on section headings --- */
.section-head h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
  animation: headingGlow 3s ease-in-out infinite;
}

@keyframes headingGlow {
  0%, 100% { width: 60px; opacity: 0.6; }
  50%      { width: 100px; opacity: 1; }
}

/* --- Floating particle field on hero using box-shadow (inside hero-grid content) --- */
.hero-badge {
  position: relative;
}

/* Floating dots via hero container box-shadow inset effect */
.hero-grid > div {
  position: relative;
}

/* --- Animated gradient border accent on feature/service cards --- */
.service-card-lg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), rgba(87, 229, 211, 0.3), transparent);
  background-size: 200% 100%;
  animation: cardBorderSweep 4s ease-in-out infinite;
}

@keyframes cardBorderSweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- Premium hover glow on primary buttons throughout site --- */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.btn-primary:hover::after {
  opacity: 1;
}

/* ===========================================================
   27. PAGE SCROLL PROGRESS BAR
   =========================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-hover));
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1001;
  pointer-events: none;
  will-change: transform;
}

/* ===========================================================
   28. IMAGE REVEAL ON SCROLL
   =========================================================== */

.work-thumb {
  overflow: hidden;
  position: relative;
}

.work-thumb img.img-reveal {
  clip-path: inset(0 0 100% 0);
  opacity: 0.6;
  transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.8s ease;
}

.work-thumb img.img-reveal.img-revealed {
  clip-path: inset(0);
  opacity: 1;
}

/* ===========================================================
   29. ANIMATED GRADIENT ON MAIN HEADING
   =========================================================== */

#rotating-word {
  background: linear-gradient(
    135deg,
    var(--white) 0%,
    var(--accent) 25%,
    #a0fff0 50%,
    var(--accent) 75%,
    var(--white) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: headingGradient 6s ease-in-out infinite;
}

@keyframes headingGradient {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 50% 100%; }
  75%  { background-position: 0% 50%; }
  100% { background-position: 50% 0%; }
}

/* Fallback: if bg-clip fails, show white text */
@supports not (background-clip: text) {
  #rotating-word {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--white);
  }
}

/* ===========================================================
   30. MARQUEE TECH STRIP
   =========================================================== */

.tech-strip-inner.marquee-active {
  display: flex;
  gap: 32px;
  width: fit-content;
  animation: marqueeScroll 30s linear infinite;
  padding-right: 32px;
}

.tech-strip-inner.marquee-active::after {
  display: none;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause on hover */
.tech-strip-inner.marquee-active:hover {
  animation-play-state: paused;
}

/* ===========================================================
   31. ANIMATED BACKGROUND SECTION NUMBERS
   =========================================================== */

.section-number {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(80px, 12vw, 160px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.015);
  top: -10px;
  right: 0;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  animation: sectionNumFloat 8s ease-in-out infinite;
}

@keyframes sectionNumFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
  50%      { transform: translateY(-10px) scale(1.02); opacity: 0.6; }
}

/* ===========================================================
   27. RESPECT REDUCED MOTION
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero .eyebrow,
  .hero-heading,
  .hero-copy,
  .hero-btns,
  .hero-badges,
  .hero-bg-photo,
  .about-hero-bg-photo,
  .about-hero .eyebrow,
  .about-hero h1,
  .about-hero-copy,
  .about-checklist,
  .page-hero .eyebrow,
  .page-hero h1,
  .page-hero p,
  .contact-info .eyebrow,
  .contact-info h1,
  .contact-info > p,
  .services-intro-copy,
  .founder-quote-mark,
  .hero .eyebrow,
  .about-hero .eyebrow,
  .page-hero .eyebrow,
  .contact-info .eyebrow,
  .hero-heading,
  .about-hero h1,
  .page-hero h1,
  .contact-info h1,
  .hero-copy,
  .about-hero-copy,
  .services-intro-copy,
  .page-hero p,
  .contact-info > p,
  .hero-btns,
  .about-checklist,
  .hero-badges,
  .hero-bg-photo,
  .about-hero-bg-photo {
    animation: none !important;
    animation-play-state: running !important;
    opacity: 1 !important;
  }

  .scroll-progress {
    display: none !important;
  }

  .work-thumb img.img-reveal {
    clip-path: none !important;
    opacity: 1 !important;
  }

  #rotating-word {
    background: none !important;
    -webkit-text-fill-color: unset !important;
    color: var(--white) !important;
    animation: none !important;
  }

  .tech-strip-inner.marquee-active {
    animation-play-state: paused !important;
  }

  .section-number {
    display: none !important;
  }

  .page-curtain {
    display: none !important;
  }

  .custom-cursor,
  .custom-cursor-dot {
    display: none !important;
  }

  body.custom-cursor-active,
  body.custom-cursor-active a,
  body.custom-cursor-active button {
    cursor: auto !important;
  }

  .work-card:hover .work-thumb img {
    transform: none !important;
  }

  .site-header.scrolled {
    background: var(--bg) !important;
    backdrop-filter: none !important;
  }

  .hero-visual::before,
  .hero-visual::after,
  .hero-grid::before,
  .hero-grid::after,
  .about-hero .container::before,
  .about-hero .container::after,
  .page-hero .container::before,
  .page-hero .container::after,
  .contact-hero .contact-grid::before,
  .contact-hero .contact-grid::after,
  .hero::after,
  .about-hero::after,
  .contact-hero::after,
  .hero::before,
  .about-hero::before,
  .page-hero::before,
  .contact-hero::before,
  .cta-banner::before,
  .cta-banner::after,
  .section-pad.alt::after,
  .section-pad.alt::before,
  .section-pad:not(.alt):not(.page-hero):not(.cta-section)::after,
  .hero-bg-overlay::after,
  .section-head h2::after,
  .service-card-lg::after {
    animation: none !important;
    box-shadow: none !important;
    background: none !important;
    display: none !important;
  }

  .card::before,
  .narrative-card::before,
  .work-card::before,
  .service-offer-item::before,
  .tech-card::before,
  .btn-primary::after {
    display: none !important;
  }

  .section-pad::before {
    display: none !important;
  }

  /* eyebrow — no animation to disable, uses style.css color */

  .cta-banner .btn-primary {
    animation: none !important;
  }
}