/* Page d'accueil T4C Neerya — même thème que le Cimetière */

:root {
  color-scheme: dark;
  --bg: #0b0810;
  --bg-2: #130d1a;
  --surface: #18121f;
  --line: #2f2539;
  --ink: #f1e8f6;
  --ink-2: #c0b1cc;
  --ink-3: #8f809c;
  --pumpkin: #e8650f;
  --pumpkin-glow: #ff8f33;
  --lantern: #d9a441;
  --lantern-glow: #f0c46a;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Creepster", "Inter", fantasy;
  --font-title: "Cinzel", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1000px 520px at 30% -10%, rgba(232, 101, 15, .10), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(143, 107, 224, .10), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
  color: var(--ink);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* --- Ciel : brume et chauves-souris ----------------------------------------------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fog {
  position: absolute; left: -10%; right: -10%; bottom: -40px; height: 260px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(143, 107, 224, .14), transparent 70%);
  filter: blur(8px);
}
.bat { position: absolute; width: 40px; color: #05030a; opacity: .75; }
.bat-1 { top: 64px; right: 12vw; animation: flit 9s ease-in-out infinite; }
.bat-2 { top: 120px; left: 10vw; width: 26px; animation: flit 11s ease-in-out -3s infinite; }
.bat-3 { top: 36px; left: 24vw; width: 18px; animation: flit 13s ease-in-out -6s infinite; }
@keyframes flit {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  25% { transform: translate(-30px, 12px) scaleY(.7); }
  50% { transform: translate(-10px, -10px) scaleY(1); }
  75% { transform: translate(20px, 6px) scaleY(.75); }
}

/* --- En-tête ------------------------------------------------------------------------ */
.home-header, .portals, .home-footer { position: relative; z-index: 1; }

.home-header { text-align: center; padding: 64px 20px 0; }
.home-header h1 {
  margin: 0; font: 600 clamp(40px, 7vw, 76px)/1.1 var(--font-title); letter-spacing: .04em;
  text-shadow: 0 0 28px rgba(245, 215, 142, .18);
}
.home-header p { margin: 14px 0 0; color: var(--ink-2); }

/* --- Portails ----------------------------------------------------------------------- */
.portals {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px;
  width: 100%; max-width: 980px; margin: 48px auto 0; padding: 0 20px;
}

.portal {
  --accent: var(--pumpkin);
  --accent-glow: var(--pumpkin-glow);
  --arch: min(130px, 24vw);
  display: flex; flex-direction: column; overflow: hidden;
  color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 50% 50% 18px 18px / var(--arch) var(--arch) 18px 18px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.portal-cartes { --accent: var(--lantern); --accent-glow: var(--lantern-glow); }

.portal:hover, .portal:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 24px 60px -24px var(--accent);
}
.portal:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 6px; }

.portal-scene { position: relative; display: block; aspect-ratio: 6 / 5; overflow: hidden; }
.portal-scene img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.portal-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(transparent, var(--surface));
}
.portal:hover .portal-scene img, .portal:focus-visible .portal-scene img { transform: scale(1.04); }

.portal-text { display: block; padding: 6px 28px 30px; text-align: center; }
.portal-title {
  margin: 0; font: 400 clamp(36px, 4.4vw, 46px)/1.1 var(--font-display); letter-spacing: 2px;
  color: var(--ink); text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.portal-desc { display: block; max-width: 34ch; margin: 10px auto 0; color: var(--ink-2); font-size: 15px; }

/* --- Pied de page ------------------------------------------------------------------- */
.home-footer { margin-top: auto; padding: 56px 20px 32px; text-align: center; font-size: 13px; color: var(--ink-3); }
.home-footer p { margin: 0; }
.home-footer a { color: var(--ink-2); }
.home-footer a:hover { color: var(--ink); }

/* --- Mobile ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .home-header { padding-top: 44px; }
  .portals { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 28px; margin-top: 36px; }
  .portal-scene { aspect-ratio: 16 / 11; }
  .bat-2, .bat-3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bat { animation: none; }
  .portal, .portal-scene img { transition: none; }
  .portal:hover, .portal:focus-visible { transform: none; }
  .portal:hover .portal-scene img, .portal:focus-visible .portal-scene img { transform: none; }
}