/* =========================================================
   T-FIBER HERO — Digital Fiber Network Visualization
   Reusable component. Include after the main site stylesheet.
   ========================================================= */

:root{
  --tfiber-dark:   #071B30;
  --tfiber-dark-2: #0B2A4A;
  --tfiber-blue:   #2E6E9E;
  --tfiber-cyan:   #4FC3F7;
  --tfiber-green:  #3DD16B;
  --tfiber-orange: #F7941D;
}

/* =================== HERO CAROUSEL SHELL =================== */
.hero-carousel{ position:relative; }
.hero-slides{ position:relative; min-height:600px; }
.hero-slide{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease;
}
.hero-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; z-index:2; }

.hero-slide .tfiber-hero-inner{ min-height:600px; height:100%;padding-left: 120px; }

/* =================== SLIDE BACKGROUND IMAGE =================== */
/* Drop this as the FIRST child inside any .hero-slide to give that one
   banner its own full-bleed background image/photo, e.g.:

     <article class="hero-slide" data-slide-index="3">
       <div class="hero-slide-bg" style="background-image:url('images/your-photo.jpg')"></div>
       <div class="container tfiber-hero-inner"> ...text/CTA/visual as usual... </div>
     </article>

   It fills the slide exactly — no distortion, no gaps, no overflow — and
   scales identically at every breakpoint since it inherits the slide's own
   box rather than using a fixed size. A navy tint is applied automatically
   so text stays legible regardless of how bright/busy the source photo is;
   adjust the gradient below if a specific photo needs a lighter/heavier tint. */
.hero-slide-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-slide-bg::after{
  content:"";
  position:absolute;
  inset:0;
  /*background:linear-gradient(100deg, rgba(7,27,48,.92) 30%, rgba(7,27,48,.6) 65%, rgba(7,27,48,.4) 100%);*/
}

/* Slide 2/3 example visual treatments (data-driven, see heroSlidesData) */
.hero-slide-visual-icon{
  position:relative; z-index:2; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  min-height:420px;
}
.hero-slide-visual-icon svg{ width:100%; max-width:520px; height:auto; }

.hero-slide[data-bg="pattern"] .tfiber-network-wrap,
.hero-slide[data-bg="pattern"] .hero-slide-visual-icon{
  min-height:420px;
}
.hero-slide[data-bg="pattern"]::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(79,195,247,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,195,247,.08) 1px, transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
}

/* Carousel controls */
.hero-nav-arrow{
  position:absolute; top:44%; transform:translateY(-50%); z-index:6;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06); color:#fff; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.hero-nav-arrow:hover, .hero-nav-arrow:focus-visible{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.6); }
.hero-nav-prev{ left:20px; }
.hero-nav-next{ right:20px; }

.hero-dots{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:6;
  display:flex; gap:9px;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  background:transparent; padding:0; transition:background .2s ease, width .2s ease, border-radius .2s ease;
}
.hero-dots button.is-active{
  background:var(--tfiber-orange, #F7941D); border-color:var(--tfiber-orange, #F7941D);
  width:22px; border-radius:5px;
}

@media (max-width:640px){
  .hero-nav-arrow{ width:34px; height:34px; font-size:.7rem; }
  .hero-nav-prev{ left:8px; }
  .hero-nav-next{ right:8px; }
}

/* =================== LEADERSHIP OVERLAY (slide 1) =================== */
/* CM / Deputy CM badges, top-left */
.hero-leaders-top{
  position:absolute; top:70px; left:40px; z-index:6;
  display:flex; gap:27px; flex-wrap:wrap;
}
.leader-badge{ display:flex; align-items:center; }
.leader-badge-photo{
  width:94px; height:94px; border-radius:50%; border:3px solid #fff;
  object-fit:cover; flex-shrink:0; position:relative; z-index:2;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.leader-badge-info{
  background:#333d59;
  border-radius:0 8px 8px 0; padding:10px 18px 10px 46px; margin-left:-38px;
  color:#fff; position:relative; z-index:1; white-space:nowrap;
}
.leader-badge-info strong{
  display:block; font-family:var(--font-head, 'Poppins', Arial, sans-serif);
  font-size:.92rem; font-weight:700;
}
.leader-badge-info span{
  display:block; font-size:.72rem; color:#D7E2ED; line-height:1.4; margin-top:2px;
}

/* Minister photo + label, bottom-left */
.hero-minister{
  position:absolute; left:32px; bottom:0px; z-index:4;
  display:flex; align-items:flex-end;
  pointer-events:none;
}
.hero-minister-photo{
  height:400px; width:auto; display:block;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.4));
}
.hero-minister-label{
  background:rgba(7,27,48,.8); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border-radius:8px;   padding:16px 30px;  color:#fff;
   margin-left:-50px; margin-bottom:70px; white-space:nowrap;
  pointer-events:auto;
}
.hero-minister-label strong{
  display:block; font-family:var(--font-head, 'Poppins', Arial, sans-serif);
  font-size:1rem; font-weight:700;
}
.hero-minister-label span{
  display:block; font-size:.8rem; color:#D7E2ED; line-height:1.4; margin-top:3px;
}

