/* ============================================================
   Great Wall — Pickup Video Journey
   assets/css/app.css   (shared by all pages)
   ============================================================ */

@font-face{font-family:"Hespress";src:url("https://i1.hespress.com/wp-content/themes/hespress/fonts/Hespress-Medium.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Hespress";src:url("https://i1.hespress.com/wp-content/themes/hespress/fonts/Hespress-SemiBold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Hespress";src:url("https://i1.hespress.com/wp-content/themes/hespress/fonts/Hespress-Bold.woff") format("woff");font-weight:700;font-display:swap}

:root{
  --red:#F6252F;
  --red-dark:#C4141D;
  --red-soft:#FDECEC;
  --red-line:rgba(246,37,47,.30);

  --black:#0C0C0E;
  --gray-900:#171719;
  --off-white:#F7F7F5;
  --light:#EFEFED;
  --white:#FFFFFF;
  --muted:#8E8E8E;
  --ink:#0C0C0E;
  --ink-2:#5A5A5E;

  --r-btn:16px;
  --r-card:20px;
  --r-video:16px;
  --pad:18px;

  --shadow-soft:0 1px 2px rgba(12,12,14,.03), 0 8px 22px rgba(12,12,14,.06);
  --shadow-lift:0 8px 20px rgba(12,12,14,.10), 0 22px 44px rgba(12,12,14,.10);
  --shadow-red:0 8px 22px rgba(246,37,47,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.16,1,.3,1);
  --ar:"Hespress","IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif;
  --en:"Inter",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ar);
  background:var(--light);
  color:var(--ink);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:10px}
.en{font-family:var(--en);direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.wrap{
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  background:var(--light);
  padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 40px);
}
@media (min-width:900px){
  body{background:#E4E4E2}
  .wrap{
    background:var(--light);
    box-shadow:0 0 60px rgba(12,12,14,.10);
    min-height:100dvh;
  }
}

/* ---------- header ---------- */
.gw-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 18px) 0 16px;
    direction: ltr;
}

.gw-logo{display:flex;align-items:center;gap:10px}
.gw-logo img{width:52px;height:52px;border-radius:14px;object-fit:cover}
.gw-logo img.lockup{width:auto;height:49px;max-width:100%;border-radius:0;object-fit:contain}
.gw-logo .fallback{
  width:52px;height:52px;border-radius:14px;flex:none;
  background:linear-gradient(150deg,var(--red),var(--red-dark));
  display:grid;place-items:center;box-shadow:var(--shadow-red);
}
.gw-logo .fallback svg{width:24px;height:24px;fill:#fff;stroke:none}
.gw-logo b{display:block;font-family:var(--en);font-size:19px;font-weight:700;letter-spacing:-.02em}
.gw-logo span{display:block;font-size:10.5px;color:var(--ink-2);margin-top:2px;letter-spacing:.04em}

.gw-round{
  width:45px;height:45px;border-radius:50%;flex:none;
  background:var(--white);
  display:grid;place-items:center;
  box-shadow:var(--shadow-soft);
  transition:transform .18s var(--ease),background .2s var(--ease);
}
.gw-round svg{width:23px;height:23px;stroke:var(--ink);stroke-width:1.9;fill:none}
.gw-round:active{transform:scale(.92)}
.gw-round.is-on svg{fill:var(--red);stroke:var(--red)}
.gw-round .count{
  position:absolute;margin:-26px 0 0 26px;
  min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--red);color:#fff;
  font-family:var(--en);font-size:10.5px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--light);
}
.gw-head .spacer{margin-inline-start:auto}

/* back bar (inner pages) */
.gw-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 18px) 0 14px;
    direction: ltr;
}

