/* =====================================================================
   Landing (aerion.ee), draft 22 Oct 2026: two doors, nothing else.
   Phone: stacked, the seam rises from 56% left to 44% right.
   Desktop: side by side, the seam leans from 54% top to 46% bottom.
   Hover on desktop (like hepta.ee/hepta): the door you point at widens,
   its picture slowly zooms in, the other door dims.
   ===================================================================== */
:root { --gutter: 20px; --ease-door: cubic-bezier(0.22, 0.8, 0.24, 1); --ease-hover: cubic-bezier(0.4, 0, 0.2, 1); }
@media (min-width: 801px) { :root { --gutter: clamp(32px, 3.2vw, 72px); } }

html, body.land { height: 100%; background: #000; }
body.land { overflow: hidden; }
.land__main { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }

.land__brand { position: absolute; z-index: 5; top: max(22px, env(safe-area-inset-top)); left: var(--gutter); color: var(--text-pure); line-height: 0; }
.land__mark { height: 15px; width: auto; display: block; }
/* language switch, top right, opposite the wordmark */
.land__lang { position: absolute; z-index: 5; top: max(17px, env(safe-area-inset-top)); right: var(--gutter); color: var(--text-pure); font-size: 15px; line-height: 1; padding: 4px 0; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.land__lang:hover, .land__lang:focus-visible { color: var(--text-pure); border-bottom-color: var(--accent); }

.door { position: absolute; overflow: hidden; }
.door--now { z-index: 0; }
.door--net { z-index: 1; }
.door__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.door__bg--now { background: #0a0a0a url('../assets/landing/insp-desk-poster.jpg') center / cover no-repeat; }
.door__bg--net { background: #0a0a0a url('../assets/landing/net-poster.jpg') center / cover no-repeat; }
/* WebP covers where the browser takes image-set() with type() (about half the bytes); others keep the JPEG above (23 Oct) */
.door__bg--now { background-image: image-set(url('../assets/landing/insp-desk-poster.webp') type('image/webp'), url('../assets/landing/insp-desk-poster.jpg') type('image/jpeg')); }
.door__bg--net { background-image: image-set(url('../assets/landing/net-poster.webp') type('image/webp'), url('../assets/landing/net-poster.jpg') type('image/jpeg')); }
.door::before, .door::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.door::before { z-index: 1; background: #000; opacity: 0; }
.door--now::after { background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.42) 100%); } /* taste-skill-ignore: scrim under text on a photo */
.door--net::after { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.85) 100%); } /* taste-skill-ignore: scrim */

.door__text { position: absolute; z-index: 2; color: var(--text-pure); }
.door__h {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 72px); line-height: 0.95; letter-spacing: -0.025em;
  margin: 0 0 14px; text-wrap: balance; max-width: 13ch;
}
.door__p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; margin: 0; max-width: 40ch; text-wrap: pretty; }
.door__btn { margin-top: 22px; }
.door__more { display: inline-block; margin-top: 14px; margin-left: 4px; font-size: 16px; color: var(--text-pure); text-decoration: underline 2px var(--accent); text-underline-offset: 6px; transition: color 0.2s ease; }
.door__more:hover, .door__more:focus-visible { color: var(--accent); }
.door--net .door__btn { margin-right: 18px; }