/* Slide 1's headline block never shows — the CM/DCM/Minister overlay is the
   slide's content at every width. It's sized and repositioned per
   breakpoint below rather than shown/hidden, since it needs to fit within
   the viewport rather than disappear on small screens. */
.tfiber-hero-content.tfiber-hero-content--leaders{
  display:none !important;
}

@media (max-width:980px){
  /* Badges: stack vertically, shrink the photo, let the label text wrap
     instead of forcing a wide nowrap box that would overflow the screen. */
  .hero-leaders-top{
    position:relative; top:auto; left:auto; z-index:6;
    flex-direction:column; gap:12px;
    padding:20px 20px 0;
  }
  .leader-badge-photo{ width:58px; height:58px; border-width:2px; }
  .leader-badge-info{
    white-space:normal; max-width:240px;
    padding:8px 14px 8px 34px; margin-left:-26px;
  }
  .leader-badge-info strong{ font-size:.82rem; }
  .leader-badge-info span{ font-size:.68rem; }

  /* Minister: flows normally instead of pinned to the corner, photo scaled
     down substantially so it doesn't dominate a small screen. */
  .hero-minister{
    position:relative; left:auto; bottom:auto; z-index:4;
    justify-content:center;
    padding:18px 16px 24px;
  }
  .hero-minister-photo{ height:220px; }
  .hero-minister-label{
    margin-left:-18px; margin-bottom:16px;
    padding:10px 16px;
    white-space:normal; max-width:220px;
  }
  .hero-minister-label strong{ font-size:.88rem; }
  .hero-minister-label span{ font-size:.72rem; }
}

@media (max-width:480px){
  .hero-leaders-top{ align-items:center; }
  .leader-badge{ flex-direction:column; text-align:center; }
  .leader-badge-info{
    margin-left:0; margin-top:-16px; border-radius:8px;
    padding:16px 14px 8px; max-width:200px;
  }
  .hero-minister{ flex-direction:column; align-items:center; }
  .hero-minister-label{ margin-left:0; margin-top:-16px; margin-bottom:0; }
}

/* =================== HERO SHELL =================== */
.tfiber-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 78% 15%, rgba(79,195,247,.14) 0%, transparent 55%),
    linear-gradient(120deg, var(--tfiber-dark) 15%, var(--tfiber-dark-2) 55%, #0E3357 100%);
    color:#fff;
}

/* fine ambient dot-grid backdrop, cheap (single CSS layer, no DOM cost) */
.tfiber-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.5;
  pointer-events:none;
}

.tfiber-hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px, 460px) 1fr;
  align-items:center;
  gap:24px;
  min-height:600px;
}

/* =================== LEFT CONTENT =================== */
.tfiber-hero-content{
  position:relative;
  z-index:4;
  padding:24px 0 40px;
}
.tfiber-hero-content::before{
  /* subtle scrim so text stays legible over the network on small/medium screens */
  content:"";
  position:absolute;
  left:-24px; right:-40px; top:-40px; bottom:-40px;
  background:linear-gradient(100deg, rgba(7,27,48,.85) 40%, rgba(7,27,48,0) 100%);
  z-index:-1;
  border-radius:16px;
}
.tfiber-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--tfiber-cyan); margin-bottom:18px;
}
.tfiber-eyebrow::before{
  content:""; width:22px; height:2px; background:var(--tfiber-orange); display:inline-block;
}
.tfiber-hero-content h1{
  font-family:var(--font-head, 'Poppins', Arial, sans-serif);
  font-weight:800; font-size:2.5rem; line-height:1.16;
  margin:0 0 18px; text-transform:uppercase; letter-spacing:.3px;
}
.tfiber-hero-content h1 .accent{ color:var(--tfiber-green); }
.tfiber-hero-content p{
  font-size:1rem; color:#D7E2ED; max-width:460px; margin:0 0 30px; line-height:1.6;
}
.tfiber-hero-buttons{ display:flex; gap:16px; flex-wrap:wrap; }
.tfiber-hero-buttons .btn{ position:relative; overflow:hidden; }
.tfiber-hero-buttons .btn::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.25);
  transform:translateX(-100%); transition:transform .35s ease;
}
.tfiber-hero-buttons .btn:hover::after{ transform:translateX(0); }
.tfiber-hero-buttons .btn span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; }

