@font-face {
  font-family: 'Eros';
  src: url('../fonts/Eros-Bold.woff2') format('woff2'),
    url('../fonts/Eros-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Eros';
  src: url('../fonts/Eros-Regular.woff2') format('woff2'),
    url('../fonts/Eros-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hagrid';
  src: url('../fonts/Hagrid-Regular.woff2') format('woff2'),
    url('../fonts/Hagrid-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hagrid';
  src: url('../fonts/Hagrid-Medium.woff2') format('woff2'),
    url('../fonts/Hagrid-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hagrid Text';
  src: url('../fonts/HagridText-Light.woff2') format('woff2'),
    url('../fonts/HagridText-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hagrid Text';
  src: url('../fonts/HagridText-Regular.woff2') format('woff2'),
    url('../fonts/HagridText-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg1: #101033;         /* fond intro */
  --bg2: #F5EEE4;         /* fond home */
  --gold: #c9a86a;
  --brand: #4241B2;

  --font-hagrid-text: 'Hagrid Text', sans-serif;
  --font-hagrid: 'Hagrid', sans-serif;
  --font-eros: 'Eros', serif;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg1);
  color: white;
  overflow:hidden;
  transition: background 900ms ease; /* changement de fond */
}

/* INTRO overlay */
.intro{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background: transparent;
}

/* STAGE (3D) */
.stage{
  width: min(1100px, 92vw);
  height: min(700px, 78vh);
  position:relative;
  perspective: 900px;
  perspective-origin: 50% 45%;
}

/* TUNNEL */
.tunnel{
  position:absolute;
  inset:0;
  transform-style: preserve-3d;
  opacity: 1;
  z-index: 1;
  transition: opacity 700ms ease; /* fade contrôlé */
}

.introText{
  position:absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  z-index: 4;
  font-family: 'Eros', serif;
  font-size: 84px;
  line-height: 84px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  opacity: 1;
  transition: opacity 350ms ease;
}

/* Une fois l'anim lancée, on le fait disparaître */
body.is-traveling .introText{
  opacity: 0;
}


/* fade arches uniquement via cette classe dédiée */
body.is-fade-arches .tunnel{
  opacity:0;
}

/* LAYERS */
.layer{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  transition: opacity 700ms ease, filter 250ms ease;
}

.layer svg{
  width: min(900px, 85vw);
  height: auto;
}

/* Couleur des arches */
.layer path, .layer line, .layer polyline, .layer polygon, .layer circle, .layer rect{
  stroke: var(--gold);
  fill: none;
}

/* LOGO */
.logo{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) scale(.22) translateZ(-800px);
  opacity:0;
  pointer-events:none;
  will-change: transform, opacity;
  transition: none; /* animé via JS */
  z-index: 5;
}

/* Recolor du logo via classes */
.logo svg *{
  transition: fill 600ms ease, stroke 600ms ease;
}

/* doré quand reveal */
/* body.is-reveal .logo svg *{
  fill: var(--gold);
  stroke: var(--gold);
} */

/* bleu quand home */
body.is-home .logo svg *{
  fill: var(--brand);
  stroke: var(--brand);
}

/* Bouton */
.enter{
  position:absolute;
  bottom: 28vh;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  font-family: var((--font-hagrid));
  font-size: 16px;
  line-height: 26px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 22px;
  color: var(--gold);
  backdrop-filter: blur(8px);
  cursor:pointer;
    transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .3s ease,
    background-color .4s ease,
    color .4s ease;
}

.enter:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 20%, transparent);
  background: var(--gold);
  color: var(--bg1);
}

/* HOME */
.home{
  position:relative;
  min-height:100vh;
  padding: 120px 8vw 80px; /* place pour le logo */
  background: var(--bg2);
  opacity:0;
  transform: translateY(12px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.home.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* le bouton s'efface proprement */
.enter.is-hidden{
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

/* quand le tunnel est terminé, on le cache définitivement */
body.is-tunnel-gone .tunnel{
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

.logo svg{
  width: 76px;
  height: 119px;
  display:block;
}