/* DOU-52 C3-UI: the landing hero at / (DOU-122 hero study A "Glass double"), ported from the
 * DOU-122 prototype's hero-glass.css (sha256 b6eb7d3d…, SHA256SUMS-design.txt).  Changes: the
 * prototype's phone-frame rules are gone, the viewport sets the height, the symbol is
 * /static/29-master.svg, and "Sign in" is a <button> in the sign-in POST form (.hg-signin-form).
 */
/* ==========================================================================
 * PROTOTYPE-LOCAL: native port of hero study A "Glass double" (DOU-122),
 * from /mnt/HC_Volume_106830483/work/dou122-hero-neaymgn3/a-glass/index.html.
 * Scoped under .hg (the landing route). Viewport units became container
 * units (cqw/cqh/cqmax) so the hero fits the phone frame as well as a desktop.
 * The glass, light and sky colours are the study's own values, kept as-is
 * for fidelity; they are not kit tokens (this file is exempt from the
 * no-raw-colour test on purpose). Text and focus use the semantic tokens.
 *
 * Encodes: one glass slab (the person) in soft light; a refraction of it
 * becomes its own object and settles beside it (the Double), aligned the way
 * the two strokes of the provisional symbol are. Light keeps passing through
 * both. Sign in sits across the gap between them. CSS + SVG only.
 * ======================================================================== */
.hg {
  --hg-ink: var(--d-color-text);
  --hg-ink-2: var(--d-color-text-muted);
  --hg-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Inter, Roboto, Helvetica, Arial, "FreeSans", sans-serif;
  --sw: min(19cqh, 15cqw);
  --sh: calc(var(--sw) * 2.75);
  --cx: 50%;
  --cy: 50%;
  position: relative;
  height: max(34rem, 100vh);
  container: hero / size;
  overflow: hidden;
  isolation: isolate;
  background: #eef0f6;
  color: var(--hg-ink);
  font-family: var(--hg-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 48rem) { .hg { height: max(34rem, 100svh); } }

/* ---------- sky ---------- */
.hg-sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(165deg, #f8f9fc 0%, #eef0f7 42%, #e3e6f1 100%); }
.hg-blob { position: absolute; border-radius: 50%; }
.hg-b1 { width: 95cqmax; height: 95cqmax; left: -38cqmax; top: -48cqmax; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.hg-b2 { width: 85cqmax; height: 85cqmax; right: -40cqmax; bottom: -50cqmax; background: radial-gradient(closest-side, rgba(170,181,221,.55), rgba(170,181,221,0)); }
.hg-b3 { width: 70cqmax; height: 55cqmax; left: 18cqw; top: 36cqh; background: radial-gradient(closest-side, rgba(204,198,234,.42), rgba(204,198,234,0)); }
.hg-b4 { width: 60cqmax; height: 60cqmax; right: -18cqmax; top: -30cqmax; background: radial-gradient(closest-side, rgba(190,200,232,.35), rgba(190,200,232,0)); }

.hg-arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.hg-arc path { fill: none; stroke: rgba(84,98,148,.34); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0; animation: hg-draw 3.2s cubic-bezier(.3,.6,.2,1) .2s both; }
.hg-arc path.hg-faint { stroke: rgba(84,98,148,.16); animation-delay: .6s; }
@keyframes hg-draw { from { stroke-dashoffset: 1; } }

/* ---------- the glass pair ---------- */
.hg-stage { position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0; perspective: 1600px; pointer-events: none; }
.hg-floor {
  position: absolute; width: calc(var(--sw) * 4.2); height: calc(var(--sw) * .55);
  left: calc(var(--sw) * -2.1); top: calc(var(--sh) * .5 - var(--sw) * .28);
  background: radial-gradient(closest-side, rgba(64,76,124,.20), rgba(64,76,124,.07) 55%, rgba(64,76,124,0));
}
.hg-floor::after {
  content: ""; position: absolute; inset: -40% 20%; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(236,240,255,.4) 45%, rgba(255,255,255,0));
  opacity: .55; animation: hg-caustic 7s ease-in-out 5s infinite;
}
@keyframes hg-caustic { 0%, 100% { opacity: .35; transform: translateX(-18%); } 55% { opacity: .9; transform: translateX(14%); } }

.hg-slab {
  position: absolute; width: var(--sw); height: var(--sh);
  left: calc(var(--sw) * -.5); top: calc(var(--sh) * -.5);
  border-radius: calc(var(--sw) * .5) calc(var(--sw) * .5) calc(var(--sw) * .09) calc(var(--sw) * .09);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 2.5%, rgba(236,239,250,.10) 9%,
      rgba(222,227,245,.10) 30%, rgba(176,187,226,.22) 56%,
      rgba(104,118,168,.30) 76%, rgba(44,56,102,.46) 87%, rgba(70,84,132,.30) 90.5%,
      rgba(255,255,255,.92) 95%, rgba(255,255,255,.35) 100%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,0) 70%, rgba(198,206,236,.30) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 2px 0 rgba(255,255,255,.95), inset -1px 0 0 rgba(40,52,96,.25);
  -webkit-backdrop-filter: blur(3px) saturate(1.4);
  backdrop-filter: blur(3px) saturate(1.4);
  will-change: transform;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hg-slab { background-color: rgba(226,230,244,.55); }
}
.hg-flute {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 1px, rgba(96,110,168,.09) 1px 3px, rgba(255,255,255,0) 3px 7px);
  opacity: .8;
}
.hg-sweep {
  position: absolute; top: -10%; bottom: -10%; left: -150%; width: 400%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.18) 46%, rgba(255,255,255,.9) 50%, rgba(232,236,255,.18) 54%, rgba(255,255,255,0) 60%);
  transform: translateX(-30%);
  animation: hg-sweep 7s cubic-bezier(.45,.05,.35,1) 4.4s infinite;
  will-change: transform;
}
.hg-s2 .hg-sweep { animation-delay: 4.95s; }
@keyframes hg-sweep { 0% { transform: translateX(-30%); } 55%, 100% { transform: translateX(30%); } }

