/**
 * Visual effects — hex molecule side decor + hero mesh gradient.
 * Ported directly from the custom HTML site (dist/peptidepharm.html lines 184-210).
 */

/* ============================================================ */
/*  HEX MOLECULE SIDE DECOR                                      */
/*  Fused flat-top honeycomb tiles with 3D-shaded atoms.         */
/*  Atoms at all 6 vertices with radial gradient (highlight UL → */
/*  ruby → dark ruby) for depth. Mask fades pattern toward       */
/*  content for "molecules dispersing" effect.                   */
/* ============================================================ */
.side-decor {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 160px;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='45' viewBox='0 0 26 45'><defs><radialGradient id='b' cx='0.30' cy='0.25'><stop offset='0%25' stop-color='%23FFFFFF'/><stop offset='55%25' stop-color='%23FFFFFF'/><stop offset='85%25' stop-color='%23FFD0E0'/><stop offset='100%25' stop-color='%23FFB0CC'/></radialGradient></defs><g fill='none' stroke='%23FFC8DC' stroke-width='1.0' stroke-opacity='0.5'><path d='M13 0 L26 7.5 L26 22.5 L13 30 L0 22.5 L0 7.5 Z'/><path d='M0 22.5 L13 30 L13 45 L0 52.5 L-13 45 L-13 30 Z'/><path d='M26 22.5 L39 30 L39 45 L26 52.5 L13 45 L13 30 Z'/></g><g><circle cx='13' cy='0' r='3.4' fill='url(%23b)'/><circle cx='26' cy='7.5' r='3.4' fill='url(%23b)'/><circle cx='0' cy='7.5' r='3.4' fill='url(%23b)'/><circle cx='26' cy='22.5' r='3.4' fill='url(%23b)'/><circle cx='0' cy='22.5' r='3.4' fill='url(%23b)'/><circle cx='13' cy='30' r='3.4' fill='url(%23b)'/><circle cx='13' cy='45' r='3.4' fill='url(%23b)'/></g></svg>");
  background-repeat: repeat;
  background-size: 160px 276px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 28%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.95) 46%, rgba(0,0,0,0.30) 56%, rgba(0,0,0,0.7) 64%, rgba(0,0,0,0.15) 74%, rgba(0,0,0,0.45) 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 28%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.95) 46%, rgba(0,0,0,0.30) 56%, rgba(0,0,0,0.7) 64%, rgba(0,0,0,0.15) 74%, rgba(0,0,0,0.45) 82%, transparent 100%);
  opacity: 0;
  transition: opacity 0.55s ease;
  /* iOS Safari fix from earlier compliance pass — force GPU compositing */
  transform: translate3d(0, 0, 0);
  will-change: opacity;
}
body.show-decor .side-decor { opacity: 1; }
.side-decor--left { left: 0; }
.side-decor--right { right: 0; transform: scaleX(-1) translate3d(0, 0, 0); }

@media (max-width: 1100px) {
  .side-decor { width: 128px; background-size: 128px 222px; }
}
@media (max-width: 768px) {
  .side-decor {
    width: 84px;
    background-size: 84px 145px;
    /* Mobile: simpler mask (no flickering on Safari) */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
    /* Mobile: switch to absolute positioning to prevent iOS repaint issues */
    position: absolute;
  }
}
@media (max-width: 480px) {
  .side-decor {
    /* Hidden on very small screens — keeps mobile clean */
    display: none;
  }
}

/* ============================================================ */
/*  HERO MESH GRADIENT                                            */
/*  Drifting radial gradients in brand colors. Pure CSS, no JS.   */
/* ============================================================ */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero-mesh__b {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.hero-mesh__b--1 {
  width: 55vw;
  height: 55vw;
  top: -15vw;
  left: -12vw;
  background: radial-gradient(circle, rgba(255,176,204,0.55) 0%, transparent 65%);
  animation: meshDrift1 22s ease-in-out infinite;
}
.hero-mesh__b--2 {
  width: 60vw;
  height: 60vw;
  top: -20vw;
  right: -18vw;
  background: radial-gradient(circle, rgba(230,57,110,0.42) 0%, transparent 65%);
  animation: meshDrift2 26s ease-in-out infinite;
}
.hero-mesh__b--3 {
  width: 48vw;
  height: 48vw;
  bottom: -15vw;
  left: 30vw;
  background: radial-gradient(circle, rgba(184,40,84,0.30) 0%, transparent 65%);
  animation: meshDrift3 30s ease-in-out infinite;
}
.hero-mesh__b--4 {
  width: 36vw;
  height: 36vw;
  top: 18vw;
  left: 42vw;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 60%);
  animation: meshDrift4 24s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

@keyframes meshDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8vw, 5vw) scale(1.10); }
  66% { transform: translate(-4vw, 8vw) scale(0.95); }
}
@keyframes meshDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-7vw, 6vw) scale(1.05); }
  66% { transform: translate(8vw, -3vw) scale(1.12); }
}
@keyframes meshDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10vw, -8vw) scale(1.18); }
}
@keyframes meshDrift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 4vw) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mesh__b { animation: none !important; }
}