/* =========================================================================
   LIGHT MODE - HOMEPAGE                               inc/light-home.php
   v3 - colour and gradient only.

   Nothing here changes layout, type, spacing or content. Every declaration
   is a colour, a gradient, a mask that shapes a gradient, an opacity or a
   filter. No max-width, no font-size, no padding, no display, no markup
   requirement. Every rule stays scoped to
   :root[data-theme="light"] body.lh-on, so the dark site is untouched.

   The change from v2.1 is the mechanism, not the palette. v2.1 washed the
   whole photograph evenly (the diagonal ran .93 -> .84 -> .5 -> .12 and
   never reached white), which leaves the photo's mid-tones under the
   headline - the one luminance band where neither ink nor white type holds.
   Instead of washing everything a little, v3 engineers a zone: PURE white
   where the copy sits, the photograph at FULL strength where it doesn't,
   and no visible edge between them.

   Layers over the photograph, bottom to top:
     .hero-photo::after    the ramp     - pure white under the copy, nothing at the right edge
     .hero-photo::before   the dot grid - dark hairline beads, only in the pale mid-band
     .hero-split::before   the bloom    - wide pale cobalt, so the white half is light not grey
     .hero-split::after    the grain    - hides the banding light gradients always show
   ========================================================================= */

/* ---- the ladder. Light mode is never one white: page grey, panel white,
   wash, ink - four steps, same as the references. ---------------------- */
