/* ============================================================
   ReachIQ Full Tunnel hero.
   Loaded front-page-only (see functions.php is_front_page guard).
   Scoped to .tun-* so it never fights base.css / mockups.css.
   Background is plain white; sprites plus their soft shadows are
   the only visual interest. Toast + feed styles are kept for a
   tuned re-enable later (SHOW_TOASTS is false in tunnel.js).
   ============================================================ */

.tun-hero{position:relative;width:100%;background:var(--paper)}
.tunnel-track{height:100vh}
.tun-hero.scrollable .tunnel-track{height:350vh}
.tunnel-stage{
  position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;background:var(--paper);
}

.tun-field{position:absolute;inset:0;z-index:2;pointer-events:none}
.tun-obj{position:absolute;left:0;top:0;will-change:transform;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .5s ease}
.tun-obj.ready{opacity:1}
img.tun-obj{object-fit:contain}
.tun-obj.standin{
  border-radius:22%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 40px rgba(34,33,36,.16);
  background-image:linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,0) 58%);
}
.tun-obj.standin svg{width:46%;height:46%}

.tun-inner{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;pointer-events:none;
}
.tun-inner .hero{padding:0;margin:0;max-width:900px;isolation:auto}
.tun-inner .hero-ctas .btn{pointer-events:auto}
.tun-inner .hero-sub{color:var(--ink-2)}
.tun-glow{
  position:absolute;left:50%;top:50%;z-index:-1;
  width:min(980px,94vw);height:min(560px,82vh);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,255,255,.96), rgba(255,255,255,.74) 55%, transparent 100%);
}
.cta-pulse .btn-coral{animation:ctaPulse .7s ease 1}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.tun-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--ink-4);
  transition:opacity .5s ease;pointer-events:none;
}
.tun-hint svg{width:16px;height:16px;display:block;animation:chevBounce 1.6s ease-in-out infinite}
@keyframes chevBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.tunnel-stage.scrolled .tun-hint{opacity:0}
.tun-hero:not(.scrollable) .tun-hint,.tun-hero:not(.scrollable) .tun-prog{display:none}

.tun-prog{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:9;background:rgba(34,33,36,.08)}
.tun-prog i{display:block;height:100%;width:0;background:var(--coral)}

/* subtle bottom fade kept only so the sprite field never visibly clips
   at the stage edge (white on white otherwise invisible) */
.tun-handoff{position:absolute;left:0;right:0;bottom:0;height:90px;z-index:6;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--paper))}

/* big-calendar finale, eases to center-right */
.fin-cal{
  position:absolute;left:50%;top:50%;z-index:4;width:320px;height:320px;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) translate(30vw,4vh) scale(.35) rotate(10deg);
  transition:opacity .8s ease, transform .95s cubic-bezier(.22,1,.36,1);
}
.tunnel-stage.finale .fin-cal{opacity:1;transform:translate(-50%,-50%) translate(17vw,1vh) scale(1) rotate(-4deg)}
.fin-cal .tun-obj{position:static;width:100%!important;height:100%!important;visibility:visible;opacity:1}

/* ---- STATUS TOAST SYSTEM (disabled via SHOW_TOASTS=false in the JS;
        styles + markup kept for the tuned re-enable later) ---- */
.tun-toasts{position:absolute;inset:0;z-index:8;pointer-events:none}
.toast-pop{
  position:absolute;width:236px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 20px 48px rgba(30,41,57,.20);padding:12px 13px;font-family:var(--font-body);
  opacity:0;transform:scale(.72);will-change:transform,opacity;
  transition:opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.toast-pop.in{opacity:1;transform:scale(1)}
.toast-pop.out{transition:opacity .48s ease, transform .5s cubic-bezier(.4,0,.2,1)}
.tp-head{display:flex;align-items:center;gap:9px}
.tp-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.tp-ic svg{width:16px;height:16px}
.tp-title{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.tp-sub{font-size:12px;font-weight:500;color:var(--ink-2);line-height:1.4;margin-top:7px}
.tp-chip{display:inline-flex;align-items:center;margin-top:9px;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:8px;background:var(--coral-tint);color:var(--coral-hover)}
.ac-coral .tp-ic{background:var(--coral-tint);color:var(--coral)}
.ac-green .tp-ic{background:var(--green-tint);color:#2f9e57}
.ac-blue  .tp-ic{background:var(--blue-tint); color:var(--blue)}
.ac-teal  .tp-ic{background:var(--teal-tint); color:#0f97a2}

.tun-feed{position:absolute;left:22px;bottom:22px;z-index:8;display:flex;flex-direction:column;gap:8px;
  width:252px;pointer-events:none}
.feed-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 26px rgba(30,41,57,.12);padding:8px 12px;
  opacity:0;transform:translateY(10px);transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.4,.64,1)}
.feed-row.in{opacity:1;transform:none}
.feed-row.fade{opacity:0;transform:translateY(4px)}
.feed-dot{width:9px;height:9px;border-radius:50%;flex:none}
.fd-coral{background:var(--coral)} .fd-green{background:var(--green)}
.fd-blue{background:var(--blue)} .fd-teal{background:var(--teal)}
.feed-txt{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.feed-time{font-size:10.5px;font-weight:500;color:var(--ink-4);margin-top:1px}

@media (max-width:760px){
  .tun-inner .hero{max-width:100%}
  .fin-cal{width:180px;height:180px}
  .tun-feed{left:12px;bottom:14px;width:210px}
  .toast-pop{width:210px}
}
@media (prefers-reduced-motion:reduce){
  .tun-obj{visibility:visible;opacity:1;transition:none}
  .toast-pop{transition:opacity .2s ease}
  .fin-cal,.feed-row{transition:opacity .3s ease}
}