/*
 * flickflauder look for the logged-out Forgejo pages (landing + sign-in).
 * Tokens/hero/butterfly ported from the flickflauder site (src/styles/landing.css,
 * animations.css, components/landing/Hero.astro). Everything is scoped to
 * .ff-home / .page-content.signin so the logged-in UI keeps the stock theme.
 * Fonts are self-hosted: no third-party requests from a private instance.
 */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-400.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/source-serif-4-500.woff2) format('woff2');
}

:root {
  --ff-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ff-ink: #1c1a17;
  --ff-ink-soft: #57534d;
  --ff-ink-faint: #9a948b;
  --ff-paper: #f7f6f3;
  --ff-wing-fill: rgba(168, 230, 207, 0.45);
  --ff-wing-stroke: rgba(40, 37, 33, 0.55);
  --ff-wing-vein: rgba(40, 37, 33, 0.3);
  --ff-wing-spot: rgba(40, 37, 33, 0.18);
  --ff-body: #2a2825;
  --ff-box: #fbfaf8;
  --ff-box-header: #f1efea;
  --ff-border: #e2ded6;
  /* mint accent, from the favicon; -dark is the text-safe shade on paper */
  --ff-mint: #4f9e83;
  --ff-mint-dark: #2f6f5a;
  --ff-wing-speed: 0.28s;
}

/* Dark variant, following Forgejo's own theme choice (auto = OS preference). */
html[data-theme$='-dark'] {
  --ff-ink: #ece9e4;
  --ff-ink-soft: #b3ada4;
  --ff-ink-faint: #7d776f;
  --ff-paper: #1a1917;
  --ff-wing-fill: rgba(168, 230, 207, 0.22);
  --ff-wing-stroke: rgba(236, 233, 228, 0.6);
  --ff-wing-vein: rgba(236, 233, 228, 0.3);
  --ff-wing-spot: rgba(236, 233, 228, 0.2);
  --ff-body: #d8d4cd;
  --ff-box: #22211e;
  --ff-box-header: #2a2825;
  --ff-border: #3a3833;
  --ff-mint: #6dbb9f;
  --ff-mint-dark: #8fd3bb;
}

@media (prefers-color-scheme: dark) {
  html[data-theme$='-auto'] {
    --ff-ink: #ece9e4;
    --ff-ink-soft: #b3ada4;
    --ff-ink-faint: #7d776f;
    --ff-paper: #1a1917;
    --ff-wing-fill: rgba(168, 230, 207, 0.22);
    --ff-wing-stroke: rgba(236, 233, 228, 0.6);
    --ff-wing-vein: rgba(236, 233, 228, 0.3);
    --ff-wing-spot: rgba(236, 233, 228, 0.2);
    --ff-body: #d8d4cd;
    --ff-box: #22211e;
    --ff-box-header: #2a2825;
    --ff-border: #3a3833;
    --ff-mint: #6dbb9f;
    --ff-mint-dark: #8fd3bb;
  }
}

/* Logged-out pages (landing + sign-in): remap Forgejo's theme variables to the
   flickflauder palette. html:has(...) outranks the theme's :root definitions. */
html:has(.ff-home),
html:has(.page-content.signin) {
  --color-body: var(--ff-paper);
  --color-nav-bg: var(--ff-paper);
  --color-footer: var(--ff-paper);
  --color-text: var(--ff-ink);
  --color-text-light: var(--ff-ink-soft);
  --color-text-light-2: var(--ff-ink-faint);
  --color-box-body: var(--ff-box);
  --color-box-header: var(--ff-box-header);
  --color-input-background: var(--ff-box);
  --color-input-border: var(--ff-border);
  --color-secondary: var(--ff-border);
  --color-hover: var(--ff-box-header);
  --color-active: var(--ff-box-header);
  --color-primary: var(--ff-ink);
  --color-primary-contrast: var(--ff-paper);
  --color-primary-hover: var(--ff-ink-soft);
  --color-primary-active: var(--ff-ink-soft);
}

/* ==================== LANDING HERO ==================== */
.ff-home {
  padding: 0 !important;
}

/* No navbar on the landing page; the hero has its own sign-in button. */
body:has(.ff-home) #navbar {
  display: none;
}