.gw-bar .ttl{flex:1;min-width:0;text-align:center}
.gw-bar .ttl b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.gw-bar .ttl small{
  display:none;font-family:var(--en);font-size:10px;color:var(--muted);
  margin-top:3px;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- video block (mirrors the multistep form) ---------- */
.video-wrap{
  border-radius:var(--r-video);
  overflow:hidden;
  position:relative;
  background:#0C0C0E;
  margin:20px 0 30px;
}
.video-wrap .video-player{
  width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;display:block;max-width:100%;
  background:#0C0C0E;
}
.gw-unmute-overlay{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 14px 12px;
  border:none;border-radius:12px;
  background:rgba(0,0,0,.55);
  color:#fff;font-family:var(--ar);font-weight:600;font-size:14px;
  cursor:pointer;z-index:4;width:60%;max-width:280px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.gw-unmute-overlay svg{width:30px;height:30px}

/* ---------- section title ---------- */
.gw-title{
  font-size:22px;font-weight:700;line-height:1.5;
  letter-spacing:-.01em;margin:0 0 16px;
}
.gw-title em{font-style:normal;color:var(--red)}
.gw-sub{font-size:13.5px;color:var(--muted);margin:-10px 0 18px;line-height:1.7}

/* ---------- stage / video card ---------- */
.gw-list{display:flex;flex-direction:column;gap:15px}

.gw-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: start;
    background: var(--white);
    border: 1px solid #EDEDED;
    border-radius: 14px;
    padding: 14px;
    transition: transform .16s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
    height: 93px;
}


.gw-card:active{transform:scale(.985)}
@media (hover:hover){.gw-card:hover{box-shadow:var(--shadow-lift)}}

.gw-card.is-current {
    border-color: #EDEDED;
    background: #FFF6F6;
}

.gw-card .ico {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    flex: none;
    background: #FDF1ED;
    display: grid;
    place-items: center;
    border: 3px solid #F0D9D1;
    position: relative;
}
/* stage completion ring — app.js sets the dash offset from localStorage */
.gw-card .ico .ring{
  position:absolute;inset:-2.5px;
  width:auto;height:auto;
  transform:rotate(-90deg);
  overflow:visible;pointer-events:none;
}
.gw-card .ico .ring circle{
  fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:159.6;stroke-dashoffset:159.6;
  transition:stroke-dashoffset .9s var(--spring);
}
.gw-card .ico svg{width:30px;height:30px;stroke:var(--red)}
.gw-card .ico .pic{width:30px;height:30px;object-fit:contain;display:block}

.gw-card .txt{flex:1;min-width:0}
.gw-card .txt b {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

.gw-card .txt small {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--muted);
    font-weight: 400;
}
.gw-card .go{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--light);display:grid;place-items:center;
  transition:background .22s var(--ease);
}
.gw-card .go svg {
    width: 23px;
    height: 23px;
    stroke: var(--ink-2);
    stroke-width: 2.2;
}
.gw-card.is-current .go{background:var(--red)}
.gw-card.is-current .go svg{stroke:#fff}

/* thumbnail variant (video rows) */
.gw-card .shot {
    width: 95px;
    height: 100%;
    border-radius: 10px;
    flex: none;
    position: relative;
    overflow: hidden;
    background: #1a1a1e;
}


.gw-card .shot img{width:100%;height:100%;object-fit:cover}
.gw-card .shot .ph{
  position:absolute;inset:0;
  background-image:radial-gradient(120% 80% at 24% 14%,#5B7FA6 0,transparent 58%),
                   radial-gradient(90% 70% at 84% 80%,#2B3A4E 0,transparent 62%),
                   linear-gradient(160deg,#101A26,#243447 60%,#0D141C);
}
.gw-card .shot .dur{
  position:absolute;bottom:5px;inset-inline-end:5px;
  background:rgba(8,8,10,.66);color:#fff;
  font-family:var(--en);font-size:10px;font-weight:600;
  padding:2px 6px;border-radius:6px;
}
.gw-card .shot .glyph{
  position:absolute;inset:0;display:grid;place-items:center;
}
.gw-card .shot .glyph svg{width:22px;height:22px;fill:#fff;stroke:none;opacity:.92;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.gw-card .num{
  font-family:var(--en);font-size:12px;font-weight:700;color:var(--muted);
  width:24px;text-align:center;flex:none;
  display: none;
}
.gw-card.is-current .num{color:var(--red)}

/* progress under a card */
.gw-card .bar{
  display:none;height:3px;border-radius:3px;
  background:rgba(12,12,14,.10);margin-top:9px;overflow:hidden;
}
.gw-card .bar i{display:block;height:100%;background:var(--red);border-radius:3px;transition:width .5s var(--spring)}

/* small round action inside a card (unsave) */
.gw-card .act{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--light);display:grid;place-items:center;
  transition:background .2s var(--ease),transform .16s var(--ease);
  display: none;
}



.gw-card .act svg{width:16px;height:16px;stroke:var(--ink-2);stroke-width:1.9}
.gw-card .act:active{transform:scale(.9)}
.gw-card .act.is-on svg{fill:var(--red);stroke:var(--red)}
@media (hover:hover){.gw-card .act:hover{background:var(--red-soft)}.gw-card .act:hover svg{stroke:var(--red)}}

/* ---------- stage strip on the category page ---------- */
.gw-strip{
  display:flex;gap:8px;overflow-x:auto;
  padding:2px 0 18px;scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
}
.gw-strip::-webkit-scrollbar{display:none}
.gw-chip{
  flex:none;padding:10px 16px;border-radius:999px;
  background:var(--white);box-shadow:var(--shadow-soft);
  font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:background .22s var(--ease),color .22s var(--ease),transform .16s var(--ease);
}
.gw-chip.is-on{background:var(--red);color:#fff;box-shadow:var(--shadow-red)}
.gw-chip:active{transform:scale(.95)}

/* ---------- stage header block (category page) ---------- */
.gw-stagehead{
  display:flex;align-items:center;gap:14px;
  background:var(--white);border-radius:var(--r-card);
  padding:16px;box-shadow:var(--shadow-soft);margin-bottom:18px;
}
.gw-stagehead .ico{
  width:58px;height:58px;border-radius:50%;flex:none;
  background:var(--red-soft);display:grid;place-items:center;
  border:1.5px solid rgba(246,37,47,.14);
}
.gw-stagehead .ico svg{width:24px;height:24px;stroke:var(--red)}
.gw-stagehead .txt{flex:1;min-width:0}
.gw-stagehead .txt b{display:block;font-size:18px;font-weight:700}
.gw-stagehead .txt small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.gw-stagehead .txt .bar{display:block;height:4px;border-radius:3px;background:var(--light);margin-top:10px;overflow:hidden}
.gw-stagehead .txt .bar i{display:block;height:100%;background:var(--red);border-radius:3px}

/* ---------- empty state ---------- */
.gw-empty{
  text-align:center;padding:56px 20px;
  background:var(--white);border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
}
.gw-empty .ico{
  width:72px;height:72px;border-radius:50%;margin:0 auto 18px;
  background:var(--red-soft);display:grid;place-items:center;
  border:1.5px solid rgba(246,37,47,.14);
}
.gw-empty .ico svg{width:30px;height:30px;stroke:var(--red);stroke-width:1.7}
.gw-empty b{display:block;font-size:17px;font-weight:700;margin-bottom:8px}
.gw-empty p{font-size:13.5px;color:var(--muted);line-height:1.9;margin-bottom:22px}

/* ---------- buttons ---------- */
.gw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 22px;border-radius:var(--r-btn);
  font-size:15px;font-weight:700;
  transition:transform .16s var(--ease),filter .2s var(--ease);
}
.gw-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}
.gw-btn:active{transform:scale(.97)}
.gw-btn-red{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;box-shadow:var(--shadow-red)}
.gw-btn-ghost{background:var(--white);color:var(--ink);box-shadow:var(--shadow-soft)}
.gw-btn-block{width:100%}
.gw-actions{display:flex;gap:10px;margin-top:22px}
.gw-actions .gw-btn{flex:1}

/* ---------- toast ---------- */
.gw-toast{
  position:fixed;z-index:90;
  left:50%;bottom:28px;transform:translate(-50%,12px);
  background:rgba(12,12,14,.94);color:#fff;
  padding:12px 20px;border-radius:999px;
  font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-lift);
  opacity:0;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--spring);
}
.gw-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- entrance ---------- */
@keyframes gwIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gw-in{animation:gwIn .38s var(--spring) both}
.gw-in:nth-child(2){animation-delay:.04s}
.gw-in:nth-child(3){animation-delay:.08s}
.gw-in:nth-child(4){animation-delay:.12s}
.gw-in:nth-child(5){animation-delay:.16s}
.gw-in:nth-child(6){animation-delay:.2s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}


