/* ============================================================
   ByteOSoft Academy — Courses hero: animated developer ecosystem
   Loaded on: courses.php only (after academy.css)
   Layers: sky particles → grid floor → floating scene → text
   All motion respects prefers-reduced-motion.
   ============================================================ */

/* ---------------- Hero shell ---------------- */
.courses-hero.ch3d{
  min-height:clamp(640px,94vh,900px);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--header-h) + 2.4rem) 0 4.5rem;
  perspective:1400px;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(30,123,255,.14), transparent 62%),
    radial-gradient(700px 420px at 88% 70%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(700px 420px at 10% 78%, rgba(0,198,255,.07), transparent 60%),
    linear-gradient(180deg,#050B18 0%,#020817 55%,#071226 100%);
}
.courses-hero.ch3d .container{max-width:840px}

/* ---------------- Perspective grid floor ---------------- */
.ch-floor{
  position:absolute;left:-12%;right:-12%;bottom:-6%;height:52%;
  pointer-events:none;z-index:0;
  transform:perspective(700px) rotateX(62deg);
  transform-origin:50% 100%;
  background-image:
    linear-gradient(rgba(0,198,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,123,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,.07) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,192px 192px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%);
  animation:floorScroll 12s linear infinite;
}
@keyframes floorScroll{from{background-position:0 0,0 0,0 0}to{background-position:0 64px,0 0,0 0}}
.ch-floor::after{ /* light sweep across the floor */
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 20%,rgba(0,198,255,.10) 50%,transparent 80%);
  background-size:280% 100%;
  animation:floorSweep 9s ease-in-out infinite;
}
@keyframes floorSweep{0%{background-position:120% 0}50%{background-position:-20% 0}100%{background-position:120% 0}}
.ch-horizon{
  position:absolute;left:0;right:0;bottom:44%;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,198,255,.28),transparent);
  filter:blur(.4px);
}

/* ---------------- Sky particles (JS-populated) ---------------- */
.ch-sky{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ch-star{
  position:absolute;border-radius:50%;
  background:var(--byte-2);
  animation:starDrift linear infinite, starTwinkle 3.4s ease-in-out infinite;
}
.ch-star.v{background:var(--violet)}
@keyframes starDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-46px,-90px,0)}}
@keyframes starTwinkle{0%,100%{opacity:.12}50%{opacity:.75}}

/* ---------------- Floating scene ---------------- */
.ch-scene{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  transform-style:preserve-3d;
  transition:transform .12s linear;
}
.fl{position:absolute;will-change:transform;transform-style:preserve-3d}
.fl-i{animation:flFloat var(--fd,9s) ease-in-out var(--fy,0s) infinite}
@keyframes flFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(calc(var(--fa,-11px))) rotate(var(--fr,.6deg))}
}

/* logo chips (dark glass cards) */
.tchip{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(10,18,38,.78);border:1px solid rgba(90,140,255,.22);
  border-radius:14px;padding:.6rem .7rem;
  box-shadow:0 10px 30px rgba(2,8,26,.6),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
  animation:chipGlow 5.5s ease-in-out infinite;
}
@keyframes chipGlow{0%,100%{box-shadow:0 10px 30px rgba(2,8,26,.6)}50%{box-shadow:0 10px 34px rgba(0,160,255,.22)}}
.tchip .tlabel{font-family:var(--font-d);font-weight:600;font-size:.86rem;color:var(--silver);white-space:nowrap}
.tchip .tlabel small{font-size:.62em;color:var(--muted)}
.tchip.bare{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;animation:none}
.tchip.bare svg{filter:drop-shadow(0 6px 18px rgba(2,8,26,.7)) drop-shadow(0 0 14px rgba(0,170,255,.18))}

