/* Candilia: coming-soon page.
   A dark room. The light enters the C, lights the wordmark, and a hidden
   geometry (an 8-fold star lattice, the harmony) shows wherever the light falls. */

:root {
  --night: #03140d;
  --canopy: #0b3527;
  --moss: #072619;
  --light: #0ec46f;
  --paper: #f1f5f2;
  --mist: #7fa392;
  --unlit: #0f3b2b;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tile: 150px;
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%230EC46F' stroke-width='.7' d='M25 10.36L50 0M25 10.36L35.36 35.36M10.36 25L35.36 35.36M0 50L10.36 25M89.64 25L100 50M64.64 35.36L89.64 25M64.64 35.36L75 10.36M50 0L75 10.36M0 50L10.36 75M10.36 75L35.36 64.64M25 89.64L35.36 64.64M25 89.64L50 100M50 100L75 89.64M64.64 64.64L75 89.64M64.64 64.64L89.64 75M89.64 75L100 50M50 58.58L64.64 64.64M35.36 64.64L50 58.58M35.36 64.64L41.42 50M35.36 35.36L41.42 50M35.36 35.36L50 41.42M50 41.42L64.64 35.36M58.58 50L64.64 35.36M58.58 50L64.64 64.64'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

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

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* the room: a lifted centre that falls to night at the edges, dithered by a faint grain */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -3;
  background: radial-gradient(ellipse 78% 62% at 50% 44%, var(--canopy) 0%, var(--moss) 44%, var(--night) 100%);
}

body::after {
  z-index: -1;
  background: var(--grain) 0 0 / 220px 220px;
  opacity: 0.045;
}

.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;
}

/* ---------- top and bottom bars ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.1rem max(1.5rem, env(safe-area-inset-right)) 1.1rem max(1.5rem, env(safe-area-inset-left));
  font: 400 0.8125rem/1.4 var(--sans);
  letter-spacing: 0.005em;
  color: var(--mist);
  animation: rise 1s ease-out 2.4s both;
}

.bar p {
  margin: 0;
}

.bar--top {
  justify-content: flex-end;
  padding-top: max(1.1rem, env(safe-area-inset-top));
}

.bar--bottom {
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

.lang {
  display: flex;
  gap: 0.35rem;
}

.lang a {
  display: inline-block;
  padding: 0.5rem 0.45rem;
  color: var(--mist);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lang a:hover,
.lang a[aria-current="page"] {
  color: var(--paper);
}

.lang a[aria-current="page"] {
  box-shadow: inset 0 -1px 0 var(--light);
}

a:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- the stage ---------- */

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem max(1.5rem, env(safe-area-inset-right)) 2rem max(1.5rem, env(safe-area-inset-left));
  overflow: hidden;
  overflow: clip;
  text-align: center;
}

.brand {
  margin: 0;
  line-height: 0;
}

.logo {
  display: block;
  width: min(78vw, 46rem, 112vh);
  width: min(78vw, 46rem, 112svh);
  height: auto;
  overflow: visible;
}

.logo .l,
.logo__c {
  fill: #fff;
}

.logo__tri {
  fill: var(--light);
}

.logo__glow,
.logo__trail {
  pointer-events: none;
}

/* the ray flies in from the right; the wordmark lights up as it passes */
.logo__ray {
  animation: ray-in 1.15s cubic-bezier(0.3, 0.6, 0.12, 1) 0.3s both;
}

.logo__trail {
  animation: trail 1.15s ease-out 0.3s both;
}

.logo .l,
.logo__c {
  animation: lit 0.55s ease-out both;
}

.logo .a2 { animation-delay: 0.33s; }
.logo .i2 { animation-delay: 0.385s; }
.logo .l5 { animation-delay: 0.42s; }
.logo .i1 { animation-delay: 0.46s; }
.logo .d  { animation-delay: 0.5s; }
.logo .n  { animation-delay: 0.56s; }
.logo .a1 { animation-delay: 0.65s; }
.logo__c  { animation-delay: 0.95s; }

.logo__glow {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    bloom 1.3s ease-out 0.9s both,
    breathe 6s ease-in-out 2.2s infinite;
}

/* ---------- the line ---------- */

.tagline {
  margin: clamp(1.6rem, 5vh, 3.25rem) 0 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.2rem, 0.85rem + 1.45vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 0 0.9em rgba(7, 38, 25, 0.95), 0 0 0.3em rgba(7, 38, 25, 0.85);
}

.tagline__line {
  display: block;
}

.tagline__line--accent {
  color: var(--light);
  animation: rise 1.1s ease-out 1.95s both;
}

.w {
  display: inline-block;
  animation: word 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.w:nth-child(1) { animation-delay: 1.15s; }
.w:nth-child(2) { animation-delay: 1.23s; }
.w:nth-child(3) { animation-delay: 1.31s; }
.w:nth-child(4) { animation-delay: 1.39s; }
.w:nth-child(5) { animation-delay: 1.47s; }
.w:nth-child(6) { animation-delay: 1.55s; }

/* ---------- the lamp (added by site.js) ---------- */

.lamp {
  --d: 36rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  width: var(--d);
  height: var(--d);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 100%);
  will-change: transform;
}

.lamp.is-on {
  opacity: 1;
}

.lamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(14, 196, 111, 0.13), rgba(14, 196, 111, 0) 72%);
}

.lamp__lattice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  background: var(--lattice) 0 0 / var(--tile) var(--tile) repeat;
  opacity: 0.55;
  will-change: transform;
}

/* ---------- 404 ---------- */

.lost {
  max-width: 34rem;
}

.lost__title {
  margin: 0;
  font: 500 clamp(1.5rem, 1.05rem + 1.9vw, 2.4rem)/1.2 var(--sans);
  letter-spacing: -0.02em;
}

.lost__title span {
  display: block;
  margin-top: 0.4rem;
  color: var(--mist);
  font-size: 0.62em;
}

.lost__home {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 1.1rem;
  color: var(--paper);
  font: 500 0.9375rem/1 var(--sans);
  text-decoration: none;
  border: 1px solid rgba(14, 196, 111, 0.55);
  border-radius: 2px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lost__home:hover {
  background: rgba(14, 196, 111, 0.12);
  border-color: var(--light);
}

.logo--small {
  width: min(56vw, 16rem);
  margin: 0 auto 2.5rem;
}

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

@keyframes ray-in {
  from { transform: translateX(1640px); opacity: 0; }
  12% { opacity: 1; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes trail {
  from { opacity: 0; }
  10% { opacity: 0.85; }
  55% { opacity: 0.35; }
  to { opacity: 0; }
}

@keyframes lit {
  from { fill: var(--unlit); }
  45% { fill: #c9f5de; }
  to { fill: #fff; }
}

@keyframes bloom {
  from { opacity: 0; transform: scale(0.35); }
  35% { opacity: 1; transform: scale(1.12); }
  to { opacity: 0.62; transform: scale(1); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.62; }
  38% { opacity: 0.86; }
  52% { opacity: 0.74; }
  70% { opacity: 0.9; }
}

@keyframes word {
  from { opacity: 0; transform: translateY(0.4em); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* ---------- small screens ---------- */

@media (max-width: 40rem) {
  :root {
    --tile: 92px;
  }

  .lamp {
    --d: 26rem;
  }

  .bar--bottom {
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    font-size: 0.75rem;
  }

  .bar--bottom span {
    display: block;
  }

  .bar--bottom .sep {
    display: none;
  }
}

@media (max-height: 30rem) and (orientation: landscape) {
  .stage {
    padding-block: 0.5rem;
  }

  .bar {
    padding-block: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}