/* ---------- fullscreen player (watch.php) ---------- */
.gw-player{
  position:fixed;inset:0;z-index:40;
  max-width:480px;margin-inline:auto;
  background:#000;overflow:hidden;
  overscroll-behavior:none;
}
.gw-player .stage{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;background:#000;
}
.gw-player .shade{position:absolute;inset-inline:0;pointer-events:none}
.gw-player .shade.top{top:0;height:210px;background:linear-gradient(to bottom,rgba(0,0,0,.72),transparent)}
.gw-player .shade.bot{bottom:0;height:320px;background:linear-gradient(to top,rgba(0,0,0,.86),transparent)}

.gw-player .topbar{
  position:absolute;inset-inline:0;top:0;z-index:3;
  display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 20px) var(--pad) 0;
}
.gw-player .stagename{
  flex:1;min-width:0;text-align:center;
  color:#fff;font-size:15px;font-weight:700;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gw-player .pill{
  flex:none;color:#fff;font-size:13px;font-weight:700;
  padding:7px 13px;border-radius:12px;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.gw-player .orb{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .18s var(--ease),background .2s var(--ease);
}
.gw-player .orb svg{width:19px;height:19px;stroke:#fff;stroke-width:2.1;fill:none}
.gw-player .orb:active{transform:scale(.92)}
.gw-player .orb.save.is-on svg{fill:var(--red);stroke:var(--red)}

/* transport cluster: seek back / play-pause / seek forward.
   direction:ltr because seek controls map to the video timeline
   rather than to the reading order. */
.gw-player .deck{
  position:absolute;z-index:3;
  top:50%;inset-inline:0;
  transform:translateY(-50%);
  direction:ltr;
  display:flex;align-items:center;justify-content:center;
  gap:30px;padding-inline:var(--pad);
  pointer-events:none;              /* gaps stay tappable for show/hide */
  transition:opacity .25s var(--ease);
}
.gw-player .deck > *{pointer-events:auto}

.gw-player .bigplay{
  width:72px;height:72px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  box-shadow:var(--shadow-red);
  transition:transform .2s var(--spring),opacity .25s var(--ease);
}
.gw-player .bigplay svg{
  width:26px;height:26px;fill:#fff;stroke:none;grid-area:1/1;
  transition:opacity .2s var(--ease),transform .3s var(--spring);
}
.gw-player .bigplay .p{transform:translateX(3px)}
.gw-player .bigplay .s{opacity:0;transform:scale(.55)}
.gw-player .bigplay:active{transform:scale(.93)}
.gw-player.is-playing .bigplay .p{opacity:0;transform:translateX(3px) scale(.55)}
.gw-player.is-playing .bigplay .s{opacity:1;transform:scale(1)}

.gw-player .skip{
  width:52px;height:52px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  color:#fff;
  transition:transform .2s var(--spring),background .2s var(--ease);
}
.gw-player .skip svg{
  width:28px;height:28px;stroke:currentColor;fill:none;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.55));
}
.gw-player .skip:active{transform:scale(.86)}
@media (hover:hover){.gw-player .skip:hover{background:rgba(255,255,255,.16)}}
/* a quick spin confirms the seek landed */
@keyframes gwSeekBack{from{transform:rotate(0)}to{transform:rotate(-40deg)}}
@keyframes gwSeekFwd{from{transform:rotate(0)}to{transform:rotate(40deg)}}
.gw-player .skip.is-hit svg{animation:gwSeekBack .34s var(--spring)}
.gw-player .skip.is-hit:last-child svg{animation-name:gwSeekFwd}

