/* Hype videos: grid section and the vertical swipe player.
   Uses the colour and type tokens defined in index.html. */

[hidden]{display:none!important}
html{scroll-behavior:smooth}
html.locked,html.locked body{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.chip{
  display:inline-block;padding:4px 9px;border-radius:999px;
  background:linear-gradient(100deg,var(--gold),var(--coral) 55%,var(--rasp));
  color:var(--ink);font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 0 18px -2px rgba(255,122,77,.55);
}

/* ---------- section ---------- */
.vids{
  position:relative;z-index:3;
  padding-inline:16px;
  padding-block:clamp(56px,10vh,120px) clamp(72px,12vh,140px);
}
.vids::before{ /* darken the sky behind the grid so thumbnails read cleanly */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,6,16,.72) 18%,rgba(10,6,16,.82));
}
.vids-in{max-width:1120px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(22px,4vh,36px)}
.vhead{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left}
.vhead h2{
  margin:0;padding-left:.04em; /* room for the italic overhang */
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(2.6rem,7.4vw,5.4rem);line-height:.92;letter-spacing:-.01em;text-wrap:balance;
}
.vcount{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.vhead h2 em{
  font-style:italic;background:linear-gradient(90deg,var(--gold),var(--coral),var(--rasp));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;
}
/* ---------- grid ---------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:clamp(10px,1.6vw,18px)}
.tile{
  position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;
  background:
    radial-gradient(120% 70% at 30% 0%,rgba(224,53,111,.35),transparent 60%),
    linear-gradient(170deg,var(--plum),var(--ink));
  color:var(--cream);text-align:left;font:inherit;
  transform:translateZ(0);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;
  animation:tilein .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms);
}
@keyframes tilein{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.tile.ready video{opacity:1}
.tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,6,16,0) 45%,rgba(10,6,16,.88));
}
.tile-meta{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:1;
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
}
.tile-name{
  font-family:var(--display);font-weight:800;font-size:clamp(.82rem,2.6vw,1rem);line-height:1.1;
  text-transform:uppercase;letter-spacing:.02em;min-width:0;overflow-wrap:anywhere;
}
.tile-dur{font-family:var(--mono);font-size:.7rem;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}
.tile .chip{position:absolute;top:10px;left:10px;z-index:1;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.tile.is-new .chip{opacity:1;transform:none}
.tile-glyph{
  position:absolute;left:50%;top:50%;z-index:1;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  display:grid;place-items:center;background:rgba(10,6,16,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,243,226,.35);
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s;
}
.tile-glyph svg{width:20px;height:20px;margin-left:3px}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);border-color:rgba(255,210,122,.6);box-shadow:0 22px 44px -18px rgba(224,53,111,.75)}
.tile:hover video{transform:scale(1.04)}
.tile:hover .tile-glyph,.tile:focus-visible .tile-glyph{opacity:1;transform:none}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- player ---------- */
.player{position:fixed;inset:0;z-index:50;background:#050308;color:#fff3e2}
.feed{
  position:absolute;inset:0;overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:y mandatory;overscroll-behavior:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.feed::-webkit-scrollbar{display:none}
.slide{
  position:relative;height:100%;overflow:hidden;
  scroll-snap-align:start;scroll-snap-stop:always;
  background:
    radial-gradient(90% 60% at 50% 40%,rgba(61,12,56,.9),transparent 70%),
    #050308;
}
.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
.slide::after{ /* legibility scrim behind captions */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,3,8,.55),transparent 18%),
    linear-gradient(0deg,rgba(5,3,8,.75),transparent 32%);
}
.cap{
  position:absolute;z-index:2;left:20px;right:84px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 34px);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;
}
.cap .chip{display:none}
.slide.is-new .cap .chip{display:inline-block}
.cap-name{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.7rem,7vw,2.8rem);line-height:.95;letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--cream),var(--gold) 60%,var(--coral));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));overflow-wrap:anywhere;
}
.cap-sub{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--mute)}
.bar{position:absolute;z-index:2;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);height:3px;background:rgba(255,243,226,.14)}
.bar i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--gold),var(--coral),var(--rasp));
}
.pausemark{
  position:absolute;z-index:2;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(5,3,8,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,243,226,.3);
  opacity:0;transform:scale(1.15);transition:opacity .25s,transform .25s;pointer-events:none;
}
.pausemark svg{width:30px;height:30px;margin-left:5px}
.slide.paused .pausemark{opacity:1;transform:none}

.hud{
  position:absolute;z-index:5;left:0;right:0;top:0;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 0;
  display:flex;align-items:center;gap:10px;pointer-events:none;
}
.ppos{margin-right:auto;font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:var(--cream);font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hbtn{
  pointer-events:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,243,226,.25);background:rgba(5,3,8,.4);color:var(--cream);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s;
}
.hbtn svg{width:20px;height:20px}
.hbtn:hover{background:rgba(61,12,56,.7);border-color:rgba(255,210,122,.6)}
.hbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hbtn .i-off{display:none}
.player.muted .hbtn .i-on{display:none}
.player.muted .hbtn .i-off{display:block}

.pnav{position:absolute;z-index:5;right:16px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:10px}
@media (hover:hover) and (pointer:fine){.pnav{display:flex}}
.pnav .hbtn:disabled{opacity:.3;cursor:default}

.phint{
  position:absolute;z-index:6;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(100deg,var(--gold),var(--coral) 55%,var(--rasp));color:var(--ink);
  font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 30px -10px rgba(224,53,111,.8);animation:hintin .5s cubic-bezier(.2,.8,.2,1) both;
}
.phint svg{width:16px;height:16px}
@keyframes hintin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}

@media (min-width:700px){
  .cap{left:clamp(24px,6vw,64px);bottom:calc(env(safe-area-inset-bottom,0px) + 44px)}
}