/* =========================================================
   Freya sculpture — the stage and backdrop word of the 21st.dev
   "Liquid Sculpture Hero" (by guglielmogiannattasio.it), ported
   to vanilla. Every rule is scoped under .freya-sculpture so the
   reference's reset and typography cannot reach the rest of the page.
   Tuning knobs live in the custom properties on the root.
   ========================================================= */

.freya-sculpture {
  /* the reference's dark theme: background #111110, text #F1EFEA */
  --fsc-bg: #111110;
  --fsc-fg: #F1EFEA;
  /* backdrop word strength; the reference uses 5% of the text colour */
  --fsc-word-opacity: 5%;
  /* stage height; the reference fills the viewport (100svh) */
  --fsc-height: clamp(520px, 100vh, 1100px);
  /* how far the stage colour fades into the page at the top and bottom */
  --fsc-fade: 14%;

  position: relative;
  width: 100%;
  height: var(--fsc-height);
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  box-sizing: border-box;
  background: linear-gradient(to bottom,
    transparent,
    var(--fsc-bg) var(--fsc-fade),
    var(--fsc-bg) calc(100% - var(--fsc-fade)),
    transparent);
  color: var(--fsc-fg);
  -webkit-font-smoothing: antialiased;
  /* vertical page scrolling stays native on touch devices */
  touch-action: pan-y;
  scroll-margin-top: var(--nav-h, 64px);
}
@supports (height: 100svh) {
  .freya-sculpture { --fsc-height: clamp(520px, 100svh, 1100px); }
}
@media (min-width: 768px) {
  .freya-sculpture {
    --fsc-height: clamp(440px, 74vh, 740px);
    --fsc-word-opacity: 8%;
  }
  @supports (height: 100svh) {
    .freya-sculpture { --fsc-height: clamp(440px, 74svh, 740px); }
  }
  .freya-sculpture + .nr-freya { padding-top: 64px; }
}
.freya-sculpture *,
.freya-sculpture *::before,
.freya-sculpture *::after { box-sizing: border-box; }

.freya-sculpture .fsc-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.freya-sculpture .fsc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s ease; }
.freya-sculpture .fsc-fallback { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; transition: opacity .5s ease; }
.freya-sculpture[data-gl="on"] .fsc-canvas { opacity: 1; }
.freya-sculpture[data-gl="on"] .fsc-fallback { opacity: 0; }
.freya-sculpture[data-swap="1"] .fsc-canvas,
.freya-sculpture[data-swap="1"] .fsc-fallback { opacity: 0; transition-duration: .25s; }
/* the sculpture image could not load: keep the word, hide the empty layers */
.freya-sculpture[data-asset="missing"] .fsc-fallback,
.freya-sculpture[data-asset="missing"] .fsc-canvas { display: none; }

/* Geist 600, tracking -.06em, line-height .8 — exactly the reference's .sh-backdrop.
   Size and vertical position are set by freya-sculpture.js, as in the reference. */
.freya-sculpture .fsc-backdrop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: min(80cqh, 33cqw);
  letter-spacing: -.06em;
  line-height: .8;
  color: rgba(241, 239, 234, .05);
  color: color-mix(in srgb, var(--fsc-fg) var(--fsc-word-opacity), transparent);
}

.freya-sculpture .fsc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* attribution, as shown by the reference */
.freya-sculpture .fsc-credit {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 3.2cqw, 48px);
  bottom: 10px;
  font-size: 10px;
  letter-spacing: .06em;
  color: inherit;
  opacity: .38;
  text-decoration: none;
}
.freya-sculpture .fsc-credit:hover { opacity: .8; }
.freya-sculpture .fsc-credit:focus-visible { outline: 2px solid var(--fsc-fg); outline-offset: 4px; opacity: .8; }

@container (max-width: 639px) {
  .freya-sculpture .fsc-credit { right: auto; left: 50%; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .freya-sculpture .fsc-canvas,
  .freya-sculpture .fsc-fallback { transition: none; }
}