/* ==========================================================================
   AWSPrep — Cloud Quest-style isometric 3D city scene + quest UI accents
   The scene itself is CSS-only; scene.js populates buildings/avatar/packets.
   ========================================================================== */

/* ---------- Hero becomes text + scene grid ---------- */
.hero-grid{position:relative;z-index:1;max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:1.5rem;align-items:center;}
.hero .hero-content{max-width:none;margin:0;}
@media(min-width:901px){
  .hero .hero-content{text-align:left;}
  .hero .hero-actions{justify-content:flex-start;}
  .hero .hero-stats{justify-content:flex-start;}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-scene{order:2;margin-top:1.5rem;}
  .scene-stage{height:330px;}
  .iso{--sc:.78;}
}
@media(max-width:380px){
  .scene-stage{height:270px;}
  .iso{--sc:.6;}
  .orb{width:36px;height:36px;}
  .orb i{font-size:.95rem;}
}

/* ---------- Scene stage ---------- */
.hero-scene{position:relative;min-height:200px;}
.scene-stage{position:relative;height:440px;perspective:1100px;}
.iso{--sc:1;position:absolute;left:50%;top:52%;width:320px;height:320px;margin:-160px 0 0 -160px;
  transform-style:preserve-3d;
  transform:scale(var(--sc)) rotateX(calc(58deg + var(--tx,0deg))) rotateZ(calc(45deg + var(--tz,0deg)));}

/* Ground platform with glow + grid */
.ground{position:absolute;inset:-24px;border-radius:22px;
  background:radial-gradient(circle at 50% 45%,rgba(0,108,224,.24),rgba(0,43,102,.10) 55%,transparent 78%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}
.ground::before{content:'';position:absolute;inset:0;border-radius:22px;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:32px 32px;}

/* ---------- Buildings (3 visible faces under isometric view) ---------- */
.bld{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--d);transform-style:preserve-3d;}
.bld .t{position:absolute;inset:0;transform:translateZ(var(--h));background:var(--ct);border-radius:3px;}
.bld .f{position:absolute;left:0;top:100%;width:100%;height:var(--h);transform-origin:top;transform:rotateX(90deg);background:var(--cf);}
.bld .r{position:absolute;left:100%;top:0;width:var(--h);height:var(--d);transform-origin:left;transform:rotateY(-90deg);background:var(--cr);}
.bld .f::after,.bld .r::after{content:'';position:absolute;inset:5px;opacity:.45;border-radius:2px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 5px,transparent 5px 13px),
                   repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 5px,transparent 5px 13px);}
.bld.lit .f::after{animation:win-flicker 5s ease-in-out infinite;}
@keyframes win-flicker{0%,100%{opacity:.45;}50%{opacity:.75;}}

/* Antenna beacon on tall buildings */
.bld .bcn{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;
  transform:translateZ(calc(var(--h) + 16px));background:#67e8f9;
  box-shadow:0 0 10px 3px rgba(103,232,249,.75);animation:beacon 2.6s ease-in-out infinite;}
@keyframes beacon{0%,100%{opacity:1;box-shadow:0 0 10px 3px rgba(103,232,249,.75);}50%{opacity:.35;box-shadow:0 0 4px 1px rgba(103,232,249,.4);}}

