/* Homepage, v2 motion and polish layer (2026-10-30). Loads after css/home.css. Static layout for the new pieces (the two photo bands, the animated
   icons, the hairlines, the dotted map in two layers) plus the few states that js/neko-fx.js drives. Hidden start states are set by the script,
   not here, so without the script or under reduced motion the page is complete and still: every icon in its final state, every hairline drawn, every
   photo showing. Motion is transform and opacity; the photo wipes use clip-path on a single element. Spec: ../HOME-NEKO-SPEC.md "Motion spec v2". */

/* ambient: two pale-blue lights drift behind the page, 38 s and 52 s (gradient shift, 8 to 20 s class, ambient-continuous.md L29 to L33, kept slower). The
   layer is fixed behind the sections and in front of main's own gradient, so main isolates */
.ch-home main{isolation:isolate}
.nk-ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.nk-ambient i{position:absolute;display:block;width:72vmax;height:72vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(188,210,243,.62),rgba(188,210,243,0));will-change:transform}
.nk-ambient i:nth-child(1){left:-22vmax;top:-18vmax;animation:nk-drift-a 38s ease-in-out infinite alternate}
.nk-ambient i:nth-child(2){right:-26vmax;bottom:-30vmax;background:radial-gradient(closest-side,rgba(214,228,248,.8),rgba(214,228,248,0));animation:nk-drift-b 52s ease-in-out infinite alternate}
@keyframes nk-drift-a{to{transform:translate3d(24vw,16vh,0) scale(1.12)}}
@keyframes nk-drift-b{to{transform:translate3d(-20vw,-14vh,0) scale(1.08)}}

/* rows: a lift and a richer open state. The image drifts and scales on scroll (img, driven by the script), so the hover scale lives on its picture */
.nk-row,.nk-study{transition:transform .38s var(--e),box-shadow .38s var(--e)}
.nk-row__tile picture{display:block;transition:transform .7s var(--e)}
.nk-row__tile{position:relative}
@media(hover:hover){
.nk-row:hover,.nk-study:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(43,72,152,.06),0 20px 44px rgba(43,72,152,.11)}
.nk-row summary:hover .nk-row__tile picture{transform:scale(1.08)}
}
.nk-row:has(details[open]){box-shadow:0 0 0 1px rgba(43,72,152,.2),0 22px 48px rgba(43,72,152,.12)}
.nk-row details[open] .nk-row__tile picture{transform:scale(1.14)}
.nk-row .nk-caps{transition:color .3s var(--e)}
.nk-row details[open] .nk-caps{color:var(--nk-blue)}
.nk-row details[open] .nk-row__body>*{animation:nk-up .5s var(--e) .1s both}
.nk-row details[open] .nk-row__body>*+*{animation-delay:.2s}
.nk-faq__list details[open]>p{animation:nk-up .5s var(--e) .08s both}

/* the two photo bands: a rounded frame, the photo fills it. Large, not a thumbnail. Crops are tuned per photo (the inline object-position is overridden) */
.nk-band{position:relative;margin:0;overflow:hidden;aspect-ratio:2.2/1;border-radius:clamp(28px,3vw,40px);background:var(--nk-p1)}
.nk-band picture,.nk-band img{display:block;width:100%;height:100%;object-fit:cover}
.nk-place img{object-position:50% 46%!important}
.nk-desk img{object-position:50% 56%!important}
.nk-find__photo{margin-top:clamp(44px,5.4vw,80px)}
.nk-desk{margin-bottom:clamp(44px,5.4vw,72px)}
.nk-map{margin:clamp(40px,5vw,72px) auto 0}
@media(max-width:820px){
.nk-band{aspect-ratio:4/3;border-radius:28px}
.nk-place img{object-position:50% 52%!important}
.nk-desk img{object-position:62% 50%!important}
.nk-map{margin:28px 0 0 -38%}
}

/* the map in two layers: sea and neighbours as a still, Florida's own dots on a canvas, the location mark and one slow ripple. Without the script
   the original whole picture shows. html.nk-fx is set by js/neko-fx.js once GSAP is ready */
.nk-map .nk-map__sea,.nk-map .nk-map__dots{display:none}
html.nk-fx .nk-map .nk-map__full{display:none}
html.nk-fx .nk-map .nk-map__sea{display:block}
html.nk-fx .nk-map .nk-map__dots{display:block;position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}
.nk-pin i:after{display:none}
.nk-pin u{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--nk-navy)}
.nk-pin s{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border:1.5px solid rgba(15,26,56,.55);border-radius:50%;opacity:0;pointer-events:none}

/* the pinned steps: the next photo wipes up over the last (clip-path, 850 ms) while its picture settles 1.14 to 1; a line along the foot of the
   stage fills with the scroll. The first photo needs no wipe. Only while pinned */
