/* Home page only: premium look + motion. Everything here is switched off for prefers-reduced-motion. */

/* ---- hero: a sectional garage door rolls up to reveal the photo */
.home .hero{background:#0f1730;min-height:min(820px,92vh);display:flex;align-items:center}
.home .hero>.wrap{width:100%}
.home .hero-bg{opacity:.85}
.home .hero:after{background:linear-gradient(100deg,rgba(15,23,48,.97) 0%,rgba(15,23,48,.86) 42%,rgba(15,23,48,.35) 100%),radial-gradient(60% 80% at 85% 10%,rgba(53,207,192,.22),transparent 70%)}
.door{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;animation:door-up 1.9s cubic-bezier(.7,0,.2,1) .35s forwards;will-change:transform}
.door i{flex:1;background:linear-gradient(180deg,#2c3a66 0%,#22305a 55%,#1a2548 100%);border-top:1px solid rgba(255,255,255,.13);border-bottom:2px solid rgba(0,0,0,.45);box-shadow:inset 0 10px 18px rgba(255,255,255,.035)}
.door:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px;background:var(--teal);box-shadow:0 0 34px 10px rgba(53,207,192,.55)}
@keyframes door-up{to{transform:translateY(-102%)}}

.home .hero .wrap>div>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.home .hero .wrap>div>:nth-child(1){animation-delay:.15s}
.home .hero .wrap>div>:nth-child(2){animation-delay:.28s}
.home .hero .wrap>div>:nth-child(3){animation-delay:.4s}
.home .hero .wrap>div>:nth-child(4){animation-delay:.52s}
.home .hero .wrap>div>:nth-child(5){animation-delay:.64s}
.home .hero .wrap>div>:nth-child(6){animation-delay:.8s}
.home .hero .card-form{animation:slide-in 1s cubic-bezier(.2,.7,.2,1) .9s both;border:1px solid rgba(255,255,255,.6);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 8px rgba(255,255,255,.06)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes slide-in{from{opacity:0;transform:translateX(40px)}}

.home .hero h1{font-size:clamp(2.2rem,5.2vw,3.7rem)}
.home .hero h1 em{background:linear-gradient(100deg,var(--teal) 0%,#8ff3ea 35%,var(--blue) 60%,var(--teal) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-220% 0}}

/* call button: soft pulse ring */
.home .hero .btn-cta,.home .band .btn-cta{position:relative}
.home .hero .btn-cta:before,.home .band .btn-cta:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,179,33,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{70%,100%{box-shadow:0 0 0 18px rgba(255,179,33,0)}}
.home .btn-cta svg{animation:ring 3.2s ease-in-out infinite;transform-origin:50% 50%}
@keyframes ring{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-16deg)}92%{transform:rotate(14deg)}95%{transform:rotate(-10deg)}98%{transform:rotate(6deg)}}

/* ---- stats */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:38px;padding-bottom:38px}
.stats div{text-align:center;padding:0 12px;border-left:1px solid var(--line)}
.stats div:first-child{border:0}
.stats b{display:block;font-size:clamp(2rem,4vw,2.9rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.stats b span{color:#0e8f84}
.stats small{display:block;margin-top:6px;color:var(--muted);font-weight:600;font-size:.9rem}

/* ---- marquee */
.marquee{background:var(--navy);color:#fff;overflow:hidden;padding:15px 0;white-space:nowrap}
.marquee .track{display:inline-flex;animation:scroll 38s linear infinite}
.marquee span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.84rem}
.marquee span:after{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---- scroll reveal (classes are added by home.js, so no-JS visitors see everything) */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* ---- cards */
.home .card{border-radius:18px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .8s}
.home .card img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.home a.card{overflow:hidden}
.home a.card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(20,30,60,.18)}
.home a.card:hover img{transform:scale(1.08)}
.home .card .more{transition:letter-spacing .3s}
.home a.card:hover .more{letter-spacing:.03em}

/* ---- steps: a line draws through the four numbers */
.home .steps-row{position:relative}
.home .steps-row:before{content:"";position:absolute;left:4%;right:4%;top:47px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.4,0,.2,1) .3s}
.home .steps-row.in:before{transform:scaleX(1)}
.home .step{position:relative;border-radius:18px}
.home .step .n{position:relative;background:linear-gradient(135deg,var(--navy),var(--navy2));box-shadow:0 8px 18px rgba(28,39,71,.3)}

/* ---- gate photo: two gate leaves swing open */
.gatewrap{position:relative;perspective:1400px;border-radius:18px}
.gatewrap .leaf{position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(90deg,#141c35 0 7px,rgba(20,28,53,.82) 7px 30px),linear-gradient(#141c35,#141c35) top/100% 12px no-repeat,linear-gradient(#141c35,#141c35) bottom/100% 12px no-repeat;transition:transform 1.9s cubic-bezier(.6,0,.2,1) .25s;backface-visibility:hidden}
.gatewrap .leaf.l{left:0;transform-origin:left;border-radius:18px 0 0 18px}
.gatewrap .leaf.r{right:0;transform-origin:right;border-radius:0 18px 18px 0}
.gatewrap.in .leaf.l{transform:rotateY(-104deg)}
.gatewrap.in .leaf.r{transform:rotateY(104deg)}

/* ---- reviews + CTA band */
.home .quote{background:radial-gradient(70% 120% at 50% 0%,#2b3a67 0%,#141c35 70%)}
.home .review{transition:transform .35s,opacity .8s}
.home .review:hover{transform:translateY(-6px)}
.home .band{background:linear-gradient(110deg,#141c35,#2b3a67,#0e6f7d,#2b3a67,#141c35);background-size:300% 100%;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{background-position:100% 0}}
.home .sec h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}

/* ---- scroll-driven: progress bar, hero parallax, pinned garage scene */
.progress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:70;background:linear-gradient(90deg,var(--teal),var(--blue),var(--cta));transform:scaleX(var(--sp,0));transform-origin:left}
.home .hero-bg{top:-12%;height:124%;transform:translate3d(0,var(--hy,0),0)}
/* ---- cinematic scroll sequence. Without JS (or with reduced motion) it is a static photo banner showing the end state. */
.cine{background:#000;color:#fff;position:relative;--f:1;--d:1;--z:1}
.cine-pin{position:relative;min-height:78vh;display:grid;place-items:center;padding:90px 20px;overflow:hidden}
.cine-frame{position:absolute;inset:0;overflow:hidden;background:#0b0c10}
.cine-img{width:100%;height:100%;object-fit:cover}
.cine-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),radial-gradient(90% 70% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.25) 60%,rgba(0,0,0,.55)),linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.75) 100%)}
.cine-door,.cine-line,.cine-hint{display:none}
.cine-end{position:relative;text-align:center;max-width:980px;padding:0 20px}
.cine-end h2,.cine-line{font-weight:800;letter-spacing:-.045em;line-height:1;margin:0;font-size:clamp(2.7rem,8.4vw,7.2rem);background:linear-gradient(180deg,#fff 30%,#aab1c2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cine-end p,.cine-line small{display:block;font-size:clamp(1.05rem,1.7vw,1.45rem);font-weight:500;letter-spacing:-.01em;line-height:1.4;color:#c5cad6;-webkit-text-fill-color:#c5cad6;margin:22px auto 0;max-width:620px}
.cine-end ul{list-style:none;display:flex;justify-content:center;gap:clamp(22px,5vw,64px);padding:0;margin:38px 0 36px;flex-wrap:wrap}
.cine-end li{font-size:.85rem;color:#d3d8e3;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.cine-end li b{display:block;font-size:clamp(1.4rem,2.4vw,2rem);color:#fff;letter-spacing:-.03em;text-transform:none;margin-bottom:4px}
.cine-end .btn{padding:17px 34px;font-size:1.08rem}

.cine.on{height:400vh}
.cine.on .cine-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding:0;display:block}
.cine.on .cine-frame{inset:calc((1 - var(--f)) * 15vh) calc((1 - var(--f)) * 13vw);border-radius:calc((1 - var(--f)) * 44px);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 160px rgba(0,0,0,.9)}
.cine.on .cine-img{transform:scale(calc(1.28 - var(--z) * .28));will-change:transform}
.cine.on .cine-shade{opacity:calc(.35 + var(--d) * .65)}
/* the door: dark anodised flush panels with a moving sheen and warm light spilling from underneath */
.cine.on .cine-door{display:flex;flex-direction:column;position:absolute;inset:0;transform:translateY(calc(var(--d) * -101.5%));will-change:transform}
.cine-door i{flex:1;position:relative;background:linear-gradient(180deg,#3b404c 0%,#2a2e38 9%,#20232b 86%,#0e1014 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.6)}
.cine-door i:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.cine-door:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(108deg,transparent 32%,rgba(255,255,255,.13) 46%,rgba(255,255,255,.03) 54%,transparent 66%);background-size:260% 100%;background-position:calc(100% - var(--s,0) * 100%) 0}
.cine-door:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:#050506;box-shadow:0 26px 110px 46px rgb(255 196 120 / calc(var(--d) * .55))}
.cine.on .cine-line,.cine.on .cine-end{display:block;position:absolute;left:0;right:0;top:50%;margin:0 auto;padding:0 22px;text-align:center;opacity:0;will-change:transform,opacity,filter}
.cine.on .cine-hint{display:block;position:absolute;left:0;right:0;bottom:34px;text-align:center;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#8d94a6;opacity:calc(1 - var(--f))}
.cine.on .cine-hint:after{content:"";display:block;width:1px;height:38px;margin:10px auto 0;background:linear-gradient(#8d94a6,transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:700px){
  .cine.on .cine-frame{inset:calc((1 - var(--f)) * 17vh) calc((1 - var(--f)) * 6vw);border-radius:calc((1 - var(--f)) * 28px)}
  .cine-end ul{gap:18px 26px;margin:28px 0}
}

@media (max-width:980px){
  .home .hero{min-height:0}
  .stats .wrap{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .stats div:nth-child(3){border:0}
  .home .steps-row:before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .door,.progress{display:none}
  .home *, .home *:before, .home *:after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .gatewrap .leaf{display:none}
  .home .steps-row:before{transform:none}
  .home .hero h1 em{color:var(--teal);background:none}
}