/* ============================================================
   CARRERA: motion + finish layer
   Every section gets its own entrance so the scroll never repeats
   itself. All of it is gated on html.fx (set by fx.js), so content is
   visible by default with no JS, and all of it switches off under
   prefers-reduced-motion.
   ============================================================ */

/* ---------- scroll progress ---------- */
.progress { position: fixed; left: 0; right: 0; top: 0; z-index: 45; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--white); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- film grain over everything, very faint ---------- */
main { overflow-x: clip; }
.fx body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: url("assets/grain.png") repeat; opacity: .09; mix-blend-mode: overlay; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { background-position: 0 0; } 20% { background-position: -37px 23px; } 40% { background-position: 29px -41px; } 60% { background-position: -18px -9px; } 80% { background-position: 44px 31px; } 100% { background-position: 0 0; } }

/* ---------- hero clip ---------- */
.fx .hero__media { opacity: 0; transform: scale(1.03); transition: opacity 1.2s var(--ease), transform 1.6s var(--ease); }
.fx .hero.is-ready .hero__media { opacity: 1; transform: none; }
.fx .quote__media { transition: opacity .9s var(--ease); }

/* hero headline: each line rises out of its own mask, tilted, then settles */
.fx .hero h1[data-fx] { animation: none !important; }
.fx .hero h1 .ln { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; vertical-align: top; }
.fx .hero h1 .ln > span { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; }
.fx .hero.is-ready h1 .ln > span { animation: lineUp 1.1s var(--ease) forwards; }
.fx .hero.is-ready h1 .ln:nth-child(2) > span { animation-delay: .14s; }
@keyframes lineUp { to { transform: none; } }

/* ---------- section headings: a different entrance each ---------- */
.fx [data-fx].reveal { opacity: 1 !important; transform: none !important; }
.fx [data-fx] .w { display: inline-block; white-space: pre; }
.fx [data-fx] .c { display: inline-block; white-space: pre; }

/* rise: words from a mask (services) */
.fx [data-fx="rise"] .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx [data-fx="rise"] .w { transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.fx [data-fx="rise"].fx-in .w { transform: none; }

/* wipe: the heading is uncovered left to right, like the slider (process) */
.fx [data-fx="wipe"] { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1); }
.fx [data-fx="wipe"].fx-in { clip-path: inset(0 0 0 0); }

/* blur: words come into focus (reviews) */
.fx [data-fx="blur"] .w { opacity: 0; filter: blur(12px); transform: translateY(6px); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.fx [data-fx="blur"].fx-in .w { opacity: 1; filter: none; transform: none; }

/* stamp: words slam down like the logo stamp (warranty) */
.fx [data-fx="stamp"] .w { opacity: 0; transform: scale(1.9) rotate(-4deg); }
.fx [data-fx="stamp"].fx-in .w { animation: slam .55s cubic-bezier(.5, 0, .75, .3) forwards, settle .4s var(--ease) forwards; animation-delay: calc(var(--i) * 110ms), calc(var(--i) * 110ms + .55s); }
@keyframes slam { 0% { opacity: 0; transform: scale(1.9) rotate(-4deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: scale(.96) rotate(0); } }
@keyframes settle { from { opacity: 1; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* skew: words swing up off an angle (gallery) */
.fx [data-fx="skew"] .w { opacity: 0; transform: translateY(45%) skewY(9deg); transform-origin: 0 100%; transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i) * 80ms); }
.fx [data-fx="skew"].fx-in .w { opacity: 1; transform: none; }

/* chars: letters ripple in (faq) */
.fx [data-fx="chars"] .c { opacity: 0; transform: translateY(.45em); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 22ms); }
.fx [data-fx="chars"].fx-in .c { opacity: 1; transform: none; }

/* type: typed out with a caret (contact) */
.fx [data-fx="type"] .c { opacity: 0; }
.fx [data-fx="type"].fx-in .c { animation: typeOn .01s linear forwards; animation-delay: calc(var(--i) * 42ms); }
@keyframes typeOn { to { opacity: 1; } }
.fx [data-fx="type"]::after { content: ""; display: inline-block; width: .08em; height: .9em; margin-left: .06em; vertical-align: -.08em; background: var(--white); opacity: 0; }
.fx [data-fx="type"].fx-in::after { animation: caret .9s steps(1) infinite; animation-delay: var(--caret-at, 1s); }
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- staggered groups: each group moves its own way ---------- */
[data-stagger] > * { --i: 0; }
.js-reveal [data-stagger] > .reveal,
.js-reveal [data-stagger] > * > .reveal { transition-delay: calc(var(--i) * 85ms); }
/* services tiles: wipe in from the left */
.fx .svcl > li { clip-path: inset(0 100% 0 0 round 14px); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--i) * 45ms); }
.fx .svcl.fx-in > li { clip-path: inset(0 0 0 0 round 14px); }
/* before/afters: lift and settle from a slight scale */
.js-reveal .bas > .reveal { transform: translateY(30px) scale(.94); }
/* steps: slide in from the right */
.js-reveal .steps > .reveal { transform: translateX(40px); }
/* reassurances: pop */
.js-reveal .assure > .reveal { transform: scale(.86); }
/* faq: alternate sides */
.js-reveal .faq > .reveal:nth-child(odd) { transform: translateX(-36px); }
.js-reveal .faq > .reveal:nth-child(even) { transform: translateX(36px); }
.js-reveal [data-stagger] > .reveal.is-in { transform: none; }