.is-pinned .nk-steps__shot{opacity:1;transform:none;visibility:hidden;clip-path:inset(100% 0 0 0);transition:none}
.is-pinned .nk-steps__shot.is-under{visibility:visible;clip-path:inset(0)}
.is-pinned .nk-steps__shot.is-on{visibility:visible;clip-path:inset(0);transition:clip-path .85s cubic-bezier(.65,0,.2,1)}
.is-pinned .nk-steps__shot.is-first{transition:none}
.is-pinned .nk-steps__shot picture{transform:scale(1.14);transition:transform 1.1s var(--e)}
.is-pinned .nk-steps__shot.is-on picture,.is-pinned .nk-steps__shot.is-first picture{transform:none}
.is-pinned .nk-steps__shot img{transform:scale(1.04)}
/* the art column is 56% of the width, not 50%: a landscape two-person photo needs a panel near 1:1 to keep both faces in frame (at 1920x1080 it is 1075x1080,
   at 1440x900 806x900). The text column keeps about 500 px at 1440 */
.is-pinned .nk-steps__stage{grid-template-columns:minmax(0,1.27fr) minmax(0,1fr)}
.is-pinned .nk-steps__side{padding:0 clamp(36px,4.4vw,72px)}
.nk-steps__shot--crc-talk img{object-position:47% 50%!important}
.nk-steps__prog{display:none}
.is-pinned .nk-steps__prog{display:block;position:absolute;left:0;right:0;bottom:0;z-index:5;height:3px;background:rgba(32,40,46,.08)}
.nk-steps__prog{transition:opacity .4s var(--e)}
.nk-steps__prog.is-done{opacity:0}
.nk-steps__prog i{position:absolute;inset:0;background:var(--nk-blue);transform:scaleX(0);transform-origin:0 50%}

/* benefits and risks: hairlines that draw across (the script scales them from 0) */
.nk-two{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)}
.nk-hair{display:block;height:1px;background:var(--nk-hair);transform-origin:0 50%}
.nk-two h3+.nk-hair{margin-top:16px}
.nk-two ul{margin-top:22px}
.nk-hair--v{width:1px;height:auto;align-self:stretch;transform-origin:50% 0}
@media(max-width:820px){.nk-two{grid-template-columns:minmax(0,1fr)}.nk-hair--v{width:auto;height:1px;margin:30px 0;transform-origin:0 50%}}

/* the four plain facts, v3: real 3D objects. The picture is the still (no JS, no WebGL, reduced motion, data saver); js/neko-fx.js lays a canvas over it once
   the scene runs and the object then turns and loops its action on its own. 150 to 200 px, no tile behind (partials/fact-icons.mjs, tools/fx3d/icons3d.js) */
.nk-ic{position:relative;display:block;width:clamp(150px,14vw,200px);aspect-ratio:1;margin:0 auto 10px;color:var(--nk-blue)}
.nk-ic picture,.nk-ic__still{display:block;width:100%;height:100%}
.nk-ic__gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s var(--e)}
.nk-ic.is-live .nk-ic__gl{opacity:1}
.nk-ic.is-live .nk-ic__still{opacity:0;transition:opacity .4s var(--e) .15s}
.nk-facts li{padding-top:0}

/* faq: the hairlines are pseudo-elements so they can draw across */
.nk-faq__list{border-top:0;position:relative}
.nk-faq__list:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--nk-hair);transform:scaleX(var(--hx,1));transform-origin:0 50%}
.nk-faq__list details{position:relative;border-bottom:0}
.nk-faq__list details:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--nk-hair);transform:scaleX(var(--hx,1));transform-origin:0 50%}
.nk-rule:after{transform:scaleX(var(--hx,1));transform-origin:0 50%}

/* contact: the facts sit beside the form now that the photo is the band above */
.nk-contact__facts{margin-top:4px}

/* sponsors: the family row slides in; links keep their focus ring */
.nk-family li{will-change:auto}

/* the footer on the home: rounded top corners overlap the page by a little (the panel "rises over" the end of the page), a dot field behind the
   one line and the button that answers the pointer on a mouse. One small canvas, paused off screen (js/neko-fx.js) */
