/* ============================================================
   SiliconPath Law - Homepage section effects (loads last).

   The depth layer over home-v2.css: drawing rings, perspective floors,
   watermark numerals, a reading index on the band, the light at the head
   of the process rail, and the closing world map. Copy is untouched; every
   element added here is decorative (aria-hidden in the markup).

   Ownership, as in home-v2.css: GSAP (home-motion.js) owns `transform` on
   what it animates; everything here moves through other properties
   (translate, scale, stroke-dashoffset, background-position) or on
   elements GSAP never touches. Every effect has a still, complete resting
   state for reduced motion.
   ============================================================ */

/* ---- H2. PILLARS - a watermark index and an icon ring that draws -------- */
.pil__i{transition:background .45s var(--ease)}
.pil__i:hover{background:linear-gradient(180deg,rgba(243,232,229,.55),rgba(255,255,255,0) 70%)}
.pil__wm{position:absolute;z-index:-1;right:clamp(16px,2vw,26px);top:clamp(10px,1.2vw,16px);
  font-size:clamp(3.6rem,5.4vw,5rem);font-weight:900;line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.2px rgba(90,31,27,.13);
  transition:-webkit-text-stroke-color .45s var(--ease),translate .6s cubic-bezier(.23,1,.32,1)}
.pil__i:hover .pil__wm{-webkit-text-stroke-color:rgba(90,31,27,.3);translate:-6px 4px}
.pil__ic{position:relative;width:56px;height:56px;border-radius:50%;
  animation:fx-float 5.5s ease-in-out infinite}
.pil__i:nth-child(2) .pil__ic{animation-delay:-1.8s}
.pil__i:nth-child(3) .pil__ic{animation-delay:-3.6s}
@keyframes fx-float{50%{translate:0 -5px}}
.pil__ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);overflow:visible;
  rotate:-90deg;pointer-events:none}
.pil__ring circle{fill:none;stroke:var(--brand-2);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:var(--ring,0)}
/* Held undrawn only while motion is on and the row has not arrived. */
html.mo-on .pil:not(.is-in) .pil__ring circle{--ring:100}
.pil__ring circle{transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1)}
.pil__i:nth-child(2) .pil__ring circle{transition-delay:.18s}
.pil__i:nth-child(3) .pil__ring circle{transition-delay:.36s}
.pil__i:hover .pil__ic{rotate:0deg}

/* ---- H3. SERVICES - a drafting floor in perspective; numbered cards ----- */
.sv__floor{position:absolute;z-index:0;left:-20%;right:-20%;bottom:0;height:58%;
  perspective:820px;perspective-origin:50% 0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%);mask-image:linear-gradient(180deg,transparent 0%,#000 55%)}
.sv__floor i{position:absolute;left:0;right:0;top:0;height:220%;transform-origin:50% 0;
  transform:rotateX(64deg);
  background-image:linear-gradient(rgba(90,31,27,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,31,27,.07) 1px,transparent 1px);
  background-size:40px 40px;animation:fx-floor 5s linear infinite}
@keyframes fx-floor{to{background-position:0 40px,0 0}}
.sv__list{perspective:1600px}
.sv__wm{position:absolute;z-index:-1;right:clamp(18px,2vw,26px);top:clamp(12px,1.4vw,18px);
  font-size:clamp(3rem,4.4vw,4.2rem);font-weight:900;line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.2px rgba(90,31,27,.1);pointer-events:none;
  transition:-webkit-text-stroke-color .45s var(--ease),translate .6s cubic-bezier(.23,1,.32,1)}
.sv__row:hover .sv__wm{-webkit-text-stroke-color:rgba(90,31,27,.28);translate:-6px 6px}
/* Lift with a deeper, warmer shadow. */
.sv__row:hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 70px -40px rgba(90,31,27,.55)}

