/* =========================================================
   HERO V5 — CONNECTED INTERACTIVE EXPERIENCE
   ========================================================= */

.hero-section,
#home{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero-section > .container,
#home > .container{
  position:relative;
  z-index:3;
}

.hero-v5-ambient{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.hero-v5-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(78px);
  opacity:.26;
  will-change:transform;
}

.hero-v5-blob.blob-a{
  width:420px;
  height:420px;
  left:-130px;
  top:80px;
  background:rgba(42,226,255,.40);
  animation:heroBlobA 11s ease-in-out infinite alternate;
}

.hero-v5-blob.blob-b{
  width:470px;
  height:470px;
  right:-170px;
  top:20px;
  background:rgba(82,120,255,.34);
  animation:heroBlobB 13s ease-in-out infinite alternate;
}

@keyframes heroBlobA{
  to{transform:translate(70px,45px) scale(1.08)}
}
@keyframes heroBlobB{
  to{transform:translate(-70px,70px) scale(.94)}
}

.hero-v5-grid{
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(95,190,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,190,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,transparent 2%,#000 16%,#000 80%,transparent 100%);
}

.hero-v5-spotlight{
  position:absolute;
  width:380px;
  height:380px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(42,226,255,.11),rgba(82,120,255,.055) 40%,transparent 72%);
  filter:blur(10px);
  opacity:0;
  transition:opacity .25s ease;
}

/* Left/right connection */
.hero-grid{
  position:relative;
}

.hero-data-bridge{
  position:absolute;
  left:44%;
  right:44%;
  top:50%;
  height:170px;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:1;
}

.bridge-line{
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(42,226,255,.25),rgba(82,120,255,.26),transparent);
}

.bridge-line-1{top:24%}
.bridge-line-2{top:50%}
.bridge-line-3{top:76%}

.bridge-pulse{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#68ddff;
  box-shadow:0 0 12px #68ddff;
  animation:bridgePulse 3.5s linear infinite;
}

.bp1{top:calc(24% - 2px);animation-delay:0s}
.bp2{top:calc(50% - 2px);animation-delay:1.1s}
.bp3{top:calc(76% - 2px);animation-delay:2.1s}

