/* ============================================================
   Cruz QualityMed em "vidro vermelho 3D"
   TODAS as variáveis controláveis via JS (--gc-*).
   ============================================================ */

.gc-stage {
  --gc-size: 200px;
  --gc-tilt-x: -8deg;
  --gc-tilt-y: 14deg;
  --gc-tilt-z: 0deg;
  --gc-hue: 358;
  /* color & body */
  --gc-saturate: 1.2;
  --gc-brightness: 1.05;
  --gc-contrast: 1;
  /* drop shadow */
  --gc-shadow-y: 0.04;        /* fração de --gc-size */
  --gc-shadow-blur: 0.06;
  --gc-shadow-opacity: 0.55;
  --gc-shadow-y2: 0.10;
  --gc-shadow-blur2: 0.16;
  --gc-shadow-opacity2: 0.35;
  /* highlights */
  --gc-shine-top: 0.75;       /* opacidade clarão topo */
  --gc-shine-edge: 0.85;      /* opacidade reflexo diagonal */
  --gc-edge-angle: 115deg;
  /* inner shadow */
  --gc-inner-shadow: 0.75;
  /* glow lateral */
  --gc-side-glow: 0.45;
  /* contorno (rim) */
  --gc-rim-width: 0px;
  --gc-rim-color: oklch(0.85 0.18 var(--gc-hue));
  /* glow ambiente atrás */
  --gc-aura: 0.35;
  /* cáustica chão */
  --gc-caustic: 0.45;
  /* modo: glass | solid | flat */
  --gc-mode-shine: 1;         /* multiplicador global das camadas vidradas */

  width: var(--gc-size);
  height: var(--gc-size);
  perspective: 900px;
  perspective-origin: 50% 40%;
  display: inline-block;
  position: relative;
}

.gc-stage .gc-shape {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--gc-tilt-x))
    rotateY(var(--gc-tilt-y))
    rotateZ(var(--gc-tilt-z));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  filter:
    drop-shadow(0 calc(var(--gc-size) * var(--gc-shadow-y)) calc(var(--gc-size) * var(--gc-shadow-blur)) oklch(0.35 0.22 var(--gc-hue) / var(--gc-shadow-opacity)))
    drop-shadow(0 calc(var(--gc-size) * var(--gc-shadow-y2)) calc(var(--gc-size) * var(--gc-shadow-blur2)) oklch(0.45 0.26 var(--gc-hue) / var(--gc-shadow-opacity2)));
  isolation: isolate;
}
.gc-stage:hover .gc-shape {
  transform:
    rotateX(calc(var(--gc-tilt-x) * 0.3))
    rotateY(calc(var(--gc-tilt-y) * -0.7))
    rotateZ(var(--gc-tilt-z));
}

.gc-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(var(--gc-saturate)) brightness(var(--gc-brightness)) contrast(var(--gc-contrast));
}

.gc-layer {
  position: absolute;
  inset: 0;
  -webkit-mask: url("assets/qualitymed-cross-mono-4x.png") center / contain no-repeat;
          mask: url("assets/qualitymed-cross-mono-4x.png") center / contain no-repeat;
  pointer-events: none;
}

/* substituição da cor base por cor sólida (modo solid) */
.gc-solid {
  background: var(--gc-solid-color, oklch(0.55 0.25 var(--gc-hue)));
  opacity: var(--gc-solid-on, 0);
}

.gc-shine-top {
  background: linear-gradient(
    180deg,
    oklch(1 0 0 / calc(var(--gc-shine-top) * var(--gc-mode-shine))) 0%,
    oklch(1 0 0 / calc(var(--gc-shine-top) * var(--gc-mode-shine) * 0.33)) 25%,
    oklch(1 0 0 / 0) 50%
  );
  mix-blend-mode: screen;
}

.gc-shine-edge {
  background: linear-gradient(
    var(--gc-edge-angle),
    transparent 0%,
    transparent 50%,
    oklch(1 0 0 / calc(0.4 * var(--gc-shine-edge) * var(--gc-mode-shine))) 65%,
    oklch(1 0 0 / calc(0.95 * var(--gc-shine-edge) * var(--gc-mode-shine))) 72%,
    oklch(1 0 0 / calc(0.4 * var(--gc-shine-edge) * var(--gc-mode-shine))) 78%,
    transparent 92%
  );
  mix-blend-mode: screen;
}

.gc-shadow-inner {
  background: linear-gradient(
    0deg,
    oklch(0.18 0.10 var(--gc-hue) / var(--gc-inner-shadow)) 0%,
    oklch(0.30 0.15 var(--gc-hue) / calc(var(--gc-inner-shadow) * 0.45)) 25%,
    transparent 55%
  );
  mix-blend-mode: multiply;
}

.gc-glow-side {
  background: radial-gradient(
    ellipse 100% 60% at 50% 50%,
    transparent 35%,
    oklch(0.55 0.28 var(--gc-hue) / var(--gc-side-glow)) 75%,
    oklch(0.40 0.24 var(--gc-hue) / calc(var(--gc-side-glow) * 1.4)) 100%
  );
  mix-blend-mode: multiply;
}

/* contorno (rim) — deslocando o mask cria uma borda na cor escolhida */
.gc-rim {
  background: var(--gc-rim-color);
  -webkit-mask:
    url("assets/qualitymed-cross-mono-4x.png") center / contain no-repeat,
    url("assets/qualitymed-cross-mono-4x.png") center / calc(100% - var(--gc-rim-width) * 2) auto no-repeat;
          mask:
    url("assets/qualitymed-cross-mono-4x.png") center / contain no-repeat,
    url("assets/qualitymed-cross-mono-4x.png") center / calc(100% - var(--gc-rim-width) * 2) auto no-repeat;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.95;
}

.gc-stage::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(
    circle at 50% 55%,
    oklch(0.62 0.26 var(--gc-hue) / var(--gc-aura)) 0%,
    transparent 55%
  );
  filter: blur(16px);
  z-index: 0;
  pointer-events: none;
}

.gc-stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -4%;
  height: 14%;
  background: radial-gradient(
    ellipse at center,
    oklch(0.6 0.3 var(--gc-hue) / var(--gc-caustic)) 0%,
    transparent 70%
  );
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}