/* direction 1 — Tel Aviv skyline behind the room (the same towers as in the room's window) */
.backdrop.skyline { background:linear-gradient(180deg, #ECE3D8 0%, #E5DBD1 52%, #E1D5C9 100%); --pad:360px; }
:root[data-theme="dark"] .backdrop.skyline { background:linear-gradient(180deg, #030819 0%, #060D25 50%, #0A1438 100%); }
:root[data-theme="dark"] body, body { background:transparent; }
.skyline .day-only { transition:opacity .7s ease; } .skyline .night-only { opacity:0; transition:opacity .7s ease; }
:root[data-theme="dark"] .skyline .day-only { opacity:0; } :root[data-theme="dark"] .skyline .night-only { opacity:1; }
.skyline .high { fill:#E0D5C8; } .skyline .far { fill:#DACDBE; } .skyline .mark { fill:#D4C5B5; } .skyline .near { fill:#CDBDAB; }
:root[data-theme="dark"] .skyline .high { fill:#0B1336; } :root[data-theme="dark"] .skyline .far { fill:#0D1640; } :root[data-theme="dark"] .skyline .mark { fill:#111B4C; } :root[data-theme="dark"] .skyline .near { fill:#141F55; }
.skyline .w { fill:#E7DED3; opacity:.55; }
:root[data-theme="dark"] .skyline .w { fill:#FFC877; opacity:0; transition:opacity .9s ease; }
:root[data-theme="dark"] .skyline .w.on { opacity:.6; } :root[data-theme="dark"] .skyline .w.cool.on { fill:#A9B8FF; opacity:.38; }
.skyline .star { fill:#E9ECFF; }
.skyline .cloud { position:absolute; left:0; height:74px; opacity:var(--o,.72); animation:bd-drift linear infinite; will-change:transform;
  background:radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,0)) 0 40% / 55% 80% no-repeat,
             radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0)) 40% 0 / 50% 100% no-repeat,
             radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)) 100% 55% / 50% 75% no-repeat;
  transition:opacity .7s ease; }
:root[data-theme="dark"] .skyline .cloud { opacity:.09; }
@keyframes bd-drift { from { transform:translateX(-40vw); } to { transform:translateX(140vw); } }
.skyline .twk { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 6px #fff; animation:bd-twinkle ease-in-out infinite; }
@keyframes bd-twinkle { 0%,100% { opacity:.15; } 50% { opacity:.95; } }

/* ── the living city (all motion = transform/opacity on small HTML elements) ── */
.skyline i, .skyline s, .skyline b { position:absolute; display:block; text-decoration:none; }
/* sun and moon: breathe and drift */
.skyline .sun, .skyline .moon { width:0; height:0; animation:bd-float 38s ease-in-out infinite alternate; }
.skyline .sun b { left:-80px; top:-80px; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(closest-side, #FFF6E2 0 22%, rgba(255,236,200,.75) 30%, rgba(255,236,200,.22) 58%, rgba(255,236,200,0) 100%);
  animation:bd-breathe 9s ease-in-out infinite alternate; }
.skyline .moon b { left:-15px; top:-15px; width:30px; height:30px; border-radius:50%; box-shadow:inset 9px -5px 0 0 #F3EFE7;
  filter:drop-shadow(0 0 10px rgba(233,236,255,.45)); animation:bd-breathe 11s ease-in-out infinite alternate; }
@keyframes bd-float { from { transform:translate(0,0); } to { transform:translate(-34px,12px); } }
@keyframes bd-breathe { from { transform:scale(1); opacity:.85; } to { transform:scale(1.09); opacity:1; } }
/* plane: silhouette + contrail by day, blinking lights by night */
.skyline .plane { left:0; width:30px; height:12px; will-change:transform; }
.skyline .plane svg { position:absolute; inset:0; fill:#AC9B86; opacity:.75; }
.skyline .plane .trail { left:27px; top:5px; width:150px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,0)); }
.skyline .plane .pl { inset:0; }
.skyline .pl b { width:3px; height:3px; border-radius:50%; top:5px; }
.skyline .pl .r { left:4px; background:#FF5A4E; box-shadow:0 0 6px 1px rgba(255,90,78,.8); animation:bd-pulse 1.4s ease-in-out infinite; }
.skyline .pl .w { left:16px; background:#fff; box-shadow:0 0 7px 2px rgba(255,255,255,.85); animation:bd-strobe 1.9s steps(1) infinite; }
@keyframes bd-strobe { 0%,88% { opacity:0; } 89%,94% { opacity:1; } 95%,100% { opacity:0; } }
/* birds */
.skyline .flock { left:0; width:50px; height:20px; will-change:transform; }
.skyline .bird { width:12px; height:6px; transform-origin:50% 70%; animation:bd-flap ease-in-out infinite alternate; }
.skyline .bird svg { display:block; fill:none; stroke:#8F7E6B; stroke-width:1.4; stroke-linecap:round; opacity:.7; }
@keyframes bd-flap { from { transform:scaleY(1); } to { transform:scaleY(.25); } }
/* shooting stars */
.skyline .shoot { width:0; height:0; transform:rotate(-24deg); }
.skyline .shoot b { left:0; top:0; width:90px; height:1.5px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, #fff, rgba(233,236,255,0)); animation:bd-shoot linear infinite; }
@keyframes bd-shoot { 0% { opacity:0; transform:translateX(0); } 1% { opacity:1; } 4.5% { opacity:0; transform:translateX(-230px); } 100% { opacity:0; transform:translateX(-230px); } }
/* red aviation beacons */
.skyline .beacon { width:0; height:0; }
.skyline .beacon b { left:-1.5px; top:-1.5px; width:3px; height:3px; border-radius:50%; background:#FF5A4E;
  box-shadow:0 0 6px 1px rgba(255,90,78,.75); animation:bd-pulse 2.8s ease-in-out infinite; }
@keyframes bd-pulse { 0%,100% { opacity:.12; } 50% { opacity:1; } }
/* Azrieli crowns at night: two colours cross-fading; by day a glint of sun */
.skyline .crown { height:2px; transform-origin:0 50%; }
.skyline .crown b { inset:0; border-radius:2px; animation:bd-hue 12s ease-in-out infinite; }
.skyline .crown b:first-child { background:#7D92FF; box-shadow:0 0 7px 1px rgba(125,146,255,.55); }
.skyline .crown b:last-child { background:#C59BFF; box-shadow:0 0 7px 1px rgba(197,155,255,.55); animation-name:bd-hue2; }
@keyframes bd-hue { 0%,100% { opacity:.42; } 50% { opacity:0; } }
@keyframes bd-hue2 { 0%,100% { opacity:0; } 50% { opacity:.42; } }
.skyline .glint { width:0; height:0; }
.skyline .glint b { left:-9px; top:-9px; width:18px; height:18px; opacity:0; animation:bd-glint 11s ease-out infinite;
  background:linear-gradient(90deg, transparent 44%, #fff 50%, transparent 56%), linear-gradient(0deg, transparent 44%, #fff 50%, transparent 56%);
  border-radius:50%; }
@keyframes bd-glint { 0%,84% { opacity:0; transform:scale(.3) rotate(0); } 90% { opacity:.95; transform:scale(1) rotate(45deg); } 97%,100% { opacity:0; transform:scale(.3) rotate(90deg); } }
/* tower cranes */
.skyline .crane { --c:#BC9F7C; width:6px; }
:root[data-theme="dark"] .skyline .crane { --c:#26357F; }
.skyline .crane .mast { inset:0; border-inline:1.5px solid var(--c); background:repeating-linear-gradient(135deg, transparent 0 4px, var(--c) 4px 5px); transition:border-color .7s, background .7s; }
.skyline .crane .jib { left:3px; top:9px; width:0; height:0; animation:bd-slew ease-in-out infinite alternate; will-change:transform; }
.skyline .crane .arm { left:-24px; top:-2px; width:calc(var(--j) + 24px); height:4px; box-sizing:border-box; border-block:1px solid var(--c);
  background:repeating-linear-gradient(90deg, var(--c) 0 1px, transparent 1px 5px); }
.skyline .crane .cw { left:-24px; top:2px; width:9px; height:6px; background:var(--c); }
.skyline .crane .hook { left:calc(var(--j) * .72); top:2px; width:0; height:0; }
.skyline .crane .cable { left:0; top:0; width:1px; height:var(--cl,36px); background:var(--c); transform-origin:50% 0; animation:bd-cable var(--hd) ease-in-out var(--hdl) infinite; }
.skyline .crane .load { left:-4px; top:0; width:9px; height:6px; border-radius:1px; background:var(--c); animation:bd-load var(--hd) ease-in-out var(--hdl) infinite; }
.skyline .crane .tip { left:var(--j); top:0; } .skyline .crane .top { left:3px; top:-1px; }
@keyframes bd-slew { from { transform:scaleX(1); } to { transform:scaleX(.3); } }
@keyframes bd-cable { 0%,12% { transform:scaleY(.3); } 48%,62% { transform:scaleY(1); } 100% { transform:scaleY(.3); } }
@keyframes bd-load { 0%,12% { transform:translateY(calc(var(--cl,36px) * .3)); } 48%,62% { transform:translateY(var(--cl,36px)); } 100% { transform:translateY(calc(var(--cl,36px) * .3)); } }
/* cars: a body by day, head- and tail-lights by night */
.skyline .car { left:0; width:13px; height:5px; border-radius:3px 3px 1px 1px; will-change:transform; transition:background-color .7s; }
.skyline .car.c0 { background:#B3A08A; } .skyline .car.c1 { background:#6E83EC; } .skyline .car.c2 { background:#D29D7A; } .skyline .car.c3 { background:#A6ADB3; }
:root[data-theme="dark"] .skyline .car { background:#121C50; }
.skyline .car::before, .skyline .car::after { content:""; position:absolute; top:1.5px; width:2px; height:2px; border-radius:50%; opacity:0; transition:opacity .7s; }
.skyline .car::before { right:-1px; background:#FFF3D6; box-shadow:0 0 5px 1px rgba(255,243,214,.9), 8px 0 10px 2px rgba(255,243,214,.25); }
.skyline .car::after { left:-1px; background:#FF4D45; box-shadow:0 0 4px 1px rgba(255,77,69,.8); }
.skyline .car.rev::before { right:auto; left:-1px; box-shadow:0 0 5px 1px rgba(255,243,214,.9), -8px 0 10px 2px rgba(255,243,214,.25); }
.skyline .car.rev::after { left:auto; right:-1px; }
:root[data-theme="dark"] .skyline .car::before, :root[data-theme="dark"] .skyline .car::after { opacity:1; }
@media (max-width:760px) { .skyline .sun b { left:-60px; top:-60px; width:120px; height:120px; } .skyline .car { width:11px; height:4px; } }

/* ── the upper sky (release 31): tall far towers, giant cranes, more air traffic, a richer sky ── */
/* the far tall row: fainter windows, so it reads as distance and never competes with the text in front of it */
.skyline .hi-row .w { opacity:.35; }
:root[data-theme="dark"] .skyline .hi-row .w.on { opacity:.34; } :root[data-theme="dark"] .skyline .hi-row .w.cool.on { opacity:.22; }
.skyline .lm { fill:#D9CCBD; }
:root[data-theme="dark"] .skyline .lm { fill:#0F1947; }
.skyline .frame { fill:none; stroke:#D3C4B3; stroke-width:1.2; stroke-dasharray:3 2; }
:root[data-theme="dark"] .skyline .frame { stroke:#1A2660; }
/* giant cranes: far away, so lighter and thinner-looking than the near ones */
.skyline .crane.big { --c:#CDB79C; width:7px; }
:root[data-theme="dark"] .skyline .crane.big { --c:#1E2B6C; }
.skyline .crane.big .arm { height:5px; }
.skyline .crane.big .cw { width:12px; height:8px; }
.skyline .crane.big .jib { animation-name:bd-slew-big; }
@keyframes bd-slew-big { from { transform:scaleX(1); } to { transform:scaleX(.42); } }
/* the second plane climbs out to the west: same plane, mirrored and smaller (further away) */
.skyline .plane.p2 .fx { inset:0; transform:scaleX(-1) scale(.72); opacity:.8; }
/* a small plane towing a banner along the beach (day) */
.skyline .banner { left:0; width:30px; height:12px; will-change:transform; }
.skyline .banner svg { position:absolute; inset:0; fill:#AC9B86; opacity:.75; transform:scale(.8); }
.skyline .banner .rope { left:27px; top:6px; width:16px; height:1px; background:#B9A994; }
.skyline .banner .flag { left:43px; top:0; height:13px; padding:0 7px; display:flex; align-items:center; border-radius:2px;
  background:#F4EDE4; box-shadow:0 1px 0 rgba(120,100,80,.18); transform-origin:0 50%; animation:bd-flutter 1.6s ease-in-out infinite alternate; }
.skyline .banner .flag span { font:700 8px/1 Rubik, sans-serif; letter-spacing:.18em; color:#2448FF; opacity:.8; }
@keyframes bd-flutter { from { transform:skewY(-2deg) scaleY(.94); } to { transform:skewY(2deg) scaleY(1); } }
/* a satellite: a steady dot gliding between the stars (night) */
.skyline .sat { left:0; width:0; height:0; will-change:transform; }
.skyline .sat b { left:-1px; top:-1px; width:2px; height:2px; border-radius:50%; background:#F2F4FF; box-shadow:0 0 4px rgba(242,244,255,.8); }
/* thin high streaks of cloud (cirrus) by day */
.skyline .cloud.cirrus { height:20px; --o:.5;
  background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0)) 0 50% / 70% 60% no-repeat,
             radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0)) 100% 30% / 60% 45% no-repeat; }
/* the milky way: a faint band of light, breathing very slowly (night) */
.skyline .milky { transform:rotate(-9deg); }
.skyline .milky b { inset:0; opacity:.55; animation:bd-milky 14s ease-in-out infinite alternate;
  background:radial-gradient(ellipse 50% 32% at 42% 50%, rgba(160,176,255,.16), rgba(160,176,255,0) 100%),
             radial-gradient(ellipse 22% 20% at 68% 46%, rgba(205,180,255,.12), rgba(205,180,255,0) 100%),
             radial-gradient(ellipse 18% 16% at 20% 56%, rgba(190,205,255,.1), rgba(190,205,255,0) 100%); }
@keyframes bd-milky { from { opacity:.45; } to { opacity:.85; } }
@media (max-width:760px) { .skyline .crane.big { width:6px; } .skyline .crane.big .arm { height:4px; } }