/*
  Watan / وطن
  A shopfront at night: the logo's own paper is the only light source.
  Every colour below is sampled from the logo.
*/

:root {
  /* Roast: the wall, darkest to lightest */
  --roast-950: #120801;
  --roast-900: #1e0d04;
  --roast-800: #2d1507; /* "WATAN" lettering */
  --roast-700: #3d1b07; /* body of the وطن letters */
  --roast-600: #4f280e; /* highlight on the وطن letters */

  /* Gold: ring, swoosh, sign */
  --gold-600: #9d793c;
  --gold-500: #c99c5c;
  --gold-300: #e3c793;

  /* Paper: the logo background, top to bottom */
  --paper-100: #f8f4eb;
  --paper-200: #ece3d6;
  --paper-300: #dfd2c1;

  --sand-400: #c3a273;  /* citadel and hills */
  --olive-600: #53651c; /* leaves */

  /* Warm window light, as channels for rgb(var(--light) / alpha) */
  --light: 255 194 124;

  --font-sign: "Aref Ruqaa", "Noto Naskh Arabic", "Amiri", serif;
  --font-text: "Markazi Text", "Noto Naskh Arabic", "Amiri", serif;
}

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

html {
  overflow-x: clip;
  color-scheme: dark;
  background: var(--roast-950);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--roast-950);
  color: var(--paper-200);
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0;
}

::selection {
  background: var(--olive-600);
  color: var(--paper-100);
}

/* The wall: dark masonry, warmer near the window */

.wall {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 95% at 50% 32%, #3a1b09 0%, #251106 34%, #170a02 68%, var(--roast-950) 100%);
}

/* Stone courses, only visible where the window light reaches */
.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgb(255 222 186 / .03) 0 3.75rem, rgb(0 0 0 / .08) 3.75rem 7.5rem);
  -webkit-mask-image: radial-gradient(65% 55% at 50% 32%, #000, transparent);
  mask-image: radial-gradient(65% 55% at 50% 32%, #000, transparent);
}

/* Grain */
.wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: .12;
  mix-blend-mode: overlay;
}

/* The shopfront */

.shopfront {
  --w: min(84vw, 54svh, 34rem); /* window width */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 8svh, 5.5rem) 1rem 1.5rem;
  overflow: clip;
  text-align: center;
}

.window {
  position: relative;
  width: var(--w);
  aspect-ratio: 1;
  margin: 0;
  font: inherit;
}

/* Light spilling from the window onto the wall */
.window__glow {
  position: absolute;
  inset: -50% -70%;
  background: radial-gradient(closest-side, rgb(var(--light) / .24), rgb(var(--light) / .08) 55%, transparent);
  pointer-events: none;
}

.window__pane {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
  background: var(--paper-200);
}

.window__pane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Depth of the recess */
.window__pane::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgb(45 21 7 / .2),
    inset 0 1.5rem 2.5rem -1.75rem rgb(45 21 7 / .5);
  pointer-events: none;
}

/* Gold moulding, concentric with the arch */
.window::before {
  content: "";
  position: absolute;
  inset: calc(var(--w) * -.03) calc(var(--w) * -.03) 0;
  border: 1px solid rgb(201 156 92 / .55);
  border-bottom: 0;
  border-radius: calc(var(--w) * .53) calc(var(--w) * .53) 0 0;
  pointer-events: none;
}

/* Sill */
.window::after {
  content: "";
  position: absolute;
  inset-inline: -14%;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(to left, transparent, rgb(201 156 92 / .75) 18%, rgb(201 156 92 / .75) 82%, transparent);
}

.sign {
  margin-top: calc(var(--w) * .06);
  padding: .05em .3em .15em;
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: calc(var(--w) * .21);
  line-height: 1.3;
  color: var(--gold-300);
  text-shadow: 0 0 .5em rgb(var(--light) / .2);
}

.note {
  margin-top: .25rem;
  max-width: 32ch;
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  line-height: 1.6;
  color: rgb(236 227 214 / .82);
}

.colophon {
  padding: 1.25rem 1rem max(1.25rem, env(safe-area-inset-bottom));
  text-align: center;
  font-size: .9375rem;
  color: rgb(236 227 214 / .58);
}

/* 404 */

.shopfront--lost {
  --w: min(62vw, 40svh, 22rem);
}

.shopfront--lost .sign {
  font-size: calc(var(--w) * .15);
}

.link {
  margin-top: 1.75rem;
  color: var(--gold-300);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}

.link:hover {
  color: var(--paper-100);
}

.link:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 6px;
  border-radius: 2px;
}

/*
  One moment on load: the window light turns on, then the sign is written
  right to left. `.js` is set in <head>; `.is-lit` once the font and logo are ready.
*/
@media (prefers-reduced-motion: no-preference) {
  .js .window__pane img {
    filter: brightness(.28) saturate(.55);
  }

  .js .window__glow {
    opacity: 0;
  }

  .js .sign {
    -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 60%);
    mask-image: linear-gradient(to left, #000 40%, transparent 60%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }

  .js .note {
    opacity: 0;
  }

  .is-lit .window__pane img {
    animation: lamp 1.6s cubic-bezier(.2, .7, .2, 1) forwards;
  }

  .is-lit .window__glow {
    animation: spill 1.6s cubic-bezier(.2, .7, .2, 1) forwards;
  }

  .is-lit .sign {
    animation: write 1.3s .75s cubic-bezier(.5, .1, .3, 1) forwards;
  }

  .is-lit .note {
    animation: appear .8s 1.7s ease-out forwards;
  }
}

/* A filament catching, then settling */
@keyframes lamp {
  0%   { filter: brightness(.28) saturate(.55); }
  8%   { filter: brightness(.66) saturate(.8); }
  15%  { filter: brightness(.44) saturate(.7); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes spill {
  0%   { opacity: 0; }
  8%   { opacity: .6; }
  15%  { opacity: .3; }
  100% { opacity: 1; }
}

@keyframes write {
  from {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

@keyframes appear {
  to { opacity: 1; }
}