/* =============================================================================
   Craft Blocks — Hero - Animated Backgrounds
   ============================================================================= */

.cb-hero-ab {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #08070e;
  padding: clamp(2rem, 5vw, 6rem) clamp(1.5rem, 4vw, 2rem);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -------------------------------------------------------
   Default gradient orbs (::before top-left, ::after bottom-right)
   Both are shared by several modes. CSS [data-cb-bg] selectors
   below tune or suppress them per mode.
   ------------------------------------------------------- */
.cb-hero-ab::before,
.cb-hero-ab::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

.cb-hero-ab::before {
  width: 700px; height: 700px;
  background: radial-gradient(circle at center, #4d96ff 0%, #c77dff 60%, transparent 100%);
  top: -250px; left: -200px;
  opacity: 0.18;
  animation: cb-hero-ab-orb-a 14s ease-in-out infinite alternate;
}

.cb-hero-ab::after {
  width: 600px; height: 600px;
  background: radial-gradient(circle at center, #ff6b6b 0%, #ffd93d 60%, transparent 100%);
  bottom: -200px; right: -150px;
  opacity: 0.18;
  animation: cb-hero-ab-orb-b 11s ease-in-out infinite alternate;
}

@keyframes cb-hero-ab-orb-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(120px, 80px) scale(1.25); }
}

@keyframes cb-hero-ab-orb-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-90px, -70px) scale(1.2); }
}

/* -------------------------------------------------------
   Canvas element (injected by JS for canvas-based modes)
   ------------------------------------------------------- */
.cb-hero-ab__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------------------------------
   Generic extra CSS layer element (.cb-hero-ab__layer)
   Hidden by default; CSS-only background modes show it.
   ------------------------------------------------------- */
.cb-hero-ab__layer {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------------------------------
   Content
   ------------------------------------------------------- */
.cb-hero-ab__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 860px;
  width: 100%;
}

/* -------------------------------------------------------
   Heading
   ------------------------------------------------------- */
.cb-hero-ab__heading {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;

  background: linear-gradient(135deg, #ffffff 0%, #c77dff 45%, #4d96ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  clip-path: inset(0 100% 0 0 round 4px);
}

.cb-hero-ab--visible .cb-hero-ab__heading {
  animation: cb-hero-ab-wipe 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-delay: 0.05s;
}

@keyframes cb-hero-ab-wipe {
  to { clip-path: inset(0 0% 0 0 round 4px); }
}

/* -------------------------------------------------------
   Subheading
   ------------------------------------------------------- */
.cb-hero-ab__subheading {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  letter-spacing: 0.01em;
}

.cb-hero-ab__subheading span {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px) rotate(3deg);
  will-change: opacity, transform;
}

.cb-hero-ab--visible .cb-hero-ab__subheading span {
  animation: cb-hero-ab-letter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(600ms + var(--i, 0) * 28ms);
}

