/* ==========================================================
   ELECTRODIX - intro cinématique 
   Logo seul (sans appareils).
   Durée totale ~4 s. Tout est en CSS : les temps se règlent ici.
   ========================================================== */
.rm-intro {
    --bar: max(9vh, 52px);   /* bandes noires "cinéma" */
    position: fixed; inset: 0; z-index: 2000;
    direction: ltr; color: #DCE7F7;
    animation: rm-gone 0s linear 4.05s forwards;   /* sécurité : ne bloque jamais le site */
}
html.rm-intro-on, html.rm-intro-on body { overflow: hidden; }
.rm-intro.is-leaving { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.rm-intro svg, .rm-intro img { display: block; }
.in-defs { position: absolute; width: 0; height: 0; }

/* ---------- fond : deux battants qui s'ouvrent à la fin ---------- */
.in-half {
    position: absolute; top: 0; bottom: 0; width: 50.2%; z-index: 1;
    background: radial-gradient(120% 90% at 50% 38%, #143258 0%, #07162C 70%) 0 0 / 200% 100% no-repeat, #07162C;   /* couleur pleine = pas de fente d'1px */
}
.in-half.l { left: 0;  background-position: left top;  animation: rm-half-l .85s cubic-bezier(.7,0,.2,1) 3.3s forwards; }
.in-half.r { right: 0; background-position: right top; animation: rm-half-r .85s cubic-bezier(.7,0,.2,1) 3.3s forwards; }
.in-seam {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; z-index: 2; opacity: 0;
    background: linear-gradient(to bottom, transparent, #F0D791 18%, #F0D791 82%, transparent);
    box-shadow: 0 0 40px 14px rgba(240,215,145,.4);
    animation: rm-seam .95s ease-out 3.25s forwards;
}
.in-vig {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.55) 100%);
    animation: rm-off .4s ease 3.2s forwards;
}

/* ---------- finale : le logo ---------- */
.in-finale {
    position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
}
.fin-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 38%, #143258 0%, #07162C 70%); animation: rm-off 0s linear 3.2s forwards; }
.fin-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(240,215,145,.28), rgba(240,215,145,0) 55%); animation: rm-fade 1.4s ease-out .2s both; }
.fin-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vh, 22px); animation: rm-leave .6s ease-in 3.25s forwards; }
.fin-gear {
    width: clamp(110px, 27vh, 210px); height: auto;
    filter: drop-shadow(0 0 22px rgba(240,215,145,.35));
    animation: rm-gear 1.4s cubic-bezier(.2,.8,.2,1) 1s both;
}
.fin-wrench { transform-origin: 144px 144px; animation: rm-wrench .7s cubic-bezier(.3,1.5,.5,1) 1.9s both; }
.fin-word { width: min(70vw, 260px); height: auto; clip-path: inset(0 100% 0 0); animation: rm-reveal .9s cubic-bezier(.6,0,.2,1) 1.6s forwards; }
.fin-tag { margin: 0; padding: 0 1.2rem; text-align: center; color: #B6C6DD; font-weight: 600; font-size: clamp(.85rem, 1.6vw, 1.05rem); animation: rm-rise-in .7s ease-out 2.25s both; }

/* ---------- bandes cinéma + sous-titres ---------- */
.in-bar { position: absolute; left: 0; right: 0; z-index: 5; height: var(--bar); background: #03070F; overflow: hidden; animation: rm-bar .7s cubic-bezier(.7,0,.2,1) .5s forwards; }
.in-bar.top { top: 0; }
.in-bar.bot { bottom: 0; }

.in-skip {
    position: absolute; z-index: 9; top: 14px; right: max(14px, 2.5vw);
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem;
    font: inherit; font-size: .85rem; font-weight: 700; color: #DCE7F7; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
    backdrop-filter: blur(6px); transition: background .15s, border-color .15s;
    animation: rm-off .3s ease 3.2s forwards;
}
.in-skip:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.in-skip:focus-visible { outline: 2px solid #84CAFF; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .rm-intro { display: none; } }

/* ---------- keyframes ---------- */
@keyframes rm-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-off    { to { opacity: 0; visibility: hidden; } }
@keyframes rm-gone   { to { visibility: hidden; pointer-events: none; } }
@keyframes rm-draw   { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rm-pan {
    0%, 45.78%     { transform: translateX(0);          animation-timing-function: cubic-bezier(.65,0,.25,1); }
    56.63%, 89.16% { transform: translateX(-33.3333%);  animation-timing-function: cubic-bezier(.65,0,.25,1); }
    100%           { transform: translateX(-66.6667%); }
}
@keyframes rm-amb    { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-drift  { from { transform: scale(.95); } to { transform: scale(1.05); } }
@keyframes rm-vib    { from { transform: translateX(-.7px); } to { transform: translateX(.7px); } }
@keyframes rm-fillup { from { transform: translateY(112px); } to { transform: translateY(0); } }
@keyframes rm-wave   { from { transform: translateX(0); } to { transform: translateX(-120px); } }
@keyframes rm-spin   { to { transform: rotate(360deg); } }
@keyframes rm-bub    { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-85px); } }
@keyframes rm-door   { to { transform: scaleY(.13); } }
@keyframes rm-arm    { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes rm-flow   { to { stroke-dashoffset: -22; } }
@keyframes rm-spark  { 0% { opacity: 0; transform: scale(0) rotate(0); } 40% { opacity: 1; transform: scale(1.25) rotate(45deg); } 100% { opacity: .9; transform: scale(.85) rotate(90deg); } }
@keyframes rm-knob   { from { transform: rotate(0); } to { transform: rotate(var(--r)); } }
@keyframes rm-hot    { 0% { stroke: #5E6F92; } 45% { stroke: #FFA726; } 100% { stroke: #FF7043; } }
@keyframes rm-glow   { 0% { opacity: 0; } 60% { opacity: .95; } 100% { opacity: .8; } }
@keyframes rm-rise   { from { transform: scale(.94, .72); } to { transform: scale(1, 1); } }
@keyframes rm-steam  { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes rm-iris   { to { clip-path: circle(150% at 50% 55%); } }
@keyframes rm-glow-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rm-gear   { from { opacity: 0; transform: rotate(-200deg) scale(.55); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes rm-wrench { from { transform: rotate(-55deg); } to { transform: rotate(0); } }
@keyframes rm-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes rm-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rm-bar    { to { height: 0; } }
@keyframes rm-prog   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rm-cap    { 0% { opacity: 0; transform: translateY(8px); } 14% { opacity: 1; transform: none; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rm-leave  { to { opacity: 0; transform: scale(1.12); } }
@keyframes rm-half-l { to { transform: translateX(-101%); } }
@keyframes rm-half-r { to { transform: translateX(101%); } }
@keyframes rm-seam   { 0% { opacity: 0; transform: scaleY(.4); } 25% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleX(26); } }