/* v3 homepage: identity-led opening, rising projects, three live principles. */

/* Opening: the main screen plays the identity motion, then opens onto the work. */
.portal-main{background:#111410}
.portal-project{display:block}
.portal-project img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#201b21}
.portal-motion{display:none}
.spatial-ready .portal-motion{display:block;position:absolute;inset:0;width:100%;height:100%;background:#111410;transition:opacity 1s ease}
.spatial-ready .entrance.is-open .portal-motion{opacity:0;pointer-events:none}
.spatial-ready .portal-project{opacity:0;transition:opacity 1.1s .25s ease}
.spatial-ready .entrance.is-open .portal-project{opacity:1}
.portal-replay{position:absolute;right:0;top:calc(100% + 14px);display:flex;gap:8px;align-items:center;font-size:10px;letter-spacing:.02em;color:var(--muted);opacity:0;transition:opacity .5s 1s,color .2s}
.entrance.is-open .portal-replay{opacity:1}
.portal-replay:hover,.portal-replay:focus-visible{color:var(--lime)}

/* Side screens unfold from behind the main screen, catch the light, then keep breathing. */
.portal-wing>.wing-face{position:relative;top:auto;display:block;overflow:hidden;font-size:0}
.wing-face img{transition:scale .6s cubic-bezier(.2,.8,.2,1)}
.portal-wing:hover .wing-face img{scale:1.05}
.wing-face:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#f3f1e826 50%,transparent 65%);translate:-110% 0;pointer-events:none}
.portal-wing{transition:translate 1.4s cubic-bezier(.2,.8,.2,1),scale 1.4s cubic-bezier(.2,.8,.2,1),opacity .9s ease}
.wing-right{transition-delay:.18s}
.spatial-ready .entrance:not(.is-open) .wing-left{translate:42% 6%;scale:.72;opacity:0}
.spatial-ready .entrance:not(.is-open) .wing-right{translate:-42% 6%;scale:.72;opacity:0}
.entrance.is-open .wing-face:after{animation:wing-sheen 1.5s 1s ease-out both}
.entrance.is-open .wing-left .wing-face{animation:wing-float 7s 1.4s ease-in-out infinite}
.entrance.is-open .wing-right .wing-face{animation:wing-float 7s -2s ease-in-out infinite reverse}
@keyframes wing-sheen{to{translate:110% 0}}
@keyframes wing-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:.6deg}}

