/* vibedog . one quiet scene */

@font-face { font-family: 'Familjen Grotesk'; src: url('/assets/fonts/familjen-grotesk-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('/assets/fonts/familjen-grotesk-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/geist-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* sampled straight off the photo's own left edge, so the page and the picture are one scene */
  --sky:   #a2c5eb;
  --deep:  #2b5180;
  --water: #3b69a0;
  --ink:   #14304f;
  --cream: #f6ecda;
  --pad:   clamp(20px, 4.2vw, 60px);
  --ease:  cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--cream);
  font-family: 'Familjen Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #6f9dd0;
  background-image: linear-gradient(
    to bottom,
    #b3dbfe 0%, #bedffe 8%, #c8e3fe 16%, #cfe7ff 22%, #b8d7fb 24%, #689ae1 28%,
    #689ae3 36%, #6c9ee5 44%, #628ecf 52%, #5080c8 60%, #5b87c8 66%, #658ac8 70%,
    #7092c7 72%, #9ec7f5 76%, #91bcef 84%, #7daee8 88%, #6c9cda 96%, #6a9ad8 100%
  );
  background-attachment: fixed;
}

#haze {
  position: fixed; inset: 0;
  z-index: 2;   /* over the photograph, under the words */
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}
#haze.on { opacity: 1; }

.scene {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
}

/* ---------- the photograph ---------- */

.photo {
  position: absolute;
  z-index: 1;
  top: 0; right: 0;
  display: block;
  height: 100svh;
  width: min(100svh, 100vw);
  pointer-events: none;
}
.photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity 1.5s var(--ease), transform 3.2s var(--ease);
  /* he dissolves into the page instead of sitting on a rectangle */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
}
.photo img.in { opacity: 1; transform: none; }

/* ---------- type ---------- */

.mark, .sound { color: var(--ink); }

.mark {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .34em;
  text-transform: lowercase;
  opacity: .78;
}

.sound {
  position: absolute;
  top: var(--pad); right: var(--pad);
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .1em;
  color: var(--ink); opacity: .66;
  transition: opacity .5s var(--ease);
}
.sound:hover, .sound:focus-visible { opacity: 1; }
.sound[aria-pressed="true"] { opacity: .95; }

.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.eq i { width: 2px; height: 3px; background: currentColor; opacity: .85; transition: height .45s var(--ease); }
.sound[aria-pressed="true"] .eq i { animation: bob 2.9s ease-in-out infinite; }
.sound[aria-pressed="true"] .eq i:nth-child(2) { animation-duration: 3.7s; animation-delay: -1.1s; }
.sound[aria-pressed="true"] .eq i:nth-child(3) { animation-duration: 4.3s; animation-delay: -2.4s; }
@keyframes bob { 0%, 100% { height: 3px; } 50% { height: 10px; } }

.say {
  margin: auto 0;
  max-width: 26ch;
  font-size: clamp(19px, 1.95vw, 26px);
  line-height: 1.42;
  letter-spacing: -.008em;
  text-shadow: 0 1px 22px rgba(12, 32, 58, .34);
}
.say p { margin: 0; }
.say p + p { margin-top: .62em; }
.say--soft { opacity: .74; }

.aside {
  position: absolute;
  margin: 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .13em;
  opacity: .42;
  text-shadow: 0 1px 16px rgba(12, 32, 58, .4);
}
.aside--lake   { left: var(--pad); top: 66.5%; }
.aside--urgent { position: static; margin-top: 11px; color: var(--ink); opacity: .5; text-shadow: none; }

/* ---------- the tape ---------- */

.tape {
  margin-top: auto;
  margin-bottom: 58px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  text-shadow: 0 1px 18px rgba(12, 32, 58, .42);
}
.tape p { margin: 0; }
.tape__head { font-size: 11px; letter-spacing: .19em; opacity: .62; }
.tape__title {
  margin-top: 8px !important;
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: clamp(16px, 1.35vw, 19px);
  letter-spacing: .002em;
  transition: opacity .9s var(--ease);
}
.tape__title.turning { opacity: 0; }
.tape__time { margin-top: 5px !important; font-size: 12px; letter-spacing: .1em; opacity: .74; font-variant-numeric: tabular-nums; }
.tape__dim { opacity: .55; }
.tape__rule {
  margin-top: 12px;
  width: min(268px, 62vw); height: 1px;
  background: rgba(246, 236, 218, .2);
  overflow: hidden;
}
.tape__rule i { display: block; height: 100%; width: 0%; background: rgba(246, 236, 218, .74); }

/* ---------- the caption, not a nav bar ---------- */

.caption {
  position: absolute;
  left: var(--pad); bottom: var(--pad);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .11em;
  text-shadow: 0 1px 16px rgba(12, 32, 58, .42);
}
.caption__ticker { opacity: .9; }
.caption__ca {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit;
  opacity: .58; transition: opacity .4s var(--ease);
}
.caption__ca:hover, .caption__ca:focus-visible { opacity: .95; }
.caption__ca.copied { opacity: 1; }
.caption__links { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.caption a { color: inherit; text-decoration: none; opacity: .62; transition: opacity .4s var(--ease); }
.caption a:hover, .caption a:focus-visible { opacity: 1; }

:focus-visible { outline: 1px solid rgba(246, 236, 218, .8); outline-offset: 4px; }
.mark ~ .sound:focus-visible { outline-color: rgba(20, 48, 79, .8); }

/* slow arrival, nothing snaps into place */
.mark, .say, .aside, .tape, .caption, .sound {
  animation: rise 1.7s var(--ease) both;
}
.say    { animation-delay: .32s; }
.tape   { animation-delay: .58s; }
.aside  { animation-delay: .8s; }
.sound  { animation-delay: .95s; }
.caption{ animation-delay: 1.05s; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: inherit; transform: none; } }

/* ---------- phones first ---------- */

@media (max-width: 900px) {
  .photo {
    /* dropped clear of the corner text, so nothing lands on his headphones */
    top: 76px; left: 0; right: auto;
    width: 100vw; height: 100vw;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 62%, transparent 99%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 62%, transparent 99%);
  }
  .photo img {
    -webkit-mask-image: none; mask-image: none;
    object-position: 50% 46%;
  }
  .scene { padding-top: calc(var(--pad) * .9); min-height: 100svh; }
  .say {
    margin: 0;
    margin-top: min(89vw, 64svh);
    max-width: 30ch;
    font-size: clamp(20px, 5.6vw, 25px);
  }
  .tape { margin-top: clamp(22px, 4.5vh, 44px); margin-bottom: 72px; }
  .tape__rule { width: min(240px, 68vw); }
  /* on a phone there is no clean water to float this over, so it just follows the copy */
  .aside--lake { position: static; margin-top: 24px; opacity: .5; }
  .caption {
    left: var(--pad); right: var(--pad); bottom: var(--pad);
    justify-content: flex-start; gap: 10px 13px;
    font-size: 10.5px; letter-spacing: .09em;
  }
}

@media (max-width: 400px) {
  .caption__links { gap: 12px; }
  .say { font-size: 20px; }
}

/* wide desktops: keep him company, do not let him drift into a corner */
@media (min-width: 1500px) {
  .say { max-width: 28ch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .photo img { opacity: 1; transform: none; }
  #haze { opacity: 1; }
}