@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-600.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 500; font-display: swap; src: url(/assets/fonts/montserrat-latin-500.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-latin-700.woff2) format("woff2"); }

:root {
  --navy: #2C3E95;
  --navy-deep: #1F2E78;
  --yellow: #F6E51F;
  --gold: #E2C800;
  --gold-line: #B89F00;
  --gold-text: #7A6500;
  --ink: #1F2B3D;
  --muted: #596173;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: Montserrat, "Segoe UI", Arial, sans-serif;
  --inset: clamp(8px, 1.5vw, 22px);
  --cycle: 13.5s; /* 4.5 s per language; each roll takes 0.9 s, the outgoing and incoming line move together */
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  font-family: var(--sans);
  color: var(--ink);
  background: #FFFFFF;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- content ---------- */

.stage {
  position: relative; z-index: 1;
  flex: 1 0 auto;
  width: min(760px, 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(36px, 6vh, 72px) 24px clamp(20px, 3vh, 36px);
  text-align: center;
}

.logo {
  display: block; width: clamp(190px, 31vh, 290px); height: auto; aspect-ratio: 1;
  opacity: 0; animation: fade 1.8s var(--ease) .1s forwards;
}

h1 {
  margin: clamp(14px, 2.6vh, 28px) 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(42px, 6.4vw, 80px);
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--navy);
  text-wrap: balance;
  opacity: 0; animation: fade 1.8s var(--ease) .5s forwards;
}

.rule { display: block; width: 56px; height: 1px; margin-top: clamp(14px, 2.4vh, 24px); background: var(--gold-line); }

/* slogan: the three lines share one grid cell (a one-line window) and roll up through it in turn */
.slogan { margin-top: clamp(14px, 2.4vh, 24px); opacity: 0; animation: fade 1.8s var(--ease) .9s forwards; }
.slogan-lines { display: grid; place-items: center; overflow: hidden; padding: .1em .15em; }
.slogan-lines span {
  grid-area: 1 / 1;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(23px, 2.6vw, 32px);
  line-height: 1.25;
  color: var(--ink);
  opacity: 0;
  animation: line var(--cycle) cubic-bezier(.65, 0, .35, 1) infinite;
  /* own layer for the whole cycle, so the italic text never shifts when a movement starts or ends */
  will-change: transform, opacity;
}
.slogan-lines span:nth-child(2) { animation-delay: calc(var(--cycle) / 3); }
.slogan-lines span:nth-child(3) { animation-delay: calc(var(--cycle) * 2 / 3); }

.langs { display: flex; justify-content: center; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.langs li {
  padding-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; color: #6B717D;
  box-shadow: inset 0 -1px transparent;
  animation: lang var(--cycle) cubic-bezier(.65, 0, .35, 1) infinite;
}
.langs li:nth-child(2) { animation-delay: calc(var(--cycle) / 3); }
.langs li:nth-child(3) { animation-delay: calc(var(--cycle) * 2 / 3); }

.note {
  margin: clamp(16px, 3vh, 30px) 0 0;
  font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted);
  opacity: 0; animation: fade 1.8s var(--ease) 1.2s forwards;
}

.home {
  display: inline-block; margin-top: clamp(22px, 4vh, 40px); padding: 13px 26px;
  border-radius: 2px; background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.home:hover, .home:focus-visible { background: var(--navy-deep); outline: 2px solid var(--gold-text); outline-offset: 3px; }

/* ---------- horizon: Brussels skyline and irises ---------- */

.horizon {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; justify-content: center;
  padding: 0 calc(var(--inset) + 16px);
}
.horizon::after {
  content: ""; position: absolute; left: calc(var(--inset) + 16px); right: calc(var(--inset) + 16px); bottom: 1px;
  height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 159, 0, .6) 18%, rgba(184, 159, 0, .6) 82%, transparent);
}
.skyline { display: block; width: min(100%, 540px); height: auto; overflow: visible; }

.iris {
  position: absolute; bottom: 1px;
  height: min(46vh, 430px);
  width: min(21vh, 196px, calc(50vw - 420px));
  overflow: visible;
}
.iris.left { left: calc(var(--inset) + 2vw); }
.iris.right { right: calc(var(--inset) + 2vw); transform: scaleX(-1); }

/* on load: the ground line runs out, the city is built up, the iris stems grow and the flowers open */
/* one soft ease for everything; long, overlapping movements so the scene grows as one flow */
:root { --ease: cubic-bezier(.42, 0, .18, 1); }
.horizon::after { transform: scaleX(0); animation: ground 2s var(--ease) .2s forwards; }

.bld { clip-path: inset(100% -12px -12px -12px); will-change: clip-path; animation: build 2.4s var(--ease) forwards; }
.b1 { animation-delay: .7s; }
.b2 { animation-delay: 1.1s; animation-duration: 2s; }
.b3 { animation-delay: 1.4s; }
.b4 { animation-delay: 1.9s; animation-duration: 2.8s; }
.b5 { animation-delay: 2.2s; animation-duration: 2s; }
.b6 { animation-delay: 2.5s; animation-duration: 2.6s; }

.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 3.4s var(--ease) .5s forwards; }
/* petals scale and turn around the flower's base, which is the origin of their own coordinates */
.pt { transform-origin: 0 0; }
.std { animation: rise 2.4s var(--ease) 2.6s both; }
.fl { animation: unfold-left 2.8s var(--ease) 3s both; }
.fr { animation: unfold-right 2.8s var(--ease) 3s both; }
.bud { transform-origin: 150px 340px; animation: swell 2.6s var(--ease) 3.4s both; }

.foot {
  position: relative; z-index: 1;
  padding: 14px 24px calc(var(--inset) + 16px);
  font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted);
}

/* ---------- keyframes ---------- */

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ground { to { transform: scaleX(1); } }
@keyframes build { to { clip-path: inset(-40px -12px -12px -12px); } }
@keyframes rise {
  from { opacity: 0; transform: scale(.3, .05); }
  45% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes unfold-left {
  from { opacity: 0; transform: rotate(62deg) scale(.35); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes unfold-right {
  from { opacity: 0; transform: rotate(-62deg) scale(.35); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes swell { from { opacity: 0; transform: scale(.2); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes line {
  /* enter from below, rest, then leave upward while the next line enters (6.7% of 13.5 s = 0.9 s) */
  0% { opacity: 0; transform: translateY(85%); }
  6.7%, 33.33% { opacity: 1; transform: none; }
  40%, 100% { opacity: 0; transform: translateY(-85%); }
}
@keyframes lang {
  0% { color: #6B717D; box-shadow: inset 0 -1px transparent; }
  5%, 35% { color: var(--navy); box-shadow: inset 0 -1px var(--gold-line); }
  40%, 100% { color: #6B717D; box-shadow: inset 0 -1px transparent; }
}

/* irises only where the sides have room */
@media (max-width: 1099px) { .iris { display: none; } }

/* ---------- reduced motion: all three lines, nothing moves ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .draw { stroke-dashoffset: 0; }
  .bld { clip-path: none; }
  .horizon::after { transform: none; }
  .logo, h1, .slogan, .note { opacity: 1; }
  .slogan-lines { gap: 2px; overflow: visible; }
  .slogan-lines span { grid-area: auto; opacity: 1; transform: none; }
  .langs { display: none; }
}