:root{
  --ink:#eaf1ff; --muted:#9fb3d9; --line:rgba(255,255,255,.12);
  --card:#0c1526; --accent:#ffb43d;
  --font:"Segoe UI","Noto Naskh Arabic",Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:grid; place-items:center; padding:26px;
  color:var(--ink); font-family:var(--font);
  background:radial-gradient(1200px 620px at 50% -10%,#16305c,#070c18 62%);
}
.wrap{width:min(1080px,100%)}
.head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 6px 14px; flex-wrap:wrap}
.head h1{margin:0; font-size:clamp(19px,2.4vw,27px); font-weight:800; letter-spacing:.2px}
.head span{font-size:13px; color:var(--muted)}
.frame{
  position:relative; border-radius:22px; overflow:hidden; background:#0a1224;
  border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.stage{position:relative; aspect-ratio:16/9; width:100%; overflow:hidden}
svg.scene{position:absolute; inset:0; width:100%; height:100%; display:block}
.paused *{animation-play-state:paused !important}
.bar{height:4px; background:rgba(255,255,255,.12)}
.bar i{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:right center;
  background:linear-gradient(90deg,var(--accent),#ff7a59);
  animation:progress 20s linear infinite;
}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.controls{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; flex-wrap:wrap;
}
.ctl{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 15px; border-radius:12px; font:inherit; font-size:14px; font-weight:600;
  color:var(--ink); background:rgba(255,255,255,.06); border:1px solid var(--line);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ctl:hover{transform:translateY(-2px); background:rgba(255,255,255,.1); box-shadow:0 10px 24px rgba(0,0,0,.35)}
.ctl:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ic{width:18px; height:18px; display:block}
.ctl[aria-pressed="true"] .p-pause{display:none}
.ctl[aria-pressed="false"] .p-play{display:none}
.tcode{margin-inline-start:auto; font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted)}
.tcode b{color:var(--accent)}
.hint{font-size:12px; color:#7d90b5}
.beats{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:14px}
.beat{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:15px; padding:13px 15px}
.beat b{display:block; font-size:13px; color:var(--accent); margin-bottom:5px; font-weight:700}
.beat p{margin:0; font-size:13px; line-height:1.65; color:#b9c9e6}

/* ---------- scene motion ---------- */
.sun{animation:rise 20s cubic-bezier(.3,.55,.25,1) infinite}
@keyframes rise{
  from{transform:translate(250px,506px)}
  to{transform:translate(250px,296px)}
}
.glowc{transform-box:fill-box; transform-origin:50% 50%; animation:pulse 4.2s ease-in-out infinite alternate}
@keyframes pulse{from{transform:scale(.93); opacity:.8}to{transform:scale(1.09); opacity:1}}

.cloud{--s:1; animation:drift 20s linear infinite}
.c1{--s:.78; animation-delay:-2s}
.c2{--s:.55; animation-delay:-9s}
.c3{--s:.42; animation-delay:-15s}
@keyframes drift{
  from{transform:translateX(-430px) scale(var(--s))}
  to{transform:translateX(1470px) scale(var(--s))}
}

.hill{animation:sway-far 22s ease-in-out infinite alternate}
@keyframes sway-far{from{transform:translateX(-8px)}to{transform:translateX(8px)}}

.tree{transform-box:fill-box; transform-origin:50% 100%; animation:sway 6.5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
.tw2 .tree{animation-delay:-2.4s}
.tw3 .tree{animation-delay:-4.1s}
.tw4 .tree{animation-delay:-1.2s}

.birdwrap{animation:fly 20s linear infinite}
.b1{--s:1}
.b2{--s:.68; animation-delay:-7.5s}
@keyframes fly{
  from{transform:translate(-170px,212px) scale(var(--s))}
  to{transform:translate(1430px,148px) scale(var(--s))}
}
.wing{transform-box:fill-box; transform-origin:50% 35%; animation:flap .52s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.38)}}

.bdrift{animation:bdrift 20s ease-in-out infinite}
@keyframes bdrift{from{transform:translateX(-52px)}to{transform:translateX(62px)}}
.bbob{animation:bbob 4.6s ease-in-out infinite alternate}
@keyframes bbob{from{transform:translateY(-16px)}to{transform:translateY(16px)}}
.btilt{transform-box:fill-box; transform-origin:50% 88%; animation:btilt 7s ease-in-out infinite alternate}
@keyframes btilt{from{transform:rotate(-3.2deg)}to{transform:rotate(3.2deg)}}
.arm{transform-box:fill-box; transform-origin:2% 98%; animation:wave .9s ease-in-out infinite alternate}
@keyframes wave{from{transform:rotate(-22deg)}to{transform:rotate(12deg)}}

.dawn{animation:dawn 20s linear infinite}
@keyframes dawn{0%{opacity:.72}16%{opacity:.14}42%{opacity:0}100%{opacity:0}}
.dusk{animation:dusk 20s linear infinite}
@keyframes dusk{0%{opacity:.34}22%{opacity:0}78%{opacity:0}93%{opacity:.5}100%{opacity:.78}}
.flash{animation:flash 20s linear infinite}
@keyframes flash{0%{opacity:.5}7%{opacity:0}100%{opacity:0}}

.title{animation:titleIn 20s linear infinite}
@keyframes titleIn{
  0%,66%{opacity:0; transform:translateY(20px)}
  76%{opacity:1; transform:translateY(0)}
  94%{opacity:1; transform:translateY(0)}
  100%{opacity:0; transform:translateY(-12px)}
}
.t1{
  font-family:var(--font); font-size:64px; font-weight:800; fill:#ffffff; text-anchor:middle;
  filter:drop-shadow(0 6px 16px rgba(8,14,30,.55));
}
.t2{
  font-family:var(--font); font-size:26px; font-weight:600; fill:#ffe9c4; text-anchor:middle;
  filter:drop-shadow(0 4px 12px rgba(8,14,30,.5));
}

@media (max-width:720px){
  .beats{grid-template-columns:1fr}
  .tcode{margin-inline-start:0}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scene *{animation-play-state:paused !important}
}