/*
 * English Nest — section pages motion (2026-10-14). Motion only, switched on by html.en-motion.
 */
/* the page's hero title / text rise in with pure CSS: they start with the first paint and never wait for a script.
   Keyframes only give a start ("from") and use translate / scale, so the element's own transform and hover stay untouched. */
.en-motion main h1:not(#studioArabicTitle){animation:en-rise .8s cubic-bezier(.22,1,.36,1) backwards}
.en-motion main h1:not(#studioArabicTitle) ~ *{animation:en-fade .7s .25s cubic-bezier(.22,1,.36,1) backwards}
@keyframes en-rise{from{opacity:0;translate:0 26px}}
@keyframes en-fade{from{opacity:0;translate:0 12px}}

.en-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.3em .06em .22em;margin:-.3em -.06em -.22em}
main h1.en-split-done .en-w{overflow:visible}
.en-w > i{display:inline-block;font-style:inherit}


/* challenges page: its big phrase («اعرف مستواك…») is the page's real title, so it rises in like the other sections'
   titles from the first paint, instead of waiting for the old fade (challenges.js); the cards come in quicker */
.en-motion .en-challenges .en-challenge-intro[data-en-reveal]{opacity:1;transform:none;transition:none}
.en-motion .en-challenge-intro-copy > h2{animation:en-rise .8s .08s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .en-challenge-intro-copy > h2 ~ *,.en-motion .en-challenge-intro-copy > .en-challenge-kicker{animation:en-fade .7s .25s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .en-challenge-intro-mark{animation:en-fade .8s .3s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .en-challenges .en-challenge-card[data-en-reveal],.en-motion .en-challenges .en-challenge-cta[data-en-reveal]{transition-duration:.4s}

/* ===== the four challenge pages (word / grammar / writing / listening) — CSS only, nothing waits for a script.
   Uses the independent "translate" / "scale" properties so it never fights the pages' own transforms. ===== */
.en-motion main [class*="-hero-copy"] > [class$="-kicker"]{animation:en-fade .6s .05s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .wc-hero-art,.en-motion .gc-hero-art,.en-motion .wt-hero-art,.en-motion .lc-hero-art{animation:en-show 1s .2s ease backwards}
.en-motion .wc-arena,.en-motion .gc-arena,.en-motion .wt-arena,.en-motion .lc-arena{animation:en-fade .8s .3s cubic-bezier(.22,1,.36,1) backwards}
@keyframes en-show{from{opacity:0}}
/* the art comes alive: chips drift, the clock ticks, the sound wave plays, the lines get written */
.en-motion .wc-floating-word,.en-motion .gc-rule-chip,.en-motion .wt-art-chip,.en-motion .lc-art-chip{animation:en-drift 4.2s ease-in-out infinite alternate}
.en-motion .wc-word-b,.en-motion .gc-chip-b,.en-motion .wt-art-chip-b,.en-motion .lc-chip-b{animation-duration:5s;animation-delay:-1.6s}
.en-motion .wc-word-c,.en-motion .gc-chip-c,.en-motion .wt-art-chip-c,.en-motion .lc-chip-c{animation-duration:4.6s;animation-delay:-3s}
@keyframes en-drift{from{translate:0 -7px}to{translate:0 7px}}
.en-motion .wc-clock-hand{animation:en-tick 30s linear infinite}
@keyframes en-tick{from{transform:rotate(36deg)}to{transform:rotate(396deg)}}
.en-motion .lc-wave i{transform-origin:50% 50%;animation:en-wave 1.1s ease-in-out infinite alternate}
.en-motion .lc-wave i:nth-child(2n){animation-delay:-.35s}
.en-motion .lc-wave i:nth-child(3n){animation-delay:-.7s}
@keyframes en-wave{from{scale:1 .45}to{scale:1 1}}
.en-motion .wt-sheet-main > i{animation:en-write .9s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .wt-sheet-main > i:nth-of-type(1){animation-delay:.45s}
.en-motion .wt-sheet-main > i:nth-of-type(2){animation-delay:.65s}
.en-motion .wt-sheet-main > i:nth-of-type(3){animation-delay:.85s}
.en-motion .wt-sheet-main > i:nth-of-type(4){animation-delay:1.05s}
@keyframes en-write{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
/* every screen inside a challenge (start, question, result) comes in softly; the word / question pops */
.en-motion .wc-intro,.en-motion .wc-result,.en-motion .gc-intro,.en-motion .gc-result,.en-motion .wt-intro,.en-motion .wt-result,
.en-motion .wt-session,.en-motion .lc-hub,.en-motion .lc-challenge{animation:en-fade .45s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .wc-intro-main > *,.en-motion .gc-intro-main > *,.en-motion .wt-intro-main > *{animation:en-fade .5s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .wc-intro-main > :nth-child(2),.en-motion .gc-intro-main > :nth-child(2),.en-motion .wt-intro-main > :nth-child(2){animation-delay:.06s}
.en-motion .wc-intro-main > :nth-child(3),.en-motion .gc-intro-main > :nth-child(3),.en-motion .wt-intro-main > :nth-child(3){animation-delay:.12s}
.en-motion .wc-intro-main > :nth-child(n+4),.en-motion .gc-intro-main > :nth-child(n+4),.en-motion .wt-intro-main > :nth-child(n+4){animation-delay:.18s}
.en-motion .wc-word-card{animation:en-pop .3s cubic-bezier(.34,1.56,.64,1) backwards}
.en-motion .wc-option{animation:en-fade .28s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .wc-option:nth-child(2){animation-delay:.03s}
.en-motion .wc-option:nth-child(3){animation-delay:.06s}
.en-motion .wc-option:nth-child(4){animation-delay:.09s}
.en-motion .wc-result-score,.en-motion .gc-result-score,.en-motion .wt-result-mark{animation:en-pop .6s .1s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes en-pop{from{opacity:0;scale:.9}}
.en-motion .lc-hub-item{animation:en-fade .4s cubic-bezier(.22,1,.36,1) backwards}
.en-motion .lc-hub-item:nth-child(2){animation-delay:.03s}.en-motion .lc-hub-item:nth-child(3){animation-delay:.06s}
.en-motion .lc-hub-item:nth-child(4){animation-delay:.09s}.en-motion .lc-hub-item:nth-child(n+5){animation-delay:.12s}

/* ===== the four challenges: interactive feedback (driven by /en-motion-pages.js) ===== */
/* score ring around the big number, filling to the accuracy */
.en-motion .en-ring{position:absolute;left:50%;top:50%;z-index:0;width:190px;height:190px;translate:-50% -50%;pointer-events:none;overflow:visible}
.en-motion .en-ring circle{fill:none;stroke-width:4}
.en-motion .en-ring-bg{stroke:rgba(255,255,255,.12)}
.en-motion .en-ring-fg{stroke:#C8A96C;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px rgba(200,169,108,.55))}
/* the navy score panel breathes a soft gold light */
.en-motion .wc-result-score,.en-motion .gc-result-score{position:relative;overflow:hidden}
.en-motion .wc-result-score > :not(.en-ring),.en-motion .gc-result-score > :not(.en-ring){position:relative;z-index:1}
.en-motion .wc-result-score::after,.en-motion .gc-result-score::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 50% 50%,rgba(214,181,116,.22),transparent 45%);animation:en-breathe 3.6s ease-in-out infinite;pointer-events:none}
@keyframes en-breathe{0%,100%{opacity:.35;scale:.9}50%{opacity:1;scale:1.08}}
/* «+1» on a right answer */
.en-plus{position:absolute;z-index:9990;direction:ltr!important;unicode-bidi:bidi-override!important;translate:-50% -10px;font:900 30px/1 Arial,sans-serif;color:#1E9E4A;text-shadow:0 2px 0 #fff,0 6px 16px rgba(30,158,74,.35);pointer-events:none;animation:en-plus .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes en-plus{0%{opacity:0;translate:-50% 0;scale:.6}20%{opacity:1;scale:1.15}100%{opacity:0;translate:-50% -70px;scale:1}}
/* a wrong answer shakes */
.en-motion .wc-option.wrong,.en-motion .lc-option.wrong{animation:en-shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes en-shake{10%,90%{translate:-2px 0}20%,80%{translate:4px 0}30%,50%,70%{translate:-7px 0}40%,60%{translate:7px 0}}
/* a right answer pops */
.en-motion .wc-option.correct{animation:en-pop-ok .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes en-pop-ok{0%{scale:1}45%{scale:1.04}100%{scale:1}}
/* the last 5 seconds */
.en-motion .wc-timer.en-hurry{border-color:#E0322B;background:#fff1ef;color:#c0281f;animation:en-hurry .8s ease-in-out infinite}
@keyframes en-hurry{0%,100%{scale:1;box-shadow:0 0 0 0 rgba(224,50,43,.35)}50%{scale:1.08;box-shadow:0 0 0 8px rgba(224,50,43,0)}}
/* new record badge: a light sweep */
.en-motion .en-shine{position:relative;overflow:hidden}
.en-motion .en-shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:en-sweep 2.6s ease-in-out .6s infinite}
@keyframes en-sweep{0%{left:-60%}60%,100%{left:130%}}
/* every button in a challenge answers the press */
.en-motion .wc-btn:active,.en-motion .gc-btn:active,.en-motion .wt-btn:active,.en-motion .lc-btn:active,.en-motion .wc-option:active:not(:disabled){scale:.97}
/* the main «جولة ثانية / ابدأ» button: a slow light sweep invites the click */
.en-motion .wc-btn:not(.secondary),.en-motion .gc-btn:not(.secondary){position:relative;overflow:hidden}
.en-motion .wc-btn:not(.secondary)::after,.en-motion .gc-btn:not(.secondary)::after{content:"";position:absolute;top:0;bottom:0;width:35%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:en-sweep 3.4s ease-in-out 1.2s infinite;pointer-events:none}
@media (prefers-reduced-motion: reduce){.en-plus{display:none}}