:root[data-theme="light"] body.lh-on{--lh-ground:#E9ECF4;background:var(--lh-ground)}
:root[data-theme="light"] .lh-on{
  --lh-panel:#FFFFFF;
  --lh-hair:#E3E7EB;
  --lh-hair-2:#CFD6DD;
  --lh-ink:var(--ink);
  --lh-ink-2:var(--ink-2);
  --lh-ink-3:var(--ink-3);
  --lh-cobalt:var(--accent);
  /* The ramp is two numbers: where pure white ends, and where the wash has
     cleared completely. Every stop between them is struck off the span, so
     the whole thing moves by editing these two.

     They track the copy, which is why they are per-width. The headline is
     capped at 15ch, so the share of the viewport it occupies shrinks as the
     screen grows: it reaches 43% of the width at 1100px but only 29% at
     1900px. A single value has to be sized for the narrow case, which then
     leaves a veil over the checkout stand on wide screens for no legibility
     gain. Each step below keeps roughly 5% of clear white past the longest
     line and lets the photograph have the rest. */
  --lh-white-end:44%;
  --lh-fade-end:72%;
  --lh-fade-span:calc(var(--lh-fade-end) - var(--lh-white-end));
  --lh-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- header */
/* unchanged from v2.1 - these were already right */
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li>a{color:var(--lh-ink)}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li>a:hover,
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .main-nav .current-menu-item>a{background:rgba(10,13,17,.07)}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .hdr-search-toggle,
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .menu-toggle{color:var(--lh-ink);border-color:rgba(10,13,17,.2)}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .hdr-search-toggle:hover{background:var(--lh-ink);border-color:var(--lh-ink);color:#fff}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .menu-toggle span{background:var(--lh-ink)}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .lang-switch .lang-switch-in{border-color:rgba(10,13,17,.2)}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .lang-switch a.lang-link{color:var(--lh-ink-3)}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .lang-switch a.lang-link:hover{color:var(--lh-ink)}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .lang-switch a.lang-link.is-current{background:var(--lh-ink);color:#fff}
/* the photograph now runs up under the menu with only a light veil, so the   controls that sit over it carry their own frosted ground */
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .lang-switch .lang-switch-in,
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .hdr-search-toggle{
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li>a{text-shadow:0 0 10px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.9)}
:root[data-theme="light"] .lh-on .site-header .mobile-panel-actions .btn-outline,
:root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .mobile-panel-actions .btn-outline{background:var(--lh-ink);border-color:var(--lh-ink);color:#fff}
:root[data-theme="light"] .lh-on .site-header .mobile-panel-actions .btn-outline:hover{background:#2A2F36;border-color:#2A2F36;color:#fff}

/* ------------------------------------------------------------------ hero */
/* white rather than the page grey: the ramp blows out to pure white at the
   top, so the fixed header and the hero read as one surface with no seam.
   isolation keeps the grain's blend inside the section - it is the one
   non-colour property here, and it moves nothing. */
:root[data-theme="light"] .lh-on .hero-split{background:#fff;isolation:isolate}

/* 1 - the ramp, in the same slot the dark shade used.
   top:    a light veil under the menu, gone by 100px, so no line is drawn
           under the header and the photograph is not veiled
   bottom: a short 70px landing on the page grey, so the section has no
           bottom edge
   diagonal: pure white to 48%, then dissolving to NOTHING at the right edge
             - the photograph there is not washed at all */
:root[data-theme="light"] .lh-on .hero-photo::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.5) 36px,rgba(255,255,255,.14) 72px,rgba(255,255,255,0) 100px),
    linear-gradient(0deg,var(--lh-ground) 0%,rgba(233,236,244,.4) 18px,rgba(233,236,244,.1) 46px,rgba(233,236,244,0) 70px),
    linear-gradient(100deg,
      #fff 0%, #fff var(--lh-white-end),
      rgba(255,255,255,.94) calc(var(--lh-white-end) + var(--lh-fade-span) * .21),
      rgba(255,255,255,.72) calc(var(--lh-white-end) + var(--lh-fade-span) * .43),
      rgba(255,255,255,.38) calc(var(--lh-white-end) + var(--lh-fade-span) * .61),
      rgba(255,255,255,.13) calc(var(--lh-white-end) + var(--lh-fade-span) * .79),
      rgba(255,255,255,0) var(--lh-fade-end));
}
/* wide screens: the headline takes less of the width, so the ramp follows it
   in and hands the rest of the frame to the photograph */
@media(min-width:1500px){
  :root[data-theme="light"] .lh-on{--lh-white-end:37%;--lh-fade-end:64%}
}
@media(min-width:1800px){
  :root[data-theme="light"] .lh-on{--lh-white-end:33%;--lh-fade-end:60%}
}
/* a touch of lift so the photograph reads bright rather than grey - and
   enough contrast that the stand holds its own against the white half */
:root[data-theme="light"] .lh-on .hero-photo img{filter:brightness(1.03) saturate(1.02) contrast(1.05)}

/* 2 - the dot grid. On dark it is a white embossed bead along the bottom
   strip. Here it becomes a flat ink hairline dot and moves into the pale
   mid-band - the gap between the copy and the photograph, which is where
   the references put their tick marks and connector curves. Masked off
   under the copy so it never competes with type, and faded out before the
   photograph so it never reads as noise on the image. */
:root[data-theme="light"] .lh-on .hero-photo::before{
  background-image:radial-gradient(circle at 50% 50%, rgba(10,13,17,.26) 0 1px, transparent 1.5px);
  background-size:22px 22px;
  -webkit-mask-image:
    linear-gradient(100deg, transparent 0%, transparent calc(var(--lh-white-end) - 2%), rgba(0,0,0,.45) calc(var(--lh-white-end) + var(--lh-fade-span) * .21), rgba(0,0,0,.7) calc(var(--lh-white-end) + var(--lh-fade-span) * .46), rgba(0,0,0,.25) calc(var(--lh-white-end) + var(--lh-fade-span) * .79), transparent var(--lh-fade-end)),
    linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 150px), transparent 100%);
          mask-image:
    linear-gradient(100deg, transparent 0%, transparent calc(var(--lh-white-end) - 2%), rgba(0,0,0,.45) calc(var(--lh-white-end) + var(--lh-fade-span) * .21), rgba(0,0,0,.7) calc(var(--lh-white-end) + var(--lh-fade-span) * .46), rgba(0,0,0,.25) calc(var(--lh-white-end) + var(--lh-fade-span) * .79), transparent var(--lh-fade-end)),
    linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 150px), transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* 3 - the bloom. Desaturated cobalt and periwinkle, blurred over hundreds of
   pixels, so the white half reads as light rather than as empty grey. It
   must read as light, never as a shape. */
:root[data-theme="light"] .lh-on .hero-split::before{
  content:'';position:absolute;z-index:1;pointer-events:none;
  left:-24%;top:-12%;width:112%;height:150%;
  background:
    radial-gradient(60% 56% at 30% 74%, color-mix(in srgb,var(--accent) 40%,transparent) 0%, color-mix(in srgb,var(--accent) 22%,transparent) 40%, color-mix(in srgb,var(--accent) 0%,transparent) 74%),
    radial-gradient(46% 46% at 8% 98%, rgba(120,132,214,.42) 0%, rgba(120,132,214,0) 72%),
    radial-gradient(40% 38% at 52% 14%, rgba(126,136,214,.26) 0%, rgba(126,136,214,0) 70%);
  filter:blur(28px);
}
/* 4 - the grain, over the gradient and masked off where the photograph
   takes over. Light gradients band visibly; this is what hides it. */
:root[data-theme="light"] .lh-on .hero-split::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--lh-grain);background-size:180px 180px;
  opacity:.62;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 var(--lh-white-end),rgba(0,0,0,.45) calc(var(--lh-white-end) + var(--lh-fade-span) * .5),transparent var(--lh-fade-end));
          mask-image:linear-gradient(100deg,#000 0%,#000 var(--lh-white-end),rgba(0,0,0,.45) calc(var(--lh-white-end) + var(--lh-fade-span) * .5),transparent var(--lh-fade-end));
}