/* slab one: the person. It barely moves, making room. */
.hg-s1 { transform: translate3d(calc(var(--sw) * -.585), 0, 0); animation: hg-s1 4.6s cubic-bezier(.22,.68,.12,1) .7s both; }
@keyframes hg-s1 { from { transform: translate3d(0, 0, 0); } }

/* slab two: first a refraction inside the first, then its own object */
.hg-s2 { transform: translate3d(calc(var(--sw) * .585), 0, 0); animation: hg-s2 4.6s cubic-bezier(.22,.68,.12,1) .7s both; }
.hg-s2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(150,166,226,.10), rgba(120,138,214,.16)); }
@keyframes hg-s2 {
  0% { transform: translate3d(0, 0, 0) rotateY(0deg); opacity: 0; }
  14% { transform: translate3d(calc(var(--sw) * .05), 0, 0) rotateY(-10deg); opacity: .55; }
  58% { transform: translate3d(calc(var(--sw) * .72), 0, -70px) rotateY(-24deg); opacity: 1; }
  100% { transform: translate3d(calc(var(--sw) * .585), 0, 0) rotateY(0deg); opacity: 1; }
}
.hg-pair { position: absolute; inset: 0; }

/* ---------- type and chrome ---------- */
.hg-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: clamp(18px, 3.2cqh, 32px) clamp(20px, 3.6cqw, 48px); z-index: 5; }
.hg-mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--hg-ink); }
.hg-sym { width: 15px; height: 17px; background: currentColor; -webkit-mask: url("29-master.svg") center / contain no-repeat; mask: url("29-master.svg") center / contain no-repeat; }
.hg-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--hg-ink-2); }

.hg-heading {
  position: absolute; z-index: 4; left: clamp(20px, 6cqw, 96px); top: 50%; transform: translateY(-58%); margin: 0;
  animation: hg-rise 1.6s cubic-bezier(.2,.7,.1,1) .15s both;
}
.hg-h1 { margin: 0;
  font-weight: 300; font-size: clamp(40px, 5.6cqw, 92px); line-height: 1.02; letter-spacing: -.025em; color: var(--hg-ink);
}
.hg-context { max-width: 20rem; margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--hg-ink); }
@keyframes hg-rise { from { opacity: 0; transform: translateY(-52%); } }

.hg-signin-form { position: absolute; z-index: 10; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%); margin: 0; }
.hg-signin {
  position: relative; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 136px; min-height: 50px; padding: 0 30px; border-radius: 999px;
  background: #131a33; color: #fff; text-decoration: none;
  font: 500 16px/1 var(--hg-font); letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 34px -10px rgba(19,26,51,.45);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.hg-signin:hover { background: #222c55; }
.hg-signin:focus { outline: none; }
.hg-signin:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--d-color-focus), 0 14px 34px -10px rgba(19,26,51,.45); }

.hg-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: clamp(16px, 3cqh, 28px) clamp(20px, 3.6cqw, 48px); z-index: 5; }

/* ---------- narrow / portrait ---------- */
@container hero (orientation: portrait) or (max-width: 900px) {
  .hg-scope { --sw: min(17.5cqh, 32cqw); --cy: 57%; }
  .hg-heading { top: clamp(84px, 14cqh, 140px); transform: none; left: 0; right: 0; text-align: center; animation-name: hg-rise-narrow; }
  .hg-h1 { font-size: clamp(36px, 10.5cqw, 64px); }
  .hg-context { margin: 1rem auto 0; padding: 0 1rem; max-width: 26rem; }
}
@container hero (max-height: 700px) and (orientation: portrait) {
  .hg-scope { --sw: min(14.5cqh, 28cqw); --cy: 58%; }
  .hg-heading { top: 72px; }
}
@keyframes hg-rise-narrow { from { opacity: 0; transform: translateY(8px); } }

/* ---------- reduced motion: the settled pair, lit ---------- */
@media (prefers-reduced-motion: reduce) {
  .hg *, .hg *::before, .hg *::after { animation: none !important; transition: none !important; }
  .hg .hg-sweep { transform: translateX(-4%); }
  .hg .hg-s2 .hg-sweep { transform: translateX(-10%); }
  .hg .hg-floor::after { opacity: .7; }
}
/* paused while the tab is hidden */
.hg.is-paused *, .hg.is-paused *::before, .hg.is-paused *::after { animation-play-state: paused !important; }
.hg-scope { position: absolute; inset: 0; --sh: calc(var(--sw) * 2.75); } /* re-declared here so it follows the container-query --sw */