/* Projects rise from the floor into view. */
.work-rise{padding:110px var(--edge) 40px;border-top:1px solid var(--line);overflow-x:clip}
.rise-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:72px}
.rise-heading h2{font-size:clamp(40px,5vw,80px);letter-spacing:-.015em;line-height:.98}
.rise-heading a,.scene-link{display:flex;gap:14px;align-items:center;font-size:12px;white-space:nowrap}
.rise-heading svg,.scene-link svg,.rise-open svg{width:14px;height:14px}
.rise-list{display:grid;gap:clamp(96px,12vw,180px)}
.rise-item{--rise:0;width:100%;max-width:1180px;margin:0 auto}
.rise-frame{position:relative;display:block;transform-origin:50% 0;transform:perspective(1300px) translateY(calc(var(--rise) * 60px)) rotateX(calc(var(--rise) * 70deg)) scale(calc(1 + var(--rise) * .12));will-change:transform;outline:1px solid #f3f1e833;box-shadow:0 40px 80px #0009}
.rise-frame img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#1a1d18}
.rise-frame:after{content:'';position:absolute;inset:0;background:#111410;opacity:calc(var(--rise) * .85);pointer-events:none}
.rise-frame:hover{outline-color:var(--lime)}
.rise-open{position:absolute;right:20px;bottom:20px;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;transition:scale .3s}
.rise-frame:hover .rise-open{scale:1.12}
.rise-caption{display:grid;grid-template-columns:1.1fr 1fr auto;gap:48px;align-items:start;margin-top:30px;opacity:calc(1 - var(--rise) * 1.8);translate:0 calc(var(--rise) * 30px)}
.rise-index{display:block;color:var(--lilac);font-size:11px;margin-bottom:10px}
.rise-caption h3{font-size:clamp(26px,2.8vw,44px);letter-spacing:-.015em;line-height:1.05}
.rise-caption .rise-line{color:var(--paper);font-size:16px;letter-spacing:-.02em;line-height:1.2;margin-bottom:9px}
.rise-caption p{font-size:13px;line-height:1.55;color:var(--muted);max-width:420px}
.scene-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;list-style:none;padding:0;font-size:10px;letter-spacing:.02em;color:var(--paper)}
.scene-facts li{display:flex;align-items:center;gap:7px}
.scene-facts li:before{content:'';width:5px;height:5px;background:var(--lime)}
.all-work-gate{margin-top:80px;border-top:1px solid var(--line)}

/* Principles: all three side by side, each drawing alive. */
.principles{padding:110px var(--edge) 120px}
.principles-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 40px;margin-bottom:56px}
.principles-head .small-label{grid-column:1/-1;margin:0;color:var(--lime)}
.principles-head h2{font-size:clamp(44px,6vw,96px);letter-spacing:-.015em;line-height:.97}
.principles-hint{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);padding-bottom:10px}
.hint-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:hint-pulse 1.8s ease-out infinite}
.hint-touch{display:none}
@media(hover:none){.hint-fine{display:none}.hint-touch{display:inline}}
@keyframes hint-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.principle-stage{position:relative;aspect-ratio:300/260;border:1px solid var(--line);color:var(--paper);cursor:crosshair;transition:border-color .3s}
.principle:hover .principle-stage{border-color:var(--lime)}
.principle-stage svg{display:block;width:100%;height:100%}
.principle-corner{position:absolute;top:12px;left:14px;font-size:10px;color:var(--muted)}
.principle-name{display:block;font-size:11px;color:var(--lime);margin:22px 0 10px}
.principle h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.015em;line-height:1.15;margin-bottom:10px}
.principle p{font-size:13px;line-height:1.55;color:var(--muted);max-width:360px}
.lamp,.hang{transform-box:view-box}
.lamp{transform-origin:150px 0;transition:transform .3s ease-out}
.pool{transition:transform .3s ease-out}
.hang{transform-origin:150px 94px;transition:transform .3s ease-out}
.cell{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.spatial-ready .principle .lamp{animation:lamp-sway 4.6s ease-in-out infinite paused}
.spatial-ready .principle .pool{animation:pool-sway 4.6s ease-in-out infinite paused}
.spatial-ready .principle .hang{animation:hang-swing 3.4s ease-in-out infinite paused}
.spatial-ready .principle .cell{animation:cell-glow 1.1s ease-in-out infinite alternate paused}
.spatial-ready .principle.is-live :is(.lamp,.pool,.hang,.cell){animation-play-state:running}
.spatial-ready .principle .truss path{stroke-dasharray:1700;stroke-dashoffset:1700;transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1)}
.spatial-ready .principle.is-live .truss path{stroke-dashoffset:0}
.principle.is-aiming :is(.lamp,.pool,.hang){animation:none}
.principle.is-aiming .lamp{transform:rotate(calc(var(--aim-x) * -16deg))}
.principle.is-aiming .pool{transform:translateX(calc(var(--aim-x) * 62px))}
.principle.is-aiming .hang{transform:rotate(calc(var(--aim-x) * -22deg))}
@keyframes lamp-sway{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}}
@keyframes pool-sway{0%,100%{transform:translateX(-38px)}50%{transform:translateX(38px)}}
@keyframes hang-swing{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
@keyframes cell-glow{from{opacity:.65}to{opacity:1}}

@media(max-width:1050px){
.rise-caption{grid-template-columns:1fr 1fr;gap:28px}
.rise-caption .scene-link{display:none}
.principles-grid{gap:16px}
}
@media(max-width:700px){
/* One large screen above, two angled screens below: all three readable on a phone. */
.portal-space{height:80vw;margin-top:28px;perspective:900px}
.portal-main{width:84%;left:8%;top:2%;transform:translateZ(10px)}
.portal-wing{width:46%;top:55%}
.wing-left{left:2%;transform:rotateY(22deg) rotateZ(-3deg) translateZ(-30px);transform-origin:right center}
.wing-right{right:2%;transform:rotateY(-22deg) rotateZ(3deg) translateZ(-30px);transform-origin:left center}
.portal-wing>.wing-face{display:block}
.portal-wing>.wing-label{display:none}
.spatial-ready .entrance:not(.is-open) .wing-left{translate:30% -40%}
.spatial-ready .entrance:not(.is-open) .wing-right{translate:-30% -40%}
.portal-replay{top:auto;bottom:calc(100% + 8px)}
.work-rise{padding:64px var(--edge) 24px}
.rise-heading{margin-bottom:44px;gap:16px}
.rise-heading h2{font-size:34px}
.rise-list{gap:88px}
.rise-frame{transform:perspective(900px) translateY(calc(var(--rise) * 40px)) rotateX(calc(var(--rise) * 64deg)) scale(calc(1 + var(--rise) * .08));box-shadow:0 24px 40px #0008}
.rise-open{width:38px;height:38px;right:12px;bottom:12px}
.rise-caption{grid-template-columns:1fr;gap:14px;margin-top:20px}
.rise-caption h3{font-size:28px}
.all-work-gate{margin-top:48px}
.principles{padding:64px var(--edge) 72px}
.principles-head{grid-template-columns:1fr;margin-bottom:36px}
.principles-head h2{font-size:52px}
.principles-hint{padding:0}
.principles-grid{grid-template-columns:1fr;gap:44px}
}
@media(prefers-reduced-motion:reduce){
.rise-frame{transform:none}.rise-frame:after{opacity:0}.rise-caption{opacity:1;translate:none}
.portal-wing,.wing-face,.wing-face:after,.hint-dot{transition:none;animation:none}
.spatial-ready .principle :is(.lamp,.pool,.hang,.cell){animation:none}
.spatial-ready .principle .truss path{stroke-dashoffset:0;transition:none}
}

/* Opening fits one screen: centred statement, installation sized by the space left. */
@media(min-width:701px){
.entrance{min-height:calc(100svh - 88px);display:flex;flex-direction:column;padding-top:clamp(12px,3vh,32px);padding-bottom:clamp(16px,3vh,28px)}
.entrance-heading{grid-template-columns:1fr auto 1fr}
.portal-space{flex:1 1 auto;height:auto;min-height:280px;margin-top:clamp(16px,3.5vh,44px)}
.portal-installation{position:absolute;inset:0;width:auto;height:auto}
.portal-installation{--main-w:min(51%,calc(var(--stage-h,600px) * 1.5));--wing-w:min(27%,calc(var(--stage-h,600px) * .82));--wing-x:max(1%,calc(50% - var(--main-w) / 2 - var(--wing-w) * .86))}
.portal-main{width:var(--main-w);left:0;right:0;margin-inline:auto;top:2%}
.wing-left{left:var(--wing-x)}.wing-right{right:var(--wing-x)}
.portal-wing{width:var(--wing-w);top:auto;bottom:16%}
.portal-replay{top:calc(100% + 10px)}
.entrance-bottom{margin-top:clamp(14px,2.5vh,28px)}
}
.entrance h1{font-size:clamp(52px,5.6vw,96px);line-height:.94;letter-spacing:-.015em;text-align:center}
.entrance h1 span{margin-left:0}
.entrance-heading>p,.rise-index,.principle-name,.door-index{text-transform:uppercase;font-weight:500;letter-spacing:.1em;font-size:11px}
.rise-heading h2,.principles-head h2,.all-work-gate>span:first-child,.contact-layout .invitation h2,.experience-home .studio h2{letter-spacing:-.015em}

@media(max-width:700px){
.entrance-heading{align-items:center;text-align:center}
.entrance-heading>p{align-self:center;max-width:none;font-size:10px}
.entrance-heading>p br{display:inline}
.entrance h1{font-size:12.6vw}
}

/* One centred line above the statement replaces the two side labels. */
.entrance-heading{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vh,22px);text-align:center}
.entrance-heading>.entrance-eyebrow{padding:0;align-self:center;max-width:none;color:var(--muted)}
.entrance-eyebrow span{margin:0 .6em;color:var(--lime)}

/* Bigger screens: the statement and gaps give up space to the work. */
@media(min-width:701px){
.portal-installation{--main-w:min(58%,calc(var(--stage-h,600px) * 1.66));--wing-w:min(29%,calc(var(--stage-h,600px) * .9))}
.portal-space{margin-top:clamp(12px,2.2vh,28px)}
.entrance h1{font-size:clamp(48px,5vw,88px)}
.entrance-heading{gap:clamp(10px,1.6vh,18px)}
}

/* One accent in the opening: the Z and the stressed word. Supporting marks step back. */
.entrance-eyebrow span{color:var(--muted)}
.portal-edge{border-color:#f3f1e855}
/* All-work gate (2026-11-07): the action reads as a real button, lime pill like Book a call. */
.all-work-gate .gate-action{background:var(--lime);color:var(--ink);border:0;border-radius:999px;padding:20px 22px 20px 30px;gap:18px;font-size:17px;font-weight:500;white-space:nowrap;transition:background-color .25s ease,transform .25s ease}
.all-work-gate .gate-action sup{align-self:center;margin:0;display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--ink);color:var(--lime);font-size:12px;font-weight:500;line-height:1}
.all-work-gate .gate-action svg{width:24px;height:24px;margin:0;transition:transform .25s ease}
.all-work-gate .gate-action:hover,.all-work-gate:focus-visible .gate-action{background:var(--paper)}
.all-work-gate:hover .gate-action svg,.all-work-gate:focus-visible .gate-action svg{transform:translate(3px,-3px)}
.all-work-gate:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
@media(max-width:700px){.all-work-gate .gate-action{display:inline-flex;max-width:none;margin-top:28px;padding:16px 18px 16px 24px;font-size:15px;gap:14px}.all-work-gate .gate-action sup{margin:0;min-width:26px;height:26px;font-size:11px}.all-work-gate .gate-action svg{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.all-work-gate .gate-action,.all-work-gate .gate-action svg{transition:none}}