/* Warm & Glad motion, version 2.2
   1. Loader (first page of a visit only): the letters drop in twice, then the logo moves into the header
   2. Scroll reveals
   3. Rollovers
   4. "View" label that follows the mouse over photos
   5. Toothy records that spin when you reach them
   6. Feelin' Peachy pressed into the page on rollover
   7. TBH tag in the footer
   Everything here calms down for people who set "reduce motion". */

@property --h { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --ease-move: cubic-bezier(0.76, 0, 0.24, 1);   /* logo move, wipes */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* reveals */
}

/* ---------- 1. Loader ---------- */

html.intro, html.intro body { overflow: hidden; }

/* While the loader runs, the page under it is hidden (the logo stays, it gets moved) */
html.intro .site-header .nav,
html.intro main,
html.intro .site-footer,
html.intro .signup { visibility: hidden; }

.intro-screen {
  position: fixed; inset: 0; z-index: 900;
  background: var(--olive);
  color: var(--ink);
  font-family: var(--font-mono);
  pointer-events: none;
}

/* Archive labels. Top left is left empty: that's where the logo lands. */
.intro-screen .corner {
  position: absolute;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint);
  line-height: 1.5;
}
.intro-screen .tr { top: 22px; right: var(--gutter); text-align: right; }
.intro-screen .bl { bottom: 22px; left: var(--gutter); }
.intro-screen .br { bottom: 22px; right: var(--gutter); text-align: right; color: var(--gold); }

/* Year counter under the logo */
.intro-count {
  position: absolute; left: 0; right: 0; top: calc(50% + clamp(48px, 9vw, 96px));
  text-align: center;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--soft); font-variant-numeric: tabular-nums;
}

/* Letters: each letter of the wordmark drops into place, falls away, then drops in again */
html.intro .logo.letters svg path { transform: translateY(-120%); opacity: 0; transform-box: fill-box; }
html.intro .logo.letters.drop svg path {
  animation: wg-drop 0.45s var(--ease-out) forwards;
  animation-delay: calc(var(--n, 0) * 60ms);
}
html.intro .logo.letters.fall svg path {
  transform: none; opacity: 1;
  animation: wg-fall 0.38s cubic-bezier(0.5, 0, 0.75, 0) forwards;
  animation-delay: calc(var(--n, 0) * 45ms);
}
@keyframes wg-drop {
  0%   { transform: translateY(-120%); opacity: 0; }
  1%   { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes wg-fall {
  0%   { transform: translateY(0); opacity: 1; }
  99%  { opacity: 1; }
  100% { transform: translateY(120%); opacity: 0; }
}

/* The header logo sits above the loader screen while it's moved */
html.intro .site-header { position: relative; z-index: 950; }
html.intro .logo { pointer-events: none; }
.logo svg { transform-origin: 0 0; }
.logo.moving svg { transition: transform 0.95s var(--ease-move); }

/* After the loader: the nav boxes drop in one after another */
html.intro-out .nav a { animation: wg-nav 0.6s var(--ease-out) both; }
html.intro-out .nav a:nth-child(2) { animation-delay: 0.06s; }
html.intro-out .nav a:nth-child(3) { animation-delay: 0.12s; }
html.intro-out .nav a:nth-child(4) { animation-delay: 0.18s; }
@keyframes wg-nav { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 2. Scroll reveals ---------- */
/* Hidden only when the motion script is running (html.js-motion); revealed with .in */

.js-motion :is(
  .page-head h1, .page-head p, .section-head, .featured-meta, .featured h3, .featured p, .featured .actions,
  .mixes iframe, .toolbar, .post-head > *, .post-body > :not(figure), .about-body > :not(img),
  .signup-box > *, .footer-row, .more h2, .notfound > *, .sessions-btn
) {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-motion :is(
  .page-head h1, .page-head p, .section-head, .featured-meta, .featured h3, .featured p, .featured .actions,
  .mixes iframe, .toolbar, .post-head > *, .post-body > :not(figure), .about-body > :not(img),
  .signup-box > *, .footer-row, .more h2, .notfound > *, .sessions-btn
).in { opacity: 1; transform: none; }

/* Photos are uncovered by a wipe from the bottom, settling from a slight zoom */
.js-motion :is(.hero-frame > img, .featured-img img, .card-frame img, .post-feature img, .post-body figure img, .about-body > img) {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.12);
  transition: clip-path 1.1s var(--ease-move), transform 1.4s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-motion :is(.hero-frame > img, .featured-img img, .card-frame img, .post-feature img, .post-body figure img, .about-body > img).in {
  clip-path: inset(0 0 0 0);
  transform: none;
}
/* Photos clip inside their frames so the zoom never spills out */
.hero-frame, .featured-img, .post-feature, .post-body figure, .about-body { overflow: hidden; }
.about-body > img, .post-feature img, .post-body figure img { display: block; }

/* Card titles follow their photo */
.js-motion .card :is(h3, .card-meta) {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + 0.25s);
}
.js-motion .card.in :is(h3, .card-meta) { opacity: 1; transform: none; }

/* ---------- 3. Rollovers ---------- */

/* Photo frames for the post cards */
.card-frame { display: block; overflow: hidden; background: var(--panel); }
.card-frame .card-img { display: block; }

@media (hover: hover) and (pointer: fine) {
  /* Photos zoom gently inside their frames (no more fading) */
  .card:hover .card-img, .featured-img:hover img { opacity: 1; }
  .card-frame .card-img.done, .featured-img img.done { transition: transform 0.7s var(--ease-out); }
  .card:hover .card-frame .card-img, .featured-img:hover img, .featured-img:hover img.in { transform: scale(1.06); }
}

/* Fill wipe, only on the flat boxes: menu, footer links, share. Coral slides in from the left, out to the right. */
.nav a, .site-footer nav a, .share a, .share button { position: relative; isolation: isolate; overflow: hidden; }
.nav a::before, .site-footer nav a::before, .share a::before, .share button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--coral);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::before, .site-footer nav a:hover::before, .share a:hover::before, .share button:hover::before {
    transform: scaleX(1); transform-origin: 0 50%;
  }
  .nav a:hover, .nav a[aria-current="page"]:hover, .site-footer nav a:hover, .share a:hover, .share button:hover {
    color: var(--olive); background: var(--panel);
  }
  .nav a[aria-current="page"]:hover { background: var(--gold); }
}
.nav a, .site-footer nav a, .share a, .share button { transition: color 0.3s; }

/* Buttons: the words roll up and a fresh copy rolls in from below, like a ticker */
.btn .roll { display: block; overflow: hidden; }
.btn .roll-in { display: block; position: relative; transition: transform 0.5s var(--ease-move); }
.btn .roll-in::after { content: attr(data-text); position: absolute; left: 0; right: 0; top: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .roll-in { transform: translateY(-100%); }
}
.btn { transition: background 0.35s, border-color 0.35s, color 0.35s; }

/* Text links: a coral line slides across under the gold one */
.post-body a:not(.btn), .about-body a, .links-box a {
  text-decoration: none;
  background-image: linear-gradient(var(--coral), var(--coral)), linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.45s var(--ease-move), color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .post-body a:not(.btn):hover, .about-body a:hover, .links-box a:hover { background-size: 100% 1px, 100% 1px; }
}

/* Logo: the letters hop up one after another and turn coral */
@media (hover: hover) and (pointer: fine) {
  html:not(.intro) .logo:hover svg path { animation: wg-hop 0.5s var(--ease-out); animation-delay: calc(var(--n, 0) * 35ms); transform-box: fill-box; }
}
@keyframes wg-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-14%); } }