/* =================== NETWORK VISUALIZATION =================== */
.tfiber-network-wrap{
  position:relative;
  z-index:2;
  height:100%;
  min-height:560px;
  display:flex; align-items:center; justify-content:center;
}
.tfiber-network-svg{
  width:100%; height:auto; max-width:760px;
  overflow:visible;
}

/* State outline */
.tg-outline{
  fill:rgba(46,110,158,.12);
  stroke:var(--tfiber-cyan);
  stroke-width:2;
  stroke-linejoin:round;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(79,195,247,.35));
}

/* Fiber ray paths */
.tg-ray{
  fill:none;
  stroke:url(#rayGradient);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:.85;
  stroke-dasharray:6 10;
  animation:rayFlow 2.6s linear infinite;
}
.tg-ray.ray-extended{ stroke-width:1.2; opacity:.55; }
.tg-ray.ray-active{ opacity:1; stroke-width:2.4; }

@keyframes rayFlow{
  to{ stroke-dashoffset:-160; }
}

/* Network nodes */
.tg-node{
  cursor:pointer;
}
.tg-node circle.node-core{
  fill:#fff;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9));
}
.tg-node circle.node-halo{
  fill:var(--tfiber-cyan);
  opacity:.35;
  animation:nodePulse 2.4s ease-in-out infinite;
  transform-origin:center;
}
.tg-node:hover circle.node-halo,
.tg-node.node-active circle.node-halo{ opacity:.6; }
.tg-node:hover circle.node-core,
.tg-node.node-active circle.node-core{ fill:var(--tfiber-green); }

@keyframes nodePulse{
  0%,100%{ transform:scale(1); opacity:.3; }
  50%{ transform:scale(1.35); opacity:.55; }
}

/* Core hub (Hyderabad) */
.tg-hub circle.hub-core{
  fill:var(--tfiber-orange);
  filter:drop-shadow(0 0 10px rgba(247,148,29,.7));
}
.tg-hub circle.hub-ring{
  fill:none;
  stroke:var(--tfiber-orange);
  stroke-width:1.4;
  opacity:.6;
  transform-origin:center;
  animation:hubPulse 2.8s ease-out infinite;
}
.tg-hub circle.hub-ring.ring-2{ animation-delay:.9s; }
.tg-hub circle.hub-ring.ring-3{ animation-delay:1.8s; }

@keyframes hubPulse{
  0%{ transform:scale(.6); opacity:.7; }
  100%{ transform:scale(2.4); opacity:0; }
}

/* Data particles (positioned via JS/GSAP MotionPath; CSS gives them their look + a static-safe fallback) */
.tg-particle{
  fill:#EAFBFF;
  filter:drop-shadow(0 0 3px rgba(79,195,247,.9));
  opacity:.9;
}

/* Load-in state: JS removes .is-loading once the entrance sequence starts.
   Kept intentionally simple so the network still renders correctly with JS disabled. */
.tfiber-network-svg.is-loading .tg-ray,
.tfiber-network-svg.is-loading .tg-node,
.tfiber-network-svg.is-loading .tg-hub{
  opacity:0;
  animation-play-state:paused;
}
.tfiber-network-svg .tg-outline{
  animation:outlineReveal 1.4s ease forwards;
}
@keyframes outlineReveal{
  from{ opacity:0; }
  to{ opacity:.9; }
}

/* District tooltip */
.tg-tooltip{
  position:absolute;
  z-index:6;
  background:rgba(7,27,48,.92);
  border:1px solid rgba(79,195,247,.4);
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  font-size:.78rem;
  line-height:1.35;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -120%);
  transition:opacity .15s ease;
  white-space:nowrap;
}
.tg-tooltip.visible{ opacity:1; }
.tg-tooltip strong{ display:block; color:var(--tfiber-cyan); font-size:.82rem; }

