/* 30/09/2026 — motion design de l'écran d'arrivée (accueil), inspiré de la vidéo de référence :
   sur-titre tapé, titre mot à mot, outils qui arrivent en profondeur, capot du portable qui s'ouvre,
   téléphones qui sortent de l'espace, compteurs, orbite de cinq satellites (= les cinq univers du dock).
   Tout est automatique ; rien n'est déplacé ; mouvements réduits = état final immédiat. */
:root{--hm-ease:cubic-bezier(0.23,1,0.32,1)}

/* ---- avant la découpe du titre : on ne montre pas le titre brut (filet de sécurité à 2,5 s) ---- */
html.ef-hm .earth-intro h1:not(.hm-split),html.ef-hm .earth-intro>.eyebrow:not(.hm-typed){visibility:hidden;animation:hmShow 0s 2.5s forwards}
@keyframes hmShow{to{visibility:visible}}

/* ---- sur-titre tapé ---- */
.earth-intro>.eyebrow.hm-typed{min-height:1.4em}
.hm-caret{display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;background:#ffac76;animation:hmCaret 1s steps(2) infinite}
.hm-caret.is-done{animation:hmCaret 1s steps(2) 3,hmCaretOut .4s 3s forwards}
@keyframes hmCaret{50%{opacity:0}}
@keyframes hmCaretOut{to{opacity:0;width:0;margin:0}}

/* ---- titre mot à mot ---- */
.hm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .14em;margin:0 -.02em -.14em}
.hm-i{display:inline-block;animation:hmWord 1s var(--hm-ease) backwards;animation-delay:calc(var(--k,0) * 70ms + 380ms)}
@keyframes hmWord{from{transform:translate3d(0,105%,0);opacity:0;filter:blur(6px)}60%{filter:blur(0)}to{transform:none;opacity:1}}

/* ---- paragraphe, boutons, outils, réseaux ---- */
html.ef-go .earth-intro>p:not(.eyebrow){animation:hmUp .8s var(--hm-ease) 1.05s backwards}
html.ef-go .ef-actions>*{animation:hmPop .6s var(--hm-ease) backwards}
html.ef-go .ef-actions>:nth-child(1){animation-delay:1.25s}
html.ef-go .ef-actions>:nth-child(2){animation-delay:1.33s}
html.ef-go .ef-shelf-title{animation:hmUp .6s var(--hm-ease) 1.45s backwards}
html.ef-go .ef-shelf-row{perspective:900px;perspective-origin:0 50%}
html.ef-go .ef-shelf-row>*{animation:hmFly .95s var(--hm-ease) backwards}
html.ef-go .ef-shelf-row>:nth-child(1){animation-delay:1.55s}
html.ef-go .ef-shelf-row>:nth-child(2){animation-delay:1.62s}
html.ef-go .ef-shelf-row>:nth-child(3){animation-delay:1.69s}
html.ef-go .ef-shelf-row>:nth-child(4){animation-delay:1.76s}
html.ef-go .ef-shelf-row>:nth-child(5){animation-delay:1.83s}
html.ef-go .ef-shelf-row>:nth-child(6){animation-delay:1.90s}
html.ef-go .ef-rs-bas{animation:hmUp .6s var(--hm-ease) 2s backwards}
@keyframes hmUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes hmPop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes hmFly{from{opacity:0;transform:translate3d(90px,0,-260px) rotateY(-32deg)}to{opacity:1;transform:none}}

/* ---- compteurs ---- */
.ef-shelf-title{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hm-stats{color:#98e6f8;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-stats b{font-weight:700;color:#eff8ff}
@media (max-width:760px){.hm-stats{display:none}}

/* ---- portable du mirage : le capot s'ouvre, puis le post apparaît ---- */
.ef-mirage a{transform-style:preserve-3d}
.ef-mirage .lid{transform-origin:50% 100%}
html.ef-go .ef-mirage.is-visible .lid{animation:hmLid 1.3s var(--hm-ease) backwards}
html.ef-go .ef-mirage.is-visible .post{animation:hmFadeIn .7s ease-out .75s backwards}
@keyframes hmLid{from{transform:rotateX(-82deg)}to{transform:none}}
@keyframes hmFadeIn{from{opacity:0}to{opacity:1}}

/* ---- téléphones : ils sortent de la profondeur ---- */
html.ef-go .ef-phone.is-visible{animation:hmPhone 1.2s var(--hm-ease) backwards,phoneFloat var(--dur,10s) ease-in-out 1.2s infinite alternate}
@keyframes hmPhone{from{opacity:0;transform:perspective(900px) rotateY(calc(var(--ry,0deg) - 38deg)) translate3d(0,24px,-320px)}}

/* ---- orbite autour de la planète ---- */
.hm-orbit{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:1;transition:opacity .45s var(--hm-ease)}
.hm-orbit path{fill:none;stroke-linecap:round}
.hm-orbit .hm-ring{stroke:#98e6f8;stroke-width:1.2;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--hm-ease)}
.hm-orbit .hm-ring--back{opacity:.22}
.hm-orbit.is-drawn .hm-ring{stroke-dashoffset:0}
.hm-orbit .hm-sat{fill:#0b1a2b;stroke:#98e6f8;stroke-width:1.4;opacity:0;transition:fill .35s,stroke .35s,opacity .5s}
.hm-orbit.is-drawn .hm-sat{opacity:1}
.hm-orbit .hm-sat.is-lit{fill:#ffac76;stroke:#ffd6b8;filter:drop-shadow(0 0 7px #ff8a3d)}
.hm-orbit .hm-sat.is-hidden{opacity:0!important}
.hm-orbit text{font:700 12px Manrope,system-ui,sans-serif;fill:#eff8ff;letter-spacing:.06em;text-transform:uppercase;paint-order:stroke;stroke:#040c16cc;stroke-width:3px;opacity:0;transition:opacity .4s}
.hm-orbit text.is-on{opacity:.95}
body:not([data-step=earth]) .hm-orbit,body.portal-open .hm-orbit{opacity:0}
@media (max-width:760px),(max-height:620px){.hm-orbit{display:none}}

/* le dock répond au satellite allumé */
#universe-dock button.hm-lit>span{color:#98e6f8}
#universe-dock button.hm-lit>span:after{content:'';display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:#ffac76;box-shadow:0 0 8px #ff8a3d;vertical-align:1px}

/* ---- mouvements réduits : état final, sans déplacement ---- */
html.reduced-motion .hm-i,html.reduced-motion .ef-shelf-row>*,html.reduced-motion .ef-phone.is-visible{animation:none!important}
@media (prefers-reduced-motion:reduce){.hm-i,.hm-caret{animation:none!important}.hm-orbit .hm-ring{transition:none}}