/* ---- H4. DIFFERENCE - drifting light; a reading index; the plate in view - */
.band > .df__orbs{position:absolute;z-index:0;inset:0;pointer-events:none}
.df__orbs i{position:absolute;border-radius:50%;filter:blur(40px)}
.df__orbs i:nth-child(1){left:-8%;top:10%;width:46vw;max-width:640px;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(232,180,172,.22),transparent);animation:fx-drift 16s ease-in-out infinite}
.df__orbs i:nth-child(2){right:-10%;bottom:-6%;width:40vw;max-width:560px;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(182,90,80,.28),transparent);animation:fx-drift 20s ease-in-out infinite reverse}
@keyframes fx-drift{50%{translate:6vw 4vh;scale:1.12}}
.df__ix{display:none}
@media(min-width:1024px){
  .df__ix{display:grid;margin:clamp(30px,3.4vw,44px) 0 0;padding:0;list-style:none;
    border-left:2px solid rgba(255,255,255,.12)}
  .df__ix li{position:relative;display:flex;align-items:baseline;gap:14px;padding:11px 0 11px 22px;
    font-size:1rem;font-weight:700;letter-spacing:-.01em;color:rgba(255,255,255,.42);
    transition:color .45s var(--ease),translate .45s var(--ease)}
  .df__ix li span{font-family:var(--mono);font-size:.7rem;font-weight:800;letter-spacing:.1em;color:rgba(232,180,172,.5);
    transition:color .45s var(--ease)}
  .df__ix li::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;
    background:linear-gradient(180deg,#F0DCD8,#E8B4AC);transform:scaleY(0);transform-origin:50% 0;
    transition:transform .5s cubic-bezier(.23,1,.32,1)}
  .df__ix li.is-on{color:#fff;translate:4px 0}
  .df__ix li.is-on span{color:#E8B4AC}
  .df__ix li.is-on::before{transform:scaleY(1)}
}
/* The plate being read: a brighter glass and a lit numeral. */
.cmp__row{transition:border-color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.cmp__row.is-on{border-color:rgba(255,255,255,.3);
  background:linear-gradient(168deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  box-shadow:0 30px 60px -30px rgba(10,3,2,.55),0 0 0 1px rgba(240,220,216,.08) inset}
.cmp__n{transition:-webkit-text-stroke-color .5s var(--ease),color .5s var(--ease)}
.cmp__row.is-on .cmp__n{-webkit-text-stroke-color:#F0DCD8;color:rgba(240,220,216,.14)}

/* ---- H5. PROCESS - the light at the rail's head; stems; nodes ping ------ */
.pr{perspective:1600px}
.pr__head{position:absolute;z-index:2;left:26px;top:calc(26px + (100% - 52px) * var(--prf,1));
  width:14px;height:14px;margin:-7px 0 0 -6px;border-radius:50%;pointer-events:none;
  background:#fff;border:3px solid var(--brand);
  box-shadow:0 0 0 6px rgba(124,46,40,.14),0 0 18px 4px rgba(124,46,40,.35)}
.pr__head::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(124,46,40,.4);
  animation:fx-ping 1.8s ease-out infinite}
@keyframes fx-ping{from{scale:.5;opacity:1}to{scale:1.8;opacity:0}}
html:not(.mo-on) .pr__head{display:none}
.pr__n::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--brand);opacity:0;pointer-events:none}
.pr__s.is-lit .pr__n::after{animation:fx-lit 1s ease-out 1}
@keyframes fx-lit{from{scale:1;opacity:.9}to{scale:1.9;opacity:0}}
@media(min-width:1024px){
  .pr__head{left:calc(26px + (100% - 52px) * var(--prf,1));top:26px;margin:-7px 0 0 -7px}
  /* A stem from each node down to its card, lit with the node. */
  .pr__s::before{content:"";position:absolute;left:25px;top:52px;width:2px;height:18px;
    background:var(--line-2);transition:background .5s var(--ease)}
  .pr__s.is-lit::before{background:var(--brand)}
  /* The node row keeps its height; the card row takes the stretch, so
     every card starts on the same line. */
  .pr__s{grid-template-rows:auto 1fr}
}

/* ---- H6. CLOSING - a dotted world under the line, rings sounding out ---- */
.fin--home{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(84px,11vw,150px)}
.fin__fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Centred by margins (GSAP owns this canvas's transform for parallax).
   Height is half the width, so half the height is a quarter of it. */
.fin__map{--mw:min(1320px,150%);position:absolute;left:50%;top:50%;width:var(--mw);aspect-ratio:2 / 1;
  margin:calc(var(--mw) / -4) 0 0 calc(var(--mw) / -2);
  -webkit-mask-image:radial-gradient(52% 58% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(52% 58% at 50% 50%,#000 30%,transparent 78%)}
.fin__rings i{position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  border:1px solid rgba(124,46,40,.2);animation:fx-sonar 7.5s linear infinite}
.fin__rings i:nth-child(2){animation-delay:-2.5s}
.fin__rings i:nth-child(3){animation-delay:-5s}
@keyframes fx-sonar{from{scale:.35;opacity:0}12%{opacity:1}to{scale:2.6;opacity:0}}
.fin--home .wrap{position:relative}
/* A soft paper pool under the copy keeps it crisp over the map. */
.fin--home .wrap::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(900px,100%);height:120%;
  translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(239,233,225,.92),rgba(239,233,225,.6) 55%,transparent)}

@media(prefers-reduced-motion:reduce){
  .pil__ic,.sv__floor i,.df__orbs i,.pr__head::after,.pr__s.is-lit .pr__n::after{animation:none}
  .fin__rings i{animation:none;scale:1.2;opacity:.6}
  .fin__rings i:nth-child(2){scale:1.8;opacity:.35}
  .fin__rings i:nth-child(3){display:none}
  .pil__ring circle,.pil__wm,.sv__wm,.df__ix li,.df__ix li::before,.cmp__row{transition:none}
}