/* =========================================================================
   why.css - (4) WHY · id="why" · dark photo band with 01/02/03 circles
   Figma frame 1:4, y 2066..2795 (729px):
   - 1:68 photo + linear gradient (exported as-is to assets/figma/why-photo-1920.jpg)
   - 1:96 / 1:102 / 1:108 circles: 100px groups = 59px disc (#fff 24%) with
     "0N" Futurism Regular 28, plus rings 72 / 82 (#fff 14%) and 100 (#fff 39%)
   - 1:77 "Why Electrolysis?" Malfin 160/100% white, right aligned in
     x1010..1926, top y2513, clipped by the section bottom.
   Cards live in why-popups.css. Figma-exact layout from 1280px up (below
   that the card text would not fit a scaled card); stacked layout below.
   ========================================================================= */

#why {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  background: var(--fg-ink);
  color: #fff;
}

#why .why__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../../assets/figma/why-photo-1920.jpg') center / cover no-repeat;
}

#why .why__wordmark {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  direction: ltr;
  pointer-events: none;
}

/* ----- Circles --------------------------------------------------------- */
#why .why__dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* outer ring (100) + middle ring (82) + inner ring (72) */
#why .why__dot::before,
#why .why__dot::after,
#why .why__disc::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
#why .why__dot::before { inset: 0; border: 1px solid rgba(255, 255, 255, .24); }
#why .why__dot::after  { inset: 9%; border: 1px solid rgba(255, 255, 255, .15); }
#why .why__disc::before { inset: -11%; border: 1px solid rgba(255, 255, 255, .15); }

#why .why__disc {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 59%;
  block-size: 59%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
  font-family: var(--font-heb);
  font-weight: 400;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

#why .why__dot:hover .why__disc { background: rgba(255, 255, 255, .34); transform: scale(1.06); }
/* active: a touch brighter than Figma's resting .24 so the open card's number reads */
#why .why__dot[aria-expanded='true'] .why__disc { background: rgba(255, 255, 255, .3); }
#why .why__dot[aria-expanded='true']::before { border-color: rgba(255, 255, 255, .34); }
#why .why__dot:focus { outline: none; }
#why .why__dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  #why .why__disc { transition: none; }
  #why .why__dot:hover .why__disc { transform: none; }
}

/* ----- "Tap me" hint: a soft ring that breathes out of the closed dots ----
   The ring (disc::after, sized to the 100px dot) is static when motion is
   reduced - still a visible cue - and pulses (scale 1 -> 1.35 + fade)
   otherwise, staggered between the dots. The open dot does not pulse. */
#why .why__disc::after {
  content: '';
  position: absolute;
  inset: -34.75%;                      /* 59% disc -> 100% of the dot */
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
#why .why__dot:not([aria-expanded='true']) .why__disc::after { opacity: .38; scale: 1.14; }
#why .why__dot:hover::before,
#why .why__dot:focus-visible::before { border-color: rgba(255, 255, 255, .6); }
#why .why__dot:not([aria-expanded='true']):hover .why__disc::after { opacity: .6; }

@media (prefers-reduced-motion: no-preference) {
  #why .why__dot::before { transition: border-color var(--dur-fast) var(--ease); }
  #why .why__dot:not([aria-expanded='true']) .why__disc::after {
    animation: why-dot-pulse 3.2s cubic-bezier(.2, .6, .35, 1) infinite;
  }
  /* negative delays: every ring is already mid-cycle on load, in sequence */
  #why .why__dot--2 .why__disc::after { animation-delay: -2.13s; }
  #why .why__dot--3 .why__disc::after { animation-delay: -1.07s; }
}
@keyframes why-dot-pulse {
  0%   { opacity: 0;   scale: 1; }
  18%  { opacity: .55; }
  100% { opacity: 0;   scale: 1.35; }
}

/* ----- Desktop: Figma geometry ---------------------------------------- */
@media (min-width: 1280px) {
  #why { block-size: calc(729 * var(--u)); }

  #why .why__wordmark {
    position: absolute;
    z-index: 1;
    top: calc(447 * var(--u));
    right: calc(-6 * var(--u));
    inline-size: calc(916 * var(--u));
    font-size: calc(160 * var(--u));
    text-align: right;
  }

  #why .why__dots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

  #why .why__dot {
    position: absolute;
    inline-size: calc(100 * var(--u));
    block-size: calc(100 * var(--u));
    pointer-events: auto;
  }
  #why .why__dot--1 { left: calc(1248 * var(--u)); top: calc(130 * var(--u)); }
  #why .why__dot--2 { left: calc(989 * var(--u));  top: calc(335 * var(--u)); }
  #why .why__dot--3 { left: calc(561 * var(--u));  top: calc(101 * var(--u)); }

  #why .why__disc { font-size: calc(28.24 * var(--u)); }
}

/* ----- Tablet + mobile: circles row, card, wordmark ------------------- */
@media (max-width: 1279.98px) {
  #why {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(3rem, 8vw, 5rem) 0;
  }

  /* the exported photo carries Figma's left-dark gradient; a light veil keeps
     the white wordmark readable where the tall crop shows the bright petals */
  #why .why__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(54, 25, 11, .15) 0%, rgba(54, 25, 11, .45) 100%);
  }

  #why .why__dots {
    order: 1;
    display: flex;
    justify-content: center;
    gap: clamp(1.25rem, 6vw, 3rem);
  }

  #why .why__dot {
    inline-size: clamp(72px, 12vw, 96px);
    block-size: clamp(72px, 12vw, 96px);
  }

  #why .why__disc { font-size: clamp(1.1rem, 2.6vw, 1.5rem); }

  #why .why__cards { order: 2; inline-size: 100%; }

  #why .why__wordmark {
    order: 3;
    position: relative;
    max-inline-size: calc(100% - 2 * var(--container-pad));
    margin-block-start: clamp(2rem, 6vw, 3.5rem);
    font-size: clamp(3.4rem, 13vw, 8rem);
    line-height: 1;
    text-align: center;
    /* Figma clips the word at the section bottom; keep a readable hint of it */
    margin-block-end: -.18em;
  }
}