/* ============================================================
   Skeleton loading screen — Medium-style shimmer
   Self-contained: only the .skeleton-screen overlay + .sk-* primitives.
   Mirrors the above-the-fold layout of a page, then fades out on load
   (skeleton.js). Image placeholders = blocks; text placeholders = lines.
   ============================================================ */

.skeleton-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-page, #000);
  overflow: hidden;
  /* Hidden by default — only shown if loading actually takes a moment.
     Fast/cached loads never reveal it (skeleton.js removes it first). */
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.skeleton-screen.is-active {
  opacity: 1;
  pointer-events: auto;
}
.skeleton-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* On light pages (e.g. About) the shimmer base flips to a light palette. */
.skeleton-screen--light { background: #FAF7F2; }

/* ---- Shimmer primitive ----
   A base tone with a single highlight band sweeping across left→right.
   Tones are tuned per theme so the sweep reads as a soft sheen, not a flash. */
.sk {
  --sk-base: #141414;
  --sk-sheen: rgba(255, 255, 255, 0.06);
  position: relative;
  background-color: var(--sk-base);
  overflow: hidden;
  border-radius: 8px;
}
.skeleton-screen--light .sk {
  --sk-base: #ececec;
  --sk-sheen: rgba(255, 255, 255, 0.65);
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--sk-sheen) 50%,
    transparent 100%
  );
  animation: sk-sweep 1.5s ease-in-out infinite;
}

@keyframes sk-sweep {
  100% { transform: translateX(100%); }
}

/* ---- Shapes ---- */
.sk-line   { height: 14px; border-radius: 7px; }
.sk-line--lg { height: 22px; border-radius: 11px; }
.sk-line--sm { height: 11px; border-radius: 6px; }
.sk-circle { border-radius: 50%; }
.sk-img    { width: 100%; border-radius: 24px; }
.sk-pill   { height: 70px; border-radius: 999px; }

/* Subtle entrance + stagger so blocks don't all pop identically. */
.skeleton-screen .sk { animation: sk-fade-in .4s ease both; }
@keyframes sk-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   Layout scaffold — reuses the site's spacing tokens so the
   skeleton lines up with the real content underneath.
   ============================================================ */
.sk-wrap {
  max-width: var(--max-content, 1100px);
  margin: 0 auto;
  padding: 0 var(--space-page, 90px);
}

/* Floating nav placeholder (top-right pill, mirrors .site-nav) */
.sk-nav {
  position: absolute;
  top: 22px;
  right: 80px;
  display: flex;
  gap: 4px;                /* = .nav-pill gap */
}
.sk-nav .sk { width: 88px; height: 88px; border-radius: 50%; --sk-base: #1c1c1c; }   /* = .nav-item size */

/* Case-study hero: centered title block, then a tall media block. */
.sk-hero {
  padding: 200px var(--space-page, 90px) 0;   /* same side gutter as the real content, so the media block is never wider */
  text-align: center;
}
.sk-hero__title {
  width: min(56%, 620px);
  height: 40px;
  margin: 0 auto 16px;
  border-radius: 10px;
}
.sk-hero__sub {
  width: min(28%, 300px);
  height: 16px;
  margin: 0 auto;
  border-radius: 8px;
}
.sk-hero__media {
  max-width: var(--max-content, 1100px);
  margin: 60px auto 0;
  aspect-ratio: 16 / 9;    /* closest to the real hero videos/shots */
  border-radius: var(--radius-lg, 24px);
}

@media (max-width: 1200px) {
  .sk-nav { right: 60px; }
}
@media (max-width: 900px) {
  .sk-nav { right: 40px; }
  .sk-hero { padding-top: 158px; }
  .sk-hero__title { height: 32px; width: 70%; }
}
@media (max-width: 600px) {
  .sk-nav { top: 12px; right: 16px; }
  .sk-nav .sk { width: 68px; height: 68px; }
  .sk-hero { padding-top: 98px; }
  .sk-hero__title { height: 26px; width: 80%; }
  .sk-hero__media { margin-top: 40px; }
}

/* Optional small logo block above the hero title (Artist Campaign). */
.sk-hero__logo {
  width: 220px;
  height: 56px;
  margin: 0 auto 24px;
  border-radius: 10px;
}

/* ---- Homepage hero: centered avatar + title + subtitle + contact line ---- */
.sk-home {
  max-width: var(--max-content, 1100px);
  margin: 0 auto;
  padding: 180px var(--space-page, 90px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sk-home__avatar { width: 175px; height: 175px; margin-bottom: 30px; }
.sk-home__title  { width: min(40%, 360px); height: 40px; border-radius: 10px; margin-bottom: 24px; }
.sk-home__sub    { width: min(72%, 760px); height: 18px; border-radius: 9px; margin-bottom: 24px; }
.sk-home__contact{ width: min(44%, 420px); height: 16px; border-radius: 8px; }

@media (max-width: 900px) {
  .sk-home { padding-top: 120px; }
  .sk-home__avatar { width: 140px; height: 140px; margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .sk-home { padding-top: 100px; }
  .sk-home__avatar { width: 140px; height: 140px; }
  .sk-home__title { height: 28px; width: 60%; }
}

/* ---- About hero: two columns (portrait | name+role+bio), light theme ---- */
.sk-about {
  max-width: var(--max-content, 1100px);
  margin: 0 auto;
  padding: 110px var(--space-page, 90px) 0;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: start;
}
.sk-about__portrait { width: 100%; aspect-ratio: 3 / 4; border-radius: 24px; }
.sk-about__name  { width: 70%; height: 56px; border-radius: 12px; margin-bottom: 16px; }
.sk-about__role  { width: 45%; height: 22px; border-radius: 11px; margin-bottom: 28px; }
.sk-about__card  { width: 100%; height: 230px; border-radius: 16px; }

@media (max-width: 900px) {
  .sk-about {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 100px;
    justify-items: center;
  }
  .sk-about__portrait { max-width: 280px; aspect-ratio: 1 / 1.05; }
  .sk-about__name { width: 60%; text-align: center; }
  .sk-about__role { width: 40%; }
}
@media (max-width: 600px) { .sk-about { padding-top: 80px; } }

/* Respect reduced-motion: hold a static skeleton, no sweep. */
/* project pages hide Work / Resume on phones and iPads */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .skeleton-screen:has(.sk-hero) .sk-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
  .skeleton-screen .sk { animation: none; }
}