/**
 * Glyph Portal © 2026 Christian Katzmann. MIT.
 * Origin: UsefulPortal.astro on https://ktzm.dk → UsefulPortal.tsx → ClarityPortal.tsx.
 * A scroll-driven camera through live type. Keep this notice with copies.
 */


:where(.glyph-portal) {
  --gp-paper: #fff;
  --gp-ink: #0c1212;
  --gp-field: #0b3b2a;
  --gp-foreground: #fbfbfa;
  position: relative;
  isolation: isolate;
  background: var(--gp-paper);
  color: var(--gp-ink);
  font-family: Arial, sans-serif;
}

:where(.glyph-portal) > [data-gp-background],
:where(.glyph-portal) > [data-gp-front] { display: none; }

:where(.glyph-portal) > [data-gp-fallback] {
  display: grid;
  place-items: center;
  min-height: 60svh;
  padding: 8vh 6vw;
  font-size: min(calc(84vw / var(--gp-characters, 7)), 22svh);
  line-height: 1;
  color: var(--gp-field);
  overflow-wrap: anywhere;
}

:where(.glyph-portal) > [data-gp-viewport] {
  position: absolute;
  inset: 0 auto auto 0;
  height: 100vh;
  height: 100svh;
  width: 0;
  pointer-events: none;
  visibility: hidden;
}

:where(.glyph-portal) [data-gp-pin] {
  position: relative;
  height: var(--gp-height, 100svh);
  overflow: clip;
  isolation: isolate;
  container-type: size;
}

:where(.glyph-portal) [data-gp-field] {
  position: absolute;
  inset: 0;
  background: var(--gp-field);
  opacity: 0;
  pointer-events: none;
}
:where(.glyph-portal)[data-gp-ready] [data-gp-field] { opacity: 1; }

:where(.glyph-portal) [data-gp-default-field] {
  position: absolute;
  inset: 0;
  transform: scale(var(--gp-field-scale, 1));
  background:
    radial-gradient(circle at 18% 8%, rgba(68, 125, 98, .72), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(251, 251, 250, .12), transparent 28%),
    radial-gradient(circle at 48% 78%, rgba(9, 48, 35, .5), transparent 44%),
    linear-gradient(135deg, #0b3b2a 0%, #14573f 48%, #082d22 100%);
}

:where(.glyph-portal) [data-gp-knock] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

:where(.glyph-portal) [data-gp-art] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

:where(.glyph-portal) [data-gp-glyph] {
  font-size: 100px;
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: 0;
  font-weight: var(--gp-font-weight, 900);
}

:where(.glyph-portal) [data-gp-marks] { fill: none; stroke: var(--gp-ink); opacity: .6; }

:where(.glyph-portal) [data-gp-choices] {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
:where(.glyph-portal)[data-gp-choosing=true] [data-gp-choices] { visibility: visible; }

:where(.glyph-portal) [data-gp-letter] {
  box-sizing: border-box;
  position: absolute;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-y;
}
:where(.glyph-portal) [data-gp-letter]:disabled { pointer-events: none; }
:where(.glyph-portal) [data-gp-letter]:focus-visible { outline: 2px solid var(--gp-field); outline-offset: 5px; }

:where(.glyph-portal) [data-gp-choices][inert],
:where(.glyph-portal) [data-gp-field][inert] { pointer-events: none; }

:where(.glyph-portal) [data-gp-pin] [data-gp-fallback] {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  min-height: 0;
  padding: 0;
  font-size: min(calc(100cqw / var(--gp-characters)), 38cqh);
  line-height: 1;
  color: var(--gp-field);
}
:where(.glyph-portal)[data-gp-ready] [data-gp-fallback] { visibility: hidden; }

:where(.glyph-portal) [data-gp-caption] {
  position: absolute;
  inset: auto 8% 9%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font: 12px/1.4 Arial, sans-serif;
  font-family: inherit;
  opacity: var(--gp-caption, 1);
  pointer-events: var(--gp-caption-hit, auto);
}

:where(.glyph-portal) [data-gp-pin] [data-gp-front] {
  display: block;
  position: absolute;
  inset: 0;
  opacity: var(--gp-caption, 1);
  pointer-events: none;
}
:where(.glyph-portal) [data-gp-front] a,
:where(.glyph-portal) [data-gp-front] button { pointer-events: var(--gp-caption-hit, auto); }
:where(.glyph-portal) [data-gp-front]:focus-within { opacity: 1; }

:where(.glyph-portal) [data-gp-hint] { max-width: 30ch; color: var(--gp-ink); }

:where(.glyph-portal) [data-gp-enter] {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  color: inherit;
  font: inherit;
  text-decoration: none;
  letter-spacing: inherit;
}
:where(.glyph-portal) [data-gp-enter]:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
:where(.glyph-portal) [data-gp-caption]:focus-within { opacity: 1; pointer-events: auto; }
:where(.glyph-portal) [data-gp-enter]:focus-visible {
  background: var(--gp-paper);
  color: var(--gp-ink);
  padding: 0 12px;
  margin: 0 -12px;
}

:where(.glyph-portal) [data-gp-content] {
  box-sizing: border-box;
  position: relative;
  min-height: var(--gp-height, 100svh);
  padding: clamp(32px, 7%, 100px);
  display: grid;
  align-content: center;
  color: var(--gp-foreground);
  background: var(--gp-field);
  overflow-wrap: anywhere;
}

:where(.glyph-portal)[data-gp-motion=on] [data-gp-pin] { position: sticky; top: 0; }
:where(.glyph-portal)[data-gp-motion=off] [data-gp-hint] { display: none; }
:where(.glyph-portal)[data-gp-motion=on] [data-gp-content] {
  margin-top: calc((var(--gp-length) - 1) * var(--gp-height));
  background: transparent;
  opacity: var(--gp-reveal, 0);
  pointer-events: none;
}
:where(.glyph-portal)[data-gp-motion=on][data-gp-entered=true] [data-gp-content] { pointer-events: auto; }
:where(.glyph-portal)[data-gp-motion=on]:has([data-gp-content]:focus-within) [data-gp-field] { clip-path: none !important; }
:where(.glyph-portal)[data-gp-motion=on] [data-gp-content]:focus-within { opacity: 1; pointer-events: auto; }
:where(.glyph-portal):has([data-gp-content]:focus-within) [data-gp-caption],
:where(.glyph-portal):has([data-gp-content]:focus-within) [data-gp-marks] { opacity: 0; }

:where(.glyph-portal) [data-gp-default-title] {
  color: inherit;
  font: 400 clamp(32px, 5vw, 72px)/1.05 Georgia, serif;
  letter-spacing: -.035em;
  max-width: 13ch;
  margin: 0 0 24px;
  text-wrap: balance;
}
:where(.glyph-portal) [data-gp-default-copy] {
  color: inherit;
  font: 16px/1.6 Arial, sans-serif;
  max-width: 36ch;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(.glyph-portal) [data-gp-pin] { position: relative !important; }
  :where(.glyph-portal) [data-gp-content] {
    margin-top: 0 !important;
    opacity: 1 !important;
    background: var(--gp-field) !important;
    min-height: 0;
    padding-block: 64px;
  }
  :where(.glyph-portal) [data-gp-caption] { opacity: 1 !important; }
  :where(.glyph-portal) [data-gp-hint] { display: none; }
}