/* Forgotten: charcoal, glacier blue, and muted silver.
   Keep application changes scoped to the dark theme; light mode stays available. */
:root {
  --forgotten-motion-ui: 320ms;
  --forgotten-motion-hover: 420ms;
  --forgotten-motion-page: 760ms;
  --forgotten-motion-intro: 900ms;
  --forgotten-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="forgejo-dark"] {
  color-scheme: dark;
  --color-primary: #8cc8d8;
  --color-primary-dark-1: #78bdcf;
  --color-primary-dark-2: #64b2c6;
  --color-primary-dark-3: #50a7bd;
  --color-primary-dark-4: #3e94aa;
  --color-primary-dark-5: #327689;
  --color-primary-dark-6: #255866;
  --color-primary-dark-7: #193b44;
  --color-primary-light-1: #9bd0de;
  --color-primary-light-2: #aad8e4;
  --color-primary-light-3: #bbe1ea;
  --color-primary-light-4: #cce9f0;
  --color-primary-light-5: #ddf1f5;
  --color-primary-light-6: #edf8fa;
  --color-primary-light-7: #f6fcfd;
  --color-primary-alpha-10: #8cc8d819;
  --color-primary-alpha-20: #8cc8d833;
  --color-primary-alpha-30: #8cc8d84b;
  --color-primary-alpha-40: #8cc8d866;
  --color-primary-alpha-50: #8cc8d880;
  --color-primary-alpha-60: #8cc8d899;
  --color-primary-alpha-70: #8cc8d8b3;
  --color-primary-alpha-80: #8cc8d8cc;
  --color-primary-alpha-90: #8cc8d8e1;
  --color-primary-contrast: #102027;
  --color-body: #101619;
  --color-box-body: #182127;
  --color-box-header: #202c33;
  --color-nav-bg: #141c21;
  --color-menu: #182127;
  --color-input-background: #141c21;
  --color-secondary: #34454d;
  --color-text: #e3ecef;
  --color-text-light: #bdcbd0;
  --color-text-light-2: #9bafb7;
  --color-text-light-3: #849aa3;
}

.forgotten-home {
  padding: 64px 24px 72px;
  background: radial-gradient(ellipse at 50% 0%, #8cc8d816, transparent 60%);
}
.forgotten-hero { max-width: 740px; margin: 0 auto; text-align: center; }
.forgotten-mark { margin-bottom: 24px; filter: drop-shadow(0 0 28px #8cc8d833); }
.forgotten-eyebrow { color: #8cc8d8; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 600; }
.forgotten-hero h1 { font-size: clamp(48px, 8vw, 88px); letter-spacing: -.055em; margin: 20px 0; line-height: 1.08; }
.forgotten-tagline { font-size: clamp(18px, 3vw, 24px); color: var(--color-text); }
.forgotten-description { max-width: 510px; margin: 20px auto; line-height: 1.8; color: var(--color-text-light-2); }
.forgotten-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; align-items: center; margin: 36px 0 56px; }
.forgotten-button { background: #8cc8d8; color: #102027 !important; padding: 14px 24px; border-radius: 8px; font-weight: 600; }
.forgotten-button:hover { background: #aad8e4; text-decoration: none; }
.forgotten-secondary { color: var(--color-text) !important; }
.forgotten-links a:focus-visible { outline: 3px solid #8cc8d8; outline-offset: 5px; }
.forgotten-values { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.forgotten-values article { padding: 28px; border: 1px solid var(--color-secondary); background: var(--color-box-body); border-radius: 12px; }
.forgotten-values span { color: var(--color-text-light-2); font: 11px var(--fonts-monospace); letter-spacing: .1em; }
.forgotten-values h2 { font-size: 18px; margin: 18px 0 12px; }
.forgotten-values p { line-height: 1.8; color: var(--color-text-light-2); margin: 0; }
html[data-theme="forgejo-light"] .forgotten-eyebrow { color: #2e6474; }

/* The signed-out entry uses the same native SSO redirect as the workspace. */
.forgotten-signin {
  display: grid;
  place-items: center;
  padding: 48px 20px 80px;
  min-height: min(640px, calc(100svh - 180px));
}
.forgotten-signin-card {
  width: min(100%, 460px);
  padding: clamp(28px, 6vw, 48px);
  text-align: center;
  border: 1px solid var(--color-secondary);
  border-radius: 32px;
  background: var(--color-box-body);
  box-shadow: 0 24px 64px #00000018;
}
.forgotten-signin-mark { display: block; margin: 0 auto 24px; }
.forgotten-signin-eyebrow {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.forgotten-signin-card h1 {
  margin: 16px 0 12px;
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 650;
  letter-spacing: -.045em;
}
.forgotten-signin-description { margin-bottom: 28px; color: var(--color-text-light-2); line-height: 1.7; }
.forgotten-signin .forgotten-signin-button { min-height: 52px; gap: 12px; padding: 14px 20px; }
.forgotten-signin-button img { flex-shrink: 0; }
.forgotten-signin-note { margin: 28px 0 0; color: var(--color-text-light-3); font-size: 12px; line-height: 1.7; }
.forgotten-signin-unavailable { color: var(--color-text-light); line-height: 1.7; }
.forgotten-signin .ui.message { text-align: start; }
@media (max-width: 700px) {
  .forgotten-home { padding: 40px 20px; }
  .forgotten-values { grid-template-columns: 1fr; }
}

/* Fade only the page wrapper: transforms here would change the positioning
   of fixed children such as editors and menus. Keep navigation interactive. */
@keyframes forgotten-page-enter {
  from { opacity: .78; }
  to { opacity: 1; }
}

@keyframes forgotten-intro-enter {
  from { opacity: .65; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Apply motion in both themes only when the user permits it.
   Explicit properties keep layout, editors, and loading indicators unaffected. */
@media (prefers-reduced-motion: no-preference) {
  .page-content {
    animation: forgotten-page-enter var(--forgotten-motion-page) var(--forgotten-motion-ease);
  }

  .page-content a,
  .page-content button,
  .page-content .ui.button,
  .page-content .ui.menu > .item,
  .page-content input:not([type="checkbox"]):not([type="radio"]),
  .page-content textarea,
  .page-content select,
  #navbar a,
  #navbar button,
  #navbar .item {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--forgotten-motion-ui);
    transition-timing-function: var(--forgotten-motion-ease);
  }

  .forgotten-hero > *,
  .forgotten-values article {
    animation: forgotten-intro-enter var(--forgotten-motion-intro) var(--forgotten-motion-ease) backwards;
  }
  .forgotten-hero > :nth-child(2) { animation-delay: 50ms; }
  .forgotten-hero > :nth-child(3) { animation-delay: 100ms; }
  .forgotten-hero > :nth-child(4) { animation-delay: 150ms; }
  .forgotten-hero > :nth-child(5) { animation-delay: 200ms; }
  .forgotten-hero > :nth-child(6) { animation-delay: 250ms; }
  .forgotten-values article:nth-child(1) { animation-delay: 180ms; }
  .forgotten-values article:nth-child(2) { animation-delay: 260ms; }
  .forgotten-values article:nth-child(3) { animation-delay: 340ms; }

  .forgotten-home .forgotten-button,
  .forgotten-values article {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: var(--forgotten-motion-hover);
    transition-timing-function: var(--forgotten-motion-ease);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .forgotten-button:hover { transform: translateY(-2px); }
  .forgotten-values article:hover {
    transform: translateY(-3px);
    border-color: #8cc8d8;
    box-shadow: 0 10px 24px #00000020;
  }
}