/* ── Hero ──
   Transparent: the glow and dot grid behind it belong to the sitewide
   backdrop now (js/backdrop.js, .backdrop in base.css), which stays put while
   the hero scrolls off it. */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Eyebrow, name and tagline sit dead centre of the first screen. */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4.5rem 3rem;
}

.hero-name {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(5rem, 11vw, 13rem);
  line-height: .88;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 3rem;
}

/* Where JS is available, hide the name until the inline splitter has run,
   so the plain text never flashes before the animation. The script sets
   inline opacity:1 once built (and immediately for reduced-motion). */
@media (scripting: enabled) {
  .hero-name { opacity: 0; }
}

.hero-name .word {
  display: block;          /* each name word on its own line: Zoe / Allgaier */
  white-space: nowrap;
}

.char-mask {
  display: inline-block;
  padding-bottom: 0.25em;
  margin-bottom: -0.25em;
  vertical-align: bottom;
}

.char {
  display: inline-block;
  /* WebKit clips a filtered element's ink to its box. At line-height .88 the
     descenders (the g in "Allgaier") hang below each char's box, so Safari
     sliced them off. reveal.js drops the animation (and its filter) once
     each letter lands; this padding covers the ink while it's still
     animating. The matching negative margin leaves the layout unchanged. */
  padding: 0.1em 0.05em 0.3em;
  margin: -0.1em -0.05em -0.3em;
  animation: charReveal 1s cubic-bezier(0.15, 1, 0.3, 1) both;
}

@keyframes charReveal {
  from { opacity: 0; transform: translateY(110%); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.hero-tagline {
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  color: var(--muted);
  max-width: 32ch;
  text-wrap: balance;
  animation: fadeUp 0.9s cubic-bezier(0.25, 0.8, 0.25, 1) 0.68s both;
}

/* The one way out of the hero besides the nav — lands last, after the
   tagline has settled. (.pill itself is below, shared with about/resume.) */
.hero-cta {
  margin-top: 2.75rem;
  animation: fadeUp 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 1.05s both;
}

/* ── Work ── */
.work {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--rule);
  border-top: 1px solid var(--rule);   /* the footer's own rule closes it */
}

.work-item {
  display: block;
  background: var(--bg);
  padding: 2rem;
}

.work-media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}

.work-media img,
.work-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.work-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.work-num {
  font-size: 0.75rem;
  color: var(--muted);
}

.work-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.work-role {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ── Avatar ──
   Round portrait with a glassy face: a soft specular sheen across the photo
   and a bright rim along its edge, lifted off the page by a long shadow.
   Used by the about page (lives here with the other shared pieces). */
.avatar {
  --size: 17.5rem;
  position: relative;
  flex: none;
  width: min(var(--size), 100%);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  box-shadow: 0 30px 60px -28px rgba(24, 20, 48, 0.45);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Sheen: a diagonal highlight over the photo, like light on curved glass. */
.avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 32%, transparent 50%);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Capped by height too, so the about hero still fits on one screen. */
.avatar--lg { --size: min(clamp(14rem, 24vw, 22.75rem), 34svh); }

/* ── Pills ──
   Glass link buttons, icon + label. Shared by the about + resume pages. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.25rem 0.7rem 1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  outline: 1px solid var(--rule);
  transition: color 0.2s, background-color 0.2s, transform 0.15s;
}

.pill:focus-visible {
  border-radius: 999px;
  outline: 2px solid var(--text);
  color: var(--text);
}
.pill:active { transform: scale(0.96); }

@media (hover: hover) {
  .pill:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 85%, transparent);
  }
}

.pill-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  display: block;
}

/* Tria's mark is its lowercase t — set here in Instrument Serif italic. */
.pill-t {
  display: grid;
  place-items: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.65rem;
  line-height: 1;
  transform: translateY(-0.22em);
}

@media (prefers-color-scheme: dark) {
  .avatar { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.75); }
  .avatar::after {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 32%, transparent 50%);
    box-shadow:
      inset 0 1.5px 1px rgba(255, 255, 255, 0.22),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
}

/* ── Desktop: centre the hero on the whole window rather than on the column
   beside the sidebar — the backdrop already runs under the glass, the way
   iPadOS extends content beneath a floating sidebar. ── */
@media (min-width: 769px) {
  .hero {
    margin-left: calc(-1 * var(--nav-inset));
    padding-left: calc(3rem + var(--nav-inset));
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .hero {
    /* Centre within the space the chrome leaves free: below the status bar
       (home-screen app) and above the floating tab bar. */
    padding: calc(3rem + env(safe-area-inset-top, 0px)) 1.5rem calc(3rem + var(--tabbar-clear));
  }

  .work {
    grid-template-columns: 1fr;
  }

  .work-item {
    padding: 1.5rem;
  }
}