/* ==========================================================================
   Product  —  Figma "Component 454 / Product - Animate" (705:201804)
   1920 x 960 at y 1276. Transparent; the hero's dark ground shows through.

   Default -> Animate:
     rig (screen + UI + stand + shadow)  opacity 0 -> 1, translateY 174 -> 0
     yellow label                        translateY 60  -> 0
     "MONITORING 24/7"                   translateX 140 -> 0
     side beams                          translateY -176 -> 0
     sweep beam                          rotate -110.08deg -> -36.85deg
                                         while its centre travels (-410, -1055)
   ========================================================================== */

.product {
  top: calc(1276 * var(--s));
  height: calc(960 * var(--s));
  z-index: 3;
}

/* --- decorative light beams --------------------------------------------- */

/* The beams are far taller than this section: the sweep starts 592px above the
   top edge and the side shafts run ~1300px past the bottom. `overflow: hidden`
   alone guillotines them, which shows up as a hard horizontal line across the
   full width at each edge. Feathering the clip with a mask lets them dissolve
   into the ground instead. */
.product__beams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 9%,
    #000 24%,
    #000 78%,
    rgba(0, 0, 0, 0.3) 92%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 9%,
    #000 24%,
    #000 78%,
    rgba(0, 0, 0, 0.3) 92%,
    transparent 100%
  );
}

.product__beam { position: absolute; }
.product__beam img { width: 100%; height: 100%; }

/* The two -30deg shafts drop into place. */
.product__beam--a,
.product__beam--b {
  transform: translateY(calc(-176 * var(--s)));
  transition: transform calc(var(--rv-dur) * 1.6) var(--rv-ease);
}
.product.is-in .product__beam--a,
.product.is-in .product__beam--b { transform: none; }

.product__beam--a {
  left: calc(16.67% + 55.5 * var(--s));
  top: calc(502 * var(--s));
  width: calc(1236.918 * var(--s));
  height: calc(1776.162 * var(--s));
}
.product__beam--b {
  left: calc(50% + 22 * var(--s));
  top: calc(502 * var(--s));
  width: calc(1319.418 * var(--s));
  height: calc(1823.794 * var(--s));
}
.product__beam--a .product__beam-inner,
.product__beam--b .product__beam-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.product__beam--a .product__beam-rot { width: calc(366.242 * var(--s)); height: calc(1839.486 * var(--s)); transform: rotate(-30deg); }
.product__beam--b .product__beam-rot { width: calc(461.505 * var(--s)); height: calc(1839.486 * var(--s)); transform: rotate(-30deg); }

/* The sweeping shaft: same element, rotated and travelled. */
.product__beam--sweep {
  left: calc(949.4 * var(--s));
  top: calc(462.2 * var(--s));
  width: calc(1172.592 * var(--s));
  height: calc(1754.845 * var(--s));
  margin-left: calc(-586.296 * var(--s));
  margin-top: calc(-877.423 * var(--s));
  transform: translate(calc(-410 * var(--s)), calc(-1055.3 * var(--s))) rotate(-110.08deg);
  transition: transform calc(var(--rv-dur) * 2) var(--rv-ease);
}
.product.is-in .product__beam--sweep { transform: rotate(-36.85deg); }

/* Figma exports the blurred shafts with bleed padding. */
.product__beam--sweep .product__beam-bleed { position: absolute; inset: -25.03% -37.46%; }
.product__beam--a .product__beam-bleed { position: absolute; inset: -1.32% -6.61%; }
.product__beam--b .product__beam-bleed { position: absolute; inset: -1.32% -5.24%; }

/* The shafts are polygons whose gradient fades along their LENGTH, but whose
   leading edge is a hard polygon edge — Figma softens it with only a 12.1px
   Gaussian blur, which is imperceptible once the shaft is drawn ~1240px wide.
   The result is a flat bright line across the top of each beam.

   This mask sits on the rotated wrapper, so "to bottom" runs along the shaft's
   own axis rather than the screen's. The feather is short (opaque by 8%) —
   the gradient is already transparent by ~20%, so a longer ramp would erase
   the beam instead of just softening where it begins. */