/* 5 - the copy. Ink on near-white, no box, no scrim behind it. */
:root[data-theme="light"] .lh-on .hero-panel{color:var(--lh-ink)}
:root[data-theme="light"] .lh-on .hero-panel .eyebrow{color:var(--lh-ink-3)}
:root[data-theme="light"] .lh-on .hero-panel h1{color:var(--lh-ink)}
:root[data-theme="light"] .lh-on .hero-panel p{color:var(--lh-ink-2)}
/* one solid ink pill and one hairline pill - no fills, no shadows */
:root[data-theme="light"] .lh-on .hero-actions .btn-primary{background:var(--lh-ink);border-color:var(--lh-ink);color:#fff}
:root[data-theme="light"] .lh-on .hero-actions .btn-primary:hover{background:#2A2F36;border-color:#2A2F36;color:#fff}
:root[data-theme="light"] .lh-on .hero-actions .btn-outline-light{background:transparent;border-color:rgba(10,13,17,.28);color:var(--lh-ink)}
:root[data-theme="light"] .lh-on .hero-actions .btn-outline-light:hover{background:rgba(10,13,17,.05);border-color:var(--lh-ink);color:var(--lh-ink)}

/* ------------------------------------------------------- below the fold */
:root[data-theme="light"] .lh-on .home-content > .elementor{background:var(--lh-ground)}
/* the homepage stepper (.pgrid) is styled in platform-steps.css */

/* phones: there is no room for a horizontal ramp - the copy spans the full
   width - so the same rule runs on the vertical axis instead: white where
   the text is, photograph recovering underneath. */
@media (max-width:700px){
  :root[data-theme="light"] .lh-on .hero-photo::after{
    background:
      linear-gradient(180deg,#fff 0%,rgba(255,255,255,.9) 80px,rgba(255,255,255,.35) 240px),
      linear-gradient(0deg,var(--lh-ground) 0%,rgba(233,236,244,.9) 120px,rgba(233,236,244,.5) 320px),
      linear-gradient(100deg,#fff 0%,rgba(255,255,255,.93) 55%,rgba(255,255,255,.55) 100%);
  }
  :root[data-theme="light"] .lh-on .hero-split::after{-webkit-mask-image:none;mask-image:none;opacity:.4}
}