/* Motion and polish layer (08.10.2026). Loaded after style.css; nothing here changes content.
   Hidden states exist only under classes that JS adds, so without JS everything is visible. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-press: cubic-bezier(.2, 0, 0, 1);
  --d-fast: 150ms;
  --d-mid: 200ms;
  --d-slow: 300ms;
  --ring: 0 0 0 1px rgba(16, 33, 63, .06);
  --lift: 0 0 0 1px rgba(16, 33, 63, .06), 0 18px 36px -18px rgba(16, 33, 63, .16), 0 6px 12px -6px rgba(16, 33, 63, .06);
}
html { scroll-behavior: smooth; scroll-padding-top: 104px; }

/* Ambient background: low-alpha radial light, no blur filter, slow drift */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora::before {
  content: ''; position: absolute; inset: -12%;
  background:
    radial-gradient(640px 460px at 8% 4%, rgba(200, 162, 90, .13), transparent 62%),
    radial-gradient(600px 440px at 94% 12%, rgba(51, 76, 105, .08), transparent 62%),
    radial-gradient(680px 520px at 86% 78%, rgba(200, 162, 90, .09), transparent 62%),
    radial-gradient(560px 440px at 6% 94%, rgba(51, 76, 105, .07), transparent 62%);
  animation: aurora-drift 26s linear infinite alternate;
}
@keyframes aurora-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2.5%, -2%, 0) scale(1.06); } }

/* Sticky floating header that turns into a glass bar after scrolling */
.header { position: sticky; top: 0; z-index: 30; padding-top: 10px; }
.header .header-inner { height: 76px; padding-inline: 18px; border-radius: 20px; position: relative; isolation: isolate; }
.header .header-inner::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(16, 33, 63, .06), 0 14px 30px -18px rgba(16, 33, 63, .22);
  opacity: 0; transition: opacity var(--d-mid) var(--ease-std);
}
.header.is-scrolled .header-inner::before { opacity: 1; }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-mid) var(--ease-out);
}
@media (hover: hover) { .desktop-nav a:hover::after { transform: scaleX(1); } .desktop-nav a:hover { color: inherit; } }

/* Buttons: press feedback and one sheen on the main call to action */
.btn { transition: transform var(--d-fast) var(--ease-press), background-color var(--d-mid) var(--ease-std), box-shadow var(--d-mid) var(--ease-std); }
.btn:active { transform: scale(.97); transition-duration: 90ms; }
.hero-buttons .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.hero-buttons .btn-primary::after {
  content: ''; position: absolute; inset: -20% auto -20% 0; width: 42%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-130%); animation: cta-sheen 4.5s linear 1.6s infinite;
}
@keyframes cta-sheen { 0% { transform: translateX(-130%); } 16% { transform: translateX(330%); } 100% { transform: translateX(330%); } }

/* Cards: hairline ring at rest, gentle lift on hover */
.service-card, .price-card, .faq-item { box-shadow: var(--ring); }
.service-card, .price-card, .choice { transition: transform var(--d-mid) var(--ease-out), box-shadow var(--d-mid) var(--ease-out), border-color var(--d-mid) var(--ease-std); }
@media (hover: hover) {
  .service-card:hover, .price-card:hover { transform: translateY(-3px); box-shadow: var(--lift); }
  .choice:hover { transform: translateY(-2px); }
}

/* Hero entrance: one orchestrated moment. html.hs is set by an inline script in <head>. */
#hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
#hero-title .w > i { display: inline-block; font-style: normal; transition: transform .75s var(--ease-out) calc(120ms + var(--i, 0) * 60ms); }
html.hs:not(.hs-ready) #hero-title { visibility: hidden; }
html.hs:not(.hs-go) #hero-title .w > i { transform: translateY(140%); }
.hero .kicker, .hero-description, .hero-name, .hero-buttons, .trust-row,
.hero-visual .floating-card, .hero-location, .portrait-note {
  transition: opacity .5s var(--ease-out) var(--hd, 0ms), transform .6s var(--ease-out) var(--hd, 0ms);
}
.hero .kicker { --hd: 0ms; }
.hero-description { --hd: 420ms; }
.hero-name { --hd: 500ms; }
.hero-buttons { --hd: 580ms; }
.trust-row { --hd: 900ms; }
.hero-location { --hd: 520ms; }
.floating-certificate { --hd: 640ms; }
.floating-address { --hd: 730ms; }
.floating-opening { --hd: 820ms; }
.portrait-note { --hd: 920ms; }
html.hs:not(.hs-go) .hero .kicker,
html.hs:not(.hs-go) .hero-description,
html.hs:not(.hs-go) .hero-name,
html.hs:not(.hs-go) .hero-buttons,
html.hs:not(.hs-go) .trust-row,
html.hs:not(.hs-go) .hero-location { opacity: 0; transform: translateY(10px); }
html.hs:not(.hs-go) .hero-visual .floating-card { opacity: 0; transform: translateY(12px) scale(.96); }
html.hs:not(.hs-go) .portrait-note { opacity: 0; transform: translate(-50%, 8px); }
/* The photo is the largest element: never hidden, only settles from a soft focus */
.hero-visual .hero-person > img { transition: transform .9s var(--ease-out) 260ms, filter .9s var(--ease-out) 260ms; }
html.hs:not(.hs-go) .hero-visual .hero-person > img { transform: scale(1.04); filter: blur(6px); }

/* Scroll reveals: only elements measured below the fold at load are armed */
.rv { opacity: 0; transform: translateY(16px); }
.rv.in { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) var(--rd, 0ms), transform .6s var(--ease-out) var(--rd, 0ms); }

/* Images below the fold fade in once decoded */
html.img-fade img.fade-wait { opacity: 0; }
html.img-fade img.fade-in { opacity: 1; transition: opacity .4s var(--ease-std); }

/* FAQ: the answer area animates; JS drives height so <details> keeps working without it */
.faq-item { transition: box-shadow var(--d-mid) var(--ease-std); }
.faq-item[open] { box-shadow: var(--lift); }
.faq-item summary .icon { transition: transform var(--d-slow) var(--ease-out); }

/* Mobile action bar slides up when it appears */
@media (max-width: 700px) { .mobile-bar:not([hidden]) { animation: bar-in .32s var(--ease-out); } }
@keyframes bar-in { from { transform: translateY(100%); } to { transform: none; } }

/* Wizard result and service sheet use the shared easing */
.wizard-panel { animation: appear .32s var(--ease-out); }

@media (max-width: 1100px) { .header .header-inner { height: 72px; } }
@media (max-width: 700px) {
  .header { padding-top: 8px; }
  .header .header-inner { height: 64px; padding-inline: 12px; border-radius: 18px; }
  html { scroll-padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora::before, .hero-buttons .btn-primary::after { animation: none; }
  html.hs:not(.hs-go) #hero-title .w > i, html.hs:not(.hs-go) .hero-visual .hero-person > img { transform: none; filter: none; }
  .rv { transform: none; }
}