/* Sized by its OWN width, never by the viewport. Forensic build-bf6d5ac92d2c
   (2026-08-23): the band was authored full-bleed but placed in the right half
   of a hero, where `7vw` still resolved against a 1280px viewport — a 90px
   headline inside a 488px content box wrapped to three lines and was cut off by
   `overflow: hidden`. `container-type` + `cqw` make every internal size follow
   the element, so the same markup is correct full-bleed and in a column. */
.masterica-wow {
  --wow-profile-color: #2563eb;
  --wow-profile-accent: #14b8a6;
  --wow-color: var(--color-primary, var(--primary, var(--wow-profile-color)));
  --wow-accent: var(--color-accent, var(--accent, var(--wow-profile-accent)));
  --wow-font-display: var(--font-display, inherit);
  --wow-ink: CanvasText;
  position: relative;
  display: grid;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  /* The band height lives on the content block, not here: an `aspect-ratio`
     next to a `min-height` transfers through the ratio into a minimum WIDTH
     (360px × 16/9 = 640px) and floors any grid or flex track the band sits in.
     A `cqw` clamp one level down measures the same container and carries no
     transferred size. */
  min-height: 360px;
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 40px);
  isolation: isolate;
  background: #f5f5f4;
  background:
    radial-gradient(circle at 28% 18%, color-mix(in oklch, var(--wow-color) 24%, transparent), transparent 42%),
    color-mix(in oklch, Canvas 96%, var(--wow-color));
  color: var(--wow-ink);
}

.masterica-wow[data-wow-surface="dark"] {
  --wow-ink: #f8fafc;
  color-scheme: dark;
  background:
    radial-gradient(circle at 28% 18%, color-mix(in oklch, var(--wow-color) 28%, transparent), transparent 42%),
    color-mix(in oklch, #06080f 92%, var(--wow-color));
}

.masterica-wow[data-wow-surface="light"] {
  color-scheme: light;
}

.masterica-wow[data-wow-surface="adaptive"] {
  color-scheme: light dark;
}

.masterica-wow[data-masterica-wow="atmospheric-landscape"] {
  background:
    radial-gradient(circle at 72% 18%, color-mix(in oklch, var(--wow-accent) 34%, white), transparent 20%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--wow-color) 30%, #0b1020) 0%,
      color-mix(in oklch, var(--wow-accent) 18%, #111827) 58%,
      #070a12 100%
    );
}

.masterica-wow[data-masterica-wow="atmospheric-landscape"][data-wow-surface="light"] {
  background:
    radial-gradient(circle at 72% 18%, color-mix(in oklch, var(--wow-accent) 42%, white), transparent 21%),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--wow-color) 18%, #f8fafc) 0%,
      color-mix(in oklch, var(--wow-accent) 16%, #dbeafe) 58%,
      color-mix(in oklch, var(--wow-color) 22%, #172033) 100%
    );
}

.masterica-wow:is(
  [data-masterica-wow="enchanted-forest"],
  [data-masterica-wow="alpine-mist"],
  [data-masterica-wow="underwater-flow"],
  [data-masterica-wow="cosmic-nebula"],
  [data-masterica-wow="urban-night"],
  [data-masterica-wow="craft-paper"],
  [data-masterica-wow="pet-playground"],
  [data-masterica-wow="botanical-luxury"],
  [data-masterica-wow="culinary-steam"],
  [data-masterica-wow="tech-circuit"],
  [data-masterica-wow="energy-sport"],
  [data-masterica-wow="dream-clouds"]
) {
  background:
    radial-gradient(circle at 78% 18%, color-mix(in oklch, var(--wow-accent) 28%, transparent), transparent 34%),
    radial-gradient(circle at 14% 82%, color-mix(in oklch, var(--wow-color) 22%, transparent), transparent 42%),
    color-mix(in oklch, Canvas 94%, var(--wow-color));
}

.masterica-wow:is(
  [data-masterica-wow="cosmic-nebula"],
  [data-masterica-wow="urban-night"],
  [data-masterica-wow="tech-circuit"],
  [data-masterica-wow="energy-sport"]
):not([data-wow-surface="light"]) {
  background:
    radial-gradient(circle at 70% 20%, color-mix(in oklch, var(--wow-accent) 30%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in oklch, #050713 88%, var(--wow-color)), #02030a);
}

.masterica-wow:is(
  [data-masterica-wow="enchanted-forest"],
  [data-masterica-wow="botanical-luxury"],
  [data-masterica-wow="pet-playground"]
) {
  background:
    radial-gradient(circle at 72% 12%, color-mix(in oklch, #fff7c2 44%, transparent), transparent 30%),
    linear-gradient(145deg, color-mix(in oklch, Canvas 88%, var(--wow-color)), color-mix(in oklch, Canvas 94%, var(--wow-accent)));
}

.masterica-wow:is(
  [data-masterica-wow="underwater-flow"],
  [data-masterica-wow="alpine-mist"],
  [data-masterica-wow="dream-clouds"]
) {
  background:
    radial-gradient(circle at 76% 18%, color-mix(in oklch, white 48%, var(--wow-accent)), transparent 28%),
    linear-gradient(180deg, color-mix(in oklch, Canvas 88%, var(--wow-accent)), color-mix(in oklch, Canvas 92%, var(--wow-color)));
}

.masterica-wow:is(
  [data-masterica-wow="craft-paper"],
  [data-masterica-wow="culinary-steam"]
) {
  background:
    radial-gradient(circle at 72% 18%, color-mix(in oklch, #fff4dc 48%, var(--wow-accent)), transparent 32%),
    color-mix(in oklch, #f4eadb 90%, var(--wow-color));
}

/* The template section is the only geometry owner. WOW paints the atmosphere
   behind the whole section; ordinary HTML and product imagery stay together in
   a normal-flow foreground. Never hide the canvas under an opaque full-cover
   photo — build-67a371995787 proved that geometry can pass while WOW is
   literally invisible. */
[data-signature-slot] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.masterica-wow[data-masterica-wow-mode="section-backdrop"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: inherit;
  z-index: 0;
}

[data-signature-slot]:has(> [data-masterica-wow][data-masterica-wow-mode="section-backdrop"])
  > [data-wow-overlay] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

[data-signature-slot]:has(> [data-masterica-wow][data-masterica-wow-mode="section-backdrop"])
  > [data-wow-foreground] {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.masterica-wow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--wow-color) 20%, transparent));
}

.masterica-wow[data-wow-pattern]:not([data-wow-pattern="none"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--wow-pattern-opacity, 0.24);
  -webkit-mask-image: linear-gradient(135deg, black, transparent 88%);
  mask-image: linear-gradient(135deg, black, transparent 88%);
}

.masterica-wow[data-wow-pattern="grid"]::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--wow-accent) 52%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--wow-accent) 52%, transparent) 1px, transparent 1px);
  background-size: clamp(28px, 4cqw, 54px) clamp(28px, 4cqw, 54px);
}

