/* Movimento arquitetônico: folhas que deslizam, luz e revelação por planos. */
:root{--motion-ease:cubic-bezier(.19,1,.22,1)}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:#eba34b;transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}
.header{transition:background .35s,border-color .35s,padding .35s,box-shadow .35s}
.header.header-scrolled{position:fixed;min-height:76px;padding-block:12px;background:#121417f5;backdrop-filter:blur(16px);border-color:#ffffff15;box-shadow:0 5px 30px #0001;animation:header-arrive .45s var(--motion-ease) both}
.hero{--hero-y:0px;--hero-x:0px;--hero-mouse-y:0px}
.hero-photo{animation:none;transform:translate3d(var(--hero-x),calc(var(--hero-y) + var(--hero-mouse-y)),0) scale(1.085);will-change:transform}
.hero-content{animation:none;position:relative;z-index:3}
.hero h1{font-size:clamp(44px,5.2vw,76px)}
.title-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.title-line>span{display:block}
.motion-on .title-line>span{animation:title-unfold 1.4s .38s var(--motion-ease) both}
.motion-on .title-line:nth-child(2)>span{animation-delay:.55s}
.hero h1 em{color:#f4bb72}
.motion-on .hero .eyebrow{animation:soft-arrive 1s .2s both}
.motion-on .hero-description{animation:soft-arrive 1.1s .75s both}
.motion-on .hero-actions{animation:soft-arrive 1.1s .9s both}
.hero-glazing{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.glass-panel{position:absolute;inset:0 auto 0 0;width:50%;background:linear-gradient(115deg,#c5e0e62b,transparent 45%,#c5e0e60d);border-inline:1px solid #ffffff65;backdrop-filter:blur(8px);box-shadow:4px 0 30px #0002;transform:translateX(-101%)}
.glass-panel span{position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,#ffffff12 49%,transparent 60%)}
.glass-panel-right{inset:0 0 0 auto;transform:translateX(101%)}
.motion-on .glass-panel-left{animation:glass-left 2.1s .1s var(--motion-ease) both}
.motion-on .glass-panel-right{animation:glass-right 2.1s .1s var(--motion-ease) both}
.hero-orbit{position:absolute;right:7%;top:42%;z-index:2;display:flex;align-items:center;gap:22px;color:#ffffffb3;animation:soft-arrive 1.5s 1.2s both}
.hero-orbit>span{font-size:8px;letter-spacing:.15em;writing-mode:vertical-rl}
.hero-orbit>svg{width:90px;height:90px;stroke-width:.6;animation:orbit-float 6s ease-in-out infinite}
.hero-bottom{z-index:4}
.hero-bottom>a span{animation:arrow-breathe 2.5s ease-in-out infinite}
.button{position:relative;overflow:hidden;isolation:isolate;transition:background .3s,box-shadow .3s,transform .4s var(--motion-ease)}
.button:before{content:'';position:absolute;inset:-100% -25%;background:linear-gradient(110deg,transparent 40%,#ffffff55 50%,transparent 60%);transform:translateX(-100%) skewX(-15deg);z-index:-1;pointer-events:none;transition:transform .8s var(--motion-ease)}
.button:hover:before{transform:translateX(100%) skewX(-15deg)}
.button:hover{box-shadow:0 8px 28px #0002;transform:translateY(-2px)}
.motion-on .motion-reveal{opacity:0;transform:translateY(34px);transition:opacity .95s var(--motion-ease) var(--reveal-delay,0ms),transform 1.15s var(--motion-ease) var(--reveal-delay,0ms)}
.motion-on .motion-reveal.is-visible{opacity:1;transform:translateY(0)}
.motion-on .photo-button.motion-reveal{opacity:1;transform:none;clip-path:inset(14% 0 14% 0);transition:clip-path 1.3s var(--motion-ease)}
.motion-on .photo-button.motion-reveal:after{content:'';position:absolute;inset:0;background:var(--paper);transform:scaleY(1);transform-origin:top;transition:transform 1.3s var(--motion-ease)}
.motion-on .photo-button.motion-reveal.is-visible{clip-path:inset(0)}
.motion-on .photo-button.motion-reveal.is-visible:after{transform:scaleY(0)}
.photo-button{--photo-x:0px;--photo-y:0px}
.photo-button img{transform:scale(1.025) translate3d(var(--photo-x),var(--photo-y),0);transition:transform 1s var(--motion-ease),filter .5s}
.photo-button:hover img{transform:scale(1.075) translate3d(var(--photo-x),var(--photo-y),0);filter:brightness(.9)}
.photo-expand{transition:background .3s,color .3s,transform .4s var(--motion-ease);z-index:2}
.photo-button:hover .photo-expand{background:#d97706;transform:rotate(90deg)}
.gallery-cursor{position:absolute;left:0;top:0;width:76px;height:76px;display:grid;place-items:center;border:1px solid #ffffff90;background:#12141745;backdrop-filter:blur(5px);border-radius:50%;font-size:8px;letter-spacing:.12em;color:#fff;pointer-events:none;z-index:3;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .25s,scale .3s}
@media(hover:hover) and (pointer:fine){.photo-button:hover .gallery-cursor{opacity:1;scale:1.2}.photo-button{cursor:crosshair}}
.solution-visual{--light-x:50%;background:radial-gradient(ellipse at var(--light-x) 35%,#38434b66,transparent 70%),#1a1d21;transition:background-color .6s}
.drawing-grid{mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.window-drawing{overflow:visible;stroke-width:1.2}
.window-leaf{transition:transform 1.5s var(--motion-ease);stroke:#bbc5cf}
.pane-fill{fill:url(#glass-fill)}
.window-leaf.leaf-front{filter:drop-shadow(2px 0 3px #0008)}
.solution-visual.is-opening .leaf-front{transform:translateX(-171px)}
.solution-visual.is-opening .drawing-sliding{opacity:0}
.drawing-sliding{transition:opacity .4s}
.solution-visual.is-visible .drawing-frame path{animation:trace-frame 2.3s var(--motion-ease) both;stroke-dasharray:1500;stroke-dashoffset:0}
.opening-toggle{position:relative;background:none;color:#f4bb72;border:1px solid #eba34b70;padding:10px 12px;font-size:10px;display:flex;align-items:center;gap:16px;min-height:44px;transition:background .3s}
.opening-toggle svg{width:16px;height:16px;transition:transform .5s}
.opening-toggle:hover{background:#eba34b12}
.opening-toggle[aria-pressed=true] svg{transform:rotate(180deg)}
.solution[open] .solution-copy{animation:soft-arrive .5s var(--motion-ease) both}
.solution summary{position:relative;transition:padding .4s,color .3s}
.solution summary:after{content:'';height:1px;background:#eba34b;position:absolute;left:0;right:0;top:-1px;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--motion-ease)}
.solution[open] summary:after,.solution summary:hover:after{transform:scaleX(1)}
.solution summary:hover{padding-left:8px}
.motion-ribbon{padding:34px 0 40px;overflow:hidden;border-top:1px solid #12141725;background:#eceff1;user-select:none}
.ribbon-track{display:flex;width:max-content;animation:ribbon-move 35s linear infinite}
.ribbon-track>span{flex-shrink:0;font-family:var(--heading);font-size:clamp(46px,7.2vw,110px);line-height:1.1;font-weight:300;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px #12141780;white-space:nowrap}
.ribbon-track i{font-style:normal;font-size:.55em;color:var(--amber);-webkit-text-stroke:0;padding:0 30px;vertical-align:middle}
.motion-ribbon:hover .ribbon-track{animation-play-state:paused}
.architect-photo img{height:120%;top:-10%;transform:translateY(var(--architect-y,0px));will-change:transform}
.steps li{position:relative}
.steps li:before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:#d97706;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--motion-ease) var(--reveal-delay,0ms)}
.steps li.is-visible:before{transform:scaleX(1)}
.contact{position:relative;overflow:hidden;isolation:isolate}
.contact:before{content:'';position:absolute;inset:-30% 35% -60% -40%;background:radial-gradient(ellipse,#d9770613,transparent 65%);z-index:-1;pointer-events:none}
.service-options span{position:relative;overflow:hidden}
.service-options span:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,#eba34b10,transparent);transform:translateX(-100%);transition:transform .5s}
.service-options input:checked+span:after{transform:translateX(0)}
dialog[open]{animation:dialog-arrive .4s var(--motion-ease) both}
.motion-on .whatsapp{animation:soft-arrive .7s 1.4s both}
@keyframes glass-left{from{transform:translateX(0)}to{transform:translateX(-101%)}}
@keyframes glass-right{from{transform:translateX(0)}to{transform:translateX(101%)}}
@keyframes title-unfold{from{transform:translateY(115%) rotate(2deg)}to{transform:translateY(0) rotate(0)}}
@keyframes soft-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes orbit-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes arrow-breathe{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}
@keyframes trace-frame{from{stroke-dashoffset:1500}to{stroke-dashoffset:0}}
@keyframes ribbon-move{to{transform:translateX(-50%)}}
@keyframes header-arrive{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1100px){.hero-orbit{right:6%;top:30%;opacity:.7}.hero-orbit>svg{width:64px;height:64px}}
@media(max-width:800px){.header.header-scrolled{min-height:72px}.header-scrolled .nav{top:71px}.hero-orbit{display:none}.hero h1{font-size:clamp(39px,7.8vw,61px)}.motion-ribbon{padding-block:26px}.ribbon-track i{padding-inline:20px}.glass-panel{backdrop-filter:blur(3px)}.motion-on .motion-reveal{transform:translateY(20px)}.motion-on .motion-reveal.is-visible{transform:translateY(0)}}
@media(max-width:520px){.hero h1{font-size:39px}.hero h1 .title-line:nth-child(2)>span{max-width:100%}.drawing-footer{gap:12px}.opening-toggle{font-size:9px;gap:8px;padding:9px}.hero-photo{object-position:58% center}.ribbon-track>span{font-size:58px}.header-scrolled .brand>img{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.hero-photo{transform:none;will-change:auto}.glass-panel{display:none}.hero-orbit{animation:none}.motion-on .motion-reveal{opacity:1;transform:none;transition:none}.motion-on .photo-button.motion-reveal{clip-path:none}.motion-on .photo-button.motion-reveal:after{display:none}.ribbon-track{animation:none;transform:none}.architect-photo img{height:100%;top:0;transform:none;will-change:auto}.gallery-cursor{display:none}.reading-progress{display:none}.window-leaf{transition:none}.hero h1 .title-line>span{animation:none}.button:hover{transform:none}}