/* Architectural depth: layered photographs, deliberate entrances and tactile actions. */
:root { --motion-ease: cubic-bezier(.16,1,.3,1); }
.header { transition: background .35s,box-shadow .35s; }
.header.is-scrolled { background: #f6f7f5; }
html[data-motion="full"] .parallax-frame { translate: 0 var(--frame-drift,0px); }
html[data-motion="full"] .parallax-image { translate: 0 var(--parallax-y,0px); scale: var(--parallax-scale,1); transform: scale(var(--hover-scale,1)); transform-origin: center; transition: transform 1.2s var(--motion-ease); will-change: translate; }
html[data-motion="full"] .hero-photo > .hero-slide { transition: opacity .85s ease,transform 1.2s var(--motion-ease); }
html[data-motion="full"] .contact-backdrop { transform: none; }
html[data-motion="full"] .hero-photo,html[data-motion="full"] .rental-photo,html[data-motion="full"] .territory-gallery figure { transition: box-shadow .6s,border-radius .6s; }
html[data-motion="full"] .button { position: relative; isolation: isolate; overflow: hidden; transition: color .35s,background .35s,box-shadow .6s var(--motion-ease),transform .6s var(--motion-ease); }
html[data-motion="full"] .button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #ffffff12; clip-path: circle(0% at 50% 100%); transition: clip-path .65s var(--motion-ease); pointer-events: none; z-index: -1; }
html[data-motion="full"] .button .icon,html[data-motion="full"] .text-button .icon,html[data-motion="full"] .header-contact .icon,html[data-motion="full"] .hero-address .icon-disc,html[data-motion="full"] .brand img { transition: transform .6s var(--motion-ease),background .35s,color .35s; }
html[data-motion="full"] .desktop-nav a { transition: color .3s,background .3s,transform .5s var(--motion-ease),box-shadow .5s; }
html[data-motion="full"] .quiet-link,html[data-motion="full"] .footer-contacts a,html[data-motion="full"] .footer-credit,html[data-motion="full"] .company-contact-card a { text-decoration: none; background-image: linear-gradient(currentColor,currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .55s var(--motion-ease),color .3s; }
html[data-motion="full"] .space,html[data-motion="full"] .faq-list details { transition: background .4s,box-shadow .6s var(--motion-ease),transform .6s var(--motion-ease); }
html[data-motion="full"] .space-name,html[data-motion="full"] .gallery-group summary > span,html[data-motion="full"] .gallery-preview { transition: transform .6s var(--motion-ease),border-radius .6s; }
html[data-motion="full"] .space summary > .icon,html[data-motion="full"] .faq-list summary .icon,html[data-motion="full"] .gallery-count .icon { transition: transform .55s var(--motion-ease),background .3s,color .3s; }
html[data-motion="full"] .gallery-group summary { transition: color .35s,background .35s; border-radius: 12px; }
html[data-motion="full"] .gallery-thumbnail { overflow: hidden; transition: box-shadow .5s,transform .7s var(--motion-ease); }
html[data-motion="full"] .gallery-thumbnail img { transition: transform 1.15s var(--motion-ease),filter .7s; }
html[data-motion="full"] .gallery-thumbnail > span { transition: transform .6s var(--motion-ease),background .4s; }
html[data-motion="full"] .depth-card { position: relative; transform-style: preserve-3d; transition: transform .55s var(--motion-ease),box-shadow .6s,background .4s; }
html[data-motion="full"] .certificate-card > a { transition: background .5s,box-shadow .5s; }
html[data-motion="full"] .certificate-card img { transition: transform .8s var(--motion-ease),filter .8s; }
html[data-motion="full"] .plan-tool,html[data-motion="full"] .plan-filters button,html[data-motion="full"] .plan-picker-trigger,html[data-motion="full"] .plan-picker-option,html[data-motion="full"] .plan-controls button,html[data-motion="full"] .dialog-close,html[data-motion="full"] .hero-gallery-controls button,html[data-motion="full"] .footer-top { transition: color .25s,background .3s,box-shadow .4s,transform .45s var(--motion-ease); }
html[data-motion="full"] .property-shape { transition: fill-opacity .2s,stroke-width .2s; }
html[data-motion="full"] dialog[open] { animation: dialog-arrive .55s var(--motion-ease); }
html[data-motion="full"] dialog[open]::backdrop { animation: backdrop-arrive .4s; }
@keyframes dialog-arrive { from { opacity: 0; translate: 0 32px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (hover:hover) and (pointer:fine) {
 html[data-motion="full"] .button:hover { transform: translateY(-5px); box-shadow: 0 18px 32px -15px #25373570; }
 html[data-motion="full"] .button:hover::before { clip-path: circle(145% at 50% 100%); }
 html[data-motion="full"] .button:hover .icon { transform: rotate(-35deg); background: #ffffff30; }
 html[data-motion="full"] .button.outline:hover .icon { color: #fff; background: var(--deep); }
 html[data-motion="full"] .button.light:hover { background: #d4dfcf; }
 html[data-motion="full"] .contact-action .button:hover .icon { transform: translate(5px,-5px) scale(1.16); background: transparent; }
 html[data-motion="full"] .text-button:hover .icon { transform: translate(5px,-5px); }
 html[data-motion="full"] .brand:hover img { transform: translateY(-3px) rotate(-4deg); }
 html[data-motion="full"] .header-contact:hover .icon { transform: rotate(-18deg) scale(1.12); background: #e3eade; }
 html[data-motion="full"] .hero-address:hover .icon-disc { transform: translateY(-4px); background: #d7e2cf; }
 html[data-motion="full"] .desktop-nav a:hover { transform: translateY(-3px); box-shadow: 0 7px 16px -9px #25373560; }
 html[data-motion="full"] .quiet-link:hover,html[data-motion="full"] .footer-contacts a:hover,html[data-motion="full"] .footer-credit:hover,html[data-motion="full"] .company-contact-card a:hover { background-size: 100% 1px; }
 html[data-motion="full"] .footer-contacts a:hover { color: #fff; }
 html[data-motion="full"] .hero-photo:hover,html[data-motion="full"] .rental-photo:hover,html[data-motion="full"] .territory-gallery figure:hover { --hover-scale: 1.055; box-shadow: 0 26px 50px -24px #17292366; }
 html[data-motion="full"] .space:hover { transform: translateX(6px); }
 html[data-motion="full"] .space:hover .space-name { transform: translateX(4px); }
 html[data-motion="full"] .space:not([open]):hover summary > .icon { transform: rotate(90deg); background: #253735; color: #fff; }
 html[data-motion="full"] .faq-list details:hover { transform: translateX(6px); background: #fff; box-shadow: -4px 0 0 #79132d,0 16px 30px -24px #25373570; }
 html[data-motion="full"] .faq-list details:not([open]):hover summary .icon { transform: rotate(90deg); background: #253735; color: white; }
 html[data-motion="full"] .gallery-group summary:hover { background: #ffffff09; color: #fff; }
 html[data-motion="full"] .gallery-group summary:hover > span:first-of-type { transform: translateX(7px); }
 html[data-motion="full"] .gallery-group summary:hover .gallery-preview { transform: rotate(-4deg) scale(1.09); border-radius: 12px; }
 html[data-motion="full"] .gallery-group:not([open]) summary:hover .gallery-count .icon { transform: rotate(90deg); background: #d4dfcf; color: #203a34; }
 html[data-motion="full"] .gallery-thumbnail:hover { transform: translateY(-6px); box-shadow: 0 20px 36px -22px #0009; }
 html[data-motion="full"] .gallery-thumbnail:hover img { transform: scale(1.09); filter: saturate(1.08); }
 html[data-motion="full"] .gallery-thumbnail:hover > span { transform: translateY(-5px); background: #fff; }
 html[data-motion="full"] .depth-card:hover { transform: perspective(950px) translateY(-9px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); box-shadow: 0 28px 45px -28px #25373565; }
 html[data-motion="full"] .certificate-card:hover > a { background: #dce5d4; box-shadow: 0 18px 35px -24px #25373560; }
 html[data-motion="full"] .certificate-card:hover img { transform: translateY(-6px) rotate(-2deg) scale(1.035); filter: drop-shadow(0 16px 10px #25373525); }
 html[data-motion="full"] .plan-tool:hover,html[data-motion="full"] .plan-controls button:hover,html[data-motion="full"] .hero-gallery-controls button:hover { transform: translateY(-3px); background: #d4dfcf; }
 html[data-motion="full"] .plan-filters button:hover,html[data-motion="full"] .plan-picker-trigger:hover { box-shadow: 0 7px 18px -12px #25373570; transform: translateY(-2px); }
 html[data-motion="full"] .plan-picker-option:hover { transform: translateX(3px); }
 html[data-motion="full"] .property-shape:hover { fill-opacity: .96; stroke-width: 3; }
 html[data-motion="full"] .footer-top:hover { transform: translateY(-6px); background: #d4dfcf; }
 html[data-motion="full"] .dialog-close:hover { transform: rotate(90deg); }
 html[data-motion="full"] .button:active { transform: translateY(0) scale(.98); }
}
@media (max-width:760px) {
 .footer-bottom .footer-credit { margin-left: 0; }
}

/* v32 — the grammar of the plan (DESIGN.md "Version 32"). Motion is always on; no light effects (registry: light
   belongs to danotransportas and mapresta) and no drawn props. motion.js grows the territory's real outline to open the
   hero frame and the rental photo, and stands heading lines up from a flat footprint. The html.js states below wait for
   that script; the fail-safe animations show everything at 2.6 s if it never runs. */
html.js:not(.intro-done) .hero-photo[data-intro] { clip-path: inset(50%); animation: plan-failsafe 0s 2.6s forwards; }
html.js:not(.intro-title) #hero-title { opacity: 0; animation: plan-failsafe-title 0s 2.6s forwards; }
@keyframes plan-failsafe { to { clip-path: none; } }
@keyframes plan-failsafe-title { to { opacity: 1; } }
.hero { position: relative; }
.plot-outline { position: absolute; z-index: 4; pointer-events: none; overflow: hidden; }
html.js:not(.intro-done) .hero-gallery-controls, html.js:not(.intro-done) .hero-photo[data-intro]::after { opacity: 0; }
.hero-photo::after { transition: opacity .4s; }
.hero-gallery-controls { transition: opacity .4s; }

/* Heading lines: a flat footprint on the baseline that stands up (motion.js animates scaleY 0.06 → 1). */
.rise-line, .rise-inner { display: block; }
.rise-line { perspective: 900px; }
/* the pivot is the line's bottom edge: turning up, the whole plane stays behind it and is never wider than its column */
.rise-inner { transform-origin: 50% 100%; backface-visibility: hidden; }
/* waiting headings are transparent and untransformed (a tilted plane drew a wrapped line onto the next one, and the design gate measures the whole heading) */
h2.is-waiting .rise-inner { opacity: 0; } /* no tilt while waiting: the first keyframe of standUp() sets it */
#hero-title .rise-line, #hero-title .rise-inner, .contact h2 .rise-line, .contact h2 .rise-inner { color: inherit; display: block; }

/* Rental photo: opens through the territory outline; closed state while waiting below the fold. */
.has-window.is-closed { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); }


.territory { position: relative; isolation: isolate; overflow: hidden; }

/* The territory field opens from the middle to its full width as it scrolls in (motion.js sets --field-open 0–1). */
.territory { clip-path: inset(0 calc((1 - var(--field-open, 1)) * 13%) round calc((1 - var(--field-open, 1)) * 48px)); }

/* The closing invitation gains weight as it arrives (Archivo weight axis 300–700). */
.contact h2 .closing-word { font-weight: var(--close-weight, 600); }

@media (hover: hover) and (pointer: fine) {
  /* Certificates: the framed original lifts and its shadow deepens. */
  html[data-motion="full"] .certificate-card > a { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
  html[data-motion="full"] .certificate-card:hover > a { transform: translateY(-8px); background: transparent; box-shadow: none; }
  html[data-motion="full"] .certificate-card:hover img { transform: none; filter: drop-shadow(0 28px 22px #1f302a45) drop-shadow(0 3px 4px #1f302a30); }
  /* Directory plates are wide: they lift and catch the light instead of tilting. */
  html[data-motion="full"] .company-contact-card.depth-card:hover { transform: translateY(-4px); }
}

@media (max-width: 760px) {
  .territory { clip-path: inset(0 calc((1 - var(--field-open, 1)) * 6%) round calc((1 - var(--field-open, 1)) * 28px)); }
}
