/* ---------- Square Naturals · interactive experience layer ---------- Progressive enhancement. Everything must stay readable and complete with JavaScript off, motion disabled in the CMS, or "reduce motion" on. */ html:not(.has-motion) .reveal{opacity:1;transform:none} html.has-motion{scroll-behavior:auto} html.has-motion body{transition:none} /* Fixed navigation with blur state after scrolling */ body:not(.is-admin) .site-header{position:fixed;top:0;left:0;transition:background .4s ease,border-color .4s ease,height .4s ease} .site-header.is-scrolled{background:rgba(4,27,23,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);height:64px;border-bottom-color:transparent} /* ---------- Act 1: hero + statement share one stage; the subject travels ---------- */ .act-one{position:relative} .hero{position:relative} .hero-copy{position:relative;z-index:2} .act-subject{position:absolute;z-index:1;top:16svh;right:8vw;width:clamp(240px,30vw,480px);margin:0;pointer-events:none;will-change:transform;filter:drop-shadow(0 40px 80px rgba(0,0,0,.5))} .act-subject img{display:block;width:100%;height:auto} .subject-chip{position:absolute;top:8%;right:-4%;background:var(--lime);color:var(--forest);font:600 .62rem/1.3 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;padding:.45rem .7rem;border-radius:.4rem;white-space:nowrap} /* Without motion the subject simply decorates the hero's right side. */ html:not(.has-motion) .act-subject{position:absolute;top:22svh} .scroll-hint{position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:1.4rem;z-index:2;display:flex;align-items:center;gap:.5rem;font:600 .66rem/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#cfe0d6} .scroll-hint-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:hint-pulse 1.8s ease-in-out infinite} @keyframes hint-pulse{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(5px);opacity:.45}} /* Statement */ .statement{position:relative;min-height:92svh;display:grid;place-items:center;background:var(--night);color:#fff;padding:clamp(5rem,12vw,9rem) clamp(1.2rem,7vw,7rem);text-align:center;overflow:hidden} .statement-inner{position:relative;z-index:2;max-width:1000px;display:grid;gap:1.4rem;justify-items:center} .statement-eyebrow{display:inline-block;background:var(--lime);color:var(--forest);padding:.45rem .8rem;border-radius:.35rem;letter-spacing:.16em} .statement-title{font-size:clamp(2.6rem,6.5vw,6.4rem);line-height:1.02;letter-spacing:-.05em;margin:0} .statement-note{color:#9eb8a6;max-width:520px;line-height:1.6} /* Word scrub: dimmed words brighten with scroll */ html.has-motion [data-words] .w{opacity:.16;display:inline-block;will-change:opacity} html:not(.has-motion) [data-words] .w{opacity:1} /* ---------- Background shift between sections ---------- With motion, participating sections go transparent and the colour is tweened; without motion each keeps a solid fallback. */ .shift-surface{background:var(--paper)} .nature-scene{background:var(--ivory)} .collage{background:var(--ivory)} html.has-motion .shift-surface,html.has-motion .nature-scene,html.has-motion .collage{background:transparent} /* ---------- Layered nature scene (parallax depths + sway) ---------- */ .nature-scene{position:relative;min-height:110svh;overflow:hidden;display:grid;place-items:center;padding:clamp(5rem,10vw,9rem) clamp(1.2rem,7vw,7rem)} .scene-stage{position:absolute;inset:-8% 0;z-index:0;pointer-events:none} .scene-layer{position:absolute;left:50%;transform:translateX(-50%);width:min(1400px,120vw);height:100%;object-fit:cover;object-position:center bottom} .scene-back{opacity:.9} .scene-mid{bottom:-4%} .scene-front{bottom:-8%;transform-origin:50% 100%} .scene-copy{position:relative;z-index:1;max-width:900px;text-align:center;display:grid;gap:1.2rem;justify-items:center} .scene-text{font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.3;letter-spacing:-.02em;font-weight:600;color:var(--ink);margin:0} /* Idle sway of the front foliage layer (CSS so it also runs pre-scroll) */ html.has-motion [data-sway="yes"] .scene-front{animation:leaf-sway 7s ease-in-out infinite alternate} html.has-motion [data-sway="yes"] .scene-mid{animation:leaf-sway 9s ease-in-out -3s infinite alternate-reverse} @keyframes leaf-sway{from{transform:translateX(-50%) rotate(-.7deg) scale(1.01)}to{transform:translateX(-50%) rotate(.7deg) scale(1.03)}} /* Discovery grid affordances */ .concern-grid a{display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:background .3s ease,padding-left .3s ease} .concern-grid a:hover{background:var(--ivory);padding-left:2.4rem} .concern-arrow{transition:transform .3s ease} .concern-grid a:hover .concern-arrow{transform:translate(4px,-4px)} /* ---------- Two big feature cards with hover overlay ---------- */ .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .feature-card{position:relative;display:block;min-height:clamp(340px,44vh,480px);border-radius:var(--radius);overflow:hidden;background:var(--forest);color:#fff;isolation:isolate;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease} .feature-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(4,27,23,.25)} .feature-card.no-image{background:var(--lime);color:var(--forest)} .feature-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .feature-card:hover .feature-media{transform:scale(1.06)} .feature-tag{position:absolute;top:1.4rem;left:1.4rem;letter-spacing:.14em} .feature-plus{position:absolute;top:1.2rem;right:1.4rem;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--lime);color:var(--forest);font-weight:700;transition:transform .45s cubic-bezier(.2,.7,.2,1)} .feature-card:hover .feature-plus{transform:rotate(-45deg)} .feature-base-title{position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;font-size:clamp(1.4rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;transition:opacity .35s ease} .feature-overlay{position:absolute;inset:0;z-index:1;display:grid;align-content:end;gap:.7rem;padding:1.6rem;background:linear-gradient(12deg,rgba(4,27,23,.96) 30%,rgba(8,43,34,.82) 70%,rgba(8,43,34,.55));transform:translateY(101%);transition:transform .55s cubic-bezier(.2,.7,.2,1)} .feature-card.no-image .feature-overlay{background:linear-gradient(12deg,rgba(200,242,74,.98) 40%,rgba(200,242,74,.9));color:var(--forest)} .feature-overlay h3{margin:0;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.03em} .feature-overlay p{margin:0;line-height:1.55;max-width:52ch;color:inherit;opacity:.9} .feature-card:hover .feature-overlay,.feature-card:focus-visible .feature-overlay{transform:translateY(0)} .feature-card:hover .feature-base-title,.feature-card:focus-visible .feature-base-title{opacity:0} /* Touch devices: no hover — show the overlay content statically at the base */ @media(hover:none){.feature-overlay{position:static;transform:none;background:none;padding:0;margin-top:auto}.feature-card{display:grid;align-content:end;gap:.6rem;padding:1.4rem}.feature-card .feature-media{position:absolute}.feature-base-title{display:none}.feature-overlay h3,.feature-overlay p{text-shadow:0 2px 18px rgba(4,27,23,.55)}} /* ---------- Horizontal product rail ---------- */ .rail{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:3rem} .rail::-webkit-scrollbar{display:none} .rail .rail-track{display:flex;gap:1.2rem;width:max-content;margin-top:0} .rail .product-card{flex:0 0 clamp(270px,26vw,380px);scroll-snap-align:start} .rail-hint{margin-top:1rem;color:#9eb8a6} html.has-motion .rail-section.is-pinned{overflow:hidden} html.has-motion .rail-section.is-pinned .rail{overflow:visible;scroll-snap-type:none} /* ---------- Technology spotlight: image arrives from the right ---------- */ .spotlight{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:2rem;background:#050805;color:#fff;padding:clamp(5rem,12vw,10rem) clamp(1.2rem,7vw,7rem);overflow:hidden;min-height:92svh} .spotlight-copy{display:grid;gap:1.2rem;justify-items:start;max-width:620px} .spotlight-copy h2{margin:0} .spotlight-body{line-height:1.7;color:#b9c9c1;margin:0} .spotlight-figure{margin:0;will-change:transform} .spotlight-figure img{display:block;width:100%;height:auto;max-height:78svh;object-fit:contain;filter:drop-shadow(0 30px 70px rgba(0,0,0,.6))} /* ---------- Collage: cards spread out from the centre ---------- */ .collage{position:relative;overflow:hidden;padding:clamp(6rem,12vw,10rem) clamp(1.2rem,7vw,7rem)} .collage-stage{position:relative;min-height:96svh;display:grid;place-items:center} .collage-copy{position:relative;z-index:2;text-align:center;max-width:760px;display:grid;gap:1rem;justify-items:center} .collage-copy h2{margin:0} .collage-copy p{color:var(--muted);line-height:1.6;margin:0} .collage-item{position:absolute;left:50%;top:50%;z-index:1;width:clamp(120px,15vw,230px);margin:0;border-radius:1rem;overflow:hidden;box-shadow:0 24px 50px rgba(4,27,23,.18);transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(var(--rot));will-change:transform} .collage-item img{display:block;width:100%;height:clamp(120px,16vw,230px);object-fit:cover} /* ---------- Marquee ---------- */ .marquee{background:var(--lime);color:var(--forest);overflow:hidden;padding:1.1rem 0;border-top:1px solid var(--forest)} .marquee-inner{display:flex;width:max-content;white-space:nowrap;font-weight:700;letter-spacing:-.02em;font-size:clamp(1.4rem,3.4vw,2.6rem)} html:not(.has-motion) .marquee-inner span+span{display:none} /* Magnetic buttons need transform freedom */ [data-magnetic]{will-change:transform} @media(max-width:900px){ .act-subject{top:auto;bottom:8svh;right:4vw;width:clamp(170px,44vw,260px)} .feature-grid{grid-template-columns:1fr} .spotlight{grid-template-columns:1fr;min-height:0} .spotlight-figure img{max-height:52svh} .collage-stage{min-height:80svh} .collage-item{width:clamp(90px,26vw,150px)} .collage-item img{height:clamp(90px,26vw,150px)} .nature-scene{min-height:90svh} } @media(prefers-reduced-motion:reduce){ .scroll-hint-dot{animation:none!important} html.has-motion [data-sway="yes"] .scene-front,html.has-motion [data-sway="yes"] .scene-mid{animation:none!important} .reveal,[data-words] .w{opacity:1!important;transform:none!important} .concern-grid a,.concern-arrow,.feature-card,.feature-media,.feature-overlay,.feature-plus{transition:none!important} }