/* buttons on this page: sentence case at reading size, not 12px tracked caps */
.land .btn { font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 15px 26px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.land .btn span[aria-hidden] { display: inline-block; transition: transform 0.25s var(--ease-door); }
.land .btn:hover span[aria-hidden], .land .btn:focus-visible span[aria-hidden] { transform: translateX(4px); }
.land .btn:active { transform: scale(0.97); }

/* opening: the text of each door rises in, the network door a beat later */
@keyframes doorRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes doorFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes netOpen { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
@keyframes bgSettle { from { transform: scale(1.08); } }
.door__bg { animation: bgSettle 2.2s var(--ease-door) backwards; }
.door__h, .door__p, .door__btn, .door__more { animation: doorRise 0.75s var(--ease-door) both; }
.door--now .door__h { animation-delay: 0.08s; }
.door--now .door__p { animation-delay: 0.15s; }
.door--now .door__btn { animation-delay: 0.22s; }
.door--now .door__more { animation-delay: 0.28s; }
.door--net .door__h { animation-delay: 0.2s; }
.door--net .door__p { animation-delay: 0.27s; }
.door--net .door__btn { animation-delay: 0.34s; }
.door--net .door__more { animation-delay: 0.4s; }
.land__brand { animation: doorFade 0.8s ease 0.05s both; }

@media (min-width: 801px) {
  /* both doors fill the screen; only the network door is clipped, so the seam
     can slide without a gap, and each picture is sized to the widest its door gets */
  .door { inset: 0; }
  .door--now { clip-path: inset(0 40% 0 0); }
  .door--net { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); transition: clip-path 1.4s var(--ease-hover); }
  .door--now .door__bg, .door--now::before, .door--now::after { inset: 0 auto 0 0; width: 60%; }
  .door--net .door__bg, .door--net::before, .door--net::after { inset: 0 0 0 auto; width: 60%; }
  .door--now .door__bg { transform-origin: 32% 58%; }
  .door--net .door__bg { transform-origin: 62% 46%; }
  .door__bg { transition: transform 2.6s var(--ease-hover); }
  .door::before { transition: opacity 1.2s ease; }
  .door--now .door__text { left: var(--gutter); bottom: 88px; right: 62%; }
  .door--net .door__text { left: 58%; bottom: 88px; right: var(--gutter); }
  .door--now::after { background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 60%), linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.8) 100%); } /* taste-skill-ignore: scrim */
  .land__mark { height: 18px; }

  /* opening: the network door slides in from the right */
  .door--net { animation: netOpen 0.95s var(--ease-door) backwards; }
}

@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  .door { cursor: pointer; }
  /* pointing at the inspection door */
  .land__main:has(.door--now:hover, .door--now:focus-within) .door--net { clip-path: polygon(56.5% 0, 100% 0, 100% 100%, 48.5% 100%); }
  .land__main:has(.door--now:hover, .door--now:focus-within) .door--now .door__bg { transform: scale(1.025); }
  .land__main:has(.door--now:hover, .door--now:focus-within) .door--net::before { opacity: 0.3; }
  /* pointing at the network door */
  .land__main:has(.door--net:hover, .door--net:focus-within) .door--net { clip-path: polygon(51.5% 0, 100% 0, 100% 100%, 43.5% 100%); }
  .land__main:has(.door--net:hover, .door--net:focus-within) .door--net .door__bg { transform: scale(1.025); }
  .land__main:has(.door--net:hover, .door--net:focus-within) .door--now::before { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .door, .door__bg, .door::before, .door__h, .door__p, .door__btn, .door__more, .land__brand { animation: none !important; }
  .door, .door__bg { transition: none !important; }
  .door__bg { transform: none !important; }
}
@media (max-width: 800px) {
  .door--now { inset: 0 0 auto 0; height: 56%; clip-path: polygon(0 0, 100% 0, 100% 78.57%, 0 100%); }
  .door--net { inset: auto 0 0 0; height: 56%; clip-path: polygon(0 21.43%, 100% 0, 100% 100%, 0 100%); }
  .door__bg--now { background-image: url('../assets/landing/insp-phone-poster.jpg'); }
  .door__bg--net { background-image: url('../assets/landing/net-phone-poster.jpg'); }
  .door__bg--now { background-image: image-set(url('../assets/landing/insp-phone-poster.webp') type('image/webp'), url('../assets/landing/insp-phone-poster.jpg') type('image/jpeg')); }
  .door__bg--net { background-image: image-set(url('../assets/landing/net-phone-poster.webp') type('image/webp'), url('../assets/landing/net-phone-poster.jpg') type('image/jpeg')); }
  .door--now .door__text { left: var(--gutter); right: var(--gutter); bottom: 84px; }   /* 24 Oct: 20px lower (was 104px), Henry asked */
  .door--net .door__text { left: var(--gutter); right: var(--gutter); bottom: max(26px, env(safe-area-inset-bottom)); }
  .door__h { font-size: clamp(28px, 8.4vw, 38px); max-width: none; margin-bottom: 0; }
  .door__p { font-size: 16px; }
  .door__btn { margin-top: 16px; }   /* 24 Oct: heading to button 16px (was 28px), Henry: smaller gaps */
  /* 24 Oct: the link always on its own line under the button. The short Estonian words fitted
     beside it, so /et/ looked different from the English page and its two halves differed */
  .door__more { display: block; width: fit-content; margin-top: 8px; }   /* was 14px */
}
@media (max-width: 800px) and (max-height: 700px) {
  .door--now .door__text { bottom: 68px; }
  .door__h { font-size: 27px; margin-bottom: 0; }
  .door__btn { margin-top: 12px; padding: 12px 20px; }
  .door__more { margin-top: 6px; }
}

