/*
 * IsleIQ reusable background system.
 */

.iq-bg-page {
  background: var(--iq-bg-page);
}

.iq-bg-white {
  background: var(--iq-white);
}

.iq-bg-soft {
  background:
    linear-gradient(180deg, rgba(46, 196, 182, 0.08), transparent 34rem),
    var(--iq-bg-soft);
}

.iq-bg-dark {
  background:
    linear-gradient(135deg, rgba(13, 92, 99, 0.42), transparent 58%),
    var(--iq-navy);
}

.iq-bg-deep {
  background:
    linear-gradient(135deg, rgba(46, 196, 182, 0.18), transparent 42%),
    linear-gradient(180deg, var(--iq-navy), var(--iq-navy-900));
}

.iq-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(13, 92, 99, 0.88) 0%, rgba(13, 33, 55, 0.95) 55%, rgba(7, 21, 34, 1) 100%);
}

.iq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-position: center;
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 86%, transparent);
}

.iq-hero::after {
  content: var(--iq-ghost-word, "ISLEIQ");
  position: absolute;
  right: max(-1rem, -2vw);
  bottom: -0.18em;
  z-index: -1;
  color: rgba(255, 255, 255, 0.05);
  font-family: var(--iq-font-display);
  font-size: clamp(5.5rem, 18vw, 15rem);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.iq-hero--prompt {
  background:
    linear-gradient(135deg, rgba(46, 196, 182, 0.28), transparent 36%),
    linear-gradient(135deg, var(--iq-navy) 0%, var(--iq-teal-900) 100%);
}

.iq-hero--amber {
  background:
    linear-gradient(135deg, rgba(244, 162, 97, 0.28), transparent 40%),
    linear-gradient(135deg, var(--iq-navy-900), var(--iq-navy));
}

.iq-section-light {
  position: relative;
  background: var(--iq-slate-050);
}

.iq-section-light::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13, 92, 99, 0.2), transparent);
}

.iq-section-white {
  background: var(--iq-white);
}

.iq-section-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(46, 196, 182, 0.16), transparent 40%),
    var(--iq-navy);
}

.iq-section-dark::after {
  content: "";
  position: absolute;
  inset: auto -8rem -12rem auto;
  z-index: -1;
  width: 24rem;
  height: 24rem;
  border: 1px solid rgba(46, 196, 182, 0.22);
  border-radius: 50%;
}

.iq-band {
  background: var(--iq-teal);
  color: var(--iq-white);
}

.iq-band--mint {
  background: var(--iq-mint);
  color: var(--iq-navy);
}

.iq-cta-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(244, 162, 97, 0.18), transparent 58%),
    linear-gradient(135deg, var(--iq-navy), var(--iq-teal-900));
}

.iq-cta-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--iq-amber) 0 4px, transparent 4px);
  opacity: 0.95;
}

.iq-photo-overlay {
  position: relative;
  isolation: isolate;
}

.iq-photo-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(13, 33, 55, 0.82), rgba(13, 92, 99, 0.72)),
    linear-gradient(0deg, rgba(7, 21, 34, 0.5), rgba(7, 21, 34, 0.5));
}

.iq-photo-overlay > * {
  position: relative;
  z-index: 1;
}

.iq-video-stage {
  background:
    linear-gradient(180deg, #06111d 0%, var(--iq-navy-900) 100%);
}

.iq-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--iq-border-strong), transparent);
}

.iq-divider--amber {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--iq-amber), transparent);
}