:root {
  --glass-fill: rgba(21,16,16,.62);
  --glass-bg:
    linear-gradient(160deg, rgba(243,232,204,.10), rgba(243,232,204,0) 60%) padding-box,
    linear-gradient(var(--glass-fill), var(--glass-fill)) padding-box,
    linear-gradient(150deg, rgba(243,232,204,.45), rgba(243,232,204,.05) 45%, rgba(243,232,204,.18)) border-box;
  --glass-shadow: 0 8px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  --glass-blur: blur(24px) saturate(150%);
}
/* =========================================================
   FEEDERS — "خلّي عينك تختار" animated music video
   Sizes use vmin so the same film works portrait and landscape.
   ========================================================= */
body.song { margin: 0; background: #151010; color: var(--cream); overflow: hidden; height: 100svh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage { position: fixed; inset: 0; overflow: hidden; background: var(--cream); isolation: isolate; }
.st-bg { position: absolute; inset: 0; background: var(--cream); }
.st-wipe {
  position: absolute; left: 50%; top: 50%; width: 40vmin; aspect-ratio: 1; margin: -20vmin 0 0 -20vmin;
  border-radius: 50%; transform: scale(0); z-index: 1;
}
.st-world { position: absolute; inset: 0; z-index: 2; }
.st-beat { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1.6vmin var(--sun), inset 0 0 18vmin rgba(255,217,138,.55); }

/* ---------- scenes ---------- */
.sc { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.sc .ctr { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); }
.abs { position: absolute; }
.ic { color: currentColor; }
.ic svg { width: 100%; height: auto; display: block; }
.vid { position: relative; overflow: hidden; background: var(--maroon); }
.vid video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* characters (geometric, on-brand) */
.char { position: absolute; bottom: 39%; width: 22vmin; display: grid; justify-items: center; }
.char__head { position: relative; width: 15vmin; aspect-ratio: 1; border-radius: 50%; display: block; }
.char__head i { position: absolute; top: 40%; width: 1.7vmin; height: 2.4vmin; border-radius: 1vmin; background: var(--ink); }
.char__head i:nth-child(1) { left: 30%; } .char__head i:nth-child(2) { right: 30%; }
.char__head b { position: absolute; left: 50%; top: 62%; width: 5vmin; height: 2.4vmin; margin-left: -2.5vmin; border: .7vmin solid var(--ink); border-top: 0; border-radius: 0 0 4vmin 4vmin; }
.char__body { width: 20vmin; height: 15vmin; border-radius: 9vmin 9vmin 2vmin 2vmin; margin-top: -1vmin; display: block; }
.char--guest { right: 14%; } .char--guest .char__head { background: var(--salmon); } .char--guest .char__body { background: var(--red); }
.char--waiter { left: 14%; } .char--waiter .char__head { background: var(--sun); } .char--waiter .char__body { background: var(--ink); }
.char--waiter .char__body::before { /* bow tie */
  content: ""; display: block; width: 6vmin; height: 2.6vmin; margin: 1.6vmin auto 0;
  background: conic-gradient(from 90deg, var(--red) 0 25%, transparent 0 50%, var(--red) 0 75%, transparent 0); border-radius: .6vmin;
}
.table { position: absolute; left: 6%; right: 6%; bottom: 33%; height: 2.4vmin; border-radius: 2vmin; background: var(--maroon); }
.table::after { content: ""; position: absolute; left: 46%; width: 8%; top: 100%; height: 7vmin; background: var(--maroon); border-radius: 0 0 1vmin 1vmin; }

/* speech bubble = the FEEDERS flag shape */
.bub { position: absolute; width: 20vmin; color: var(--ink); }
.bub .ic { width: 100%; }
.bub span { position: absolute; inset: 8% 14% 34% 10%; display: grid; place-items: center; font: 400 9vmin/1 var(--f-pop); color: var(--cream); filter: url(#rough); }
.bub--flip .ic { transform: scaleX(-1); }

.menu-card { position: absolute; width: 18vmin; aspect-ratio: 3 / 4; background: #fffaf0; border-radius: 1.4vmin; padding: 2.2vmin; box-shadow: 0 2vmin 4vmin -1vmin rgba(0,0,0,.35); display: grid; align-content: start; gap: 1.4vmin; }
.menu-card i { display: block; height: 1.1vmin; border-radius: 1vmin; background: #cdbfa3; }
.menu-card i:nth-child(3n) { width: 60%; } .menu-card i:nth-child(3n+1) { width: 85%; }

.q { position: absolute; font: 400 12vmin/1 var(--f-pop); color: var(--red); filter: url(#rough); }

.eye { position: absolute; width: 30vmin; aspect-ratio: 1; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 0 1.4vmin var(--ink); display: grid; place-items: center; overflow: hidden; }
.eye__iris { width: 62%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.2vmin var(--ink); }
.eye__iris video { width: 100%; height: 100%; object-fit: cover; }
.eye__lid { position: absolute; inset: 0; background: var(--ink); transform-origin: 50% 0; transform: scaleY(0); }

.photo { position: absolute; width: 40vmin; background: #fff; padding: 1.6vmin 1.6vmin 6vmin; box-shadow: 0 3vmin 6vmin -2vmin rgba(0,0,0,.35); }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo i { position: absolute; left: 1.6vmin; bottom: 3.6vmin; height: 1vmin; border-radius: 1vmin; background: #bbb; }
.photo i + i { bottom: 1.6vmin; }
.xmark { position: absolute; inset: -8%; }
.xmark path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; }

.spark { position: absolute; width: 6vmin; aspect-ratio: 1; background: var(--sun); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.swirl { position: absolute; }
.swirl path { fill: none; stroke: var(--maroon); stroke-width: 5; stroke-linecap: round; }

.phone-s { position: absolute; width: 30vmin; aspect-ratio: 9 / 18.5; border-radius: 4.4vmin; background: var(--ink); padding: 1.2vmin; box-shadow: 0 4vmin 8vmin -2vmin rgba(0,0,0,.5); }
.phone-s__screen { position: relative; width: 100%; height: 100%; border-radius: 3.4vmin; overflow: hidden; background: var(--cream); }
.phone-s__screen > * { position: absolute; inset: 0; }
.qr-s { display: grid; grid-template-columns: repeat(21, 1fr); inset: 22% 12% auto 12% !important; aspect-ratio: 1; height: auto; }
.qr-s i { background: var(--ink); } .qr-s i.o { background: transparent; }
.scan { position: absolute; left: 8%; right: 8%; top: 22%; height: .8vmin; border-radius: 1vmin; background: var(--red); box-shadow: 0 0 3vmin 1vmin rgba(213,37,24,.6); inset: auto; }
.burst { position: absolute; width: 9vmin; color: var(--sun); }

.tile { position: absolute; width: 17vmin; aspect-ratio: 9 / 16; border-radius: 2.2vmin; overflow: hidden; border: .7vmin solid var(--cream); box-shadow: 0 2vmin 4vmin -1vmin rgba(0,0,0,.45); }
.tile video { width: 100%; height: 100%; object-fit: cover; }
.swatch { position: absolute; width: 7vmin; height: 7vmin; border-radius: 50%; }

.check { position: absolute; width: 30vmin; }
.check circle, .check path { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.smile { position: absolute; width: 44vmin; }
.smile path { fill: none; stroke: var(--sun); stroke-width: 7; stroke-linecap: round; }
.blush { position: absolute; width: 7vmin; height: 4vmin; border-radius: 50%; background: var(--salmon); opacity: .8; }

.mark-big { position: absolute; width: 30vmin; color: var(--red); }
.crumb-s { position: absolute; width: 2vmin; height: 2vmin; border-radius: 50%; background: var(--red); }
.outline-draw { position: absolute; width: 26vmin; }
.outline-draw path { fill: none; stroke: var(--cream); stroke-width: 5; }

.word { position: absolute; width: 80vmin; color: var(--cream); }
.word svg { width: 100%; height: auto; display: block; }
.word path { transform-box: fill-box; transform-origin: 50% 100%; }

.wall-s { position: absolute; inset: -20% -10%; display: flex; gap: 2vmin; justify-content: center; opacity: .9; }
.wall-s__col { display: flex; flex-direction: column; gap: 2vmin; width: 19vmin; flex: none; }
.wall-s__col .tile { position: relative; width: 100%; border-width: .5vmin; }
.wall-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(110,18,12,.88), rgba(110,18,12,.55) 60%, rgba(110,18,12,.2)); }

.speed { position: absolute; height: .8vmin; border-radius: 1vmin; background: var(--cream); opacity: .8; }
.order-s { position: absolute; width: 36vmin; padding: 2vmin 2.4vmin; border-radius: 2.4vmin; background: #3a1814; color: #fff; border-inline-start: 1.6vmin solid var(--red); display: flex; align-items: center; gap: 2.4vmin; font: 700 3vmin/1.2 var(--f-body); }
.order-s b { font: 700 7vmin/1 var(--f-display); }
.order-s small { display: block; font-size: 2.2vmin; opacity: .75; }
.tablet-s { position: absolute; width: 46vmin; aspect-ratio: 16 / 11; border-radius: 3vmin; background: var(--ink); box-shadow: 0 0 0 1.2vmin #111; }
.strip { position: absolute; top: 30%; display: flex; gap: 2vmin; }
.strip .tile { position: relative; flex: none; }
.arrow-up { position: absolute; width: 22vmin; }
.arrow-up path { fill: none; stroke: var(--sun); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }

/* bridge UI */
.ui-phone { position: absolute; width: 40vmin; aspect-ratio: 9 / 16; border-radius: 5vmin; background: #fffaf0; box-shadow: 0 0 0 1.4vmin var(--ink), 0 4vmin 8vmin -2vmin rgba(0,0,0,.4); overflow: hidden; }
.ui-phone__head { height: 34%; position: relative; }
.ui-phone__head video { width: 100%; height: 100%; object-fit: cover; }
.ui-phone__body { padding: 3vmin; display: grid; gap: 2vmin; }
.chip-s { display: inline-flex; align-items: center; justify-content: center; gap: 1.4vmin; padding: 1.6vmin 2.6vmin; border-radius: 99px; background: var(--cream); color: var(--ink); font: 700 3.1vmin/1.2 var(--f-body); border: .5vmin solid rgba(32,26,26,.12); position: relative; }
.chip-s.on { background: var(--red); color: var(--cream-hi); border-color: var(--red); }
.chip-s s { text-decoration: none; position: relative; }
.chip-s s::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: .5vmin; background: currentColor; transform: scaleX(var(--k, 0)); transform-origin: 100% 50%; }
.note-s { min-height: 9vmin; padding: 1.6vmin 2vmin; border-radius: 1.6vmin; background: #fff; border: .4vmin solid rgba(32,26,26,.15); font: 500 2.8vmin/1.4 var(--f-body); color: var(--ink); }
.tap { position: absolute; width: 7vmin; aspect-ratio: 1; border-radius: 50%; background: rgba(32,26,26,.25); border: .5vmin solid var(--ink); }
.bell { position: absolute; width: 26vmin; aspect-ratio: 1; border-radius: 50%; background: var(--red); color: var(--cream); display: grid; place-items: center; box-shadow: 0 2vmin 5vmin -1vmin rgba(110,18,12,.6); }
.bell svg { width: 50%; }
.ring { position: absolute; width: 26vmin; aspect-ratio: 1; border-radius: 50%; border: .8vmin solid var(--red); }
.hand { position: absolute; width: 22vmin; color: var(--ink); }
.ban { position: absolute; width: 34vmin; }
.ban circle, .ban path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; }
.stamp { position: absolute; display: grid; place-items: center; width: 46vmin; aspect-ratio: 1; border-radius: 50%; border: 1.4vmin solid var(--red); color: var(--red); }
.stamp b { font: 400 18vmin/1 var(--f-display); }
.stamp small { font: 700 4vmin/1 var(--f-body); margin-top: -4vmin; }

/* outro */
.cta-s { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: min(92vw, 560px); }
.cta-s .btn { pointer-events: auto; }
.sc--live { pointer-events: none; }

/* ---------- lyrics ---------- */
.st-lyrics { position: absolute; z-index: 4; left: 4vw; right: 4vw; bottom: 17%; display: grid; place-items: center; pointer-events: none; }
.ly {
  grid-area: 1 / 1; visibility: hidden; text-align: center; direction: rtl;
  font: 400 clamp(26px, 7.4vmin, 84px)/1.25 "Lalezar", var(--f-pop); color: var(--ink);
  text-wrap: balance; max-width: 22ch;
}
.ly .w { display: inline-block; white-space: pre; }
.ly .hl { color: var(--red); }
.ly--en { font-family: "Bowlby One", var(--f-pop); letter-spacing: .02em; direction: ltr; }
.stage[data-tone="dark"] .ly { color: var(--cream); }
.stage[data-tone="dark"] .ly .hl { color: var(--sun); }
.stage[data-tone="red"] .ly { color: var(--cream-hi); }
.stage[data-tone="red"] .ly .hl { color: var(--sun); }
.ly-shadow { text-shadow: 0 .6vmin 3vmin rgba(0,0,0,.25); }

.st-sub {
  position: absolute; z-index: 4; left: 50%; top: calc(83% + 1.2vmin); transform: translateX(-50%);
  width: min(92vw, 900px); text-align: center; direction: ltr;
  font: 500 clamp(14px, 2.6vmin, 22px)/1.35 var(--f-body); color: var(--ink); opacity: 0; transition: opacity .2s;
}
.stage[data-tone="dark"] .st-sub, .stage[data-tone="red"] .st-sub { color: var(--cream-hi); }
.stage.cc-on .st-sub { opacity: .92; }

/* ---------- poster ---------- */
.poster {
  position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center;
  background: radial-gradient(ellipse 70% 50% at 50% 35%, rgba(213,37,24,.45), transparent 70%), radial-gradient(ellipse 80% 50% at 0% 100%, rgba(110,18,12,.5), transparent 72%), #151010; color: var(--cream); padding: 24px;
}
.poster__mark { width: clamp(70px, 12vmin, 120px); color: var(--cream); margin-bottom: 6px; }
.poster__kicker { font: 700 .9rem var(--f-body); letter-spacing: .12em; color: var(--sun); }
.poster__play { color: var(--ink) !important; background: var(--cream) !important; }
.poster__title { font: 400 clamp(3rem, 12vmin, 7rem)/1.1 "Lalezar", var(--f-pop); filter: url(#rough); }
.poster__play {
  width: clamp(84px, 14vmin, 120px); aspect-ratio: 1; border-radius: 50%; border: 0; margin: 10px 0;
  background: var(--cream-hi); color: var(--red); display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(255,246,229,.5); animation: pp 2s infinite; transition: transform .2s var(--ease);
}
.poster__play:hover { transform: scale(1.06); }
.poster__play svg { width: 44%; margin-inline-start: 8%; }
[dir="rtl"] .poster__play svg { margin-inline-start: 0; margin-inline-end: -8%; }
@keyframes pp { 70% { box-shadow: 0 0 0 26px rgba(255,246,229,0); } 100% { box-shadow: 0 0 0 0 rgba(255,246,229,0); } }
.poster__hint { opacity: .85; font-size: .95rem; }
.poster__back { margin-top: 8px; color: var(--cream-hi); opacity: .85; font-size: .95rem; }

/* ---------- controls ---------- */
.ctrl {
  position: fixed; z-index: 10; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(94vw, 760px); display: flex; align-items: center; gap: 8px; padding: 8px 10px; direction: ltr;
  border: 1px solid transparent; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: 999px; color: var(--cream);
  box-shadow: var(--glass-shadow), 0 14px 40px -14px rgba(0,0,0,.6); transition: opacity .4s, transform .4s var(--ease);
}
.ctrl.is-idle { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.ctrl__btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; font: 700 .8rem var(--f-body); text-decoration: none; }
.ctrl__btn:hover { background: rgba(243,232,204,.12); }
.ctrl__btn svg { width: 22px; height: 22px; }
.ctrl__btn .i-play { display: none; }
.ctrl.is-paused .i-play { display: block; } .ctrl.is-paused .i-pause { display: none; }
.ctrl__cc { border: 2px solid rgba(243,232,204,.4); width: 44px; }
.ctrl__cc[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.ctrl__time { font: 700 .85rem var(--f-body); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.ctrl__bar { position: relative; flex: 1; height: 44px; display: flex; align-items: center; }
.ctrl__range { width: 100%; margin: 0; accent-color: var(--red); height: 44px; background: transparent; position: relative; z-index: 1; }
.ctrl__marks { position: absolute; inset: 0; pointer-events: none; }
.ctrl__marks i { position: absolute; top: 50%; width: 2px; height: 12px; margin-top: -6px; background: var(--sun); opacity: .7; border-radius: 2px; }
@media (max-width: 520px) { .ctrl { gap: 2px; padding: 6px; } .ctrl__time { display: none; } }

/* ---------- sync tool ---------- */
.sync { position: fixed; z-index: 30; top: 12px; left: 12px; right: 12px; max-width: 560px; margin: auto; padding: 14px; border-radius: 14px; background: var(--ink); color: var(--cream); font: 500 14px/1.5 var(--f-body); direction: ltr; }
.sync textarea { width: 100%; margin: 8px 0; font: 12px/1.4 ui-monospace, monospace; background: #111; color: var(--mint); border-radius: 8px; border: 0; padding: 8px; }
.sync button { background: var(--cream); color: var(--ink); border: 0; border-radius: 99px; padding: 6px 14px; font-weight: 700; }
.sync kbd { background: #444; padding: 1px 6px; border-radius: 4px; }

.lyrics-text { position: fixed; z-index: -1; opacity: 0; pointer-events: none; }
.lyrics-text:focus-within { z-index: 40; opacity: 1; pointer-events: auto; inset: 20px; background: var(--cream); color: var(--ink); padding: 20px; overflow: auto; border-radius: 16px; }

@media (prefers-reduced-motion: reduce) { .poster__play { animation: none; } }