/* Rindo, 2026-09-26: the About "curtain" — two doors, one room.
   Owned by about.css/about.js only; loaded after styles.css so the theme
   variables (--surface, --border, --text-*) already exist. Two-space rule:
   nothing here touches .header, .tagline, .phone-preview or .auth-gate —
   it only adds new elements about.js creates at runtime. */

/* ---------- door 1: the tagline's "JUST DO IT!" ---------- */

.about-door-tagline {
  all: unset;
  cursor: pointer;
  font: inherit;
  font-style: inherit;
  color: inherit;
  padding-bottom: 1px;
  background-repeat: no-repeat;
  background-image: linear-gradient(
    90deg, transparent, var(--text-secondary) 45%, var(--text-primary) 50%,
    var(--text-secondary) 55%, transparent
  );
  background-size: 250% 1px;
  background-position: -50% 100%;
  animation: about-shimmer 3.5s linear infinite;
}
.about-door-tagline:focus-visible {
  outline: 2px solid var(--text-primary); outline-offset: 2px;
}
@keyframes about-shimmer {
  from { background-position: -50% 100%; }
  to { background-position: 150% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .about-door-tagline { animation: none; background-position: 50% 100%; background-size: 60% 1px; }
}

/* ---------- door 2: the Shia-head bookmark ---------- */
/* Fixed on the right edge, ~40% down, half-hidden on purpose — it is the
   phone's only door, so it must clear the pinned top-chrome (phones) and the
   header (desktop) without help: 40vh sits well below both. z-index 95:
   above the phone-preview overlay (90) so it's never trapped behind it, but
   below the sign-in gate (100) since it has nothing to open until there's a
   page under it. */
/* Rindo, 2026-09-26/28: shia.png is a transparent cutout of just the head
   (108x172), not a framed photo — no circular crop, no object-fit box, no
   background disc. It's rotated so the top leans toward the page (like he's
   peeking around the right edge) and pushed mostly off-screen so only an
   eye + his mouth show at rest; hovering/focusing nudges it out further.
   The drop-shadow filter follows the cutout's own silhouette instead of
   drawing a shadow behind a box. */
.about-bookmark {
  all: unset;
  position: fixed; top: 40vh; right: -32px; z-index: 95;
  width: 64px; height: 102px;
  transform: rotate(-20deg);
  transform-origin: 70% 35%;
  cursor: pointer; touch-action: pan-y;
  transition: right 0.2s ease;
}
.about-bookmark:hover, .about-bookmark:focus-visible {
  right: -22px;
}
.about-bookmark:focus-visible {
  outline: 2px solid var(--text-primary); outline-offset: 2px;
}
.about-bookmark img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
/* Hidden while the curtain is open — it rides down as the head inside the
   curtain instead (about-locked is the same class the scroll lock uses). */
body.about-locked .about-bookmark { display: none; }

@media (prefers-reduced-motion: reduce) {
  .about-bookmark { transition: none; }
}

/* Phones: smaller footprint so it pokes in from the edge no further than the
   old 44px circle did (roughly the same visible sliver width at rest). */
@media (max-width: 640px) {
  .about-bookmark { width: 46px; height: 73px; right: -23px; }
  .about-bookmark:hover, .about-bookmark:focus-visible { right: -15px; }
}

/* ---------- scroll lock ---------- */
/* Only overflow-y: the phone-only overflow-x:hidden / overscroll-behavior-x
   rules in styles.css are load-bearing for the tab swipe and must not be
   touched from here. */
html.about-locked, body.about-locked { overflow-y: hidden; }

/* ---------- the room ---------- */
/* z-index 200: above the sign-in gate (100, styles.css) and the phone
   preview (90), which are the highest fixed overlays in the page — the
   curtain must be able to cover either one. */
.about-curtain {
  position: fixed; inset: 0; z-index: 200;
  background: #00b140; /* chroma-key green */
  transform: translateX(100%);
  transition: transform 450ms ease-out;
}
.about-curtain.about-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .about-curtain { transition: none; }
}

/* Scrolling lives on this inner wrapper, not on .about-curtain itself.
   .about-curtain carries the slide transform, which makes it the containing
   block for any position: fixed descendant (the floating close button) —
   if that same element also scrolled its content, the "fixed" button would
   scroll away with the panel instead of staying pinned to the viewport. */
.about-curtain-scroll {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px 40px;
}

/* ---------- floating close button ---------- */
/* Appears only once "Back to the gains" has scrolled out of view inside the
   curtain (see about.js IntersectionObserver) so the two never overlap.
   z-index above .about-panel-top's contents; fixed to the viewport, not the
   scrolling curtain, so it stays put while the panel scrolls underneath it. */
.about-close-float {
  all: unset;
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 210;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  font-size: 20px; line-height: 1;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.about-close-float.about-close-float-visible {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 200ms ease, visibility 0s linear 0s;
}
.about-close-float:focus-visible {
  outline: 2px solid var(--text-primary); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .about-close-float { transition: none; }
  .about-close-float.about-close-float-visible { transition: none; }
}

.about-panel {
  width: 100%; max-width: 980px; margin-top: 40px;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 28px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.about-panel-top {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-bottom: 10px;
}
.about-curtain-head {
  width: auto; height: 48px; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  margin-right: auto; /* pins the pair to the panel's top-right */
}
.about-kicker {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}
.about-panel h2#about-heading { margin: 0 0 18px; font-size: 22px; }

/* ---------- heading title cycle (mirrors .header h1, about.js) ---------- */
.about-title-line { display: block; }
.about-title-cycle {
  min-height: 1.2em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.25s; /* mirrors the header's cross-fade (styles.css h1) */
}
.about-title-cycle.about-title-fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .about-title-cycle { transition: none; }
}

.about-columns {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start;
}
.about-story { order: 1; }
.about-video { order: 2; }
.about-story p { margin: 0 0 12px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.about-story p:last-child { margin-bottom: 0; }

.about-video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--silhouette); border-radius: 10px; overflow: hidden;
}
.about-video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ---------- credits footer ---------- */
.about-rule {
  border: none; border-top: 1px solid var(--border);
  margin: 18px 0 14px;
}
.about-credits p {
  margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
.about-credits p:last-child { margin-bottom: 0; }
/* Rindo, 2026-09-27: disclaimer reads as story text, not fine print */
.about-credits .about-disclaimer {
  margin-top: 10px; font-size: 14px; color: var(--text-secondary);
}
.about-credits a {
  color: inherit; text-decoration: underline;
}
.about-credits a:focus-visible {
  outline: 2px solid var(--text-primary); outline-offset: 2px;
}

@media (max-width: 640px) {
  /* Rindo, 2026-09-27: the longest cycling line ("Hella Rad, GigaChad") fits a
     375px phone at 22px with no room to spare; 20px keeps narrower phones
     off the ellipsis. */
  .about-panel h2#about-heading { font-size: 20px; }
  .about-panel { padding: 18px 16px 20px; margin-top: 16px; }
  .about-columns { grid-template-columns: 1fr; gap: 18px; }
  .about-video { order: -1; }
}