.ch-home .ft__panel{position:relative;border-radius:clamp(32px,4vw,56px)}
.ch-home .ft{margin-top:clamp(-56px,-4vw,-32px);position:relative;z-index:2;background:transparent}
.ch-home .ft__base{margin-top:calc(-1*clamp(32px,4vw,56px));padding-top:calc(clamp(40px,5vw,60px) + clamp(32px,4vw,56px));background:#0F1A38;position:relative;z-index:-1}
.ch-home .ft__wrap{position:relative;z-index:1}
.ch-home .ft__rule:after{transform:scaleX(var(--hx,1));transform-origin:0 50%}
.ft__field{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;border-radius:inherit}

/* ---- v3 (2026-10-30) ------------------------------------------------------------------------------------------------------------------------- */

/* living science backgrounds (js/neko-sci.js): a canvas as tall as the screen that stays with its section (sticky), under the content, never over it. The sections
   clip it, so nothing leaks into the next one. --sp is the section's own top padding, so the canvas starts at its top edge and the content still starts below the padding */
.nk-section{--sp:clamp(76px,9.4vw,136px)}
.nk-studies{--sp:clamp(40px,4vw,64px)}
.nk-areas,.nk-studies,.nk-faq{overflow:clip}
.nk-sci{position:sticky;top:0;z-index:0;height:var(--sci-h,100svh);margin:calc(-1*var(--sp)) 0 calc(var(--sp) - var(--sci-h,100svh));pointer-events:none}
.nk-sci canvas{display:block;width:100%;height:100%}
.nk-areas>.nk-wrap,.nk-studies>.nk-wrap,.nk-faq>.nk-wrap{position:relative;z-index:1}

/* the research-area tiles: the renders are already glossy blue objects, so they keep moving on their own like the four facts do. A slow breathing drift of
   the picture inside the tile (the individual transform properties, so the hover scale and the scroll drift in neko-fx.js keep working) and one pass of light
   across the glaze every 9 s, each row a little later than the last */
.nk-row__tile{isolation:isolate}
.nk-row__tile picture{animation:nk-tile 10s ease-in-out infinite;animation-delay:calc(var(--i,0)*-1.7s)}
@keyframes nk-tile{0%,100%{translate:0 -2px;rotate:-.8deg;scale:1}50%{translate:0 3px;rotate:.8deg;scale:1.03}}
.nk-row__tile:after{content:"";position:absolute;inset:-30%;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 58%);transform:translate3d(-80%,0,0);animation:nk-glaze 9s ease-in-out infinite;animation-delay:calc(var(--i,0)*-1.1s)}
@keyframes nk-glaze{0%,58%{transform:translate3d(-80%,0,0)}84%,100%{transform:translate3d(80%,0,0)}}

/* the tiles show the whole render: the pictures are 3:2, and a square tile cut the glucose meter, the cuff and the kidneys' pipes. 156 by 104 on a wide screen,
   104 by 84 on a phone (a little cropped there, the text column needs the room) */
.nk-row__tile{width:156px}
.nk-row__body{padding-left:184px}
@media(max-width:820px){.nk-row__tile{width:104px}.nk-row__body{padding-left:20px}}

/* before you join (v3, second pass): a wide wall, a tall photo each side of the two lists. The photos are 320 to 380 px wide and at least 500 px high, sit IN FRONT of
   the panel and cover its outer 64 px each side, so the panel reads as a sheet tucked between them and stays wide (the text keeps the width it had). The lists sit in
   that one panel, side by side, same type, same weight, same size, so the risks are exactly as near and as large as the benefits. The photos are quiet rooms,
   never a person and never an outcome; they sit 22 px up and 22 px down from each other and drift against the scroll (js/neko-fx.js). The wall is wider than the
   content column (up to 1560 px, 24 px from the screen edge) */
.nk-joinwall{--w:min(1560px,calc(100vw - 48px));--pw:clamp(320px,24.5vw,380px);--ov:64px;display:grid;grid-template-columns:var(--pw) minmax(0,1fr) var(--pw);align-items:stretch;width:var(--w);margin:0 calc((100% - var(--w))/2) clamp(56px,6vw,84px)}
.nk-jphoto{position:relative;z-index:2;margin:0;min-height:520px;overflow:hidden;border-radius:clamp(30px,3vw,40px);background:var(--nk-p1)}
.nk-jphoto picture,.nk-jphoto img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.nk-jphoto--l{translate:0 -22px}
.nk-jphoto--r{translate:0 22px}
.nk-jphoto--l img{object-position:60% 50%!important}
.nk-jphoto--r img{object-position:27% 50%!important}
.nk-two{position:relative;z-index:1;max-width:none;margin:0 calc(-1*var(--ov));padding:clamp(40px,3.8vw,56px) calc(var(--ov) + 14px);border-radius:clamp(30px,3vw,40px);background:#fff;box-shadow:0 1px 2px rgba(43,72,152,.05),0 14px 40px rgba(43,72,152,.07)}
.nk-two>div{padding:6px 22px}
.nk-two .nk-h3{font-size:clamp(23px,1.9vw,27px)}
.nk-two ul{gap:15px;color:var(--nk-ink-2);font-size:18px}
@media(max-width:1180px){
.nk-joinwall{--w:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"l r" "t t";gap:18px 14px;width:auto;margin:0 0 34px}
.nk-jphoto{min-height:0;aspect-ratio:3/4.1;border-radius:26px}
.nk-jphoto--l{grid-area:l;translate:0 0}
.nk-jphoto--r{grid-area:r;translate:0 26px}
.nk-two{grid-area:t;margin:26px 0 0;padding:28px 0}
.nk-two>div{padding:6px clamp(22px,4vw,40px)}
}
@media(max-width:820px){.nk-two .nk-hair--v{margin:26px clamp(22px,4vw,40px)}}

@media(prefers-reduced-motion:reduce){
.nk-ambient{display:none}
.nk-row__tile picture,.nk-row__tile:after{animation:none!important}
.nk-row__tile:after{display:none}
.nk-jphoto--l,.nk-jphoto--r{translate:0 0}
.nk-row:hover,.nk-study:hover{transform:none}
.is-pinned .nk-steps__shot,.is-pinned .nk-steps__shot picture{transition:none!important}
}