/*
 * English Nest — homepage motion (2026-10-14). Loaded by index.php after the page's own styles.
 * Only motion: no text, colour or layout changes. Everything here is switched on by the class
 * "en-motion" that the head script adds (not added for prefers-reduced-motion).
 */

/* Until /en-motion.js has split the hero title into words, keep it hidden — but never for more than
   2.5 s, so the title always shows even if the script fails to load. */
.en-motion .hero h1{visibility:hidden;animation:en-motion-failsafe 0s 1.2s forwards}
.en-motion .hero h1.en-split-ready{visibility:visible;animation:none}
@keyframes en-motion-failsafe{to{visibility:visible}}

/* hero title, word by word (each word rises out of its own mask) */
.en-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.3em .06em .22em;margin:-.3em -.06em -.22em}
/* once the words are in, drop the mask so nothing (tall letters, dots, harakat) can ever be cut */
.hero h1.en-split-done .en-w{overflow:visible}
.en-w > i{display:inline-block;font-style:inherit}

/* floating skill icons behind the hero */
.hero .en-float{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero .en-float span{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(232,207,159,.22);color:#e5cf9f}
.hero .en-float svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.hero .en-float span{opacity:.55;transform:scale(.72)}}


/* the magnetic challenge button */