/* the whole cluster steps aside during playback; a tap on the
   picture brings it back with pause in the middle */
.gw-player .topbar,.gw-player .botbar,.gw-player .shade{
  transition:opacity .3s var(--ease);
}
.gw-player.is-idle .topbar,
.gw-player.is-idle .botbar,
.gw-player.is-idle .shade{opacity:0}
.gw-player.is-idle .topbar,
.gw-player.is-idle .botbar{pointer-events:none}
.gw-player.is-idle .deck{opacity:0}
.gw-player.is-idle .deck > *{pointer-events:none}
.gw-player.is-idle .bigplay{transform:scale(.72)}
.gw-player.is-idle .skip{transform:scale(.72)}
/* a pointer over the picture, or keyboard focus, always brings it back */
@media (hover:hover){
  .gw-player.is-idle:hover .topbar,
  .gw-player.is-idle:hover .botbar,
  .gw-player.is-idle:hover .shade{opacity:1}
  .gw-player.is-idle:hover .topbar,
  .gw-player.is-idle:hover .botbar{pointer-events:auto}
  .gw-player.is-idle:hover .deck{opacity:1}
  .gw-player.is-idle:hover .deck > *{pointer-events:auto}
  .gw-player.is-idle:hover .bigplay,
  .gw-player.is-idle:hover .skip{transform:none}
}
.gw-player.is-idle .deck:focus-within{opacity:1}
.gw-player.is-idle .deck:focus-within > *{pointer-events:auto}
.gw-player.is-idle .deck:focus-within .bigplay,
.gw-player.is-idle .deck:focus-within .skip{transform:none}

