/* ═══════════════════════════════════════════════════════════
   entree.css — Page d'entrée/splash screen immersive

   USAGE:
   - Chargé uniquement par la page d'entrée (index alternative)
   - Style indépendant des autres pages
   - Crée une expérience immersive avant accès au site

   SECTIONS:
   1. Reset full-screen     → Fullscreen immersif (no scroll, no default cursor)
   2. Curseur personnalisé  → Dot + Ring avec inertie
   3. Canvas particles      → Réseau de particules animées
   4. Transition rideau     → Animation au clic "Entrer"
   5. Responsive            → Ajustements mobiles
   ═══════════════════════════════════════════════════════════ */

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
}

/* ─── CURSEUR ENTRÉE ─────────────────────────────────────── */
.cur-dot,
.cur-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
}

.cur-dot {
  width: 5px;
  height: 5px;
  background: var(--g-main);
  transition: transform 0.1s, opacity 0.3s;
}

.cur-ring {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--g-main);
  opacity: 0.45;
  transition:
    width   0.4s var(--ease-out),
    height  0.4s var(--ease-out),
    opacity 0.4s;
}

.cur-ring.big { width: 64px; height: 64px; opacity: 0.2; }

@media (hover: none) {
  .cur-dot,
  .cur-ring { display: none; }
}

/* ─── CANVAS ─────────────────────────────────────────────── */
canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── SCÈNE ──────────────────────────────────────────────── */
.scene {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* ─── LIGNE VERTICALE TOP ────────────────────────────────── */
.vert-line {
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, transparent, var(--g-main));
  margin-bottom: 52px;
  animation: line-grow 1.4s var(--ease-out) 0.3s forwards;
}

@keyframes line-grow {
  to { height: 80px; }
}

/* ─── LOGO ───────────────────────────────────────────────── */
.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up 1.1s var(--ease-out) 0.9s forwards;
}

.logo-name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--g-deep);
  text-indent: 0.28em;
}

.logo-rule {
  width: 0;
  height: 1px;
  background: var(--g-light);
  animation: rule-grow 1s var(--ease-out) 1.6s forwards;
}

@keyframes rule-grow {
  to { width: 100%; }
}

.logo-tag {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-light);
  opacity: 0;
  animation: fade-in 0.8s ease 2s forwards;
}

/* ─── TAGLINE ────────────────────────────────────────────── */
.tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 300;
  font-style: italic;
  color: var(--t-mid);
  letter-spacing: 0.01em;
  margin-bottom: 64px;
  opacity: 0;
  text-align: center;
  line-height: 1.5;
  animation: fade-in 1s ease 2.2s forwards;
}

.tagline em {
  font-style: normal;
  color: var(--g-main);
  font-weight: 400;
}

/* ─── BOUTON D'ENTRÉE ────────────────────────────────────── */
.enter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  animation: fade-in 1s ease 2.6s forwards;
}

.enter-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  cursor: none;
  text-decoration: none;
}

/* Cercles rotatifs concentriques */
.enter-ring-outer,
.enter-ring-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
}

.enter-ring-outer {
  border-color: rgba(43, 82, 69, 0.2);
  animation: spin-slow 16s linear infinite;
}

.enter-ring-inner {
  inset: 12px;
  border-color: rgba(43, 82, 69, 0.35);
  border-top-color: var(--g-main);
  animation: spin-slow 10s linear infinite reverse;
}

/* Points orbite sur le cercle extérieur */
.enter-ring-outer::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: var(--g-main);
  border-radius: 50%;
}

.enter-ring-outer::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--g-light);
  border-radius: 50%;
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* Disque central vert empire */
.enter-disc {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--g-main);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 40px rgba(43, 82, 69, 0.25);
  transition: transform 0.5s var(--ease-out), background 0.4s, box-shadow 0.4s;
}

.enter-btn:hover .enter-disc {
  transform: scale(1.12);
  background: var(--g-deep);
  box-shadow: 0 16px 60px rgba(43, 82, 69, 0.4);
}

.enter-disc svg {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.4s var(--ease-out);
}

.enter-btn:hover .enter-disc svg { transform: translateX(3px); }

.enter-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t-light);
  transition: color 0.3s;
}

.enter-btn:hover + .enter-label { color: var(--g-main); }

/* ─── LIGNE VERTICALE BOTTOM ─────────────────────────────── */
.vert-line-bot {
  width: 1px;
  height: 0;
  background: linear-gradient(to top, transparent, var(--g-light));
  margin-top: 52px;
  opacity: 0;
  animation: line-bot 1s var(--ease-out) 3s forwards;
}

@keyframes line-bot {
  to { height: 60px; opacity: 1; }
}

/* ─── COINS DÉCORATIFS ───────────────────────────────────── */
.corner {
  position: fixed;
  width: 40px;
  height: 40px;
  opacity: 0;
  animation: fade-in 1s ease 2.8s forwards;
}

.corner--tl { top: 32px;    left: 36px;  border-top: 1px solid var(--g-light);    border-left:   1px solid var(--g-light); }
.corner--tr { top: 32px;    right: 36px; border-top: 1px solid var(--g-light);    border-right:  1px solid var(--g-light); }
.corner--bl { bottom: 32px; left: 36px;  border-bottom: 1px solid var(--g-light); border-left:   1px solid var(--g-light); }
.corner--br { bottom: 32px; right: 36px; border-bottom: 1px solid var(--g-light); border-right:  1px solid var(--g-light); }

/* ─── INFO BAS ───────────────────────────────────────────── */
.bottom-info {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-light);
  opacity: 0;
  white-space: nowrap;
  z-index: 10;
  animation: fade-in 1s ease 3.2s forwards;
}

.bottom-info span { color: var(--g-light); margin-right: 6px; }

/* ─── RIDEAU DE TRANSITION ───────────────────────────────── */
.curtain {
  position: fixed;
  inset: 0;
  background: var(--g-deep);
  z-index: 99999;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

.curtain.closing {
  pointer-events: all;
  animation: curtain-close 0.8s var(--ease-out) forwards;
}

@keyframes curtain-close {
  to { transform: scaleY(1); }
}

/* ─── ANIMATIONS PARTAGÉES ───────────────────────────────── */
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .corner { width: 28px; height: 28px; }
  .corner--tl, .corner--tr { top: 20px; }
  .corner--bl, .corner--br { bottom: 20px; }
  .corner--tl, .corner--bl { left: 20px; }
  .corner--tr, .corner--br { right: 20px; }
  .bottom-info  { gap: 20px; font-size: 9px; }
  .enter-btn    { width: 100px; height: 100px; }
}