/* UAE Applications, version 2. Colour fields change as you scroll: dusk hero, cream wall, deep timeline, amber targets.
   Same rules as Solar + AI: big display type, solid colour fields, a drawing or photo per block, hard shadows, no borders on cards.
   Patterns this page adds beyond base: the project card (a photo or a drawing, a name, one figure), the plant-type drawings, the drawn timeline, the emirate chips in the hero. */

main { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.05); } }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(160px); } }
@keyframes run { to { stroke-dashoffset: -100; } }
@keyframes dash { to { stroke-dashoffset: -22; } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes plate { from { transform: translateY(50px) rotate(-6deg); } to { transform: rotate(-2deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cross { from { transform: translateX(-420px); } to { transform: translateX(1700px); } }
@keyframes steam { from { transform: translateY(0) scale(0.8); opacity: 0.9; } to { transform: translateY(-26px) scale(1.3); opacity: 0; } }
@keyframes ping2 { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes sweep { 0%, 40% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(380px) skewX(-20deg); } }
@keyframes shuttle { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
@keyframes bub { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- the plant-type drawings (their shapes sit in the symbols at the top of main) ---------- */
.a-puff { transform-box: fill-box; transform-origin: center; animation: steam 3s ease-out infinite; }
.a-puff.p2 { animation-delay: -1.5s; }
.a-ping { transform-box: fill-box; transform-origin: center; animation: ping2 2.4s ease-out infinite; }
.a-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.6s ease-in-out infinite; }
.a-spin { transform-box: fill-box; transform-origin: center; animation: spin 16s linear infinite; }
.a-shine { animation: sweep 5s ease-in-out infinite; }
.a-run path { stroke-dasharray: 5 95; animation: run 3.4s linear infinite; }
.a-run path:nth-child(2) { animation-delay: -0.9s; }
.a-run path:nth-child(3) { animation-delay: -1.7s; }
.a-run path:nth-child(4) { animation-delay: -2.5s; }
.a-blink { animation: blink 1.6s ease-in-out infinite; }
.a-blink.b2 { animation-delay: -0.5s; }
.a-blink.b3 { animation-delay: -1s; }
.a-glide { animation: shuttle 3.6s ease-in-out infinite alternate; }

/* ================= 1. HERO ================= */
.hero { position: relative; overflow: hidden; background: #0B2A5C; min-height: clamp(520px, calc(100svh - var(--header-h)), 820px); }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl { will-change: transform; }
.hl-sun { transform: translateY(calc(var(--hp, 0) * 70px)); }
.hl-far { transform: translateY(calc(var(--hp, 0) * 26px)); }
.hl-mid { transform: translateY(calc(var(--hp, 0) * 14px)); }
.stars circle { animation: blink 3.4s ease-in-out infinite; }
.stars circle:nth-child(2n) { animation-delay: -1.1s; }
.stars circle:nth-child(3n) { animation-delay: -2.2s; animation-duration: 4.6s; }
.ring { transform-box: fill-box; transform-origin: center; animation: pulse 5s ease-in-out infinite; }
.ring.r2 { animation-delay: -2.5s; }
.sun-rays { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite; }
.hero .spark { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-in-out infinite; }
.cloud { animation: drift 38s ease-in-out infinite alternate; }
.cloud.c2 { animation-duration: 52s; animation-direction: alternate-reverse; }
.train { animation: cross 16s linear infinite; }
.pulse { stroke-dasharray: 5 95; animation: run 3.4s linear infinite; }
.pulse.p2 { animation-delay: -1.7s; }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(32px, 7vh, 80px); padding-bottom: var(--s8); }
.hero-title { margin: 0 0 var(--s6); }
.ht { display: inline-block; overflow: hidden; font-size: clamp(52px, 11vw, 168px); line-height: 0.9; letter-spacing: -0.045em; color: var(--cream); background: var(--ink); padding: 0.06em 0.18em 0.14em; border-radius: 0.2em; transform: rotate(-2deg); box-shadow: 0.05em 0.06em 0 var(--amber); animation: plate 800ms var(--spring) both; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s3); max-width: 880px; }
.chip-row .btn { min-width: 44px; padding: 0 var(--s6); }
@media (max-width: 600px) { .ht { font-size: 12.4vw; max-width: 100%; } .hero-copy { padding-top: var(--s6); } .chip-row .btn { padding: 0 var(--s5); } }

/* ================= 2. THE WALL ================= */
.wall { background: var(--cream); color: var(--ink); padding-block: var(--s8) var(--s9); }
.wall .wrap > * + * { margin-top: var(--s8); }
/* Sharjah and Fujairah hold one card each: they sit side by side, each in a column as wide as a card in the groups above */
.pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s5); align-items: start; }
.pair > .projects { margin-top: 0; }
/* under the Sharjah or Fujairah chip the other group is hidden: the one left takes the row, and at 1000 px and up its card lies wide, drawing left and body right */
.pair:has(> .projects[hidden]) > .projects { grid-column: 1 / -1; }
.pair:has(> .projects[hidden]) .card-grid { grid-template-columns: minmax(0, 420px); }
@media (min-width: 1000px) {
  .pair:has(> .projects[hidden]) .card-grid { grid-template-columns: minmax(0, 1fr); }
  .pair:has(> .projects[hidden]) .project-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .pair:has(> .projects[hidden]) .project-card .vis { display: block; }
  .pair:has(> .projects[hidden]) .project-card .body { padding: var(--s6) var(--s7); }
  .pair:has(> .projects[hidden]) .project-card .body h3 { font-size: clamp(30px, 3vw, 42px); }
  .pair:has(> .projects[hidden]) .project-card .body .big { font-size: clamp(64px, 7vw, 104px); }
}
@media (max-width: 999px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pair { grid-template-columns: 1fr; row-gap: var(--s8); } }
.projects h2 { --st-rot: -1.2deg; margin-bottom: var(--s6); font-size: clamp(36px, 5.4vw, 76px); line-height: 0.95; }
.g-ad { --c-bg: var(--coral); --c-ink: var(--ink); --c-hi: var(--amber); }
.g-du { --c-bg: var(--panel); --c-ink: var(--cream); --c-hi: var(--sun); }
.g-sh { --c-bg: var(--teal-dark); --c-ink: var(--cream); --c-hi: var(--mint); }
.g-fu { --c-bg: var(--amber); --c-ink: var(--ink); --c-hi: var(--coral-strong); }
.g-no { --c-bg: var(--sand); --c-ink: var(--ink); --c-hi: var(--coral-deep); }
.g-ad h2 { box-shadow: 0.05em 0.06em 0 var(--coral); }
.g-du h2 { box-shadow: 0.05em 0.06em 0 var(--panel); }
.g-sh h2 { box-shadow: 0.05em 0.06em 0 var(--teal-2); }
.g-fu h2 { box-shadow: 0.05em 0.06em 0 var(--amber); }
.g-no h2 { box-shadow: 0.05em 0.06em 0 var(--dune-2); font-size: clamp(30px, 4vw, 56px); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s6) var(--s5); align-items: stretch; }
.g-no .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.project-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--c-bg); color: var(--c-ink); box-shadow: 0 10px 0 var(--ink); }
/* the card reads photo or drawing, then name and figure: the figure's children join the card's column and are ordered */
.project-card .vis { display: contents; margin: 0; }
.project-card .body { order: 1; flex: 1; }
.tile-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--vb, #0E86A6); }
.vis img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ink); }
.t-nuclear { --vb: #FFB84A; }
.t-solar { --vb: #0E86A6; }
.t-line { --vb: #F7E08A; }
.t-ev { --vb: #17A8B4; }
.t-waste { --vb: #8FE8D4; }
.t-ipp { --vb: #17A8B4; }
.t-grid { --vb: #0B2A5C; }
.t-dc { --vb: #0B56A8; }
.body { padding: var(--s4) var(--s5) var(--s6); }
.body h3 { margin: 0 0 var(--s3); font-size: clamp(24px, 2.2vw, 30px); }
.body .big { max-width: none; font: 800 clamp(48px, 5vw, 68px)/0.9 var(--font-display); letter-spacing: -0.04em; }
.body .big .unit, .body .big .small-word { font-size: 0.36em; letter-spacing: -0.01em; }
.body .big .small-word { margin-right: 0.1em; }
.body .what { max-width: none; margin-top: var(--s3); font: 600 18px/1.3 var(--font-body); }
.body .note { display: inline-block; max-width: none; margin-top: var(--s3); padding: 6px 14px 7px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 700 15px/1.2 var(--font-body); }

/* ================= 3. THE TIMELINE ================= */
.railf { background: var(--deep); color: var(--cream); overflow: clip; padding-block: var(--s10) var(--s9); }
.railf::after { content: ""; position: absolute; right: -4vw; top: calc(-0.5 * clamp(120px, 14vw, 200px)); width: clamp(120px, 14vw, 200px); aspect-ratio: 1; border-radius: 50%; border: clamp(16px, 2vw, 28px) solid var(--panel); } /* half of it sits above the field, clear of the rail */
.railf h2 { --st-rot: -1.5deg; margin-bottom: var(--s8); font-size: clamp(38px, 6vw, 88px); line-height: 0.95; }
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); row-gap: var(--s8); }
.rail li { position: relative; padding: var(--s6) var(--s5) 0 0; }
.rail li::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--cream) 0 14px, transparent 14px 22px); }
.rail li::after { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--dot, var(--sand)); border: 5px solid var(--cream); }
.rail li[data-emirate="Abu Dhabi"] { --dot: var(--coral); }
.rail li[data-emirate="Dubai"] { --dot: var(--teal-3); }
.rail li[data-emirate="Fujairah"] { --dot: var(--amber); }
.ico { display: block; width: 104px; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--vb, #0E86A6); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }
.when { display: block; margin-top: var(--s4); font: 800 clamp(36px, 3.6vw, 52px)/1 var(--font-display); letter-spacing: -0.03em; }
.who { display: block; margin-top: var(--s2); font: 600 18px/1.3 var(--font-body); color: var(--mint); }

/* ================= 4. NATIONAL TARGETS ================= */
.strategies { background: var(--amber); color: var(--ink); }
.strategies h2 { margin-bottom: var(--s7); font-size: clamp(44px, 7vw, 104px); }
.strategies .tile { min-height: 0; display: flex; flex-direction: column; }
.strategies .big { order: 2; white-space: nowrap; font-size: clamp(60px, 8vw, 116px); }
.strategies .big .small-word { display: block; margin: 0 0 0.55em; line-height: 1.2; } /* "More than" sits on its own line above the numeral: room so the two never touch */
.strategies .art { order: 1; display: block; height: auto; max-width: 100%; margin-bottom: var(--s5); }
.strategies .what { order: 3; }
.strategies h3 { order: 4; margin: var(--s4) 0 0; font-size: clamp(24px, 2.4vw, 34px); }
.strategies .meta { order: 5; }
.tile .small-word { font-size: 0.32em; letter-spacing: 0; margin-right: 0.1em; }
.s-nz { grid-column: 1 / 8; background: var(--deep); color: var(--cream); }
.s-en { grid-column: 8 / 13; background: var(--coral); color: var(--ink); }
.s-mi { grid-column: 1 / 6; background: var(--cream); color: var(--ink); }
.s-h2 { grid-column: 6 / 13; background: var(--teal-dark); color: var(--cream); }
.s-ev { grid-column: 1 / 13; background: var(--sun); color: var(--ink); }
.art-people { width: min(100%, 300px); }
.art-bar { width: min(100%, 300px); }
.art-bar .grow { transform-origin: left; transition: transform 900ms var(--glide); }
.js .tile:not(.in) .art-bar .grow { transform: scaleX(0); }
.art-leaf { width: 100px; }
.art-bubbles { width: min(100%, 300px); }
.bub { transform-box: fill-box; transform-origin: center; animation: bub 3.2s ease-in-out infinite; }
.bub.b2 { animation-delay: -1s; }
.bub.b3 { animation-delay: -2s; }
.art-plug { width: 220px; }
.plug { animation: bob 1.6s ease-in-out infinite; }
.strategies .s-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "big art" "what art" "name art" "meta art"; column-gap: var(--s7); align-items: center; }
.s-ev .big { grid-area: big; }
.s-ev .what { grid-area: what; }
.s-ev h3 { grid-area: name; }
.s-ev .meta { grid-area: meta; }
.s-ev .art { grid-area: art; margin: 0; }

/* ================= phones and tablets ================= */
@media (max-width: 900px) {
  .s-nz, .s-en, .s-mi, .s-h2, .s-ev { grid-column: 1; grid-row: auto; }
  .strategies .s-ev { display: flex; flex-direction: column; align-items: flex-start; }
  .s-ev .art { margin-bottom: var(--s5); }
  .hl-sun { transform: translate(-380px, calc(40px + var(--hp, 0) * 40px)); }
}
@media (max-width: 700px) {
  .rail { grid-template-columns: 1fr; row-gap: var(--s6); padding-left: var(--s6); border-left: 6px dotted var(--cream); }
  .rail li { padding: 0 0 0 var(--s2); display: grid; grid-template-columns: 88px 1fr; column-gap: var(--s5); align-items: center; }
  .ico { grid-row: 1 / span 2; width: 88px; }
  .when { margin-top: 0; align-self: end; }
  .who { margin-top: 0; align-self: start; }
  .rail li::before { display: none; }
  .rail li::after { left: calc(-1 * var(--s6) - 16px); top: calc(50% - 13px); }
}

@media (prefers-reduced-motion: reduce) {
  .ht { animation: none; }
  .hl { --hp: 0 !important; }
  .js .tile:not(.in) .art-bar .grow { transform: none; }
}