/* Relentra Ascent explainer player (shared by explainer.html and the homepage hero) */
@property --ang{syntax:'<angle>';inherits:true;initial-value:0deg}
.player{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#02060e;container-type:inline-size;isolation:isolate;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 60px -20px rgba(246,193,111,.25)}
.player::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:5;
  background:linear-gradient(120deg,rgba(246,193,111,.7),rgba(255,255,255,.1) 40%,rgba(255,255,255,.06) 60%,rgba(140,196,246,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.player:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh;display:grid;place-items:center}
.player:fullscreen canvas{width:min(100vw,177.78vh);height:auto;aspect-ratio:16/9}
.player canvas{display:block;width:100%;height:100%;cursor:pointer}

.player .cap{position:absolute;left:50%;bottom:9%;translate:-50% 0;max-width:84%;z-index:2;pointer-events:none;
  padding:.35em .8em;border-radius:.5em;background:rgba(3,7,15,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:clamp(12px,2.05cqw,30px);font-weight:500;line-height:1.35;text-align:center;color:#f4f6fa;
  opacity:0;transition:opacity .25s,bottom .3s var(--ease)}
.player .cap.on{opacity:1}
.player.ui .cap{bottom:calc(clamp(30px,3.4cqw,40px) + clamp(8px,1.6cqw,18px)*2 + 4px)}
.player.nocc .cap{display:none}

/* Big play button with orbiting ring */
.player .big{position:absolute;inset:0;margin:auto;width:clamp(64px,11cqw,124px);height:clamp(64px,11cqw,124px);z-index:4;
  border:0;border-radius:50%;cursor:pointer;color:#fff;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,240,214,.22),rgba(10,16,30,.72) 62%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 50px rgba(246,193,111,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:opacity .35s,scale .35s var(--ease);animation:orbit 3.2s linear infinite}
.player .big::before,.player .big::after{content:'';position:absolute;inset:0;border-radius:50%;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--ang),rgba(255,184,77,0) 0deg,#ffb84d 30deg,#ffe3a8 58deg,#ff8f3c 90deg,rgba(255,143,60,0) 138deg,rgba(111,195,255,0) 178deg,#6fc3ff 212deg,#7d86ff 244deg,#b98cff 272deg,rgba(185,140,255,0) 322deg,rgba(255,184,77,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.player .big::after{filter:blur(10px)}
@keyframes orbit{to{--ang:360deg}}
.player .big:hover{scale:1.07}
.player .big svg{width:38%;height:38%;fill:#fff;filter:drop-shadow(0 0 10px rgba(246,193,111,.8))}
.player .big .i-play{margin-left:-4%}   /* path box sits right of centre; this lands it between its box centre and its visual centroid */
.player .big .i-replay,.player .big .i-load{display:none}
.player .big.replay .i-play{display:none}.player .big.replay .i-replay{display:block}
.player .big.loading .i-play{display:none}.player .big.loading .i-load{display:block;animation:spin 1s linear infinite;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
@keyframes spin{to{rotate:360deg}}
.player.playing .big{opacity:0;scale:.8;pointer-events:none}
.player .label{position:absolute;left:50%;top:calc(50% + clamp(44px,7.5cqw,84px));translate:-50% 0;z-index:4;pointer-events:none;
  font-size:clamp(11px,1.4cqw,16px);color:#d8dde6;letter-spacing:.02em;text-shadow:0 2px 12px #000;transition:opacity .3s}
.player.playing .label,.player.started .label{opacity:0}

/* Controls */
.player .ctrl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:clamp(6px,1.2cqw,14px);
  padding:clamp(8px,1.6cqw,18px) clamp(10px,2cqw,22px);
  background:linear-gradient(transparent,rgba(2,5,12,.85));opacity:0;transition:opacity .3s}
.player.ui .ctrl,.player:not(.started) .ctrl{opacity:1}
.player .cb{flex:none;width:clamp(30px,3.4cqw,40px);height:clamp(30px,3.4cqw,40px);border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;transition:background .2s}
.player .cb:hover{background:rgba(246,193,111,.25)}
.player .cb svg{width:52%;height:52%;fill:currentColor}
.player .cb[aria-pressed="false"]{color:#8d95a3}
.player .time{flex:none;font-size:clamp(11px,1.2cqw,14px);color:#cfd5df;font-variant-numeric:tabular-nums;min-width:7.5em}
.player .seek{flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;cursor:pointer;
  background:linear-gradient(90deg,#f6c16f,#ffe2ad var(--p,0%),rgba(255,255,255,.18) var(--p,0%))}
.player .seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff4dc;box-shadow:0 0 10px #f6c16f}
.player .seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff4dc;box-shadow:0 0 10px #f6c16f}
.player button:focus-visible,.player .seek:focus-visible{outline:2px solid #ffe2ad;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.player .big,.player .big::before,.player .big::after{animation:none}}
/* silent preview: no controls until someone presses play */
.player.preview .ctrl{opacity:0!important;pointer-events:none}
.player.preview .cap{bottom:6%}
@container (max-width:560px){.player .label{display:none}}