/* Phase 2+: per-screen styles land here. */

/* ═══════════════════════════ Dev login (Phase 1) ═══════════════════════════ */

.ct-devlogin-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.ct-devlogin-card {
  width: 100%;
  max-width: 460px;
}
.ct-devlogin-demo {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}
.ct-devlogin-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
}
.ct-devlogin-btn span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-devlogin-btn small {
  font-weight: 500;
  opacity: 0.7;
}

/* Language toggle shows the target language's flag (eudr-x flag set) */
.ct-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ct-lang-flag {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Green Trust logo in the topbar — with eudr-x's signature treatment
   (style.css .nav-logo-left): a slow 3-D Y-axis spin every 20 s, and a gentle
   scale on hover of the brand block. */
.ct-brand-logo {
  height: 26px;
  width: 26px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  animation: ctLogoSpinY 20s linear infinite;
  animation-delay: 20s;
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
}
.ct-brand {
  perspective: 800px;
  transition: transform 0.2s;
}
.ct-brand:hover {
  transform: scale(1.05);
}
@keyframes ctLogoSpinY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* ═══════════════════ Login (Green Trust branded, eudr-x-style) ═══════════════════ */

.ct-login-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  /* `safe center` + overflow-y:auto keep the taller signup card (strength
     meter + consent block) from clipping on short laptops (spec-auth §11.4);
     overflow-x stays hidden so the animated gradient never bleeds a scrollbar. */
  align-items: safe center;
  justify-content: center;
  padding: var(--space-6);
  overflow-x: hidden;
  overflow-y: auto;
  /* No video asset ships (spec-chemtrust §6.7): upgrade the fallback from a
     static fill to a slow, subtle navy gradient that gently pans, so the page
     reads premium even without the mp4. The global reduced-motion kill
     (tokens.css) freezes it for users who ask. The linear layer is oversized
     (200% 200%) so panning its position moves the light through the navy. */
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(31, 60, 84, 0.4), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(31, 60, 84, 0.5), transparent 55%),
    linear-gradient(135deg, #0b1724 0%, #16293d 38%, #1f3c54 62%, #16293d 100%);
  background-size: 100% 100%, 100% 100%, 220% 220%;
  background-position: 15% -10%, 110% 110%, 0% 50%;
  animation: ctLoginGradient 26s ease-in-out infinite alternate;
}
@keyframes ctLoginGradient {
  0% {
    background-position: 15% -10%, 110% 110%, 0% 50%;
  }
  100% {
    background-position: 15% -10%, 110% 110%, 100% 50%;
  }
}
/* Optional full-bleed background video (eudr-x login pattern): drop an mp4 at
   frontend/static/media/login-video.mp4 and it plays behind the card; when the
   file is absent the gradient above simply shows through. */
.ct-login-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ct-login-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Softer than a video scrim: with no mp4 shipping, this lets the animated
     navy gradient read through while the white card keeps its own contrast.
     If a video is dropped in, bump these toward 0.55 / 0.7 for legibility. */
  background: linear-gradient(180deg, rgba(11, 23, 36, 0.32), rgba(11, 23, 36, 0.48));
}
.ct-login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
}
.ct-login-logo-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.ct-login-logo {
  display: block;
  height: 64px;
  width: auto;
}
/* eudr-x's login-logo shine (style.css .login-logo-wrap::after): a skewed
   light band sweeps across every 4.2s, masked to the logo's own shape. */
.ct-login-logo-wrap::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -70%;
  width: 50%;
  height: 160%;
  background: linear-gradient(75deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 0) 100%);
  transform: translate(-170%, -10%) skewX(-12deg);
  animation: ctLoginLogoShine 4.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: url("/static/images/login-logo.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-image: url("/static/images/login-logo.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  opacity: 0.95;
}
@keyframes ctLoginLogoShine {
  0%,
  55% {
    transform: translate(-170%, -10%) skewX(-12deg);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(240%, 12%) skewX(-12deg);
    opacity: 0;
  }
}
.ct-login-title {
  margin: 0;
  color: var(--primary-color);
  letter-spacing: 0.04em;
}
.ct-login-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: var(--space-1) 0 var(--space-4);
}
.ct-login-card .ct-form,
.ct-login-card form {
  display: grid;
  gap: var(--space-3);
  text-align: left;
}
.ct-login-card .ct-question {
  display: grid;
  gap: 4px;
}
.ct-login-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.85rem;
}
.ct-login-dev {
  margin-top: var(--space-4);
}
.ct-login-error {
  color: var(--confirmed, #b23127);
  font-size: 0.85rem;
  margin: var(--space-2) 0 0;
}
.ct-login-notice {
  text-align: left;
  font-size: 0.9rem;
}