/* ============================================================================
   First-visit intro video overlay (scoped to #tarc-intro-video).
   Muted autoplay on the first visit, with an unmute toggle + skip; on end it
   fades out and hands control to the onboarding (see /js/intro.js).
   ============================================================================ */
#tarc-intro-video{position:fixed;inset:0;z-index:100000;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(125% 95% at 50% 16%,#ecfff8 0%,#e3f5ff 32%,#e9f1ff 62%,#f6fbff 100%);
  opacity:1;transition:opacity .6s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent}
#tarc-intro-video[hidden]{display:none}
#tarc-intro-video.tiv-out{opacity:0;pointer-events:none}

#tarc-intro-video video{width:100%;height:100%;object-fit:cover;background:transparent;display:block}
/* Phones are taller than the 9:16 cut once the browser chrome is subtracted, so
   `cover` would shave the captions. `contain` letterboxes onto the overlay's own
   gradient instead — the video's background is the same gradient, so the fit is
   seamless and no text is ever cut off. */
#tarc-intro-video.tiv-portrait video{object-fit:contain}
/* Bars land above and below the frame, so match the vertical cut's own top
   (#E7F5F0) and bottom (#E7EEFE) edge colours — the letterbox is invisible. */
#tarc-intro-video.tiv-portrait{background:linear-gradient(180deg,#E7F5F0 0%,#EBF2FA 55%,#E7EEFE 100%)}

/* controls */
#tarc-intro-video .tiv-controls{position:absolute;z-index:2;
  right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px}
#tarc-intro-video .tiv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(11,42,74,.14);background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:15px;color:#274a6e;
  cursor:pointer;box-shadow:0 8px 22px rgba(16,64,120,.10);
  transition:transform .18s,background .18s,box-shadow .18s}
#tarc-intro-video .tiv-btn:hover{background:rgba(255,255,255,.92);transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(16,64,120,.16)}
#tarc-intro-video .tiv-btn:active{transform:scale(.96)}
#tarc-intro-video .tiv-skip{padding:12px 22px;border-radius:100px}
#tarc-intro-video .tiv-unmute{padding:12px 18px;border-radius:100px}
#tarc-intro-video .tiv-unmute svg{width:20px;height:20px;stroke:#1E9D7F;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* when unmuted, hide the "slash" and swap the label via a data attribute */
#tarc-intro-video .tiv-unmute .tiv-slash{opacity:1;transition:opacity .2s}
#tarc-intro-video .tiv-unmute.on .tiv-slash{opacity:0}
#tarc-intro-video .tiv-unmute .tiv-wave{opacity:0;transition:opacity .2s}
#tarc-intro-video .tiv-unmute.on .tiv-wave{opacity:1}

@media (min-width:1024px){
  #tarc-intro-video .tiv-skip{padding:15px 30px;font-size:18px}
  #tarc-intro-video .tiv-unmute{padding:15px 24px;font-size:18px}
  #tarc-intro-video .tiv-unmute svg{width:24px;height:24px}
}