/* 22 Oct: the wordmark sits exactly where, and is exactly as big as, the nav bar's on
   the other pages (main.css .nav: 32px in, 20px on phones; 18px tall, 16px / 15px in the
   1101-1499 / 1101-1279 bands, 15px under 560px), and the text shares that 32px edge */
@media (min-width: 801px) { :root { --gutter: 32px; } }
.land__brand { top: max(27px, env(safe-area-inset-top)); }
.land__mark { height: 18px; }
.land__lang { top: max(24px, env(safe-area-inset-top)); }
@media (max-width: 560px) { .land__mark { height: 15px; } }
@media (min-width: 1101px) { .land__brand { top: 32px; } .land__lang { top: 30px; } }
@media (min-width: 1101px) and (max-width: 1499px) { .land__brand { top: 33px; } .land__mark { height: 16px; } }
@media (min-width: 1101px) and (max-width: 1279px) { .land__mark { height: 15px; } }

/* even halves: same number of heading lines on both sides, so with the buttons on one
   line the headings start on one line too (no padding, so no gap under a heading) */
@media (min-width: 801px) {
  .door--now .door__h { width: min-content; }          /* MANUAL / DRONE / INSPECTION, MANUAALNE / DROONIGA / ÜLEVAATUS (25 Oct: "Manual" back, three lines each side like the network heading) */
  html[lang="et"] .door__h { font-size: clamp(30px, 3.9vw, 64px); }   /* longer Estonian words: both headings one size smaller */
  .door--net .door__text { left: 55%; }
  .door--net .door__h { max-width: 17ch; }   /* fits "AUTONOOMNE 24/7" (15 letters; 13ch forced a 4th line) */
}

/* 24 Oct: on narrower desktops (801-1239px) "Book an inspection" + "More about inspections" no longer fit
   side by side in the inspection half, so only that link dropped and the halves were 40px out of line:
   there the link goes under the button on both halves */
@media (min-width: 801px) and (max-width: 1239px) { .door__more { display: block; width: fit-content; } }

/* 24 Oct (Henry): where the link sits under the button (phones, desktops up to 1239px), it is centred
   under the button, not left: "Loe lahemalt" is much shorter than its button and looked off. Column 1 is
   as wide as the button (or the link), the heading spans both columns, so the heading stays on the left edge */
@media (max-width: 1239px) {
  .door__text { display: grid; grid-template-columns: max-content 1fr; justify-items: start; }
  .door__h, .door__p { grid-column: 1 / -1; }
  .door__btn { grid-column: 1; }
  .door--net .door__btn { margin-right: 0; }   /* its 18px gap is for the side-by-side link; here it pushed the centre off */
  .door__more { grid-column: 1; justify-self: center; margin-left: 0; }
}

/* 23 Oct: a thin solid black bar along the diagonal seam (Henry: no fades, a bar,
   12/14px "too thick"), so the two doors read as two choices. It follows the seam,
   including the desktop hover slide. */
.land__main::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #000; }
@media (max-width: 800px) {
  /* seam runs from 56% (left) to 44% (right); bar 6px tall, centred on it */
  .land__main::after { clip-path: polygon(0 calc(56% - 3px), 100% calc(44% - 3px), 100% calc(44% + 3px), 0 calc(56% + 3px)); }
}
@media (min-width: 801px) {
  /* seam runs from 54% (top) to 46% (bottom); bar 8px wide, centred on it */
  .land__main::after { clip-path: polygon(calc(54% - 4px) 0, calc(54% + 4px) 0, calc(46% + 4px) 100%, calc(46% - 4px) 100%); transition: clip-path 1.4s var(--ease-hover); animation: doorFade 0.4s ease 0.75s both; }
}
@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  .land__main:has(.door--now:hover, .door--now:focus-within)::after { clip-path: polygon(calc(56.5% - 4px) 0, calc(56.5% + 4px) 0, calc(48.5% + 4px) 100%, calc(48.5% - 4px) 100%); }
  .land__main:has(.door--net:hover, .door--net:focus-within)::after { clip-path: polygon(calc(51.5% - 4px) 0, calc(51.5% + 4px) 0, calc(43.5% + 4px) 100%, calc(43.5% - 4px) 100%); }
}
@media (prefers-reduced-motion: reduce) { .land__main::after { animation: none; transition: none; } }

/* 23 Oct: Ü Õ Ä stand above the capitals and touched the line above at 0.95 (ÜLELINNALINE under 24/7); Estonian only */
html[lang="et"] .door__h { line-height: 1.04; }