/* Coming-soon page for citizen-air.com. One screen: the city films behind a haze that clears,
   the line the site is built on, and the six levels of the European air quality index in their
   own colours. Colours and type are the site's (src/app/globals.css, Manrope). */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-greek.woff2?v=1) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-latin.woff2?v=1) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #0b1426;
  --night-ink: #e9eef3;
  --night-muted: #a7b4c6;
  --l1: #50f0e6;
  --l2: #50ccaa;
  --l3: #f0e641;
  --l4: #ff5050;
  --l5: #960032;
  --l6: #7d2181;
  --side: max(64px, env(safe-area-inset-left), env(safe-area-inset-right));

  /* transitions.dev, Texts reveal: a calmer rise for a headline this large */
  --stagger-dur: 800ms;
  --stagger-distance: 16px;
  --stagger-stagger: 140ms;
  --stagger-blur: 4px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* transitions.dev, Tabs sliding: on the film, so a dark bar and a light pill */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(233, 238, 243, 0.8);
  --tabs-text-active: #0b1426;
  --tabs-bar-bg: rgba(11, 20, 38, 0.52);
  --tabs-pill-bg: #e9eef3;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--night);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--night);
  color: var(--night-ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the stage ---------------------------------------------------------------------------- */
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: max(28px, env(safe-area-inset-top)) var(--side) max(52px, env(safe-area-inset-bottom));
  /* without script, the still of the first film */
  background: var(--night) url(media/thessaloniki-wide.jpg) center / cover no-repeat;
}
@media (max-aspect-ratio: 4/5) {
  .stage { background-image: url(media/thessaloniki-tall.jpg); }
}

.films, .haze, .shade { position: absolute; inset: 0; pointer-events: none; }
.films { z-index: -3; }
.haze { z-index: -2; }
.shade { z-index: -1; }

.film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
}
.film.is-on { opacity: 1; }
/* each city settles into place as its air clears */
.stage.is-open .film.is-on { transform: scale(1); transition: transform 7s cubic-bezier(0.22, 1, 0.36, 1); }

/* The haze is the same city, washed out the way particles wash out a view: blurred, pale and
   warm. The filter is drawn once; only the layer's opacity moves. */
.haze-layer { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.haze-layer[data-city="thessaloniki"] { opacity: 1; }
.haze-layer img {
  position: absolute; inset: -6%;
  width: 112%; height: 112%;
  object-fit: cover;
  filter: blur(26px) saturate(0.35) brightness(1.2) contrast(0.72);
}
.haze-layer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(226, 218, 203, 0.5), rgba(201, 192, 177, 0.32));
}

.shade {
  background:
    linear-gradient(to top, rgba(11, 20, 38, 0.92) 0%, rgba(11, 20, 38, 0.66) 30%, rgba(11, 20, 38, 0.2) 58%, rgba(11, 20, 38, 0) 74%),
    linear-gradient(to bottom, rgba(11, 20, 38, 0.5) 0%, rgba(11, 20, 38, 0) 20%),
    linear-gradient(to right, rgba(11, 20, 38, 0.5) 0%, rgba(11, 20, 38, 0) 56%);
}

/* ---- the city switch (transitions.dev, Tabs sliding) -------------------------------------- */
.top { display: flex; justify-content: flex-end; }

.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-tab { transition: none !important; }
}

/* sized for this page: a 36px bar on a desk, 44px under a thumb */
.cities {
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(233, 238, 243, 0.14);
}
.cities .t-tab { font: inherit; font-size: 14px; font-weight: 650; letter-spacing: 0.01em; height: 36px; padding: 0 16px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cities .t-tabs-pill { height: 36px; }
.cities .t-tab:focus-visible { outline: 2px solid var(--night-ink); outline-offset: 2px; }
@media (pointer: coarse) {
  .cities .t-tab, .cities .t-tabs-pill { height: 44px; }
  .cities .t-tab { padding: 0 18px; font-size: 15px; }
}
/* The recipe's hover darkens the label for a light bar. This bar is dark, so the city under the
   pointer goes to full white instead, and a tap never leaves the other city looking chosen. */
@media (hover: hover) and (pointer: fine) {
  .cities .t-tab:not([aria-selected="true"]):hover { color: var(--night-ink); }
}
@media (hover: none) {
  .cities .t-tab:not([aria-selected="true"]):hover { color: var(--tabs-text-muted); }
}

/* ---- the words (transitions.dev, Texts reveal) -------------------------------------------- */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

.bottom {
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.copy { max-width: 66rem; }

h1 {
  margin: 0;
  font-size: clamp(34px, 6.6vw, 112px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.032em;
  text-wrap: balance;
  max-width: 11.2em;
}
.lede {
  margin: 28px 0 0;
  max-width: 38rem;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(233, 238, 243, 0.9);
  text-wrap: pretty;
}

.scale { margin: 34px 0 0; width: min(100%, 27rem); }
.scale-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; height: 6px; }
.seg {
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.seg:nth-child(1) { background: var(--l1); transition-delay: 480ms; }
.seg:nth-child(2) { background: var(--l2); transition-delay: 560ms; }
.seg:nth-child(3) { background: var(--l3); transition-delay: 640ms; }
.seg:nth-child(4) { background: var(--l4); transition-delay: 720ms; }
.seg:nth-child(5) { background: var(--l5); transition-delay: 800ms; }
.seg:nth-child(6) { background: var(--l6); transition-delay: 880ms; }
.t-stagger.is-shown .seg { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .seg { transition: none; }
}
.scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--night-muted);
}

.credit {
  flex: none;
  margin: 0;
  max-width: 20rem;
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
  color: var(--night-muted);
}

/* ---- phones and narrow windows ------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --side: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .stage { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .bottom { flex-direction: column; align-items: flex-start; gap: 26px; }
  h1 { font-size: clamp(34px, 9.4vw, 60px); }
  .lede { margin-top: 20px; }
  .scale { margin-top: 26px; }
  .credit { text-align: left; max-width: none; }
}