/* ---------- 4. "View" label over photos ---------- */

.cursor-label {
  position: fixed; left: 0; top: 0; z-index: 800;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--coral); color: var(--olive);
  padding: 8px 12px; line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.25s var(--ease-out);
}
.cursor-label.on { transform: translate(-50%, -50%) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .has-cursor-label :is(.card-frame, .featured-img) { cursor: none; }
}

/* ---------- 5. Toothy records ---------- */
/* Spins up like a record when you reach it, then settles. Rolling over it spins it again. */

.record { display: block; transform-origin: 50% 50%; }
.record.spin { animation: wg-record 1.9s linear forwards; }
@keyframes wg-record {
  0%   { transform: rotate(0deg);    animation-timing-function: cubic-bezier(0.45, 0, 0.6, 0.6); }
  25%  { transform: rotate(300deg);  animation-timing-function: linear; }
  60%  { transform: rotate(900deg);  animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  84%  { transform: rotate(1094deg); animation-timing-function: ease-in-out; }
  93%  { transform: rotate(1076deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(1080deg); }
}

/* Listen heading on the home page: the chip with a Toothy record beside it */
.listen-title { display: flex; align-items: center; gap: 14px; }
.listen-title .record { width: 46px; height: auto; }

/* ---------- 6. Feelin' Peachy, pressed into the page on rollover ---------- */
/* An invisible olive button around the image. Flat at rest, exactly as before.
   Rolling over it presses it into the screen. */

.peachy-well {
  --depth: var(--h);
  display: inline-block; max-width: 100%;
  margin: 0 0 30px; padding: 26px 30px;
  background: var(--olive);
  box-shadow:
    inset calc(var(--depth) * 7px) calc(var(--depth) * 9px) calc(var(--depth) * 18px) rgba(0, 0, 0, 0.6),
    inset calc(var(--depth) * -4px) calc(var(--depth) * -5px) calc(var(--depth) * 12px) rgba(237, 234, 219, 0.07);
  transition: --h 0.45s var(--ease-out);
}
.peachy-well .footer-peachy {
  margin: 0; width: 560px; max-width: 100%;
  transform: translate(calc(var(--depth) * 2px), calc(var(--depth) * 4px)) scale(calc(1 - var(--depth) * 0.035));
  filter: brightness(calc(1 - var(--depth) * 0.12));
}
@media (hover: hover) and (pointer: fine) { .peachy-well:hover { --h: 1; } }
@media (max-width: 680px) { .peachy-well { padding: 16px 18px; } }

/* ---------- 7. TBH tag ---------- */

.tbh-tag { display: block; flex: none; color: var(--ink); transition: color 0.3s; }
.tbh-mark {
  display: block; height: 40px; aspect-ratio: 1.286;
  background: currentColor;
  -webkit-mask: url("../../images/tbh-tag.svg") center / contain no-repeat;
  mask: url("../../images/tbh-tag.svg") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) { .tbh-tag:hover { color: var(--coral); } }
.tbh-tag:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* ---------- Reduce motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js-motion *, .js-motion *::before { transition-duration: 0.01s !important; animation: none !important; transition-delay: 0s !important; }
  .js-motion :is(.hero-frame > img, .featured-img img, .card-frame img, .post-feature img, .post-body figure img, .about-body > img) { clip-path: none; transform: none; }
  .cursor-label { display: none; }
}