/* ---------- Floating island ---------- */
.isle{position:absolute;left:245px;top:10px;width:80px;height:80px;transform-style:preserve-3d;animation:isle-bob 7s ease-in-out infinite;}
@keyframes isle-bob{0%,100%{transform:translateZ(48px);}50%{transform:translateZ(68px);}}
.isle .tile{position:absolute;inset:0;border-radius:14px;background:radial-gradient(circle at 50% 40%,rgba(167,139,250,.4),rgba(76,29,149,.25) 60%,transparent 80%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}

/* ---------- Avatar (billboarded bot that walks the city) ---------- */
.av{position:absolute;left:0;top:0;width:36px;height:36px;transform-style:preserve-3d;animation:av-walk 24s linear infinite;}
@keyframes av-walk{
  0%{left:34px;top:252px;}20%{left:150px;top:262px;}40%{left:258px;top:238px;}
  60%{left:212px;top:150px;}80%{left:88px;top:118px;}100%{left:34px;top:252px;}}
.av .sh{position:absolute;left:3px;top:3px;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(rgba(2,6,23,.4),transparent 70%);animation:sh-pulse 2s ease-in-out infinite;}
@keyframes sh-pulse{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(.82);opacity:.55;}}
.av .bot{position:absolute;left:5px;top:5px;width:26px;height:32px;transform-style:preserve-3d;animation:bot-bob 2s ease-in-out infinite;}
@keyframes bot-bob{0%,100%{transform:translateY(0) rotateZ(-45deg) rotateX(-58deg);}50%{transform:translateY(-13px) rotateZ(-45deg) rotateX(-58deg);}}
.bot .torso{position:absolute;inset:0;border-radius:9px 9px 7px 7px;
  background:linear-gradient(160deg,#e0f2fe,#7dd3fc 55%,#38bdf8);box-shadow:0 0 14px rgba(56,189,248,.55),inset 0 -3px 6px rgba(2,132,199,.35);}
.bot .visor{position:absolute;left:4px;right:4px;top:6px;height:9px;border-radius:5px;background:#0f172a;}
.bot .visor::before,.bot .visor::after{content:'';position:absolute;top:2.5px;width:4px;height:4px;border-radius:50%;background:#67e8f9;box-shadow:0 0 5px #67e8f9;}
.bot .visor::before{left:4px;}.bot .visor::after{right:4px;}
.bot .ant{position:absolute;left:calc(50% - 1px);top:-7px;width:2px;height:8px;background:#7dd3fc;}
.bot .ant::after{content:'';position:absolute;top:-4px;left:-2px;width:6px;height:6px;border-radius:50%;background:#fbbf24;box-shadow:0 0 8px #fbbf24;}

/* ---------- Data packets traveling between buildings ---------- */
.pkt{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;transform:translateZ(7px);
  background:#67e8f9;box-shadow:0 0 12px 3px rgba(103,232,249,.7);
  animation:pkt-move var(--dur,5s) linear infinite;animation-delay:var(--del,0s);}
@keyframes pkt-move{
  0%{left:var(--x1);top:var(--y1);opacity:0;}12%{opacity:1;}
  88%{opacity:1;}100%{left:var(--x2);top:var(--y2);opacity:0;}}

/* ---------- Drifting clouds (2D layer above the scene) ---------- */
.scene-clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.scene-clouds span{position:absolute;border-radius:999px;background:rgba(255,255,255,.8);filter:blur(3px);opacity:0;
  animation:cloud-drift var(--cdur,26s) linear infinite;animation-delay:var(--cdel,0s);}
.scene-clouds span::before,.scene-clouds span::after{content:'';position:absolute;background:inherit;border-radius:50%;}
.scene-clouds span::before{width:60%;height:150%;left:12%;top:-40%;}
.scene-clouds span::after{width:45%;height:120%;right:10%;top:-25%;}
.scene-clouds .c1{width:110px;height:26px;top:16%;left:-140px;--cdur:26s;}
.scene-clouds .c2{width:80px;height:20px;top:44%;left:-100px;--cdur:34s;--cdel:6s;}
.scene-clouds .c3{width:130px;height:28px;top:70%;left:-160px;--cdur:30s;--cdel:14s;}
@keyframes cloud-drift{0%{transform:translateX(0);opacity:0;}8%{opacity:.75;}85%{opacity:.75;}100%{transform:translateX(calc(100vw / 3));opacity:0;}}

/* ---------- Floating XP orbs (collectible badges) ---------- */
.orb{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);color:#fff;
  animation:orb-float 5s ease-in-out infinite;z-index:2;}
.orb i{font-size:1.15rem;}
.orb.o1{top:6%;right:8%;color:#fde047;animation-delay:0s;box-shadow:0 0 18px rgba(253,224,71,.35);}
.orb.o2{bottom:14%;right:2%;color:#7dd3fc;animation-delay:1.6s;box-shadow:0 0 18px rgba(125,211,252,.35);}
.orb.o3{top:34%;left:2%;color:#c4b5fd;animation-delay:3.2s;box-shadow:0 0 18px rgba(196,181,253,.35);}
@keyframes orb-float{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-12px) rotate(3deg);}}

/* ---------- Quest XP chips (roadmap gamification) ---------- */
.xp-chip{position:absolute;top:.9rem;right:.9rem;font-size:.68rem;font-weight:700;color:var(--green);
  background:var(--tint-green);border:1px solid var(--green);padding:.15rem .5rem;border-radius:99px;}
.roadmap-cta .xp-chip{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);}