/* Hourglass Trader — reusable 3D "flip through the tools" coverflow + lightbox.
   Self-contained (hardcoded brand colors) so it drops onto any page: /results,
   the homepage, etc. Markup: a <div data-coverflow> wrapping .cover + .cover-dots.
   Enhanced by /tools-coverflow.js. */

.tool-coverflow-section{max-width:1120px;margin:76px auto;padding:0 24px}
.tool-coverflow-section .tc-head{text-align:center;margin-bottom:26px}
.tool-coverflow-section .tc-head h2{font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(24px,3.4vw,34px);margin:0 0 8px;color:#F5F6F7;letter-spacing:-.01em}
.tool-coverflow-section .tc-head p{color:rgba(245,246,247,0.62);margin:0;font-size:15.5px}

.tool-coverflow{position:relative;perspective:2000px}
.cover{position:relative}
.cover-stage{position:relative;height:clamp(340px,45vw,520px);transform-style:preserve-3d}
.cover-slide{position:absolute;top:0;left:50%;width:min(720px,88vw);
  transition:transform .58s cubic-bezier(.2,.75,.2,1),opacity .58s ease;cursor:pointer;will-change:transform,opacity}

/* browser-framed screenshot */
.cover-slide .shot{border-radius:15px;overflow:hidden;border:1px solid rgba(255,255,255,0.10);background:#0b0d10;
  box-shadow:0 24px 70px rgba(0,0,0,0.55);margin:0}
.cover-slide .shot .bar{display:flex;align-items:center;gap:6px;padding:11px 15px;background:#111418;border-bottom:1px solid rgba(255,255,255,0.09)}
.cover-slide .shot .bar i{width:10px;height:10px;border-radius:50%;background:#3a3f47;display:inline-block}
.cover-slide .shot .bar span{margin-left:10px;font-size:12.5px;color:rgba(245,246,247,0.6);letter-spacing:.05em}
.cover-slide .shot img{width:100%;display:block}
.cover-slide.is-active .shot{box-shadow:0 32px 90px rgba(0,0,0,0.62),0 0 0 1px rgba(212,175,55,0.4)}
.cover-slide.is-active .shot img{cursor:zoom-in}

.cover-slide .label{text-align:center;margin-top:16px;transition:opacity .4s ease}
.cover-slide:not(.is-active) .label{opacity:0}
.cover-slide .label b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:18.5px;display:block;color:#F5F6F7}
.cover-slide .label span{color:rgba(245,246,247,0.62);font-size:15px}

.cover-nav{position:absolute;top:36%;transform:translateY(-50%);z-index:30;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(16,19,24,0.82);border:1px solid rgba(255,255,255,0.12);
  color:#F0D060;font-size:28px;line-height:0;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .16s ease,border-color .16s ease,background .16s ease}
.cover-nav:hover{border-color:#D4AF37;background:rgba(24,27,33,0.95);transform:translateY(-50%) scale(1.08)}
.cover-nav.prev{left:0}.cover-nav.next{right:0}
@media(max-width:560px){.cover-nav{width:44px;height:44px;font-size:23px}}

.cover-dots{display:flex;gap:9px;justify-content:center;margin-top:16px}
.cover-dots .cdot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.18);border:0;cursor:pointer;padding:0;
  transition:background .2s ease,transform .2s ease}
.cover-dots .cdot.on{background:#D4AF37;transform:scale(1.3)}

/* lightbox (click active image to view closer) */
.tc-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(4,5,7,0.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;padding:4vw;cursor:zoom-out}
.tc-lightbox.open{opacity:1;visibility:visible}
.tc-lightbox img{max-width:94vw;max-height:88vh;border-radius:12px;border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 40px 120px rgba(0,0,0,0.7);transform:scale(.96);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.tc-lightbox.open img{transform:scale(1)}
.tc-lightbox .tc-close{position:absolute;top:20px;right:26px;width:44px;height:44px;border-radius:50%;
  background:rgba(20,23,28,0.9);border:1px solid rgba(255,255,255,0.14);color:#F5F6F7;font-size:24px;line-height:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.tc-lightbox .tc-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(245,246,247,0.7);
  font-family:'Inter',sans-serif;font-size:14px}

@media(prefers-reduced-motion:reduce){
  .cover-slide,.cover-nav,.cover-dots .cdot,.tc-lightbox,.tc-lightbox img{transition:none}
}