@keyframes bridgePulse{
  from{left:4%;opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  to{left:92%;opacity:0}
}

/* Stronger title treatment */
.hero-title{
  position:relative;
  display:inline-block;
  text-shadow:0 14px 35px rgba(0,0,0,.18);
}

.hero-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-9px;
  width:42%;
  height:2px;
  border-radius:4px;
  background:linear-gradient(90deg,#2ae2ff,#5278ff 62%,transparent);
  box-shadow:0 0 14px rgba(42,226,255,.22);
  animation:heroTitleUnderline 3s ease-in-out infinite alternate;
}

@keyframes heroTitleUnderline{
  to{width:72%;opacity:.55}
}

/* CTA polish */
.hero-actions .btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero-actions .btn::before{
  content:"";
  position:absolute;
  top:-80%;
  left:-35%;
  width:28%;
  height:260%;
  transform:rotate(22deg) translateX(-230%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:transform .7s ease;
  z-index:-1;
}

.hero-actions .btn:hover::before{
  transform:rotate(22deg) translateX(520%);
}

/* Developer status strip */
.hero-v5-status-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:24px;
}

.hero-v5-status-strip > div{
  min-width:0;
  padding:10px 11px;
  border-radius:11px;
  border:1px solid rgba(96,180,255,.10);
  background:rgba(5,24,48,.38);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  gap:2px;
  transition:.25s ease;
}

.hero-v5-status-strip > div:hover{
  transform:translateY(-3px);
  border-color:rgba(42,226,255,.25);
  background:rgba(42,226,255,.035);
}

.hero-v5-status-strip strong{
  font-size:11px;
  color:#dff7ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hero-v5-status-strip span{
  font-size:7px;
  color:#6789a8;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.availability-mini{
  position:relative;
  padding-left:27px !important;
}

.availability-mini i{
  position:absolute;
  left:11px;
  top:14px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#39e6aa;
  box-shadow:0 0 11px rgba(57,230,170,.75);
}

/* Terminal line */
.hero-v5-terminal{
  margin-top:11px;
  min-height:36px;
  padding:9px 12px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:10px;
  border:1px solid rgba(84,166,222,.09);
  background:rgba(2,15,31,.42);
  font:8px "JetBrains Mono",monospace;
  color:#7194b0;
  overflow:hidden;
}

.terminal-prompt{
  color:#39e6aa;
  font-weight:800;
}

.terminal-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.terminal-caret{
  width:5px;
  height:11px;
  background:#2ae2ff;
  box-shadow:0 0 7px rgba(42,226,255,.6);
  animation:terminalBlink .85s step-end infinite;
}

@keyframes terminalBlink{
  50%{opacity:0}
}

/* Floating tech chips around workspace */
.hero-v5-tech-chip{
  position:absolute;
  z-index:8;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(110,200,255,.12);
  background:rgba(4,19,39,.70);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  color:#a9d8f3;
  font-size:7px;
  pointer-events:none;
  animation:techChipFloat 4.8s ease-in-out infinite;
}

.hero-v5-tech-chip i{
  font-size:12px;
  color:#66dcff;
}

.chip-html{right:43%;top:16%;animation-delay:.2s}
.chip-css{right:38%;top:28%;animation-delay:1.0s}
.chip-js{right:39%;bottom:23%;animation-delay:1.7s}
.chip-wp{right:-1%;top:20%;animation-delay:.7s}
.chip-php{right:-2%;bottom:26%;animation-delay:1.4s}
.chip-figma{right:5%;bottom:9%;animation-delay:2.2s}

@keyframes techChipFloat{
  50%{transform:translateY(-7px)}
}

/* Workspace reacts as part of the whole hero */
.hero-workspace-wrap{
  transition:filter .4s ease;
}

.hero-section.hero-theme-html{--hero-accent:#ff7849}
.hero-section.hero-theme-css{--hero-accent:#2ae2ff}
.hero-section.hero-theme-js{--hero-accent:#ffd84c}
.hero-section.hero-theme-php{--hero-accent:#8f8cff}
.hero-section.hero-theme-mysql{--hero-accent:#31c6ff}
.hero-section.hero-theme-wordpress{--hero-accent:#52b8ff}
.hero-section.hero-theme-figma{--hero-accent:#ff7262}
.hero-section.hero-theme-photoshop{--hero-accent:#31a8ff}
.hero-section.hero-theme-photopea{--hero-accent:#70d6ff}
.hero-section.hero-theme-canva{--hero-accent:#00d4c7}

.hero-section[class*="hero-theme-"] .hero-title::after{
  background:linear-gradient(90deg,var(--hero-accent,#2ae2ff),#5278ff 68%,transparent);
}

/* Scroll indicator */
.hero-section::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:16px;
  width:18px;
  height:30px;
  border:1px solid rgba(120,190,230,.18);
  border-radius:12px;
  transform:translateX(-50%);
  opacity:.7;
}

.hero-section::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:35px;
  width:3px;
  height:6px;
  border-radius:999px;
  transform:translateX(-50%);
  background:#71dcff;
  box-shadow:0 0 8px rgba(113,220,255,.55);
  animation:heroScrollDot 1.8s ease-in-out infinite;
  z-index:2;
}

@keyframes heroScrollDot{
  0%{transform:translate(-50%,0);opacity:0}
  30%{opacity:1}
  100%{transform:translate(-50%,12px);opacity:0}
}

@media(max-width:1100px){
  .hero-v5-tech-chip{display:none}
  .hero-data-bridge{display:none}
}

@media(max-width:991px){
  .hero-v5-status-strip{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .hero-section::before,
  .hero-section::after{
    display:none;
  }
}

@media(max-width:650px){
  .hero-v5-status-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-v5-terminal{
    font-size:7px;
  }

  .hero-v5-blob{
    opacity:.18;
  }

  .hero-v5-grid{
    opacity:.14;
  }
}

@media(hover:none),(pointer:coarse){
  .hero-v5-spotlight{
    display:none;
  }

  .hero-actions .btn::before{
    display:none;
  }

  .hero-v5-status-strip > div:hover{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-v5-blob,
  .bridge-pulse,
  .hero-title::after,
  .hero-v5-tech-chip,
  .terminal-caret,
  .hero-section::before{
    animation:none!important;
  }
}