/* aerial scene (aerial.js): one big window under the header, the heading over its top left, the step caption under it */
.scene-aerial { background: var(--ink); }
.ae { position: absolute; inset: 0; padding: calc(var(--header) + 16px) var(--gutter) 20px; }
.ae-frame { position: relative; width: 100%; height: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter) + 160px); margin: 0 auto; overflow: hidden; background: #3a3f46;
  box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 24px 60px -20px rgba(0,0,0,.6); }
.ae-l { position: absolute; inset: 0; will-change: transform, opacity; }
.ae-l img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ae-outline { fill: rgba(255, 255, 255, .10); stroke: #fff; stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(30, 79, 216, .9)); }
.ae-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.ae-mark::before, .ae-mark::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-sizing: border-box; }
.ae-mark::after { background: none; border: 3px solid #fff; animation: ae-pulse 1.8s ease-out infinite; }
@keyframes ae-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.ae-here { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.ae-here span { position: absolute; left: 0; bottom: 10px; transform: translateX(-50%); padding: 8px 14px; background: var(--blue); color: #fff;
  font: 700 1rem/1.2 var(--sans); white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.ae-head { position: absolute; z-index: 3; left: 0; top: 0; right: 0; padding: clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 36px) 60px;
  background: linear-gradient(rgba(20, 24, 30, .72), rgba(20, 24, 30, .38) 60%, rgba(20, 24, 30, 0)); color: #fff; }
.ae-title { font: 800 var(--fs-h2, clamp(1.5rem, 1.05rem + 2.1vw, 2.75rem))/1.08 var(--sans); letter-spacing: -.018em; color: #fff; max-width: 22ch; text-wrap: balance; }
:lang(ka) .ae-title, :lang(th) .ae-title { line-height: 1.18; letter-spacing: 0; }
.ae-text { margin-top: 10px; max-width: 56ch; font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.ae-cap { position: absolute; z-index: 3; left: clamp(18px, 2.4vw, 36px); bottom: clamp(18px, 2.4vw, 32px); display: inline-flex; gap: 12px; align-items: baseline;
  max-width: calc(100% - 200px); padding: 10px 16px; background: rgba(255, 255, 255, .94); color: var(--ink); font: 700 1.125rem/1.3 var(--sans);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); }
.ae-cap b { color: var(--blue); font-size: 12px; }
.ae-cap.is-in { animation: ae-in .45s var(--ease, ease-out); }
@keyframes ae-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ae-badge { z-index: 3; right: 14px; bottom: 40px; }
.ae-src { position: absolute; z-index: 3; right: 14px; bottom: 12px; margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* phones: the window fills the screen under the header */
.ae.is-m { padding: calc(var(--header) + 8px) 0 0; }
.ae.is-m .ae-head { padding: 16px 16px 48px; }
.ae.is-m .ae-text { font-size: 1rem; }
.ae.is-m .ae-cap { left: 12px; right: 12px; bottom: 92px; max-width: none; font-size: 1rem; padding: 9px 12px; }
.ae.is-m .ae-badge { right: 12px; bottom: 54px; }
.ae.is-m .ae-src { left: 12px; right: 12px; bottom: 10px; }

.v2-still .scene-aerial { height: auto; overflow: visible; background: transparent; }
.v2-still .scene-aerial .scene-stage { display: none; }
.v2-still .scene-aerial .scene-text { display: block; padding: clamp(40px, 6vw, 80px) 0; }