/* ------------------------------------------------------------------
   Section transitions — components deal in and out, and the boundary
   between two sections blooms with light instead of drawing a rule.

   Pair with assets/js/deal.js. Nothing here hides content on its own:
   every element's resting state is its natural position, so the page
   is whole with JS off, JS broken, or reduced motion on.
   ------------------------------------------------------------------ */

.deal-seam {
  position: relative;
  height: 0;
  z-index: 5;
  pointer-events: none;
  --a: 0;
  /* how much weight this boundary is carrying, 0–1 */
}

/* AURORA — no rule at all, only light bleeding across the boundary.
   Three lobes: cyan left, pink right, a wide blue wash under both. The
   outer two drift apart as the boundary loads, so the light moves
   through itself instead of merely brightening. Alpha only, so it
   reads on a white section and a dark one alike. */
.deal-seam__aurora {
  /* Keep the bloom close to the seam: it should light the boundary, not
     wash whole sections. Override --aurora-h on :root to retune. */
  --h: var(--aurora-h, 80px);
  --drift: 0%;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--h) / -2);
  height: var(--h);
  opacity: var(--a);
  transform: scaleY(calc(.5 + .5 * var(--a)));
  background:
    radial-gradient(44% 54% at calc(35% + var(--drift)) 50%,
      rgba(130, 241, 250, .52) 0%, rgba(130, 241, 250, .20) 42%, rgba(130, 241, 250, 0) 72%),
    radial-gradient(40% 48% at calc(65% - var(--drift)) 50%,
      rgba(242, 203, 233, .46) 0%, rgba(242, 203, 233, .17) 44%, rgba(242, 203, 233, 0) 72%),
    radial-gradient(72% 42% at 50% 50%,
      rgba(149, 195, 247, .30) 0%, rgba(149, 195, 247, .12) 46%, rgba(149, 195, 247, 0) 78%);
}

/* The light has to work over a white section and a near-black one.
   Normal alpha reads on white but goes weak on dark; a screen blend is
   brilliant on dark but contributes nothing over white. So do both: the
   element paints normally, and this pseudo-element screens the same
   gradients on top, which white ignores and dark lights up. */
.deal-seam__aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  mix-blend-mode: screen;
}

/* A wide, low-alpha gradient bands on 8-bit displays. A few percent of
   noise breaks the steps up; on its own it is invisible. */
.deal-seam__aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cards. JS writes the transform; CSS only declares the resting state. */
.deal-item {
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .deal-item {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .deal-seam {
    --a: 0 !important;
  }
}

/* ------------------------------------------------------------------
   V SEAM — the hero keeps its chevron, and the light follows it.

   Two halves, each sheared about the vertex at the centre, so the glow
   bends along the V instead of cutting straight across it. The gradient
   inside each half is kept full-page width and offset, so the two halves
   reconstruct one continuous aurora rather than showing two of them.
   The shear angle depends on the viewport width, so JS sets --v-angle.
   ------------------------------------------------------------------ */
.deal-seam__vhalf {
  position: absolute;
  top: 0;
  width: 50%;
  height: 0;
  /* Each half carries a full-page-width gradient so the two reconstruct
     one aurora — so each must be clipped to its own side, or its
     overhang paints a second, oppositely sloped band across the other
     half. Vertical room is generous; skewY leaves x untouched, so these
     edges stay put under the shear. */
  clip-path: polygon(0 -400px, 100% -400px, 100% 400px, 0 400px);
}

.deal-seam__vhalf--l {
  left: 0;
  transform-origin: 100% 50%;
  transform: skewY(var(--v-angle, 0deg));
}

.deal-seam__vhalf--r {
  left: 50%;
  transform-origin: 0 50%;
  transform: skewY(calc(-1 * var(--v-angle, 0deg)));
}

.deal-seam__vhalf .deal-seam__aurora {
  width: 200%;
  right: auto;
}

.deal-seam__vhalf--l .deal-seam__aurora {
  left: 0;
}

.deal-seam__vhalf--r .deal-seam__aurora {
  left: -100%;
}