/* Login page — split shell + animation-specific atoms.
   Layout primitives (.hero, .hero-content, .card, .input, .btn) and panel
   shells use DaisyUI utilities directly; this file holds only what has no
   DaisyUI equivalent: the two-column split and the strike-collapse
   headline choreography. */

.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-base-200);
  color: var(--color-base-content);
}

@media (min-width: 1024px) {
  .login-split { grid-template-columns: 1.25fr 0.75fr; }
}

/* ─── Lift the headline + sub above the moon so the disc sits below the
   text block instead of behind it. DaisyUI centers .hero-content; this
   nudges only the text group up so the moon owns the lower portion of
   the panel. ─────────────────────────────────────────────────────────── */

.login-split > section.hero:first-child > .hero-content {
  /* Pulled high enough that the headline + sub clear the bright lunar
     disc — the moon is anchored low (~60% of the panel), so the text
     group rides near the top of the panel where the background is dark. */
  transform: translateY(-19rem);
}

/* ─── Moon disc + drifting umbra ───────────────────────────────────────
   The disc lives in the lower-right of the left hero panel. All inner
   geometry (umbra size, drift translate) is sized off --moon-size so the
   composition scales cleanly across breakpoints — no JS measurement
   needed. clip-path on the shadow layer keeps the umbra inside the
   lunar disc, never bleeding onto the dark backdrop. */

.login-hero__moon-wrap {
  --moon-size: clamp(440px, 58vw, 780px);
  position: absolute;
  left: 50%;
  /* Anchored so the full lunar disc clears the panel's bottom edge — at 68%
     the disc bottom overflowed the overflow:hidden hero and got clipped. */
  top: 60%;
  width: var(--moon-size);
  height: var(--moon-size);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.login-hero__moon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* Satellite-shadow choreography — mirrors the pattern used on the
   ultradiffuse.com hero: a single blurred dark dot tracks a diagonal
   from upper-right, across the lunar disc, to lower-left on an 18s
   linear loop. The shadow-layer hosts the opacity envelope (fade in,
   hold, fade out) while the umbra dot owns the position keyframes.
   Clip-path keeps the dot bound to the lunar disc (off-disc area on our
   cutout PNG is transparent + dark — the multiply blend wouldn't bleed,
   but clipping is cheaper for the compositor). */
.login-hero__shadow-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .7;
  /* Disc center sits at 0.554 / 0.500 of the moon-cutout art, radius 0.40
     of the wrap — matches the cutout PNG's visible disc. */
  clip-path: circle(40% at 55.4% 50%);
  animation: login-sat-pass 18s linear infinite;
}

.login-hero__umbra {
  /* The satellite dot itself — small, blurred, dark. Sized off vmin so
     it scales with the viewport instead of the moon's clamp ceiling. */
  --sat-diameter: 3.8vmin;
  --sat-blur: 8px;
  position: absolute;
  width: var(--sat-diameter);
  height: var(--sat-diameter);
  border-radius: 50%;
  background: rgba(0, 0, 0, .85);
  filter: blur(var(--sat-blur));
  /* Initial anchor — satDot rewrites left/top on every frame. The
     translate centers the dot on its (left,top) point. */
  left: 84%;
  top: -6%;
  transform: translate(-50%, -50%);
  animation: login-sat-dot 18s linear infinite;
}

@keyframes login-sat-dot {
  0%   { left: 84%; top: -6%; }
  50%  { left: 55.4%; top: 50%; }   /* threads through the disc center */
  100% { left: 12%; top: 106%; }
}

@keyframes login-sat-pass {
  0%   { opacity: 0; }
  10%  { opacity: .7; }
  90%  { opacity: .7; }
  100% { opacity: 0; }
}

/* ─── Hero headline choreography (no DaisyUI equivalent) ───────────── */

.login-hero__headline {
  font-size: clamp(1.75rem, 3.4vw, 3.25rem);
  font-weight: 700;
  /* Headroom for ascenders so the roll-wrapper's overflow:hidden never
     clips the glyph tops or bottoms during the slot-reel transition. */
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: var(--color-info);
  transition: color 1.2s ease;
}

.login-hero__headline--struck { color: var(--color-primary); }

.login-hero__word { position: relative; display: inline-block; }
.login-hero__gap  { display: inline-block; width: 0.2em; }

.login-hero__strike {
  position: relative;
  display: inline-block;
  overflow: visible;
}
.login-hero__strike-txt { display: inline-block; }
.login-hero__strike-line {
  position: absolute;
  /* 2px overshoot keeps the line flush with the first glyph's ink. */
  left: -2px;
  top: 54%;
  height: 5px;
  width: 0;
  background: var(--color-primary);
  border-radius: 3px;
  transform: translateY(-50%);
  box-shadow: 0 0 14px color-mix(in oklch, var(--color-primary) 55%, transparent);
}

.login-hero__sub {
  margin-top: 1.75rem;
  max-width: 540px;
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  font-weight: 500;
  color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
}

.login-hero__sub b {
  font-weight: 700;
  color: var(--color-base-content);
}

/* ─── Static .ud-card modifier — suppresses the hover-lift that's
   meaningful for clickable cards but distracting on a static auth form.
   Reusable for other non-interactive .ud-card uses. */

.ud-card.ud-card-static:hover {
  transform: none;
  box-shadow: var(--color-card-shadow);
  border-color: var(--color-card-border);
}

/* Reduced motion — skip the headline cycle and freeze the umbra so the
   moon stays still. The disc itself remains visible (it isn't animated). */
@media (prefers-reduced-motion: reduce) {
  .login-hero__headline { color: var(--color-primary); }
  .login-hero__strike,
  .login-hero__gap--collapsing { display: none; }
  .login-hero__umbra { animation: none; opacity: 0; }
}