/* =================== STATS STRIP =================== */
.tfiber-hero-stats{
  position:relative; z-index:5; overflow:hidden;
  margin-top:0px;
 background:linear-gradient(135deg, #04366c 10%, #381860 50%, #2b0342 60%);
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.tfiber-hero-stats::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 25%, rgba(247,148,29,.14), transparent 42%),
    radial-gradient(circle at 88% 75%, rgba(79,195,247,.16), transparent 46%);
}
.tfiber-hero-stats-inner{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  padding:28px 24px;
}
.tfiber-stat{
  position:relative; text-align:center; padding:4px 10px;
  transition:transform .2s ease;
}
.tfiber-stat:hover{ transform:translateY(-3px); }
.tfiber-stat:not(:last-child)::after{
  content:"";
  position:absolute; right:0; top:12%; bottom:12%; width:1px;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
}
.tfiber-stat i{
  display:block; font-size:1.15rem; margin-bottom:9px;
}
.tfiber-stat:nth-child(1) i{ color:var(--tfiber-orange,#F7941D); }
.tfiber-stat:nth-child(2) i{ color:var(--tfiber-cyan,#4FC3F7); }
.tfiber-stat:nth-child(3) i{ color:var(--tfiber-green,#3DD16B); }
.tfiber-stat:nth-child(4) i{ color:#C77DFF; }
.tfiber-stat:nth-child(5) i{ color:#3AD1C4; }
.tfiber-stat:nth-child(6) i{ color:#FF8A7A; }
.tfiber-stat strong{
  display:block; font-family:var(--font-head, 'Poppins', Arial, sans-serif);
  font-size:1.5rem; font-weight:700; color:#fff;
}
.tfiber-stat span{
  display:block; font-size:.66rem; letter-spacing:.5px; text-transform:uppercase; color:#AFC1D3; margin-top:4px;
}

/* =================== SCROLL INDICATOR =================== */
.tfiber-scroll-cue{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 0 22px;
  color:#9FB6C9; font-size:.68rem; letter-spacing:1.4px; text-transform:uppercase;
}
.tfiber-scroll-cue .cue-line{
  width:1px; height:22px; background:linear-gradient(#9FB6C9, transparent);
  position:relative; overflow:hidden;
}
.tfiber-scroll-cue .cue-dot{
  position:absolute; left:-1.5px; top:0; width:4px; height:4px; border-radius:50%;
  background:var(--tfiber-cyan); animation:scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{ transform:translateY(0); opacity:0; }
  20%{ opacity:1; }
  100%{ transform:translateY(22px); opacity:0; }
}

/* =================== REDUCED MOTION =================== */
@media (prefers-reduced-motion: reduce){
  .tg-ray,
  .tg-node circle.node-halo,
  .tg-hub circle.hub-ring,
  .tfiber-scroll-cue .cue-dot,
  .tfiber-network-svg .tg-outline{
    animation:none !important;
  }
  .tg-ray{ opacity:.7; stroke-dasharray:none; }
  .tg-hub circle.hub-ring{ opacity:.25; transform:scale(1.4); }
  .tfiber-network-svg.is-loading .tg-ray,
  .tfiber-network-svg.is-loading .tg-node,
  .tfiber-network-svg.is-loading .tg-hub{
    opacity:1;
  }
}

/* =================== RESPONSIVE =================== */
@media (max-width:1180px){
  .tfiber-hero-stats-inner{ grid-template-columns:repeat(3, 1fr); row-gap:22px; }
  /* 3-column layout: dividers should only separate columns within a row,
     not linger at the row-wrap edge (items 3 and 6). */
  .tfiber-stat:nth-child(3)::after{ display:none; }
}

@media (max-width:980px){
  /* Below this width, slides use natural document flow instead of
     absolute-stacked cross-fade — each slide's height comes from its own
     content rather than a fixed box, so the shorter/taller mix of headline
     text + decorative icon (slides 2/3) or empty space (slide 1, no side
     visual) never gets clipped or overlaps the section below. Only the
     active slide renders; switching slides swaps instantly here instead of
     cross-fading (acceptable simplification at this size). */
  .hero-slides{ min-height:auto; }
  .hero-slide{ position:relative; height:auto; }
  .hero-slide:not(.is-active){ display:none; }
  .hero-slide .tfiber-hero-inner{ min-height:auto; height:auto;padding:0px 35px 0px 40px; }

  .tfiber-hero-inner{ grid-template-columns:1fr; min-height:auto; }
  .tfiber-network-wrap{ min-height:380px; order:2; }
  .hero-slide-visual-icon{ order:2; max-width:280px; margin:0 auto; }
  .hero-slide-visual-icon svg{ max-width:240px; }
  .tfiber-hero-content{ order:1; padding-bottom:12px; }
  .tfiber-hero-content::before{ left:-20px; right:-20px; }
  .tg-ray.ray-extended{ display:none; } /* trim secondary rays for performance/clarity */
}

@media (max-width:640px){
  .tfiber-hero-content h1{ font-size:1.7rem; }
  .tfiber-network-wrap{ min-height:220px; }
  .tfiber-network-svg{ max-width:280px; }
  .hero-slide-visual-icon{ max-width:180px; }
  .hero-slide-visual-icon svg{ max-width:160px; }
  .tfiber-hero-stats-inner{ grid-template-columns:repeat(2, 1fr); padding:16px; row-gap:20px; }
  /* 2-column layout: hide dividers at the row-wrap edge (even positions) */
  .tfiber-stat:nth-child(even)::after{ display:none; }
  .tg-node .node-halo{ animation-duration:3.2s; }
}