/* reviews: cards fan up from a tilt */
.fx .revs > .rev { opacity: 0; transform: translateY(50px) rotate(calc(-2deg + var(--i) * 2deg)); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.fx .revs.fx-in > .rev { opacity: 1; transform: none; }

/* gallery: tiles open like shutters, bottom up */
.fx .gal > .gal__i { clip-path: inset(100% 0 0 0 round 14px); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--i) * 70ms); }
.fx .gal.fx-in > .gal__i { clip-path: inset(0 0 0 0 round 14px); }

/* reassurance icons draw up from the baseline */
.fx .assure svg { clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease) .25s; }
.fx .assure > .is-in svg { clip-path: inset(0 0 0 0); }

/* warranty seal: stamped on when the photo arrives */
.fx .war__seal { opacity: 0; transform: scale(2) rotate(-30deg); }
.fx .war__media.is-in .war__seal { animation: sealSlam .6s cubic-bezier(.5, 0, .75, .3) .5s forwards, sealSettle .45s var(--ease) 1.1s forwards; }
@keyframes sealSlam { 0% { opacity: 0; transform: scale(2) rotate(-30deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: scale(.92) rotate(-6deg); } }
@keyframes sealSettle { from { opacity: 1; transform: scale(.92) rotate(-6deg); } to { opacity: 1; transform: rotate(-8deg); } }
.fx .war__media.is-in { animation: jolt .3s linear 1.08s; }
@keyframes jolt { 25% { transform: translate(2px, 1px); } 50% { transform: translate(-2px, -1px); } 75% { transform: translate(1px, -1px); } }

/* score: the stars light one after another */
.fx .score .stars svg { opacity: .18; transition: opacity .3s; }
.fx .score.fx-in .stars svg { opacity: 1; }
.fx .score.fx-in .stars svg:nth-child(2) { transition-delay: .12s; }
.fx .score.fx-in .stars svg:nth-child(3) { transition-delay: .24s; }
.fx .score.fx-in .stars svg:nth-child(4) { transition-delay: .36s; }
.fx .score.fx-in .stars svg:nth-child(5) { transition-delay: .48s; }

/* parallax targets (fx.js writes --py) */
.war__media img { transform: translateY(var(--py, 0px)) scale(1.12); will-change: transform; }

/* ---------- premium finish: frames, sheen, spotlight ---------- */
/* photo frames: a hairline of light, a soft vignette and a sheen that crosses on hover */
.gal__i button, .war__media { position: relative; isolation: isolate; }
.gal__i button::after, .war__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -60px 80px -40px rgba(0,0,0,.55);
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; transition: background-position 1.1s var(--ease);
}
.gal__i button:hover::after, .war__media:hover::after { background-position: -30% 0; }
.bas .ba, .ba { box-shadow: 0 30px 60px -32px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1); }
.gal__i button { box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }

