/* ==========================================================================
   خادر · KHADR — الانترو: صبّ الشاي في الكاس ← لوجو خادر ← الموقع
   ========================================================================== */
html:not(.intro-on) .intro{display:none}
html.intro-on body{overflow:hidden}
/* إيقاف حركات البطل حتى ينتهي الانترو، ثم تبدأ */
html.intro-on .hero *,html.intro-on .hero{animation-play-state:paused !important}

.intro{
  position:fixed;inset:0;z-index:500;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
  display:grid;place-items:center;
  background:
    radial-gradient(60% 55% at 50% 45%,rgba(39,70,52,.95),rgba(14,31,23,1) 70%),
    #0A1711;
  clip-path:circle(150% at 50% 45%);
  transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);
}
.intro.is-out{clip-path:circle(0% at 50% 45%);pointer-events:none}
.intro__glow{
  position:absolute;width:70vmin;height:70vmin;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-55%);
  background:radial-gradient(circle,rgba(201,169,106,.22),rgba(176,112,58,.06) 45%,transparent 70%);
  filter:blur(20px);transition:opacity .8s,transform 1s;
}
.intro.is-pouring .intro__glow{transform:translate(-50%,-55%) scale(1.15)}

.intro__stage{position:relative;width:min(78vmin,440px);aspect-ratio:400/520;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .4s ease-out;perspective:900px}
.intro__svg{width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(.7,0,.2,1),opacity .8s,filter .8s}
/* براد الشاي يميل حول بطنه؛ رأس الخشم ينزل فوق وسط الكاس (≈200,200) */
.intro__svg .pot{transform-origin:310px 130px;transform-box:view-box;transition:transform .75s cubic-bezier(.3,.9,.3,1.05);filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.intro.is-pouring .pot{transform:translate(-5px,38px) rotate(-40deg)}
.intro__svg .stream{stroke-dasharray:400;stroke-dashoffset:400;opacity:0;transition:stroke-dashoffset .35s ease-in,opacity .2s}
.intro.is-pouring .stream{stroke-dashoffset:0;opacity:1;transition-delay:.4s;animation:streamWobble .35s ease-in-out infinite alternate}
.intro__svg .steam{filter:blur(4px)}
.intro__svg .steam path{opacity:0;stroke-opacity:0;stroke-width:9;transform-box:fill-box}
.intro.is-hot .steam path{animation:introSteam 2.6s ease-in-out infinite}
.intro.is-hot .steam path:nth-child(2){animation-delay:.5s}
.intro.is-hot .steam path:nth-child(3){animation-delay:1s}
.intro .bubble{fill:#F3C08A;opacity:.6}
#intro-wave{animation:waveX 1.6s linear infinite}

/* المرحلة 2: اللوجو */
.intro__logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;pointer-events:none}
.intro__mark{width:78%;opacity:0;clip-path:inset(0 0 0 100%);filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.intro__tag{width:92%;opacity:0;transform:translateY(20px)}
.intro__en{color:var(--gold-soft);letter-spacing:.2em;font-size:.85rem;opacity:0}
.intro.is-logo .intro__svg{transform:scale(.6) translateY(-6%);opacity:0;filter:blur(10px)}
.intro.is-logo .intro__mark{animation:markIn 1.1s cubic-bezier(.7,0,.2,1) forwards}
.intro.is-logo .intro__tag{animation:tagIn .9s .75s cubic-bezier(.2,.9,.3,1) forwards}
.intro.is-logo .intro__en{animation:enIn 1.2s 1.1s ease forwards}
/* توهّج ذهبي على اللوجو بعد ظهوره */
.intro.is-logo .intro__mark{animation:markIn 1.1s cubic-bezier(.7,0,.2,1) forwards,goldGlow 1.6s 1s ease-in-out}
@keyframes goldGlow{50%{filter:drop-shadow(0 0 28px rgba(226,200,143,.75)) drop-shadow(0 20px 40px rgba(0,0,0,.6))}}

/* الواجهة */
.intro__ui{position:absolute;bottom:clamp(1.5rem,7vh,4rem);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;transition:opacity .5s}
.intro.is-logo .intro__ui{opacity:0}
.intro__meter{width:min(60vw,240px);height:4px;border-radius:4px;background:rgba(241,234,220,.12);overflow:hidden}
.intro__meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--gold-soft));border-radius:inherit}
.intro__hint{margin:0;color:rgba(241,234,220,.75);font-size:.95rem;font-weight:600;animation:hintPulse 2s ease-in-out infinite}
.intro__skip{
  position:absolute;top:1.1rem;left:1.1rem;padding:.45rem 1.1rem;border-radius:999px;font-weight:700;font-size:.85rem;
  color:rgba(241,234,220,.75);border:1px solid rgba(241,234,220,.25);background:rgba(241,234,220,.05);cursor:pointer;transition:.2s;
}
.intro__skip:hover{color:var(--gold-soft);border-color:var(--gold-soft)}

@keyframes streamWobble{from{stroke-width:6}to{stroke-width:8}}
@keyframes introSteam{0%{opacity:0;stroke-opacity:0;transform:translateY(10px)}35%{opacity:1;stroke-opacity:.35}100%{opacity:0;stroke-opacity:0;transform:translateY(-40px)}}
@keyframes waveX{from{transform:translateX(0)}to{transform:translateX(-60px)}}
@keyframes markIn{0%{opacity:1;clip-path:inset(0 0 0 100%)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes tagIn{to{opacity:1;transform:none}}
@keyframes enIn{from{opacity:0;letter-spacing:.2em}to{opacity:1;letter-spacing:.55em}}
@keyframes sweep{0%{left:-40%;opacity:1}100%{left:120%;opacity:1}}
@keyframes hintPulse{50%{opacity:.5}}

@media (prefers-reduced-motion:reduce){
  .intro{transition:opacity .4s}
  .intro.is-out{clip-path:none;opacity:0}
}