.ff-hero {
  position: relative;
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  overflow: hidden;
  perspective: 1200px;
}

.ff-hero-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}


.ff-claim {
  font-family: var(--ff-serif);
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ff-ink);
  margin: 0;
}



.ff-sep {
  margin: 0 0.04em;
  font-weight: 400;
  color: var(--ff-mint);
}

.ff-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.ff-cta {
  display: inline-block;
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  color: var(--ff-paper) !important;
  background: var(--ff-ink);
  border-radius: 2px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ff-cta:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}


/* ==================== BUTTERFLY (ported 1:1, ff- prefixed) ==================== */
.ff-butterfly-chase {
  position: absolute;
  top: 70%;
  left: 75%;
  transform-style: preserve-3d;
  animation: ff-struggle 5s ease-in-out infinite alternate;
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}

.ff-butterfly-orientation {
  transform-style: preserve-3d;
  transform: rotateX(65deg) scale(0.65);
}

.ff-butterfly-assembly {
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  animation: ff-body-bob var(--ff-wing-speed) ease-in-out infinite alternate;
}

.ff-body {
  position: relative;
  width: 6px;
  height: 35px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.ff-segment {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ff-body);
  border-radius: 50%;
}

.ff-head { width: 6px; height: 6px; top: -8px; }
.ff-thorax { width: 8px; height: 14px; top: -4px; }
.ff-abdomen { width: 5px; height: 25px; top: 10px; }

.ff-wing-set {
  width: max(90px, min(110px, 15vw));
  height: max(110px, min(130px, 18vh));
  transform-style: preserve-3d;
}

.ff-wing-set svg {
  width: 100%;
  height: 100%;
}

.ff-wing-left {
  transform-origin: right center;
  animation: ff-flap-l var(--ff-wing-speed) ease-in-out infinite alternate;
}

.ff-wing-right {
  transform-origin: left center;
  animation: ff-flap-r var(--ff-wing-speed) ease-in-out infinite alternate;
}

.ff-wing-outline { fill: var(--ff-wing-fill); stroke: var(--ff-wing-stroke); stroke-width: 2; }
.ff-wing-vein { stroke: var(--ff-wing-vein); stroke-width: 0.5; fill: none; }
.ff-wing-spot { fill: var(--ff-wing-spot); }

@keyframes ff-struggle {
  0% { transform: translate3d(-5vw, 3vh, -80px) rotateZ(-12deg); }
  25% { transform: translate3d(0vw, -2vh, 100px) rotateZ(5deg); }
  50% { transform: translate3d(5vw, 2vh, 250px) rotateZ(12deg); }
  75% { transform: translate3d(2vw, -1vh, 120px) rotateZ(-5deg); }
  100% { transform: translate3d(-3vw, 1vh, 0px) rotateZ(-8deg); }
}

@keyframes ff-flap-l {
  0% { transform: rotateY(8deg) translateY(0px); }
  100% { transform: rotateY(82deg) rotateZ(-18deg) translateY(-3px); }
}

@keyframes ff-flap-r {
  0% { transform: rotateY(-8deg) translateY(0px); }
  100% { transform: rotateY(-82deg) rotateZ(18deg) translateY(-3px); }
}

@keyframes ff-body-bob {
  0% { transform: translateZ(0); }
  100% { transform: translateZ(18px); }
}

@media (max-width: 600px) {
  .ff-butterfly-chase { top: 80%; left: 50%; }
  .ff-butterfly-orientation { transform: rotateX(65deg) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .ff-butterfly-chase,
  .ff-butterfly-assembly { animation: none; }
  .ff-wing-left,
  .ff-wing-right { animation: none; transform: rotateY(45deg); }
}

/* ==================== SIGN-IN PAGE ==================== */
.page-content.signin h4.ui.top.attached.header {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.5rem;
}

.page-content.signin .ui.primary.button {
  border-radius: 2px;
}

.page-content.signin a:not(.button) {
  color: var(--ff-mint-dark);
}

.page-content.signin .ui.form input:focus {
  /* Fomantic's .ui.form input:not([type]):focus etc. outrank a plain selector */
  border-color: var(--ff-mint) !important;
}