/* ============================================================
   TRAIN OF THOUGHT — Home Page
   French Empire / Bourbon Monarchy Aesthetic
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Color Palette ---------- */
:root {
  --gold-bright:   #e8c96e;
  --gold-main:     #c9a84c;
  --gold-dark:     #8b6914;
  --gold-dim:      #a07c2e;
  --navy:          #0b1535;
  --navy-mid:      #142050;
  --cream:         #f5efd5;
  --cream-dim:     #e8deba;
  --parchment:     #2a1f0e;
  --text-light:    #f2e8c6;
  --text-dim:      #c9b87a;
  --red-empire:    #8b1a1a;
  --shadow-gold:   rgba(201, 168, 76, 0.35);
  --panel-bg:      rgba(10, 14, 38, 0.87);
}

/* ---------- Body & Background ---------- */
html, body {
  height: 100%;
  min-height: 100vh;
}

body.home-page {
  font-family: 'IM Fell English', Georgia, serif;
  background-color: var(--navy);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ---------- Tiled Flag Background ---------- */
.flag-background {
  position: fixed;
  inset: 0;
  background-image: url('/public/images/france_kingdom1.png');
  background-repeat: repeat;
  background-size: 800px auto;
  opacity: 0.22;
  z-index: 0;
  /* slight sepia shift to feel aged */
  filter: sepia(40%) hue-rotate(-5deg) saturate(80%);
}

/* ---------- French Tricolor Backdrop ---------- */
body.home-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(
    90deg,
    #002395 33.333%,
    #ffffff 33.333%,
    #ffffff 66.666%,
    #ed2939 66.666%
  );
  opacity: 0.4;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Vignette & Colour Wash ---------- */
.vignette-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(8, 12, 35, 0.82) 100%),
    linear-gradient(180deg, rgba(8,12,35,0.55) 0%, rgba(8,12,35,0.15) 40%, rgba(8,12,35,0.55) 100%);
  z-index: 2;
}

/* ---------- Fog Canvas ---------- */
#fog-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* ---------- Dust Particle Canvas ---------- */
#dust-canvas {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* ---------- Central Royal Panel ---------- */
.royal-panel {
  position: relative;
  z-index: 10;
  max-width: 760px;
  width: 90%;
  margin: 3rem auto;
  padding: 3rem 3.5rem 3rem;
  background: var(--panel-bg);
  backdrop-filter: blur(4px);

  /* double gold border — outer */
  border: 3px solid var(--gold-main);
  outline: 1px solid var(--gold-dark);
  outline-offset: -10px;

  box-shadow:
    0 0 0 8px rgba(139, 105, 20, 0.25),
    0 0 40px rgba(201, 168, 76, 0.18),
    0 12px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 80px rgba(8, 12, 35, 0.5);

  text-align: center;
}

/* ---------- Panel Top / Bottom Borders ---------- */
.panel-border-top,
.panel-border-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}
.panel-border-bottom {
  margin-bottom: 0;
  margin-top: 1.8rem;
}

.panel-border-top .fleur,
.panel-border-bottom .fleur {
  color: var(--gold-main);
  font-size: 1.3rem;
}

.panel-border-top .crown,
.panel-border-bottom .crown {
  color: var(--gold-bright);
  font-size: 1.6rem;
  text-shadow: 0 0 12px var(--shadow-gold);
}

.border-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-main), transparent);
  max-width: 180px;
}

/* ---------- Panel Header ---------- */
.panel-header {
  margin-bottom: 1.6rem;
}

.fleur-row {
  color: var(--gold-dim);
  font-size: 1.4rem;
  letter-spacing: 0.8rem;
  margin-bottom: 1rem;
  opacity: 0.8;
}

@keyframes title-glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 18px rgba(232, 201, 110, 0.45),
      0 0 40px rgba(232, 201, 110, 0.15),
      0 2px 8px rgba(0,0,0,0.8);
  }
  50% {
    text-shadow:
      0 0 28px rgba(232, 201, 110, 0.75),
      0 0 60px rgba(232, 201, 110, 0.35),
      0 2px 8px rgba(0,0,0,0.8);
  }
}

.app-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow:
    0 0 18px rgba(232, 201, 110, 0.45),
    0 0 40px rgba(232, 201, 110, 0.15),
    0 2px 8px rgba(0,0,0,0.8);
  animation: title-glow-pulse 10s ease-in-out infinite;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}

.app-subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
}

/* ---------- Ornamental Divider ---------- */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 1.5rem 0;
}

.ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), var(--gold-main), var(--gold-dark), transparent);
  max-width: 200px;
}

.ornament-symbol {
  color: var(--gold-main);
  font-size: 0.85rem;
  opacity: 0.9;
}

/* ---------- Hugo Quote ---------- */
.hugo-quote {
  position: relative;
  padding: 0.5rem 1.5rem 1rem;
  margin: 0 auto;
  max-width: 620px;
}

.open-quote,
.close-quote {
  font-family: 'Cinzel Decorative', Georgia, serif;
  font-size: 5rem;
  line-height: 0.6;
  color: var(--gold-dark);
  opacity: 0.6;
  user-select: none;
  pointer-events: none;
}

.open-quote {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0.2em);
}

.close-quote {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateY(0.55em) rotate(180deg);
}

.hugo-quote p {
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.95;
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  position: relative;
  z-index: 1;
}

.quote-indent {
  padding-left: 1.5rem;
  opacity: 0.9;
}

.hugo-quote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.hugo-quote cite em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--gold-dim);
}

/* ---------- App Description ---------- */
.app-description {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: var(--text-dim);
  margin: 0.5rem 0 2rem;
}

@keyframes border-shimmer {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  15% {
    transform: scale(1.015) rotate(-0.4deg);
  }
  75% {
    transform: scale(0.985) rotate(0.4deg);
  }
}

/* ---------- Enter Button ---------- */
.enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 2.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  background: linear-gradient(135deg, var(--gold-main) 0%, var(--gold-bright) 50%, var(--gold-main) 100%);
  border: 2px solid var(--gold-dark);
  box-shadow:
    0 0 0 1px var(--gold-dim),
    0 4px 20px rgba(201, 168, 76, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
  animation: border-shimmer 10s ease-in-out infinite;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease,
    letter-spacing 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.enter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.enter-btn:hover,
.enter-btn:focus-visible {
  background: linear-gradient(135deg, var(--gold-bright) 0%, #f5d98a 50%, var(--gold-bright) 100%);
  box-shadow:
    0 0 0 1px var(--gold-main),
    0 6px 32px rgba(232, 201, 110, 0.6),
    inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-2px);
  letter-spacing: 0.28em;
  color: #0a0d1e;
  animation-play-state: paused;
}

.enter-btn:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px var(--gold-dark),
    0 2px 10px rgba(201, 168, 76, 0.3);
}

.btn-fleur {
  font-size: 0.9rem;
  opacity: 0.75;
  transition: opacity 0.3s;
}

.enter-btn:hover .btn-fleur {
  opacity: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 580px) {
  .royal-panel {
    padding: 2rem 1.6rem;
  }

  .flag-background {
    background-size: 140px auto;
  }

  .open-quote,
  .close-quote {
    font-size: 3.5rem;
  }

  .hugo-quote {
    padding: 0.5rem 1rem 0.8rem;
  }

  .fleur-row {
    letter-spacing: 0.5rem;
  }
}