@keyframes cb-hero-ab-letter {
  0%   { opacity: 0; transform: translateY(28px) rotate(3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* -------------------------------------------------------
   Shimmer line beneath the heading (decorative)
   ------------------------------------------------------- */
.cb-hero-ab__shimmer {
  display: block;
  width: 0;
  height: 2px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(90deg, #4d96ff, #c77dff, #ff6b6b);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
}

.cb-hero-ab--visible .cb-hero-ab__shimmer {
  width: 120px;
}


/* =============================================================================
   Background mode overrides
   [data-cb-bg="…"] sets the orb visibility and activates the __layer element.
   Canvas modes (particles, stars, fireflies, etc.) need no CSS here — JS
   creates the <canvas> and CSS-only modes control __layer.
   ============================================================================= */

/* -------------------------------------------------------
   gradient-drift — orbs only, boosted
   ------------------------------------------------------- */
[data-cb-bg="gradient-drift"] .cb-hero-ab::before,
[data-cb-bg="gradient-drift"] .cb-hero-ab::after {
  opacity: 0.28;
}

/* -------------------------------------------------------
   aurora
   ------------------------------------------------------- */
[data-cb-bg="aurora"] .cb-hero-ab__layer {
  display: block;
  inset: -20%;
  background:
    radial-gradient(ellipse 70% 55% at 22% 30%, rgba(99, 102, 241, 0.55), transparent 55%),
    radial-gradient(ellipse 55% 70% at 80% 55%, rgba(192, 38, 211, 0.45), transparent 50%),
    radial-gradient(ellipse 65% 45% at 50% 95%, rgba(34, 211, 238, 0.38), transparent 55%),
    radial-gradient(ellipse 50% 40% at 62% 12%, rgba(236, 72, 153, 0.28), transparent 50%);
  filter: blur(52px);
  animation: cb-hero-ab-aurora-shift 14s ease-in-out infinite alternate;
}

@keyframes cb-hero-ab-aurora-shift {
  0%   { transform: translate(-4%, -2%) rotate(0deg) scale(1); }
  100% { transform: translate(4%, 3%) rotate(5deg) scale(1.07); }
}

[data-cb-bg="aurora"] .cb-hero-ab::before,
[data-cb-bg="aurora"] .cb-hero-ab::after { opacity: 0.07; }

/* -------------------------------------------------------
   stars — darken orbs for better contrast
   ------------------------------------------------------- */
[data-cb-bg="stars"] .cb-hero-ab::before,
[data-cb-bg="stars"] .cb-hero-ab::after { opacity: 0.09; }

/* -------------------------------------------------------
   minimal — near-static, one soft bottom glow
   ------------------------------------------------------- */
[data-cb-bg="minimal"] {
  background:
    radial-gradient(ellipse 120% 70% at 50% 105%, rgba(77, 150, 255, 0.1), transparent 55%),
    #08070e;
}
[data-cb-bg="minimal"] .cb-hero-ab::before,
[data-cb-bg="minimal"] .cb-hero-ab::after {
  opacity: 0.05; animation: none; filter: blur(80px);
}

/* -------------------------------------------------------
   neon-grid — scrolling perspective grid
   ------------------------------------------------------- */
[data-cb-bg="neon-grid"] .cb-hero-ab__layer {
  display: block;
  inset: 0;
}

[data-cb-bg="neon-grid"] .cb-hero-ab__layer::before {
  content: '';
  position: absolute;
  width: 200%; height: 200%;
  top: -20%; left: -50%;
  background-image:
    linear-gradient(rgba(77, 150, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 150, 255, 0.18) 1px, transparent 1px);
  background-size: 55px 55px;
  transform: perspective(600px) rotateX(25deg);
  transform-origin: 50% 0%;
  animation: cb-hero-ab-grid-scroll 5s linear infinite;
}

/* Extra neon horizontal streak */
[data-cb-bg="neon-grid"] .cb-hero-ab__layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 12% at 50% 60%, rgba(77, 150, 255, 0.22), transparent 65%);
  pointer-events: none;
}

@keyframes cb-hero-ab-grid-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 55px; }
}

[data-cb-bg="neon-grid"] .cb-hero-ab::before {
  background: radial-gradient(circle at center, #4d96ff 0%, #00f5ff 60%, transparent 100%);
  opacity: 0.12;
}
[data-cb-bg="neon-grid"] .cb-hero-ab::after {
  background: radial-gradient(circle at center, #c77dff 0%, #4d96ff 60%, transparent 100%);
  opacity: 0.10;
}

/* -------------------------------------------------------
   plasma — rotating colour fields with hue cycling
   ------------------------------------------------------- */
[data-cb-bg="plasma"] .cb-hero-ab__layer {
  display: block;
  inset: -15%;
  background:
    radial-gradient(ellipse 62% 52% at 28% 45%, rgba(255, 0, 130, 0.55), transparent 58%),
    radial-gradient(ellipse 52% 62% at 72% 52%, rgba(0, 120, 255, 0.45), transparent 60%),
    radial-gradient(ellipse 70% 42% at 50% 18%, rgba(140, 0, 255, 0.40), transparent 58%),
    radial-gradient(ellipse 42% 70% at 50% 82%, rgba(0, 240, 180, 0.35), transparent 60%);
  filter: blur(32px) saturate(1.8);
  animation:
    cb-hero-ab-plasma-shift 8s ease-in-out infinite alternate,
    cb-hero-ab-plasma-hue   14s linear infinite;
}

@keyframes cb-hero-ab-plasma-shift {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.12) rotate(14deg); }
}
@keyframes cb-hero-ab-plasma-hue {
  from { filter: blur(32px) saturate(1.8) hue-rotate(0deg); }
  to   { filter: blur(32px) saturate(1.8) hue-rotate(360deg); }
}

[data-cb-bg="plasma"] .cb-hero-ab::before,
[data-cb-bg="plasma"] .cb-hero-ab::after { opacity: 0; }

/* -------------------------------------------------------
   sunset — warm amber / rose / deep purple
   ------------------------------------------------------- */