/* cards: gradient hairline border plus a light that follows the pointer */
.rev, .step, .svcl li {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(255,255,255,.075), transparent 60%) padding-box,
    linear-gradient(var(--coal), var(--coal)) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.05) 38%, rgba(255,255,255,.03) 62%, rgba(255,255,255,.16)) border-box;
  border: 1px solid transparent;
}
.step { background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(255,255,255,.075), transparent 60%) padding-box,
    linear-gradient(var(--char), var(--char)) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.05) 38%, rgba(255,255,255,.03) 62%, rgba(255,255,255,.16)) border-box; }
.rev, .step, .svcl li { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
@media (hover: hover) { .rev:hover, .step:hover, .svcl li:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(0,0,0,.9); } }

/* the light form cards get a paper sheen and a lifted edge */
.card { background: linear-gradient(160deg, #FFFFFF 0%, var(--paper) 55%, #ECECE7 100%); box-shadow: 0 40px 80px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.9); }

/* ---------- CTA pulse: a ring that breathes out, plus a light sweep ---------- */
.cta .btn, .nav__cta, .sticky .btn, .card button[type="submit"], .qf__next, .promo__form button[type="submit"] { position: relative; overflow: hidden; isolation: isolate; }
.fx .cta .btn, .fx .nav__cta, .fx .sticky .btn { animation: pulseLight 2.6s var(--ease) infinite; }
.fx .card button[type="submit"], .fx .qf__next, .fx .promo__form button[type="submit"] { animation: pulseDark 2.6s var(--ease) infinite; }
@keyframes pulseLight { 0% { box-shadow: 0 12px 26px -14px rgba(0,0,0,.8), 0 0 0 0 rgba(255,255,255,.5); } 70% { box-shadow: 0 12px 26px -14px rgba(0,0,0,.8), 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 12px 26px -14px rgba(0,0,0,.8), 0 0 0 0 rgba(255,255,255,0); } }
@keyframes pulseDark { 0% { box-shadow: 0 12px 24px -14px rgba(0,0,0,.6), 0 0 0 0 rgba(13,13,12,.4); } 70% { box-shadow: 0 12px 24px -14px rgba(0,0,0,.6), 0 0 0 12px rgba(13,13,12,0); } 100% { box-shadow: 0 12px 24px -14px rgba(0,0,0,.6), 0 0 0 0 rgba(13,13,12,0); } }
.cta .btn::before, .nav__cta::before, .sticky .btn::before, .card button[type="submit"]::before, .qf__next::before, .promo__form button[type="submit"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 140% 0;
}
.card button[type="submit"]::before, .qf__next::before, .promo__form button[type="submit"]::before { background-image: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); }
.fx .cta .btn::before, .fx .nav__cta::before, .fx .sticky .btn::before, .fx .card button[type="submit"]::before, .fx .qf__next::before, .fx .promo__form button[type="submit"]::before { animation: sweep 4.2s var(--ease) infinite 1s; }
@keyframes sweep { 0%, 55% { background-position: 140% 0; } 85%, 100% { background-position: -40% 0; } }
.btn:disabled { animation: none !important; }

/* ---------- details open smoothly where the browser can size to auto ---------- */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .fq::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .fq[open]::details-content { block-size: auto; }
}

/* ---------- reduced motion: everything settles immediately ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx body::after { animation: none; }
  .fx [data-fx] .w, .fx [data-fx] .c, .fx .hero h1 .ln > span { opacity: 1 !important; transform: none !important; filter: none !important; }
  .fx [data-fx="wipe"] { clip-path: none !important; }
  .fx [data-fx="type"]::after { display: none; }
  .fx .svcl > li, .fx .gal > .gal__i, .fx .assure svg { clip-path: none !important; }
  .fx .revs > .rev, .fx .war__seal { opacity: 1 !important; transform: none !important; }
  .fx .war__seal { transform: rotate(-8deg) !important; }
  .fx .score .stars svg { opacity: 1; }
  .war__media img { transform: none !important; }
}