/* =========================================================
   WATERMARK — 2 lines (top/bottom), responsive, centered
   HTML: <div class="watermark">CRYSTALOV DIAMOND STANDARD</div>
   ========================================================= */
.watermark{
  --wm-alpha: .018; /* прозорість: .012 (ледь видно) → .04 (сильніше) */

  position: fixed;
  inset: 0;

  width: 100vw;
  box-sizing: border-box;
  padding: 0 6vw;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  white-space: normal;

  color: rgba(255,255,255,var(--wm-alpha));
  pointer-events: none;
  user-select: none;
  z-index: 0;

  /* прибираємо “сирий” текст в середині div, малюємо псевдо-елементами */
  font-size: 0;
  line-height: 0;
}

.watermark::before{
  content: "CRYSTALOV";
  display: block;

  font-size: clamp(72px, 15.5vw, 280px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(.012em, .045em, .08em);
}

.watermark::after{
  content: "DIAMOND STANDARD";
  display: block;

  margin-top: clamp(10px, 1.4vw, 16px);

  font-size: clamp(14px, 2.1vw, 22px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: clamp(.20em, .34em, .42em);
}

/* Tight screens: reduce tracking so it never clips */
@media (max-width: 640px){
  .watermark{ padding: 0 7vw; }

  .watermark::before{
    font-size: clamp(56px, 13.6vw, 190px);
    letter-spacing: clamp(.006em, .020em, .045em);
  }

  .watermark::after{
    font-size: clamp(12px, 3.2vw, 18px);
    letter-spacing: clamp(.14em, .24em, .32em);
  }
}

@media (max-width: 420px){
  .watermark{ padding: 0 8vw; }

  .watermark::before{
    font-size: clamp(44px, 12.8vw, 150px);
    letter-spacing: clamp(.004em, .014em, .030em);
  }

  .watermark::after{
    font-size: clamp(11px, 3.6vw, 16px);
    letter-spacing: clamp(.12em, .20em, .28em);
  }
}


/* =========================================================
   KEYFRAMES — used by hero layers (keep names stable)
   ========================================================= */
@keyframes flowMove{
  0%{ transform: translate(-1.2%, 0%) scale(1.015); }
  100%{ transform: translate(1.8%, -1.2%) scale(1.04); }
}

@keyframes bokehFloat{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-20px); }
}


/* =========================================================
   ACCESSIBILITY — reduce motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}



/* ===== Motion smoothing overrides ===== */
.hero__bg--flow{
  animation: flowMove 52s cubic-bezier(.4,0,.2,1) infinite alternate;
  will-change: transform;
}

.hero__bg--bokeh{
  animation: bokehFloat 56s cubic-bezier(.4,0,.2,1) infinite alternate;
  will-change: transform;
}

@keyframes flowMove{
  0%{ transform: translate(-0.35%, 0%) scale(1.01); }
  100%{ transform: translate(0.45%, -0.35%) scale(1.018); }
}

@keyframes bokehFloat{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-8px); }
}

@media (max-width: 980px){
  .hero__bg--flow,
  .hero__bg--bokeh{
    animation: none !important;
    transform: none !important;
  }
}