[data-cb-bg="sunset"] {
  background: linear-gradient(168deg, #0d0818 0%, #1c0a2e 28%, #40104c 52%, #7b2d45 74%, #c85c38 90%, #f4a058 100%);
}

[data-cb-bg="sunset"] .cb-hero-ab__layer {
  display: block;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 55% at 50% 105%, rgba(255, 110, 45, 0.42), transparent 55%),
    radial-gradient(ellipse 65% 42% at 18% 68%,  rgba(180, 48, 110, 0.30), transparent 55%),
    radial-gradient(ellipse 55% 38% at 82% 35%,  rgba(255, 170, 80, 0.20), transparent 55%);
  filter: blur(42px);
  animation: cb-hero-ab-sunset-pulse 9s ease-in-out infinite alternate;
}

@keyframes cb-hero-ab-sunset-pulse {
  0%   { opacity: 0.75; transform: scale(1); }
  100% { opacity: 1;    transform: scale(1.04) translateY(-1.5%); }
}

[data-cb-bg="sunset"] .cb-hero-ab::before,
[data-cb-bg="sunset"] .cb-hero-ab::after { opacity: 0; }

/* -------------------------------------------------------
   void — near-black with single deep breathing core
   ------------------------------------------------------- */
[data-cb-bg="void"] { background: #020108; }

[data-cb-bg="void"] .cb-hero-ab__layer {
  display: block;
  inset: 0;
  background: radial-gradient(ellipse 55% 38% at 50% 50%, rgba(80, 15, 155, 0.65), rgba(25, 5, 55, 0.45) 50%, transparent 70%);
  filter: blur(55px);
  animation: cb-hero-ab-void-breathe 7s ease-in-out infinite alternate;
}

@keyframes cb-hero-ab-void-breathe {
  0%   { transform: scale(1);    opacity: 0.65; }
  100% { transform: scale(1.18); opacity: 1; }
}

[data-cb-bg="void"] .cb-hero-ab::before { opacity: 0.06; animation: none; filter: blur(90px); }
[data-cb-bg="void"] .cb-hero-ab::after  { opacity: 0.04; animation: none; filter: blur(90px); }

/* -------------------------------------------------------
   nebula — suppressed orbs (JS handles canvas)
   ------------------------------------------------------- */
[data-cb-bg="nebula"] .cb-hero-ab::before,
[data-cb-bg="nebula"] .cb-hero-ab::after { opacity: 0; }

/* -------------------------------------------------------
   sandstorm — warm dark base, orbs suppressed
   ------------------------------------------------------- */
[data-cb-bg="sandstorm"] { background: #08050a; }
[data-cb-bg="sandstorm"] .cb-hero-ab::before,
[data-cb-bg="sandstorm"] .cb-hero-ab::after { opacity: 0; }

/* -------------------------------------------------------
   waves, bubbles, rain, fireflies, constellation, vortex
   — dim orbs so canvas is clear centre-stage
   ------------------------------------------------------- */
[data-cb-bg="waves"] .cb-hero-ab::before,
[data-cb-bg="waves"] .cb-hero-ab::after,
[data-cb-bg="bubbles"] .cb-hero-ab::before,
[data-cb-bg="bubbles"] .cb-hero-ab::after,
[data-cb-bg="rain"] .cb-hero-ab::before,
[data-cb-bg="rain"] .cb-hero-ab::after,
[data-cb-bg="fireflies"] .cb-hero-ab::before,
[data-cb-bg="fireflies"] .cb-hero-ab::after { opacity: 0.07; }

[data-cb-bg="constellation"] .cb-hero-ab::before,
[data-cb-bg="constellation"] .cb-hero-ab::after { opacity: 0.1; }

[data-cb-bg="vortex"] .cb-hero-ab::before,
[data-cb-bg="vortex"] .cb-hero-ab::after { opacity: 0; }

/* =============================================================================
   Narrow viewports — tighter insets, smaller orbs, readable type floor
   ============================================================================= */

@media (max-width: 40rem) {
  .cb-hero-ab {
    padding: clamp(1.5rem, 6vw, 2.5rem) 1.15rem;
  }

  .cb-hero-ab__heading {
    font-size: clamp(2rem, 10vw + 0.5rem, 3.25rem);
  }

  .cb-hero-ab__subheading {
    font-size: clamp(0.95rem, 4vw, 1.2rem);
  }

  .cb-hero-ab::before {
    width: min(120vw, 420px);
    height: min(120vw, 420px);
    top: -180px;
    left: -45%;
  }

  .cb-hero-ab::after {
    width: min(110vw, 380px);
    height: min(110vw, 380px);
    bottom: -160px;
    right: -40%;
  }
}