/* The photography in the two dark .point sections.
 *
 *   point__2  209°                the ultra-widefield fundus image, as a section background-image
 *   point__4  True Colour (RGB)   a two-up before/after comparison, built from the Figma
 *                                 design (file GAIALPデザイン, page "LP phase_2", node 593:110)
 *
 * Both replace a full-bleed background-image from the mirror (css/page/top.css). point__2
 * only swaps one photograph for another. point__4 is a whole-section rebuild — the mirror's
 * background photo, its TRUE COLOUR / NON-CONTACT, AUTOMATED IR ALIGNMENT lockup and its
 * `:after` courtesy line are all gone, replaced by the title, lead, two captioned fundus
 * images, credit and footnote of the design. See README.md, "True Colour (RGB)".
 */

/* ---- point__2: the 209° fundus image ----------------------------------------------- */

/* The mirror ships a photographic plate here; the supplied 209° image replaces it across
   desktop/tablet, while the HTML image below covers the phone layout. */
@media only screen and (min-width: 768px) {
  .point__2 {
    background-image: url(../../img/webp/point/field-of-view-209.png);
  }
}

/* top.css switches to `auto 100%` at 1400px, which crops a cut-out rather than fitting it;
   these two keep it whole at both steps. */
@media only screen and (min-width: 1200px) {
  .point__2 {
    background-size: 42.5% auto;
  }
}

@media only screen and (min-width: 1400px) {
  .point__2 {
    background-size: auto 85%;
  }
}

/* ---- point__4: True Colour (RGB) ---------------------------------------------------- */

/* The design is drawn at 1512px wide over a 1250px content column. Every measure below is
   that drawing's value at the top of a clamp, shrinking with the viewport — so the section
   is 1:1 with Figma at ~1512px and proportional either side of it.
   The gutter is deliberately *not* matched: the section keeps the page's `--l-gutter`, so
   its left edge lines up with 209° above and Key Features below. That makes the content
   column 1204px rather than 1250px at full width, which is the right trade. */
.point__4 {
  --tc-gap: clamp(20px, 2vw, 30px);
  --tc-col-gap: clamp(28px, 5.3vw, 80px);
  --tc-cap-gap: clamp(14px, 1.8vw, 26px);
  --tc-radius: clamp(12px, 1.4vw, 20px);

  /* How much of a photograph's height the aperture withholds at the closed end — the whole
     size of the move, and the one number to turn if it wants to be quieter or louder. `1`
     would be the full centre-out reveal the old full-height panel had, which at this size
     of image reads as a shutter rather than as a settle. */
  --tc-shut: 0.7;

  /* top.css lays .point out as a centred flex row locked to the viewport height, and paints
     point__4 with a background photo. None of that survives the rebuild — the section is
     now taller than a screen and sizes to its own content. */
  display: block;
  height: auto;
  max-height: none;
  min-height: 0;
  background-image: none;
}

/* The credit is real text in the design, so the mirror's hard-coded pseudo-element goes. */
.point__4:after {
  content: none;
}

.truecolour {
  display: flex;
  flex-direction: column;
  gap: var(--tc-gap);
}