/* neon label pills (DevOps / Backend / Database / Mobile) */
.npill{
  font-family:var(--font-m);font-size:.78rem;font-weight:600;letter-spacing:.03em;
  color:#EAF4FF;background:linear-gradient(92deg,#1E7BFF,#3D5BFF);
  border:1px solid rgba(120,180,255,.45);border-radius:10px;
  padding:.42rem .85rem;white-space:nowrap;
  box-shadow:0 8px 24px rgba(30,100,255,.4),0 0 18px rgba(30,123,255,.35);
  animation:pillBreath 4.6s ease-in-out infinite;
}
.npill.cy{background:rgba(6,16,34,.9);color:var(--byte-2);border-color:rgba(0,198,255,.45);box-shadow:0 0 18px rgba(0,198,255,.22)}
.npill.vi{background:linear-gradient(92deg,#5B3DF5,#8B5CF6)}
@keyframes pillBreath{0%,100%{box-shadow:0 8px 24px rgba(30,100,255,.35)}50%{box-shadow:0 8px 30px rgba(0,180,255,.55)}}

/* React slow spin */
.spin-slow{animation:spinSlow 16s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* ---------------- Code editors ---------------- */
.ed{
  width:min(23vw,318px);
  background:linear-gradient(180deg,rgba(13,22,44,.94),rgba(8,14,30,.94));
  border:1px solid rgba(90,140,255,.26);border-radius:14px;
  box-shadow:0 26px 60px rgba(2,8,26,.75),0 0 34px rgba(30,123,255,.14),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;backdrop-filter:blur(4px);
}
.ed-bar{display:flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border-bottom:1px solid rgba(90,140,255,.16);background:rgba(6,11,24,.6)}
.ed-dot{width:9px;height:9px;border-radius:50%}
.ed-dot:nth-child(1){background:#FF5F57}.ed-dot:nth-child(2){background:#FEBC2E}.ed-dot:nth-child(3){background:#28C840}
.ed-file{margin-left:.5rem;font-family:var(--font-m);font-size:.66rem;color:var(--dim)}
.ed-body{padding:.8rem .95rem 1rem;font-family:var(--font-m);font-size:.68rem;line-height:1.75;white-space:pre;color:#8FA3C8}
.ed-body .ln{display:block;overflow:hidden;max-width:0;animation:lineType .6s steps(28,end) forwards;animation-delay:var(--td,0s)}
.ed-body .c-tag{color:#7EB6FF}.ed-body .c-attr{color:#8B5CF6}.ed-body .c-str{color:#7EE7A5}
.ed-body .c-kw{color:#FF7EB6}.ed-body .c-fn{color:#FFD98A}.ed-body .c-com{color:#54648A}
@keyframes lineType{from{max-width:0}to{max-width:100%}}
.ed-caret{display:inline-block;width:7px;height:.95em;vertical-align:-2px;background:var(--byte-2);animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ed-left-tilt{transform:rotateY(11deg) rotateX(3deg)}
.ed-right-tilt{transform:rotateY(-11deg) rotateX(3deg)}

/* ---------------- Phone mockup ---------------- */
.phone{
  width:104px;height:200px;border-radius:22px;position:relative;
  background:linear-gradient(180deg,#0D1730,#080F22);
  border:1px solid rgba(0,198,255,.4);
  box-shadow:0 22px 50px rgba(2,8,26,.8),0 0 30px rgba(0,198,255,.22),inset 0 0 0 3px #050B18;
  padding:12px 9px;
}
.phone::before{ /* notch */
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:34px;height:5px;border-radius:4px;background:#1B2A4A;
}
.phone-scr{
  height:100%;border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,#0A1430 0%,#0A1226 100%);
  border:1px solid rgba(90,140,255,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;
}
.phone-scr .bar{height:5px;border-radius:3px;background:rgba(90,140,255,.30);animation:appBar 3.2s ease-in-out infinite}
.phone-scr .bar.b1{width:56%}.phone-scr .bar.b2{width:70%;animation-delay:.5s}.phone-scr .bar.b3{width:44%;animation-delay:1s}
@keyframes appBar{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------------- Server / database stack ---------------- */
.servers{display:flex;flex-direction:column;gap:7px;transform:rotateY(-14deg) rotateX(4deg)}
.srv{
  width:132px;height:34px;border-radius:9px;position:relative;
  background:linear-gradient(180deg,#101B38,#0A1226);
  border:1px solid rgba(90,140,255,.3);
  box-shadow:0 12px 26px rgba(2,8,26,.7),inset 0 1px 0 rgba(255,255,255,.06);
}
.srv::before{ /* data slot line */
  content:'';position:absolute;left:34px;right:12px;top:50%;height:3px;transform:translateY(-50%);
  border-radius:2px;background:linear-gradient(90deg,rgba(0,198,255,.55),rgba(30,123,255,.2));
  animation:srvData 2.8s ease-in-out var(--sd,0s) infinite;
}
@keyframes srvData{0%,100%{opacity:.25}50%{opacity:.95}}
.srv i{ /* LED */
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--byte-2);
  box-shadow:0 0 10px var(--byte-2);
  animation:ledBlink 1.9s steps(2,jump-none) var(--sd,0s) infinite;
}
.srv:nth-child(3) i{background:#7EE7A5;box-shadow:0 0 10px #7EE7A5}
@keyframes ledBlink{0%,100%{opacity:.25}50%{opacity:1}}

/* small db window (postgres) */
.dbwin{
  width:96px;height:96px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(13,22,44,.95),rgba(8,14,30,.95));
  border:1px solid rgba(90,140,255,.28);
  box-shadow:0 18px 42px rgba(2,8,26,.75),0 0 26px rgba(30,123,255,.14);
}

/* ---------------- Connection lines overlay ---------------- */
.ch-links{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85}
.ch-links path{
  fill:none;stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:2 7;
  animation:dashMove 22s linear infinite;
}
.ch-links .lk-b{stroke:rgba(0,198,255,.34)}
.ch-links .lk-v{stroke:rgba(139,92,246,.30)}
@keyframes dashMove{to{stroke-dashoffset:-180}}
.ch-links circle{filter:drop-shadow(0 0 5px currentColor)}

/* ---------------- Scene element positions (desktop) ---------------- */
/* left column */
.p-edl{left:1.5%;top:13%}
.p-html{left:20%;top:10%}
.p-css{left:27%;top:20%}
.p-js{left:19.5%;top:37%}
.p-react{left:26.5%;top:42%}
.p-tail{left:1.5%;top:52%}
.p-next{left:11%;top:57%}
.p-boot{left:20.5%;top:57.5%}
.p-phone{left:7%;top:64%}
.p-mob{left:18%;top:70%}
/* top center */
.p-github{left:37%;top:11.5%}
.p-git{left:45%;top:12%}
.p-docker{left:52%;top:10.5%}
.p-devops{left:60%;top:12.5%}
/* right column */
.p-back{right:5%;top:12%}
.p-edr{right:1%;top:18%}
.p-node{right:24.5%;top:17%}
.p-py{right:25.5%;top:27%}
.p-php{right:28%;top:37%}
.p-java{right:19.5%;top:45%}
.p-mysql{right:24%;top:58%}
.p-pg{right:13.5%;top:62%}
.p-srv{right:3%;top:47%}
.p-db{right:5.5%;top:84%}

/* keep artwork clear of the centered copy */
.courses-hero.ch3d .container{position:relative;z-index:3}

/* ---------------- Mobile marquee strips ---------------- */
.ch-strip{display:none}
.ch-strip .row{
  display:flex;gap:.7rem;width:max-content;
  animation:stripMove 30s linear infinite;
}
.ch-strip .row.rev{animation-direction:reverse;animation-duration:36s}
@keyframes stripMove{to{transform:translateX(-50%)}}
.ch-strip .tchip{padding:.5rem .6rem;border-radius:12px}
.ch-strip .tchip .tlabel{font-size:.76rem}

/* ---------------- Responsive ---------------- */
@media(max-width:1330px){
  .ed{width:min(21vw,280px)}
  .p-node{right:22%}.p-py{right:18%}
}
@media(max-width:1150px){
  .p-html{left:17%}.p-css{left:24%}.p-react{left:23%}
  .ed{width:min(20vw,250px)}
  .ed-body{font-size:.6rem}
  .servers .srv{width:110px}
}
@media(max-width:1020px){
  .ch-scene{display:none}
  .courses-hero.ch3d{min-height:0;padding-bottom:3rem}
  .ch-strip{
    display:flex;flex-direction:column;gap:.8rem;
    position:relative;z-index:2;margin-top:2.6rem;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    overflow:hidden;
  }
}

/* ---------------- Reduced motion ---------------- */
@media(prefers-reduced-motion:reduce){
  .ch-floor,.ch-floor::after,.fl-i,.tchip,.npill,.spin-slow,
  .ed-body .ln,.ed-caret,.srv::before,.srv i,.ch-links path,
  .ch-star,.ch-strip .row,.phone-scr .bar{animation:none!important}
  .ed-body .ln{max-width:100%}
  .ch-scene{transform:none!important}
}