/* RafaCell: precision, warm service and a cinematic product composition. */ :root{--ink:#0b0c0e;--panel:#15171a;--muted:#aeb3bc;--paper:#f6f6f7;--red:#ff404c;--action:#d92335;--line:#2c2e33;--ease:cubic-bezier(.2,.65,.25,1)} .shell{max-width:1440px}.section-label,.service-kicker{letter-spacing:.11em}.muted-heading{color:#656c74}h2{letter-spacing:-.05em}.site-header{background:#0b0c0ef5}.header-inner{gap:26px}.main-nav{gap:24px}.main-nav a{position:relative;padding-block:10px}.main-nav a:after{content:'';position:absolute;bottom:2px;left:0;width:0;height:2px;background:var(--red);transition:width .25s}.main-nav a:hover:after{width:22px}.header-contact{border:1px solid #44464c;border-radius:5px;padding:9px 15px;font-size:13px;gap:18px;transition:background .2s,border-color .2s}.header-contact:hover{background:#202125;border-color:#9c454d} a,button,summary,input,select,textarea{scroll-margin-block:100px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#ff6973}.section-light a:focus-visible,.section-light summary:focus-visible{outline-color:#b91c2b}.button{position:relative;isolation:isolate;border-radius:5px;overflow:hidden;line-height:1.45;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s}.button-whatsapp{background:var(--action);color:#fff;box-shadow:0 7px 24px #d923351b}.button-whatsapp:hover{background:#bd1628;box-shadow:0 10px 30px #d9233535}.button:hover{transform:translateY(-3px)}.button-whatsapp:after{content:'';position:absolute;inset:-40% auto -40% -80%;width:40%;background:linear-gradient(90deg,transparent,#ffffff25,transparent);transform:skewX(-25deg);pointer-events:none}.button-whatsapp:hover:after,.button-whatsapp:focus-visible:after{animation:button-shine .7s var(--ease) both}.button>span:last-child{margin-left:7px}.button-outline{border-color:#71757d}.floating-contact{background:var(--action);color:#fff;border-color:#ed6270;width:54px;height:54px}.floating-contact:hover{box-shadow:0 10px 30px #c5193340}.text-link{transition:color .2s}.text-link:hover{gap:28px}.text-link>span{transition:transform .2s}.text-link:hover>span{transform:translate(3px,-3px)} /* Hero copy and frame; the phone scene itself is defined at the end of this file. */ .hero{--scene-bg:#0b0c0e;background:var(--scene-bg)}.hero-inner{min-height:720px;display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:38px;padding-top:40px;padding-bottom:44px}.hero-copy{padding-block:20px;position:relative;z-index:2;width:auto;max-width:650px;animation:premium-arrive .65s var(--ease) both}h1{font-size:clamp(60px,5.95vw,92px);letter-spacing:-.065em;line-height:1.065;margin:0 0 26px}.hero .eyebrow{color:#e5e7eb;letter-spacing:.12em;margin-bottom:28px}.hero-description{color:#b8bec7;font-size:16px;line-height:1.8;max-width:475px;margin:0 0 26px}.hero-description strong{font-weight:400;color:#f0f1f3}.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.hero .button{padding-inline:21px}.hero-secondary{display:inline-flex;align-items:center;gap:13px;font-size:14px;font-weight:800;padding-block:5px;border-bottom:1px solid #666b73}.hero-secondary>span{color:var(--red);font-size:19px}.hero-secondary:hover{border-color:var(--red)}.hero-microcopy{font-size:12px;color:#9ca5b0;margin:13px 0 0}.hero-rating{display:flex;flex-wrap:nowrap;align-items:center;gap:16px;padding-top:23px;border-top:1px solid var(--line);margin-top:26px;width:fit-content}.google-letter{font-weight:800;font-size:25px;color:#e6e8ec;width:27px}.rating-score{font-size:23px;font-weight:800;line-height:1.2;display:flex;flex-direction:column;gap:5px;color:#fff}.hero-rating .stars{font-size:12px;letter-spacing:2px;white-space:nowrap}.rating-context{padding-left:15px;border-left:1px solid var(--line);display:flex;flex-direction:column;font-size:12px;color:#aeb5bf;gap:3px}.rating-context strong{font-size:12px;color:#e9ebef}.hero-rating:hover .rating-context{color:#fff}.hero-stage{height:616px;position:relative;min-width:0}.stage-topline,.stage-bottomline{position:absolute;left:0;right:0;z-index:3;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px;letter-spacing:.1em;color:#9da3ad}.stage-topline{top:0;border-top:1px solid #ffffff24;padding-top:14px}.stage-topline>span:last-child{color:#858e9b}.stage-bottomline{bottom:0;border-bottom:1px solid #ffffff24;padding-bottom:12px;letter-spacing:0;color:#aab2bd}.stage-bottomline>span:last-child{font-size:30px;color:var(--red);line-height:1}.hero-visual{position:absolute;inset:40px -36px 36px -12px}.stage-note{position:absolute;z-index:4;display:flex;gap:10px;align-items:center;background:#111317ed;border:1px solid #3b3e465e;padding:13px 15px;box-shadow:0 12px 30px #0003;border-radius:4px;font-size:13px;font-weight:800;pointer-events:none}.stage-note-top{right:-9px;top:22%}.stage-note-top>span{color:var(--red);font-size:28px;line-height:1}.stage-note small{display:block;color:#a5adb7;font-size:12px;letter-spacing:.02em;font-weight:400;margin-top:4px}.stage-note-bottom{bottom:14%;left:-23px}.note-rule{display:block;width:2px;height:32px;background:var(--red)}.confidence-strip{background:#121417}.confidence-inner{padding-block:23px}.confidence-inner p{font-size:13px;color:#c1c6cf} /* Existing service index, now with stable hover geometry. */ .services{padding-block:96px}.services-layout{align-items:start}.section-intro{position:sticky;top:126px}.section-intro h2{font-size:clamp(36px,3.5vw,54px)}.section-intro>p:not(.section-label){color:#565f69}.service-row{position:relative;padding:27px 10px 27px 0;transition:transform .25s var(--ease),background .25s}.service-row:before{content:'';position:absolute;inset:0 auto 0 -12px;width:2px;background:var(--action);transform:scaleY(0);transition:transform .25s}.service-row:hover{padding:27px 10px 27px 0;transform:translateX(6px);background:#eeeef0}.service-row:hover:before{transform:scaleY(1)}.service-row:hover .service-arrow{background:var(--action);border-color:var(--action)}.service-text h3{line-height:1.3}.service-text>span:last-child{color:#606a75}.service-arrow{transition:transform .25s,background .25s,color .25s,border-color .25s} /* A separate accessories path without implying inventory or prices. */ .accessories{background:#141619;overflow:hidden;border-bottom:1px solid var(--line)}.accessories-layout{display:grid;grid-template-columns:1fr 1.13fr;gap:5vw;align-items:center;padding-block:62px}.accessory-copy{position:relative;z-index:2}.accessory-copy h2{font-size:clamp(35px,3.3vw,49px)}.accessory-copy h2>span{color:#a4acb7}.accessory-copy>p:not(.section-label):not(.accessory-note){color:#b7bec8;max-width:405px;margin:25px 0;font-size:16px}.accessory-note{font-size:12px;color:#a0a8b3;margin:16px 0 0}.accessory-visual{margin:0;min-width:0}.accessory-visual img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:4px;box-shadow:0 30px 70px #0004}.accessory-visual figcaption{font-size:12px;color:#9ca4af;margin-top:12px;text-align:right} .craft{padding-block:98px;background:#0e1012}.craft-layout{grid-template-columns:.95fr 1.05fr}.portrait{aspect-ratio:4/5;min-height:0;align-self:center;border-radius:4px}.portrait img{transition:transform .6s var(--ease)}.portrait:hover img{transform:scale(1.025)}.craft-copy h2{font-size:clamp(35px,3.2vw,48px)}.craft-copy h2>span{color:#a2aab5}.craft-copy>p:not(.section-label){color:#b4bcc6;margin:23px 0}.process-heading{font-size:14px;letter-spacing:.01em;margin:28px 0 0;color:#e1e5eb}.craft-values{margin-block:15px 24px}.craft-values>div{padding-block:16px}.craft-values p{color:#b2bcc9}.reviews{padding-block:88px 76px}.reviews h2{font-size:clamp(36px,3.5vw,54px)}.rating-summary{display:grid;grid-template-columns:auto 1fr;column-gap:25px;align-items:center}.rating-summary>strong{font-size:84px;line-height:1;grid-row:span 2}.rating-summary .stars{align-self:end;margin:0;color:#9e6200}.rating-summary>span:last-child{color:#586471;align-self:start;margin-top:6px}.review-grid{gap:26px;margin-top:46px;border:0}.review,.review+.review{padding:25px 0 22px;border:0;border-top:2px solid #ced2d8;border-bottom:1px solid #ced2d8;transition:border-color .25s,transform .25s}.review:hover{transform:translateY(-4px);border-top-color:var(--action)}.review:first-child{border-top-color:var(--action)}.review blockquote{font-size:21px;line-height:1.6}.reviews-footnote p{color:#636f7b}.visit{padding-block:88px;background:#111316}.visit-info{background:#1b1e23;border-color:#363b43;border-top:2px solid var(--red);box-shadow:0 18px 45px #0002;border-radius:5px}.visit-intro h2{font-size:clamp(42px,4vw,60px)}.faq{padding-block:78px}.faq h2{font-size:39px}.faq details>p{font-size:16px;color:#586675}.closing{padding-block:82px 78px;position:relative;isolation:isolate;background:#0d0f12;overflow:hidden}.closing:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 130%,#8d1b304a,transparent 65%)}.closing h2{font-size:clamp(46px,5.7vw,86px);line-height:1.1}.closing-note{font-size:14px}.site-footer{background:#0b0c0e}.footer-bottom{color:#a5b1c2}.dialog-heading .section-label{color:#ffa2aa}#evaluation-description{font-size:15px;color:#bac6d5}#evaluation-form input,#evaluation-form select,#evaluation-form textarea{font-size:16px;min-height:48px}#evaluation-form input::placeholder,#evaluation-form textarea::placeholder{color:#a4b0c0;opacity:1}.dialog-close{min-width:44px;min-height:44px}.form-footer>p,.form-privacy{color:#b4c0d0}.reveal{transition:opacity .5s var(--ease),transform .6s var(--ease)}.reveal.waiting{opacity:0;transform:translateY(22px)}.reveal.visible{opacity:1;transform:none} @keyframes premium-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes button-shine{to{left:140%}} .hero-secondary{min-height:44px}.stage-note{max-width:80%} @media(min-width:1600px){.hero-inner{min-height:790px}.hero-stage{height:665px}} @media(max-width:1150px){.main-nav{gap:16px}.header-inner{gap:18px}.header-contact{padding:9px 12px;gap:10px}.hero-inner{gap:20px;grid-template-columns:1.1fr 1fr;min-height:685px}.hero-stage{height:580px}.hero .eyebrow{font-size:11px;letter-spacing:.07em}.hero .button{font-size:13px;padding-inline:15px}.stage-note-top{right:-10px}.stage-note-bottom{left:-10px}.stage-topline>span:last-child{display:none}.review-grid{gap:20px}.review-initial{display:none}.review blockquote{font-size:19px}.rating-summary{column-gap:17px}.rating-summary>strong{font-size:70px}} @media(max-width:950px){.site-header{height:76px}.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#12161c;padding:15px var(--gutter) 24px;border-bottom:1px solid #3c4655;box-shadow:0 20px 30px #0005;flex-direction:column;align-items:stretch;gap:0}.main-nav.open{display:flex}.main-nav a{padding-block:12px;font-size:16px}.main-nav a:after{display:none}.menu-toggle{display:flex}.header-contact{margin-left:auto}.hero-inner{grid-template-columns:1.1fr 1fr;gap:10px}.hero-stage{height:530px}.hero-rating{gap:10px}.google-letter{display:none}.rating-context{padding-left:10px}.stage-note{font-size:12px;padding:10px}.stage-note-top{right:-10px;top:16%}.stage-note-bottom{left:-10px;bottom:12%}.hero-visual{inset:32px -22px}.confidence-inner p{font-size:12px}.services{padding-block:72px}.accessories-layout{gap:35px;padding-block:55px}.accessory-copy h2{font-size:35px}.craft{padding-block:72px}.craft-layout{gap:35px;align-items:start}.portrait{aspect-ratio:3/4}.craft-copy h2{font-size:35px}.reviews{padding-block:72px 60px}.reviews-heading{align-items:center}.rating-summary{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.rating-summary>strong{font-size:64px}.rating-summary .stars{align-self:auto}.faq h2{font-size:35px}} @media(max-width:700px){html{scroll-padding-top:90px;scroll-padding-bottom:calc(94px + env(safe-area-inset-bottom))}a,button,summary,input,select,textarea{scroll-margin-bottom:calc(94px + env(safe-area-inset-bottom))}.site-header{height:72px}.brand img{height:39px;width:39px}.brand>span{font-size:19px}.header-contact{display:none}.menu-toggle{margin-left:auto}.hero-inner{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:0;padding-top:35px;padding-bottom:21px}.hero-copy{padding:0;max-width:none;width:100%}.hero .eyebrow{font-size:11px;letter-spacing:.06em;gap:10px;margin-bottom:20px}h1{font-size:clamp(48px,10.6vw,73px);letter-spacing:-.06em;line-height:1.08;margin-bottom:21px}.hero-description{font-size:16px;line-height:1.7;margin-bottom:22px;max-width:510px}.hero-actions{gap:11px}.hero .button{font-size:14px;width:100%;max-width:none;min-height:55px;gap:10px;padding-inline:14px}.hero-secondary{font-size:13px;align-self:center}.hero-microcopy{font-size:12px;margin-top:11px;text-align:center}.hero-rating{padding-top:19px;margin-top:20px;gap:15px;width:100%;justify-content:center}.rating-score{font-size:23px}.rating-context{padding-left:15px}.hero-stage{height:310px;margin-top:24px;width:100%}.hero-visual{inset:0;max-width:100%;margin:auto}.stage-topline{display:none}.stage-bottomline{font-size:12px;padding-bottom:7px}.stage-bottomline>span:last-child{font-size:25px}.stage-note{padding:9px 10px}.stage-note-top{right:0;top:18%;font-size:12px}.stage-note small{font-size:12px;letter-spacing:0}.stage-note-bottom{left:0;bottom:19%;font-size:12px}.note-rule{height:25px}.confidence-inner{flex-direction:column;gap:10px;padding-block:20px}.confidence-inner p,.confidence-inner p:last-child{font-size:13px;display:flex}.section-label{font-size:12px;letter-spacing:.08em;margin-bottom:20px}.services{padding-block:58px}.services-layout{grid-template-columns:1fr;gap:29px}.section-intro{position:static}.section-intro h2{font-size:clamp(34px,8.7vw,45px)}.section-intro h2 br{display:block}.section-intro>p:not(.section-label){max-width:480px;margin:20px 0}.service-row,.service-row:hover{padding:23px 0;transform:none;grid-template-columns:30px 1fr 36px;gap:14px}.service-row:before{display:none}.service-text h3{font-size:23px}.service-text h3 br{display:block}.service-text>span:last-child{font-size:14px}.service-arrow{width:36px;height:36px}.service-kicker{font-size:12px}.accessories-layout{grid-template-columns:1fr;gap:30px;padding-block:52px 38px}.accessory-copy h2{font-size:36px}.accessory-copy>p:not(.section-label):not(.accessory-note){margin-block:21px;max-width:100%}.accessory-copy .button{width:100%}.accessory-note{text-align:center}.accessory-visual figcaption{text-align:left;line-height:1.6}.craft{padding-block:54px}.craft-layout{grid-template-columns:1fr;gap:34px}.portrait{aspect-ratio:1/1.06;max-height:560px;min-height:0;width:100%}.portrait img{object-position:center 28%}.craft-copy h2{font-size:36px}.craft-copy>p:not(.section-label){margin-block:20px}.reviews{padding-block:57px 48px}.reviews-heading{display:block}.rating-summary{margin-top:30px;display:grid;grid-template-columns:auto 1fr;column-gap:22px;row-gap:0;width:fit-content}.rating-summary>strong{font-size:68px;grid-row:span 2}.rating-summary .stars{align-self:end;font-size:16px}.rating-summary>span:last-child{align-self:start;font-size:12px}.review-grid{grid-template-columns:1fr;gap:0;margin-top:32px}.review,.review+.review{padding:23px 0 25px;border-top:0}.review:first-child{border-top:2px solid var(--action)}.review:hover{transform:none}.review blockquote{font-size:21px;line-height:1.55}.review-initial{display:grid}.reviews-footnote{flex-direction:column;gap:14px;margin-top:22px}.reviews-footnote p{font-size:12px}.visit{padding-block:55px}.visit-layout{grid-template-columns:1fr;gap:31px}.visit-intro h2{font-size:44px}.visit .button{width:100%;font-size:14px;gap:10px}.visit-info{padding:27px 23px}.visit-details{grid-template-columns:1fr;gap:22px}.visit-details>div+div{border-top:1px solid #3a4049;padding-top:20px}.phone-link{font-size:20px}.instagram-link{font-size:14px}.faq{padding-block:54px 57px}.faq-layout{grid-template-columns:1fr;gap:24px}.faq h2{font-size:35px}.faq details>p{font-size:16px}.closing{padding-block:60px 55px}.closing h2{font-size:clamp(41px,10vw,62px)}.closing-actions{flex-direction:column}.closing-actions .button{width:100%}.closing-note{font-size:13px}.site-footer{padding-bottom:115px}.footer-top{flex-wrap:wrap}.footer-top nav{width:100%}.footer-bottom{flex-direction:column;gap:13px;font-size:12px}.floating-contact{display:none}.mobile-contact{position:fixed;bottom:0;left:0;right:0;z-index:40;background:#11161ef7;border-top:1px solid #414954;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px var(--gutter) max(11px,env(safe-area-inset-bottom));box-shadow:0 -10px 28px #0003;transform:translateY(110%);transition:transform .25s;visibility:hidden}.past-hero .mobile-contact{transform:none;visibility:visible}.mobile-contact>span{font-size:13px;font-weight:800;line-height:1.5}.mobile-contact small{font-size:12px;font-weight:400;color:#b1bdcd;display:block}.mobile-contact .button{font-size:13px;padding:11px 14px;gap:8px;min-height:46px}.mobile-contact svg{width:20px;height:20px}dialog{padding:23px 20px;width:calc(100% - 22px);max-height:calc(100dvh - 22px)}.dialog-heading h2{font-size:27px}.dialog-heading .section-label{font-size:11px;letter-spacing:.02em}.field-row{grid-template-columns:1fr;gap:0}.form-footer .button{width:100%;font-size:14px}} @media(max-width:360px){.hero .eyebrow{font-size:10px;letter-spacing:.03em}h1{font-size:46px}.hero .button{font-size:12px;gap:7px;padding-inline:10px}.hero .button>span:last-child{margin-left:0}.rating-context strong{font-size:11px}.hero-rating{gap:11px}.rating-context{padding-left:11px}.hero-stage{height:280px}.stage-note small{display:none}.stage-note{font-size:11px}.stage-note-top{right:-3px}.stage-note-bottom{left:-3px}.service-row,.service-row:hover{gap:10px;grid-template-columns:25px 1fr 31px}.service-text h3{font-size:21px}.service-arrow{width:31px;height:31px}.service-kicker{font-size:11px}.service-text>span:last-child{font-size:13px}.accessory-copy h2,.craft-copy h2,.faq h2{font-size:33px}.mobile-contact>span{font-size:12px}.mobile-contact .button{font-size:12px;padding-inline:12px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.waiting{opacity:1;transform:none}} @media(max-width:700px){.hero-rating{padding-top:15px;margin-top:14px}.hero-stage{height:280px;margin-top:18px}.stage-note-top{top:12%;right:0}.stage-note-bottom{bottom:17%;left:0}.stage-note small{display:none}} .dialog-open .mobile-contact,.dialog-open .floating-contact{visibility:hidden} /* Hero scene: "the bench under the lamp". The phone asset is one flattened, opaque image (no separate screen/battery layers), so depth is built around it. Entrance, idle float and pointer/scroll response each own a separate wrapper, so no animation overwrites another's transform. app.js only writes normalised inputs (--mx/--my: pointer, -1..1; --hv: lamp on, 0..1; --sp: scroll position, -1..1); amplitudes live here. */ .hero-stage{--mx:0;--my:0;--hv:0;--sp:0;--light-rest:.22;--lamp-max:.92;--tilt-x:5deg;--tilt-y:6deg;--shift:10px;--scroll-tilt:6deg;--float:7px} .stage-topline,.stage-bottomline{animation:scene-fade .7s var(--ease) .15s both} .phone-enter{position:absolute;inset:0;margin:auto;height:100%;max-width:100%;aspect-ratio:4/5;animation:phone-enter 1.1s cubic-bezier(.16,1,.3,1) .05s both} .phone-float{position:absolute;inset:0;animation:phone-float 7s ease-in-out 1.15s infinite} /* The rig paints the hero colour behind the image and lightens against it: the asset's near-black backdrop resolves to exactly --scene-bg, so its rectangle never shows, even while tilted. */ .phone-rig{--light:min(1,max(var(--hv),var(--sp) * -1.4));position:absolute;inset:0;overflow:hidden;isolation:isolate;background:var(--scene-bg);will-change:transform;transform:perspective(1000px) translate3d(calc(var(--mx) * var(--shift)),calc(var(--my) * var(--shift) * .6 - var(--sp) * 16px),0) rotateX(calc(var(--my) * var(--tilt-x) - var(--sp) * var(--scroll-tilt))) rotateY(calc(var(--mx) * var(--tilt-y)))} .phone-rig img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;-webkit-mask-image:linear-gradient(#000 88%,transparent 99%);mask-image:linear-gradient(#000 88%,transparent 99%)} /* Specular pass: overlay brightens metal and glass, and barely lifts the black backdrop. */ .phone-glint{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:overlay;opacity:calc(var(--light-rest) + var(--light) * (1 - var(--light-rest)));-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent)} .phone-glint>span{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 38%,#ffffff9e 48%,#ffffff33 52%,transparent 62%);will-change:transform;transform:translate3d(calc(var(--mx) * 24% - 4%),calc(var(--my) * 12% + var(--sp) * 18%),0)} /* The lamp switches on when the cursor enters (or the page scrolls) and follows it. Colour-dodge intensifies lit metal and the red rim but leaves black glass black; it stays inside the rig, so it never draws the image box. */ .phone-lamp{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:calc(var(--light-rest) + var(--light) * (var(--lamp-max) - var(--light-rest)));-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect} .phone-lamp>span{position:absolute;inset:-35%;background:radial-gradient(closest-side,#481116,#48111666 40%,transparent 70%);will-change:transform;transform:translate3d(calc(var(--mx) * 26% - 14%),calc(var(--my) * 20% - 10% + var(--sp) * 14%),0)} /* The floor bounce answers the float and slides away from the lamp. */ .scene-floor{position:absolute;left:24%;right:2%;bottom:3%;height:14%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(closest-side,#d9233553,#d9233512 60%,transparent);transform:translate3d(calc(var(--mx) * -14px),0,0);animation:floor-breathe 7s ease-in-out 1.15s infinite} /* Notes sit on the nearest plane: they travel furthest. */ .stage-note{transform:translate3d(calc(var(--mx) * 16px),calc(var(--my) * 12px + var(--sp) * 26px),0);animation:note-in .7s var(--ease) both} .stage-note-top{--note-from:14px 0;animation-delay:.55s} .stage-note-bottom{--note-from:-14px 0;animation-delay:.7s} .hero-stage.is-paused .phone-float,.hero-stage.is-paused .scene-floor{animation-play-state:paused} @keyframes phone-enter{from{opacity:0;transform:perspective(1000px) translate3d(0,30px,0) rotateX(12deg) scale(.95)}to{opacity:1;transform:none}} @keyframes phone-float{0%,100%{translate:0 0}50%{translate:0 calc(var(--float) * -1)}} @keyframes floor-breathe{0%,100%{opacity:1;scale:1}50%{opacity:.7;scale:1.08 1}} @keyframes note-in{from{opacity:0;translate:var(--note-from)}to{opacity:1;translate:none}} @keyframes scene-fade{from{opacity:0}to{opacity:1}} @media(max-width:700px){.hero-stage{--scroll-tilt:8deg;--float:5px}} @media(prefers-reduced-motion:reduce){.phone-enter,.phone-rig,.phone-lamp>span,.phone-glint>span,.scene-floor,.stage-note{transform:none!important}.phone-float,.scene-floor,.stage-note{translate:none!important;scale:none!important}} /* Page motion system: one thread, the red inspection light of the hero. - Content is hidden only below the fold, and only when app.js runs with motion allowed (.waiting -> .visible). Without JS, or with reduced motion, the page is fully static. - Property ownership: entrances animate `translate`/`opacity`/`scale`/`clip-path`; hovers keep `transform`; scroll-linked drift uses `translate` on a different element. No two systems write the same property on the same element. */ :root{--ease-out:cubic-bezier(.16,1,.3,1);--reveal-y:18px;--reveal-dur:.8s;--stagger:85ms;--wipe-dur:1.15s} @keyframes m-rise{from{opacity:0;translate:0 var(--reveal-y)}} @keyframes m-fade{from{opacity:0}} /* Staggered groups: the container stays put and its children arrive in reading order. */ :is(.section-intro,.service-list,.accessory-copy,.review-grid,.closing-inner).reveal.waiting{opacity:1;transform:none} :is(.section-intro,.service-list,.accessory-copy,.review-grid,.closing-inner).reveal.waiting>*{opacity:0} :is(.section-intro,.service-list,.accessory-copy,.review-grid,.closing-inner).reveal.visible>*{animation:m-rise var(--reveal-dur) var(--ease-out) calc(var(--i,0) * var(--stagger)) backwards} /* Keyboard focus never waits for a reveal: a group that holds focus is shown at once. */ .reveal.waiting:focus-within{opacity:1;transform:none} :is(.section-intro,.service-list,.accessory-copy,.review-grid,.closing-inner).reveal:focus-within>*{opacity:1;animation:none} :is(.section-intro,.service-list,.accessory-copy,.review-grid,.closing-inner)>:nth-child(2){--i:1} :is(.section-intro,.service-list,.accessory-copy,.review-grid,.closing-inner)>:nth-child(3){--i:2} :is(.section-intro,.service-list,.accessory-copy,.review-grid,.closing-inner)>:nth-child(4){--i:3} :is(.section-intro,.service-list,.accessory-copy,.review-grid,.closing-inner)>:nth-child(5){--i:4} /* 1 · Hero -> services. The approved scene settles back into the dark as the page moves on (driven by the scene's existing --sp input), and its red light hands over to the trust strip: one scan along the strip's edge, each check answering as the light passes. */ .hero-stage{--recede:1} .hero-visual{transform:scale(calc(1 + var(--sp) * .05 * var(--recede)));opacity:calc(1 + var(--sp) * .4 * var(--recede));transform-origin:50% 62%} .confidence-strip{position:relative} .confidence-strip:before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,#ff404c 42%,#ffd9dc 50%,#ff404c 58%,transparent) no-repeat -40% 0/28% 100%} .confidence-strip.is-scanned:before{animation:strip-scan 1.25s linear var(--scan-delay,0s) both} .confidence-strip.is-scanned .confidence-inner p>span{animation:tick-lit .75s var(--ease-out) calc(var(--scan-delay,0s) + .16s + var(--i,0) * var(--tick-step,.36s)) both} .confidence-inner p:nth-child(2)>span{--i:1}.confidence-inner p:nth-child(3)>span{--i:2} @keyframes strip-scan{0%{opacity:1;background-position:-40% 0}85%{opacity:1}100%{opacity:0;background-position:140% 0}} @keyframes tick-lit{0%,100%{scale:1;text-shadow:none}35%{scale:1.45;text-shadow:0 0 14px #ff404c}} /* 2 · Services. The index arrives in reading order; on desktop the lamp follows the cursor across the row being inspected (a soft light under the text, never over it). */ .service-row{isolation:isolate} .service-row:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(280px circle at var(--lx,50%) var(--ly,50%),#ffffffd9,#ffffff00 72%);transition:opacity .3s} @media(hover:hover) and (pointer:fine){.service-row:hover:after{opacity:1}} /* 3 · Accessories. The still is uncovered left to right while it settles from a slight zoom, then catches one pass of light; on large screens it drifts a little slower than the copy. */ .accessory-frame{display:block;position:relative;overflow:hidden;border-radius:4px;box-shadow:0 30px 70px #0004} .accessory-frame img{border-radius:0;box-shadow:none} .accessory-frame:after{content:'';position:absolute;inset:0;pointer-events:none;translate:-101% 0;background:linear-gradient(105deg,transparent 30%,#ffffff24 50%,transparent 70%)} .accessory-visual.reveal.waiting{opacity:1;transform:none} .accessory-visual.waiting .accessory-frame{clip-path:inset(0 100% 0 0)} .accessory-visual.waiting figcaption{opacity:0} .accessory-visual.visible .accessory-frame{animation:frame-wipe var(--wipe-dur) var(--ease-out) .05s backwards} .accessory-visual.visible .accessory-frame img{animation:frame-settle calc(var(--wipe-dur) + .45s) var(--ease-out) .05s backwards} .accessory-visual.visible .accessory-frame:after{animation:frame-sheen 1.25s cubic-bezier(.45,0,.25,1) calc(var(--wipe-dur) * .55) backwards} .accessory-visual.visible figcaption{animation:m-fade .6s ease calc(var(--wipe-dur) * .8) backwards} @keyframes frame-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes frame-settle{from{scale:1.09}} @keyframes frame-sheen{from{translate:-101% 0}to{translate:101% 0}} @supports (animation-timeline:view()){@media(min-width:951px) and (prefers-reduced-motion:no-preference){.accessory-visual{animation:acc-drift linear both;animation-timeline:view();animation-range:cover}}} @keyframes acc-drift{from{translate:0 28px}to{translate:0 -28px}} /* 4 · Process. As the reader moves down, each step is marked done: its number turns red and its rule lights up, so the three steps read as one progression. Static pages keep the approved look (numbers red, rules grey). */ .craft-values>div{position:relative} .craft-values>div:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--action),#d9233500 88%);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)} .craft-values.is-tracking>div>span{color:#6f767e;transition:color .5s} .craft-values.is-tracking>div strong{color:#c7ccd3;transition:color .5s} .craft-values.is-tracking>div.is-done>span{color:var(--red)} .craft-values.is-tracking>div.is-done strong{color:#fff} .craft-values.is-tracking>div.is-done:after{transform:scaleX(1)} /* 5 · Reviews. Three quiet arrivals (shared stagger); the first review's red rule draws in. */ .review:first-child{position:relative} .review-grid.visible .review:first-child{border-top-color:#ced2d8} .review-grid.visible .review:first-child:before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;pointer-events:none;background:var(--action);transform-origin:left;animation:rule-draw 1s var(--ease-out) .25s backwards} @keyframes rule-draw{from{transform:scaleX(0)}} /* 6 · Closing. The lamp comes back to light the final action: a soft red pool under the CTA that breathes very slowly and, on desktop, leans toward the cursor. The approved ambient glow stays as it was; the WhatsApp CTA gets a single halo when it arrives. */ .closing:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(34% 36% at 50% 74%,#d9233526,#d9233500 72%);translate:calc((var(--cx,.5) - .5) * 26%) 0;animation:closing-breathe 9s ease-in-out infinite} .closing.is-paused:after{animation-play-state:paused} .closing-inner.visible .button-whatsapp{animation:cta-halo 1.5s ease-out 1.05s backwards} @keyframes closing-breathe{0%,100%{opacity:.78;scale:1}50%{opacity:1;scale:1.07}} @keyframes cta-halo{from{box-shadow:0 0 0 0 #d9233566,0 7px 24px #d923351b}to{box-shadow:0 0 0 22px #d9233500,0 7px 24px #d923351b}} /* Micro-interactions: a short press on buttons; FAQ answers open smoothly where supported. */ .button:active{transform:translateY(-1px) scale(.985)} @supports selector(::details-content){.faq details::details-content{block-size:0;overflow:clip;transition:block-size .38s var(--ease-out),content-visibility .38s allow-discrete}.faq details[open]::details-content{block-size:auto}@media(prefers-reduced-motion:reduce){.faq details::details-content{transition:none}}} @supports (interpolate-size:allow-keywords){.faq{interpolate-size:allow-keywords}} /* Floating WhatsApp: shown once the hero's own CTA has scrolled away, so it never sits on the trust strip, and hidden again while the closing CTA is on screen (a