/* INTRO V6 — CORRECTION AFFICHAGE DU DÉCOR */
.theatre-intro-v6{
  --gold:#f1c985;
  --paper:#f7f1e7;
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#060505;
  color:var(--paper);
  transition:opacity 1s ease,visibility 1s ease;
}

/* IMPORTANT : le décor reste au-dessus du fond noir */
.intro-v6-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10)),
    url("./intro-decor-vierge.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.01);
  transition:transform 1.2s ease,filter 1.2s ease;
}

.theatre-intro-v6::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 18% 82%,rgba(0,0,0,.20)),
    radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.24) 100%);
}

.intro-v6-content{
  position:relative;
  z-index:2;
  width:min(900px,calc(100% - 42px));
  text-align:center;
  padding:38px 20px;
}

.intro-v6-kicker,
.intro-v6-line,
.intro-v6-subtitle,
.intro-v6-enter{
  opacity:0;
  transform:translateY(16px);
  filter:blur(4px);
}

.intro-v6-kicker{
  display:block;
  margin:0 0 18px;
  color:var(--gold);
  font:10px "DM Mono",monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  animation:intro-v6-reveal .7s .25s ease forwards;
}

.intro-v6-title{
  margin:0;
  font:500 clamp(40px,5.4vw,77px)/1.03 "Playfair Display",Georgia,serif;
  letter-spacing:-.045em;
  text-shadow:0 5px 26px rgba(0,0,0,.52);
}

.intro-v6-line{display:block}
.intro-v6-line-one{animation:intro-v6-reveal 1s .8s cubic-bezier(.2,.75,.2,1) forwards}
.intro-v6-line-two{color:var(--gold);animation:intro-v6-reveal 1.05s 1.7s cubic-bezier(.2,.75,.2,1) forwards}
.intro-v6-line-two em{font-weight:500}

.intro-v6-subtitle{
  margin:25px auto 30px;
  color:rgba(247,241,231,.88);
  font:16px "Plus Jakarta Sans",Arial,sans-serif;
  animation:intro-v6-reveal .8s 2.62s ease forwards;
}

.intro-v6-enter{
  position:relative;
  min-width:min(100%,360px);
  padding:16px 24px;
  border:1px solid rgba(241,201,133,.92);
  background:rgba(8,7,6,.52);
  box-shadow:inset 0 0 0 1px rgba(241,201,133,.16),0 12px 28px rgba(0,0,0,.26);
  color:var(--gold);
  cursor:pointer;
  font:11px "DM Mono",monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
  animation:intro-v6-reveal .8s 3.14s ease forwards;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.intro-v6-enter::before,.intro-v6-enter::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  pointer-events:none;
  border-color:var(--gold);
}
.intro-v6-enter::before{top:4px;left:4px;border-top:1px solid;border-left:1px solid}
.intro-v6-enter::after{right:4px;bottom:4px;border-right:1px solid;border-bottom:1px solid}

.intro-v6-enter:hover,.intro-v6-enter:focus-visible{
  color:#191108;
  background:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 17px 34px rgba(0,0,0,.34);
  outline:none;
}

.intro-v6-enter-mark{font-size:15px;margin-right:8px}

.intro-v6-skip{
  position:absolute;
  z-index:3;
  right:clamp(20px,4vw,64px);
  top:clamp(20px,3.5vw,48px);
  border:0;
  border-bottom:1px solid rgba(241,201,133,.5);
  background:transparent;
  color:rgba(247,241,231,.83);
  cursor:pointer;
  padding:7px 2px;
  font:10px "DM Mono",monospace;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:0;
  animation:intro-v6-reveal .65s 3.5s ease forwards;
}

.intro-v6-skip:hover,.intro-v6-skip:focus-visible{
  color:var(--gold);
  border-color:var(--gold);
  outline:none;
}

@keyframes intro-v6-reveal{
  from{opacity:0;transform:translateY(16px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

.theatre-intro-v6.is-opening .intro-v6-content,
.theatre-intro-v6.is-opening .intro-v6-skip{
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .4s ease,transform .4s ease;
}

.theatre-intro-v6.is-opening .intro-v6-backdrop{
  transform:scale(1.075);
  filter:brightness(1.14) saturate(1.05);
}

.theatre-intro-v6.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media(max-width:640px){
  .intro-v6-content{width:min(100% - 28px,650px);padding:24px 8px}
  .intro-v6-title{font-size:42px}
  .intro-v6-enter{min-width:0;width:100%;font-size:10px}
  .intro-v6-skip{right:20px;top:20px;font-size:9px}
}