.gw-player .botbar{
  position:absolute;inset-inline:0;bottom:0;z-index:3;
  padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 30px);
}
.gw-player .botbar .head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gw-player .vtitle{
  flex:1;min-width:0;
  color:#fff;font-size:20px;font-weight:700;line-height:1.45;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}

.gw-player .segs{display:flex;gap:5px;margin-bottom:16px}
.gw-player .seg{
  flex:1;height:4px;border-radius:3px;
  background:rgba(255,255,255,.30);
  position:relative;overflow:hidden;
}
.gw-player .seg.is-done{background:#fff}
/* current video: a brighter track that fills red as it plays */
.gw-player .seg.is-now{background:rgba(255,255,255,.5)}
.gw-player .seg i{
  display:block;height:100%;width:0;border-radius:3px;
  background:var(--red);
  transition:width .25s linear;
}
.gw-player .seg.is-now i{box-shadow:0 0 10px rgba(246,37,47,.65)}

.gw-player .nav{display:flex;gap:10px}
.gw-player .nbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;border-radius:var(--r-btn);
  font-size:15px;font-weight:700;color:#fff;
  transition:transform .16s var(--ease),opacity .2s var(--ease);
}
.gw-player .nbtn svg{width:17px;height:17px;flex:none}
.gw-player .nbtn:active{transform:scale(.97)}
.gw-player .nbtn.ghost{
  flex:1;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.gw-player .nbtn.ghost.is-off{opacity:.38;pointer-events:none}
.gw-player .nbtn.solid{
  flex:1;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  box-shadow:var(--shadow-red);
}


/* ============================================================
   Motion
   .gw-in is a load keyframe with no JS. When app.js sets
   html.js-anim it becomes an IntersectionObserver reveal, so
   cards animate as they scroll into view instead of all at once.
   ============================================================ */
.js-anim .gw-in{
  animation:none;
  opacity:0;transform:translateY(16px) scale(.99);
  transition:opacity .52s var(--spring),transform .52s var(--spring);
  will-change:opacity,transform;
}
.js-anim .gw-in.is-in{opacity:1;transform:none;will-change:auto}

/* page shell fades up once per load */
@keyframes gwWrapIn{from{opacity:0}to{opacity:1}}
.js-anim .wrap{animation:gwWrapIn .4s var(--ease) both}

/* header + hero sit above the fold, so they lead the sequence */
@keyframes gwDropIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.js-anim .gw-head,
.js-anim .gw-bar{animation:gwDropIn .5s var(--spring) both}
.js-anim .video-wrap{animation:gwIn .55s var(--spring) both;animation-delay:.08s}
.js-anim .gw-title{animation:gwIn .5s var(--spring) both;animation-delay:.14s}
.js-anim .gw-sub{animation:gwIn .5s var(--spring) both;animation-delay:.18s}

/* save / bookmark pop — app.js adds .is-pop only on a real click */
@keyframes gwPop{
  0%{transform:scale(1)}
  38%{transform:scale(1.3)}
  62%{transform:scale(.94)}
  100%{transform:scale(1)}
}
.is-pop svg{animation:gwPop .44s var(--spring)}

/* the saved-count bubble lands with a pop of its own */
@keyframes gwBadgeIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.gw-round .count{animation:gwBadgeIn .34s var(--spring) both}

/* press feedback */
.gw-card,.gw-btn,.gw-round,.gw-player .nbtn,.gw-player .orb{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.gw-btn{transition:transform .16s var(--ease),box-shadow .24s var(--ease),filter .2s var(--ease)}
.gw-btn:active{transform:scale(.96)}
@media (hover:hover){
  .gw-btn-red:hover{filter:brightness(1.06)}
  .gw-round:hover{background:var(--off-white)}
}

/* chevron nudges toward its direction on hover / press */
.gw-card .go svg{transition:transform .24s var(--spring)}
.gw-card:active .go svg{transform:translateX(-3px)}
@media (hover:hover){.gw-card:hover .go svg{transform:translateX(-3px)}}
.gw-card .go{transition:background .22s var(--ease),transform .22s var(--spring)}
@media (hover:hover){.gw-card:hover .go{background:var(--red-soft)}}

/* thumbnail lifts slightly with its card */
.gw-card .shot img,.gw-card .shot .ph{transition:transform .4s var(--spring)}
@media (hover:hover){.gw-card:hover .shot img,.gw-card:hover .shot .ph{transform:scale(1.06)}}

/* ---------- player motion ---------- */
@keyframes gwBarUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes gwBarDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
/* backwards, not both: a retained animation end-state would outrank
   the .is-idle rules below and the bars could never fade out */
.js-anim .gw-player .topbar{animation:gwBarDown .5s var(--spring) backwards;animation-delay:.06s}
.js-anim .gw-player .botbar{animation:gwBarUp .55s var(--spring) backwards;animation-delay:.1s}

/* the paused play button breathes so it reads as the thing to tap */
@keyframes gwBreathe{
  0%,100%{box-shadow:0 8px 22px rgba(246,37,47,.30)}
  50%{box-shadow:0 8px 30px rgba(246,37,47,.55)}
}
.gw-player:not(.is-playing):not(.is-idle) .bigplay{animation:gwBreathe 2.4s var(--ease) infinite}
.gw-player .bigplay svg{transition:opacity .2s var(--ease),transform .28s var(--spring)}

/* segments fill left-to-right as they complete */
.gw-player .seg{transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.gw-player .nbtn{transition:transform .16s var(--ease),opacity .2s var(--ease),filter .2s var(--ease)}
@media (hover:hover){.gw-player .nbtn.solid:hover{filter:brightness(1.08)}
  .gw-player .nbtn.ghost:hover{background:rgba(255,255,255,.26)}}
.gw-player .nbtn svg{transition:transform .24s var(--spring)}
.gw-player .nbtn.solid:active svg{transform:translateX(4px)}
.gw-player .nbtn.ghost:active svg{transform:translateX(-4px)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js-anim .gw-in{opacity:1;transform:none}
  .gw-player:not(.is-playing):not(.is-idle) .bigplay{animation:none}
  .gw-player .skip.is-hit svg{animation:none}
  .is-pop svg{animation:none}
}


/* ============================================================
   Client-side navigation chrome
   ============================================================ */
/* the watch player is a fixed layer — lock the page behind it.
   .gw-fixed is set by the router; :has covers the no-JS load. */
html.gw-fixed,html.gw-fixed body{overflow:hidden;height:100%}
html:has(.gw-player),html:has(.gw-player) body{overflow:hidden}

.wrap{transition:opacity .18s var(--ease)}
.wrap.is-swap{opacity:0}

.gw-navbar{
  position:fixed;z-index:100;
  top:0;inset-inline:0;height:3px;
  pointer-events:none;
}
.gw-navbar i{
  display:block;height:100%;width:0;
  background:linear-gradient(to left,var(--red),var(--red-dark));
  border-start-end-radius:3px;border-end-end-radius:3px;
  transition:width .3s var(--ease),opacity .3s var(--ease);
  opacity:0;
}
.gw-navbar.is-on i{width:80%;opacity:1}
.gw-navbar.is-done i{width:100%;opacity:0;transition:width .18s var(--ease),opacity .28s var(--ease) .1s}

@media (prefers-reduced-motion:reduce){
  .wrap.is-swap{opacity:1}
}


/* ---------- hold-to-speed badge (watch.php) ---------- */
.gw-player .boost{
  position:absolute;z-index:4;
  top:calc(env(safe-area-inset-top) + 84px);
  inset-inline:0;margin-inline:auto;
  width:-moz-max-content;width:max-content;
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:13.5px;font-weight:700;
  pointer-events:none;
  opacity:0;transform:translateY(-8px) scale(.92);
  transition:opacity .18s var(--ease),transform .26s var(--spring);
}
.gw-player .boost svg{width:15px;height:15px;fill:#fff;stroke:none}
.gw-player.is-boost .boost{opacity:1;transform:none}