/* Title and lead sit on the same rhythm as the blocks below them — 30px throughout. */
.truecolour-copy {
  display: flex;
  flex-direction: column;
  gap: var(--tc-gap);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

/* Size and weight come from css/page/section-titles.css, which every section title on the
   page shares. Left, because this one sits over a two-column comparison rather than centred
   over the section. */
.point__4 .truecolour-title {
  text-align: left;
}

/* 64px against the title's 94px. */
.truecolour-title span {
  font-size: 0.68em;
}

.truecolour-lead {
  color: #f0f0f0;
  font-size: clamp(1.5rem, 1.72vw, 2.6rem);
  font-weight: 500;
  line-height: 1.8;
}

.truecolour-lead sub {
  font-size: 60%;
}

.truecolour-compare {
  position: relative;
  display: flex;
  gap: var(--tc-col-gap);
}

.truecolour-compare::before,
.truecolour-compare::after {
  content: "";
  position: absolute;
  top: clamp(120px, 15.5vw, 234px);
  left: 50%;
  z-index: 2;
  pointer-events: none;
}

.truecolour-compare::before {
  width: clamp(18px, 2.5vw, 38px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), #fff);
  box-shadow: 0 0 12px rgba(157, 0, 255, 0.55);
  transform: translate(-50%, -50%);
}

.truecolour-compare::after {
  width: 8px;
  height: 8px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  box-shadow: 4px -4px 10px rgba(157, 0, 255, 0.45);
  transform: translate(calc(-50% + clamp(9px, 1.25vw, 19px)), -50%) rotate(45deg);
}

/* Two equal columns that can shrink; `min-width: 0` because a flex item's automatic minimum
   size would otherwise hold them at the images' intrinsic width. */
.truecolour-shot {
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
}

/* The aperture. It opens from its centre line outwards — inset() from both edges by the
   same amount — which reads as the photo being brought into view rather than wiped. The
   `round` keeps the design's corner radius on the growing edges, so the aperture is the
   finished shape at every step rather than a square that rounds off at the end.
   `--tc-reveal` is written on .point__4 by js/true-colour-photo.js and defaults to 1, so
   with no JavaScript the pair render open. Each column reads it through its own `--tc-open`
   below. 593x456 in the design, held as an aspect-ratio so the two stay the same height at
   every width. */
.truecolour-shot__mask {
  --tc-inset: calc((1 - var(--tc-open, 1)) * var(--tc-shut) * 50%);

  position: relative;
  overflow: hidden;
  aspect-ratio: 593 / 456;
  border-radius: var(--tc-radius);
  -webkit-clip-path: inset(
    var(--tc-inset) 0 var(--tc-inset) 0 round var(--tc-radius)
  );
  clip-path: inset(var(--tc-inset) 0 var(--tc-inset) 0 round var(--tc-radius));
}

/* After trails Before slightly, so the pair open as a pair rather than as one wide shutter —
   the same reason the mirror staggers its `.inview` blocks with `.d2`. */
.truecolour-shot:first-child {
  --tc-open: var(--tc-reveal, 1);
}

.truecolour-shot:last-child {
  --tc-open: clamp(0, calc((var(--tc-reveal, 1) - 0.08) / 0.92), 1);
}

/* The extra scale the photo sheds as the aperture opens. It lives on the image and not on
   the mask because the mask carries the clip-path, and a transform there would scale the
   aperture with it. Both max-* overrides are load-bearing against style.css's global
   `img { max-width: 100%; max-height: 100% }` — see README.md, "Ground rules". */
.truecolour-shot__mask img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(calc(1 + (1 - var(--tc-open, 1)) * 0.06));
  transform-origin: 50% 50%;
  will-change: transform;
}

.truecolour-shot:last-child .truecolour-shot__mask::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: inherit;
  opacity: clamp(0, calc((var(--tc-open, 1) - 0.9) * 10), 1);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.truecolour-shot figcaption {
  margin-top: var(--tc-cap-gap);
  font-size: clamp(1.4rem, 1.59vw, 2.4rem);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

.truecolour-shot .truecolour-shot__caption--before {
  font-size: clamp(1.2rem, 1.38vw, 2.1rem);
  opacity: 0.8;
}

/* Both of these are annotations, and the mirror already has a house style for one: the
   courtesy line it paints in `.point__2:after` is 14px at the body's own weight. Matched to
   that rather than scaled from the design — which draws the credit at 16px and the footnote
   at a full 26px — so every annotation on the page reads as the same kind of text. */
.truecolour-credit,
.truecolour-note {
  font-size: 1.4rem;
  font-weight: 400;
}

/* The design has no phone frame for this section. Below the mirror's one breakpoint the two
   images stack rather than halving, which would leave them too small to compare.

   **767px, not the mirror's 767.99px.** Chrome matches `max-width: 767.99px` at a viewport of
   exactly 768, and `js/true-colour-photo.js` runs from `min-width: 768px` — so at 768, and
   only at 768, this section got the stacked layout *and* the aperture. Each photograph became
   a full-width 566px box with a 30% slit visible in the middle of it and a drift of empty
   space above and below. 768 is iPad portrait, so it was not a hypothetical. See README.md,
   "The 768px seam". */
@media only screen and (max-width: 767.99px) {
  .truecolour-compare {
    -ms-flex-direction: column;
    flex-direction: column;
    gap: max(var(--tc-col-gap), 36px);
  }

  .truecolour-compare::before,
  .truecolour-compare::after {
    content: "";
    top: 50%;
    left: 50%;
  }

  .truecolour-compare::before {
    width: 1px;
    height: clamp(22px, 7vw, 34px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), #fff);
    transform: translate(-50%, -50%);
  }

  .truecolour-compare::after {
    width: 8px;
    height: 8px;
    border-top: 0;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: translate(-50%, calc(-50% + clamp(11px, 3.5vw, 17px))) rotate(45deg);
  }
}

/* The design's own section padding, at the width it was drawn for. Below 1200px
   responsive.css scales `.l-section` down instead. */
@media only screen and (min-width: 1200px) {
  .point__4 {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .point__4 {
    --tc-reveal: 1;
  }

  .truecolour-shot__mask img {
    will-change: auto;
  }
}