.product__beam--a .product__beam-bleed,
.product__beam--b .product__beam-bleed {
  -webkit-mask-image: linear-gradient(
    to bottom, transparent 0.5%, rgba(0, 0, 0, 0.45) 3.5%, #000 8%);
          mask-image: linear-gradient(
    to bottom, transparent 0.5%, rgba(0, 0, 0, 0.45) 3.5%, #000 8%);
}

/* --- labels -------------------------------------------------------------- */

.product__label-left {
  position: absolute;
  left: calc(8.33% + 22 * var(--s));
  top: calc(415 * var(--s));
  width: calc(141 * var(--s));
  height: calc(57 * var(--s));
}

.product__label-right {
  position: absolute;
  left: calc(83.33% + 4 * var(--s));
  top: calc(326 * var(--s));
  width: calc(134 * var(--s));
  height: calc(19 * var(--s));
  white-space: nowrap;
}
.product__label-right .kern-slash { letter-spacing: calc(3.2 * var(--s)); }

/* --- the monitor rig ----------------------------------------------------- */

.product__rig {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(calc(174 * var(--s)));
  transition:
    opacity calc(var(--rv-dur) * 1.2) var(--rv-ease),
    transform calc(var(--rv-dur) * 1.2) var(--rv-ease);
}
.product.is-in .product__rig { opacity: 1; transform: none; }

/* Contact shadow under the base. */
.product__shadow {
  position: absolute;
  left: calc(41.67% + 29 * var(--s));
  top: calc(903 * var(--s));
  width: calc(260 * var(--s));
  height: calc(22 * var(--s));
}
/* Figma exports blurred backdrop layers with negative-inset bleed. Written out
   as left/top/width/height rather than `inset` + width:auto: an <img> is a
   replaced element, so with auto width it keeps its intrinsic aspect and the
   `right`/`bottom` insets are simply dropped — the layer renders undersized. */
.product__shadow img {
  position: absolute;
  left: -5.81%;
  top: -68.64%;
  width: 111.62%;
  height: 237.28%;
  /* the reset caps img at 100%; a bleed layer must opt out */
  max-width: none;
}

.product__screen {
  position: absolute;
  left: calc(50% - 0.5 * var(--s));
  top: calc(100 * var(--s));
  width: calc(1097.727 * var(--s));
  height: calc(820 * var(--s));
  transform: translateX(-50%);
}
.product__screen img { width: 100%; height: 100%; object-fit: cover; }

/* No hover zoom on the dashboard — the monitor is a product mockup, not a
   photograph, and scaling the screen content inside a static bezel reads
   wrong. Deliberate exclusion; do not add .zoom here. */
.product__ui {
  position: absolute;
  left: calc(16.67% + 101.73 * var(--s));
  top: calc(128.81 * var(--s));
  width: calc(1075.973 * var(--s));
  height: calc(595.054 * var(--s));
  border-radius: calc(3.324 * var(--s));
  overflow: hidden;
}
.product__ui img { width: 100%; height: 100%; object-fit: cover; }

.product__stand {
  position: absolute;
  top: calc(738.27 * var(--s));
  width: calc(5.541 * var(--s));
  height: calc(171.757 * var(--s));
}
.product__stand--l { left: calc(41.67% + 28.41 * var(--s)); }
.product__stand--r { left: calc(50% + 124.38 * var(--s)); }
.product__stand img { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .product__rig { opacity: 1; transform: none; transition: none; }
  .product__beam { transition: none; }
}

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .product { height: auto; padding: 64px 20px 40px; }
  .product__beams { display: none; }

  .product__label-left,
  .product__label-right {
    position: static;
    width: auto;
    height: auto;
    font-size: 12px;
  }
  .product__label-right { margin-top: 8px; }

  .product__rig {
    position: relative;
    inset: auto;
    margin-top: 28px;
    aspect-ratio: 1097.727 / 960;
  }
  .product__screen {
    left: 50%;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1097.727 / 820;
  }
  .product__ui {
    left: 2.2%;
    top: 3.5%;
    width: 95.6%;
    height: auto;
    aspect-ratio: 1075.973 / 595.054;
  }
  .product__stand, .product__shadow { display: none; }
}