.masterica-wow[data-wow-pattern="dots"]::before {
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--wow-accent) 72%, transparent) 1.4px,
    transparent 1.8px
  );
  background-size: clamp(18px, 2.8cqw, 34px) clamp(18px, 2.8cqw, 34px);
}

.masterica-wow[data-wow-pattern="rings"]::before {
  background-image: repeating-radial-gradient(
    circle at 72% 34%,
    color-mix(in srgb, var(--wow-accent) 48%, transparent) 0 1px,
    transparent 1px clamp(18px, 3.4cqw, 42px)
  );
}

.masterica-wow[data-wow-pattern="waves"]::before {
  background-image: repeating-radial-gradient(
    ellipse at 18% 110%,
    transparent 0 clamp(16px, 2.8cqw, 34px),
    color-mix(in srgb, var(--wow-color) 56%, transparent) calc(clamp(16px, 2.8cqw, 34px) + 1px)
      calc(clamp(16px, 2.8cqw, 34px) + 2px)
  );
}

.masterica-wow canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: var(--wow-depth-filter, none);
  opacity: var(--wow-depth-opacity, 1);
  pointer-events: none;
}

.masterica-wow__content {
  position: relative;
  z-index: 3;
  display: flex;
  grid-area: 1 / 1;
  min-height: clamp(360px, 56cqw, 680px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(24px, 6cqw, 76px);
  color: var(--wow-ink);
}

.masterica-wow__eyebrow {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--wow-accent) 78%, white);
  font: 600 0.75rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masterica-wow__title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--wow-font-display);
  font-size: clamp(2rem, 7cqw, 6.8rem);
  font-weight: 650;
  line-height: 0.94;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.masterica-wow__lede {
  max-width: 52ch;
  margin: 20px 0 0;
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-family: inherit;
  font-size: clamp(1rem, 1.6cqw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
}

.masterica-wow[data-masterica-wow="gallery-heading"] .masterica-wow__content {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.masterica-wow[data-masterica-wow="gallery-heading"] .masterica-wow__title {
  max-width: 16ch;
}

.masterica-wow[data-masterica-wow="performance-gauges"] {
  min-height: auto;
  padding: clamp(22px, 4%, 48px);
}

.masterica-wow__gauges {
  position: relative;
  z-index: 3;
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.5cqw, 28px);
}

.masterica-wow__gauge {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.1), transparent 24%),
    repeating-conic-gradient(from -130deg, rgba(255, 255, 255, 0.42) 0 1deg, transparent 1deg 8deg),
    radial-gradient(circle, #141722 0 48%, #07080d 49% 67%, #20232d 68% 71%, #08090e 72%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), 0 18px 40px rgba(0, 0, 0, 0.35);
}

.masterica-wow__gauge::before {
  content: "";
  position: absolute;
  width: 3.4%;
  height: 34%;
  bottom: 50%;
  left: 48.3%;
  border-radius: 999px;
  background: linear-gradient(var(--wow-accent), #f8fafc);
  box-shadow: 0 0 16px color-mix(in srgb, var(--wow-accent) 68%, transparent);
  transform: rotate(calc(-132deg + var(--gauge-value) * 2.64deg));
  transform-origin: 50% 100%;
  transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.masterica-wow__gauge::after {
  content: "";
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9ca3af, #111318 65%);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.75);
}

.masterica-wow__gauge-value {
  margin-top: 34%;
  color: #f8fafc;
  font: 650 clamp(1rem, 3.2cqw, 2.5rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.masterica-wow__gauge-label {
  position: absolute;
  bottom: 18%;
  color: rgba(226, 232, 240, 0.62);
  font-family: inherit;
  font-size: clamp(0.58rem, 1.2cqw, 0.78rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Container-scoped, so a band narrowed by its column stacks the gauges exactly
   like a band narrowed by a phone. The radius stays a viewport rule: it is a
   page-level style choice, not a function of the band's own width. */
@container (max-width: 640px) {
  .masterica-wow__gauges {
    grid-template-columns: 1fr;
  }

  .masterica-wow__gauge {
    max-width: 280px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .masterica-wow {
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .masterica-wow__gauge::before {
    transition: none;
  }
}