/* ==========================================================
   HERO CINÉMATIQUE — rideau + reveal
   Scopé à .hero-pro.hero-cinema pour ne toucher aucune autre
   section. Réutilise les tokens déjà définis dans senior-level.css.
   ========================================================== */

.hero-pro.hero-cinema{
  position:relative; overflow:hidden; min-height:92svh; display:flex; align-items:center;
  padding:0; background:#0A0A0A; color:#fff;
}
.hero-cinema .hc-bg{
  position:absolute; inset:0; background-size:cover; background-position:center 60%;
  transform:scale(1.08); z-index:0;
}
/* Le zoom d'entrée ne s'applique qu'au fond simple : le rotateur (hero-rotator.css)
   gère son propre mouvement par slide, les deux ne doivent jamais s'empiler. */
.hero-cinema .hc-bg:not(.hc-rotator){
  animation: hcBgZoom 2.2s cubic-bezier(.16,.9,.3,1) .5s forwards;
}
@keyframes hcBgZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero-cinema .hc-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 32%, rgba(0,0,0,.72) 100%);
}
.hero-cinema .hc-glow{
  position:absolute; inset:0; z-index:1; mix-blend-mode:screen; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 38%, rgba(228,184,118,.18), transparent 70%);
}
.hero-cinema .hc-dust{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-cinema .hc-dust span{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(228,184,118,.55); filter:blur(.5px); opacity:0;
}
@keyframes hcDustFloat{
  0%{ opacity:0; transform:translateY(0); }
  40%{ opacity:.7; }
  100%{ opacity:0; transform:translateY(-45px); }
}
.hero-cinema.hc-noanim .hc-dust{ display:none; }

.hero-cinema .conteneur{ position:relative; z-index:10; width:100%; }
.hero-cinema .hero-pro-inner{
  text-align:center; max-width:760px; margin:0 auto; perspective:1200px;
  opacity:0; animation: hcFadeUp .9s cubic-bezier(.16,.9,.3,1) 1.05s forwards;
}
.hero-cinema .hero-pastille{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#F7F5F1;
}
.hero-cinema h1{
  color:#fff; font-weight:800; letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05);
  transform-style:preserve-3d;
  animation: hcTilt3d 1.1s cubic-bezier(.16,.9,.3,1) 1.15s both;
  font-size:clamp(2.1rem, 4.6vw, 3.4rem); line-height:1.08;
}
.hero-cinema h1 .or{
  background:linear-gradient(135deg,#F6E0AC 0%,#E4B876 45%,#AD7C2E 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none; filter:drop-shadow(0 2px 10px rgba(228,184,118,.35));
}
.hero-cinema .accroche{ color:rgba(255,255,255,.72); }
@keyframes hcFadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes hcTilt3d{
  0%{ opacity:0; transform:rotateX(28deg) translateY(22px) scale(.97); }
  100%{ opacity:1; transform:rotateX(0) translateY(0) scale(1); }
}
.hero-cinema .hero-cta{ justify-content:center; }
.hero-cinema .hero-recherche{
  margin:26px auto 6px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
}
.hero-cinema .hero-recherche input{ color:#fff; }
.hero-cinema .hero-recherche input::placeholder{ color:rgba(255,255,255,.5); }

.hero-cinema .hc-scroll{
  position:absolute; z-index:10; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:11px; color:rgba(255,255,255,.45); opacity:0;
  animation: hcFadeUp .7s ease 1.9s forwards;
}
.hero-cinema .hc-scroll .chevron{
  width:12px; height:12px; border-right:2px solid rgba(255,255,255,.45); border-bottom:2px solid rgba(255,255,255,.45);
  transform:rotate(45deg); animation:hcBob 1.6s ease-in-out infinite;
}
@keyframes hcBob{0%,100%{transform:translateY(0) rotate(45deg);}50%{transform:translateY(5px) rotate(45deg);}}

/* --- Rideau --- */
.hero-cinema .hc-curtain{
  position:absolute; inset:0; z-index:40; transform-origin:top center;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.08) 2px 14px),
    linear-gradient(120deg, #1B3357 0%, #13233D 35%, #0B1526 60%, #1B3357 100%);
  box-shadow: inset 0 0 140px rgba(0,0,0,.6);
  animation: hcCurtainLift 1.25s cubic-bezier(.7,0,.3,1) .55s forwards;
}
@keyframes hcCurtainLift{
  from{ transform:translateY(0) rotateZ(0); }
  to{ transform:translateY(-115%) rotateZ(-2deg); }
}
.hero-cinema .hc-curtain::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 0%, rgba(228,184,118,.10) 45%, transparent 55%, rgba(255,255,255,.06) 70%, transparent 100%);
}
.hero-cinema .hc-curtain-brand{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Big Shoulders Display', 'Inter', sans-serif; font-weight:800; font-size:clamp(1.6rem,5vw,3rem);
  color:rgba(247,245,241,.9); letter-spacing:.03em;
}
.hero-cinema .hc-glint{
  position:absolute; top:0; bottom:0; width:22%; left:-30%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35) 48%, transparent);
  mix-blend-mode:overlay; pointer-events:none;
  animation: hcGlintSweep .65s ease-in-out .3s forwards;
}
@keyframes hcGlintSweep{ from{ left:-30%; } to{ left:120%; } }

/* Rejoué une seule fois par session (classe posée en inline avant peinture, cf. accueil.php) */
.hero-cinema.hc-noanim .hc-curtain,
.hero-cinema.hc-noanim .hc-glint{ display:none; }
.hero-cinema.hc-noanim .hc-bg{ animation:none; transform:scale(1); }
.hero-cinema.hc-noanim .hero-pro-inner,
.hero-cinema.hc-noanim .hero-pro-inner h1,
.hero-cinema.hc-noanim .hc-scroll{ animation:none; opacity:1; transform:none; }

@media(prefers-reduced-motion: reduce){
  .hero-cinema .hc-curtain,
  .hero-cinema .hc-glint{ display:none; }
  .hero-cinema .hc-bg{ animation:none; transform:scale(1); }
  .hero-cinema .hero-pro-inner,
  .hero-cinema .hero-pro-inner h1,
  .hero-cinema .hc-scroll{ animation:none; opacity:1; transform:none; }
}

@media(max-width:640px){
  .hero-pro.hero-cinema{ min-height:88svh; }
}