/* Inside Big Machines series page ONLY (body.series-ibm). Bright, bold, machine-themed.
   Text on solid fills: navy on yellow/white, white on blue/navy/brown (all >= 4.5:1). Motion = transform/opacity only.
   Fonts (SIL OFL 1.1, self-hosted, see /fonts/OFL.txt): Bungee (headings), Rubik (body). */
@font-face{font-family:"Bungee";src:url(/fonts/bungee.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Rubik";src:url(/fonts/rubik.woff2) format("woff2");font-weight:300 900;font-display:swap}
.series-ibm{--navy:#152042;--yellow:#FFD23F;--orange:#F28C28;--red:#C62828;--sky:#1565C0;--dirt:#7A4110;--paper2:#FFF8E6}
.series-ibm main{font-family:"Rubik",system-ui,sans-serif;background:var(--paper2);color:var(--navy)}
.series-ibm main h1,.series-ibm main h2,.series-ibm main h3{font-family:"Bungee",Impact,sans-serif;font-weight:400;letter-spacing:.01em;font-style:normal}
.ibm-page{position:relative;overflow:hidden;font-size:1.05rem;line-height:1.65}
.series-ibm .crumbs{position:relative;z-index:3}
.ibm-h2{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.7rem);line-height:1.1;margin:0 0 .4em;color:inherit}
.ibm-sub{max-width:62ch;margin:0 0 1.6em}

/* Buttons */
.ibm-btn{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;border-radius:999px;background:var(--red);color:#fff;
  font:700 .95rem/1.2 "Rubik",sans-serif;text-decoration:none;border:3px solid var(--navy);box-shadow:0 5px 0 var(--navy);transition:transform .15s ease,box-shadow .15s ease}
.ibm-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 7px 0 var(--navy)}
.ibm-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.ibm-btn:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
.ibm-btn-ghost{background:#fff;color:var(--navy)}
.ibm-btn-ghost:hover{color:var(--navy)}

/* Hero */
.ibm-hero{position:relative;z-index:1;background:linear-gradient(180deg,#0F5BB5 0%,var(--sky) 70%);color:#fff;padding:56px 0 190px}
.ibm-hero-text{text-shadow:0 1px 2px rgba(10,40,90,.35)}
.ibm-hero-inner{position:relative;z-index:3;display:grid;gap:28px;align-items:center}
@media (min-width:960px){.ibm-hero-inner{grid-template-columns:1.15fr 1fr}}
.ibm-kicker{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFE27A;margin:0 0 .4em}
.ibm-hero h1{font-size:clamp(2.6rem,1.6rem + 4.6vw,5rem);line-height:.98;margin:0 0 .3em;color:#fff;text-shadow:0 5px 0 #0A3A78}
.ibm-lead{font-size:1.15rem;max-width:46ch;color:#fff}
.ibm-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:1.2em 0 0}
.ibm-chips li{background:var(--yellow);color:var(--navy);font-weight:700;border-radius:999px;padding:6px 16px;border:3px solid var(--navy)}
.ibm-hero-covers{display:flex;justify-content:center;align-items:flex-end}
.hc{display:block;width:min(30vw,200px);margin:0 -14px;transition:transform .3s ease}
.hc .cover{border:5px solid #fff;border-radius:8px;box-shadow:0 16px 30px rgba(0,0,0,.35)}
.hc-0{transform:rotate(-7deg) translateY(10px)}.hc-1{z-index:2;transform:translateY(-12px)}.hc-2{transform:rotate(7deg) translateY(10px)}
.hc:hover,.hc:focus-visible{animation:wiggle .6s ease-in-out;z-index:3}
.clouds{position:absolute;inset:0;pointer-events:none;z-index:1}
.cloud{position:absolute;opacity:.9;height:auto}
.cl1{width:150px;top:-24px;left:0;animation:drift-x 50s linear infinite}
.cl2{display:none;width:120px;top:30%;left:0;animation:drift-x 70s linear infinite;animation-delay:-30s;opacity:.7}
.cl3{width:120px;top:-30px;left:0;animation:drift-x 60s linear infinite;animation-delay:-45s;opacity:.8}
@keyframes drift-x{from{transform:translateX(-220px)}to{transform:translateX(110vw)}}
.road{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;background:
  linear-gradient(180deg,#4A4F5C 0 8px,#2E323C 8px 100%);border-top:6px solid #8BC34A}
.road::after{content:"";position:absolute;left:0;top:58px;width:200%;height:8px;background:repeating-linear-gradient(90deg,var(--yellow) 0 60px,transparent 60px 110px);animation:road-move 3s linear infinite}
@keyframes road-move{to{transform:translateX(-110px)}}
.road-truck{position:absolute;bottom:34px;left:0;width:210px;height:auto;z-index:2;animation:drive 14s linear infinite,bounce 0.7s ease-in-out infinite}
@keyframes drive{from{translate:-260px 0}to{translate:110vw 0}}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-16px) rotate(-3deg)}60%{transform:translateY(-4px) rotate(1deg)}}

/* What's inside */
.ibm-inside{position:relative;z-index:2;padding:60px 0}
.ibm-steps{list-style:none;padding:0;margin:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ibm-steps li{background:#fff;border:3px solid var(--navy);border-radius:18px;padding:18px 18px 16px;box-shadow:0 6px 0 var(--navy);transition:transform .2s}
.ibm-steps li:hover,.ibm-steps li:focus-visible{animation:wiggle .6s ease-in-out}
.ibm-steps li:focus-visible{outline:4px solid var(--orange);outline-offset:3px}
.step-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--orange);color:var(--navy);font:400 1.2rem "Bungee",sans-serif;border:3px solid var(--navy)}
.ibm-steps h3{font-size:1.3rem;margin:.5em 0 .2em;color:var(--navy)}
.ibm-steps p{margin:0;font-size:.98rem}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg) translateY(-3px)}40%{transform:rotate(3deg) translateY(-3px)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}}

/* Zones */
.ibm-zone{position:relative;z-index:2;padding:80px 0;overflow:hidden}
.zone-inner{position:relative;z-index:3;display:grid;gap:30px;align-items:center}
@media (min-width:960px){.zone-inner{grid-template-columns:1.25fr 1fr}}
.zone-book{display:grid;gap:22px;align-items:start}
@media (min-width:640px){.zone-book{grid-template-columns:190px 1fr}}
.zone-cover{display:block;max-width:220px}
.zone-cover .cover{border-radius:8px;border:4px solid #fff;box-shadow:0 14px 28px rgba(0,0,0,.3);transition:transform .3s ease}
.zone-cover:hover .cover,.zone-cover:focus-visible .cover{animation:wiggle .6s ease-in-out}
.zone-kicker{font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .3em}
.zone-line{font-weight:700;font-size:1.15rem;margin:0 0 .5em}
.zone-meta{font-weight:600;font-size:.95rem}
.zone-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.zone-art{position:relative;height:380px;pointer-events:none}

/* Zone 1: building site */
.zone-build{background:var(--yellow);color:var(--navy)}
.zone-build .zone-kicker{color:#8A2A0A}
.stripes{position:absolute;left:0;width:200%;height:22px;z-index:2;background:repeating-linear-gradient(135deg,var(--navy) 0 22px,var(--yellow) 22px 44px);animation:stripes-move 6s linear infinite}
.stripes-top{top:0}.stripes-bottom{bottom:0}
@keyframes stripes-move{to{transform:translateX(-62.2px)}}
.crane{position:absolute;right:0;top:-20px;width:300px;height:400px}
.crane-body{position:absolute;inset:0;width:100%;height:auto}
.crane-cable{position:absolute;left:73%;top:60px;width:84px;height:330px;overflow:hidden}
.crane-hook{width:84px;height:auto;animation:lift 6s ease-in-out infinite}
@keyframes lift{0%,100%{transform:translateY(-10px)}45%,55%{transform:translateY(-150px)}}
.excavator{position:absolute;left:-40px;bottom:0;width:420px;height:auto;transform-origin:80% 95%;animation:scoop 4s ease-in-out infinite}
@keyframes scoop{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg) translateY(-6px)}60%{transform:rotate(2deg)}}
.dust-puff{position:absolute;width:90px;height:auto;opacity:0}
.dp1{left:10px;bottom:6px;animation:puff 4s ease-out infinite;animation-delay:1.1s}
.dp2{left:70px;bottom:0;width:70px;animation:puff 4s ease-out infinite;animation-delay:1.4s}
@keyframes puff{0%{opacity:0;transform:scale(.4)}20%{opacity:.9;transform:scale(1)}60%{opacity:0;transform:scale(1.5) translateY(-20px)}100%{opacity:0}}

/* Zone 2: launch pad + starfield */
.zone-space{background:linear-gradient(180deg,#0B1640,#1A1F5C);color:#fff}
.zone-space .zone-kicker{color:var(--yellow)}
.zone-space a.zone-cover .cover{border-color:#C9D3FF}
.starfield{position:absolute;inset:0;z-index:1;pointer-events:none}
.starfield i{position:absolute;inset:0;background-repeat:repeat;animation:twinkle 4s ease-in-out infinite}
.starfield i:nth-child(1){background-image:radial-gradient(2px 2px at 20px 30px,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 140px 90px,#fff 50%,transparent 51%),radial-gradient(2px 2px at 260px 160px,#FFE9A8 50%,transparent 51%);background-size:300px 220px}
.starfield i:nth-child(2){background-image:radial-gradient(1.5px 1.5px at 80px 120px,#fff 50%,transparent 51%),radial-gradient(2.5px 2.5px at 200px 40px,#fff 50%,transparent 51%);background-size:260px 200px;animation-delay:-1.3s;animation-duration:5s}
.starfield i:nth-child(3){background-image:radial-gradient(1px 1px at 50px 60px,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 170px 150px,#BFD4FF 50%,transparent 51%);background-size:220px 180px;animation-delay:-2.6s;animation-duration:3.4s}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
.zone-space .zone-art{height:460px}
.rocket-wrap{position:absolute;left:38%;bottom:0;width:110px;height:100%}
.rocket-fly{position:absolute;left:0;bottom:40px;width:110px;animation:launch 7s ease-in infinite}
.rocket{width:110px;height:auto;display:block}
.flame{position:absolute;left:50%;top:96%;width:46px;margin-left:-23px;transform-origin:50% 0;animation:flicker .15s ease-in-out infinite alternate}
@keyframes flicker{from{transform:scaleY(.85)}to{transform:scaleY(1.15)}}
@keyframes launch{0%,12%{transform:translateY(0)}14%{transform:translateY(2px)}16%{transform:translateY(-2px)}80%{transform:translateY(-560px);opacity:1}81%,100%{transform:translateY(-560px);opacity:0}}
.smoke-trail{position:absolute;left:-40px;bottom:0;width:190px;height:120px}
.smoke-trail img{position:absolute;bottom:0;width:90px;opacity:0;animation:smoke 7s ease-out infinite}
.smoke-trail img:nth-child(1){left:0;animation-delay:.9s}.smoke-trail img:nth-child(2){left:50px;animation-delay:1.1s}.smoke-trail img:nth-child(3){left:100px;animation-delay:1.3s}
.smoke-trail img:nth-child(4){left:25px;animation-delay:1.6s;bottom:30px}.smoke-trail img:nth-child(5){left:75px;animation-delay:1.9s;bottom:40px}
@keyframes smoke{0%{opacity:0;transform:scale(.3)}12%{opacity:.95;transform:scale(1)}50%{opacity:.4;transform:scale(1.8) translateY(-40px)}70%,100%{opacity:0;transform:scale(2)}}
.satellite{position:absolute;right:4%;top:6%;width:120px;height:auto;animation:orbit 12s ease-in-out infinite}
.station{position:absolute;left:0;top:2%;width:150px;height:auto;animation:orbit 16s ease-in-out infinite reverse}
.rover{position:absolute;right:0;bottom:0;width:190px;height:auto;animation:crawl 10s ease-in-out infinite}
@keyframes orbit{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(-30px,14px) rotate(6deg)}}
@keyframes crawl{0%,100%{transform:translateX(0)}50%{transform:translateX(-50px) rotate(-1deg)}}

/* Zone 3: dirt track */
.zone-track{background:linear-gradient(180deg,#844512,var(--dirt));color:#fff;padding-bottom:200px}
.zone-track .zone-kicker{color:#FFE48F}
.tb-green{position:absolute;right:6%;bottom:30px;width:240px;height:auto;animation:bounce 1s ease-in-out infinite}
.track-strip{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;background:
  radial-gradient(ellipse 80px 18px at 15% 30%,#C77A33 60%,transparent 62%),radial-gradient(ellipse 120px 22px at 60% 26%,#C77A33 60%,transparent 62%),
  linear-gradient(180deg,#B8692A 0,#8F4E17 100%);border-top:6px dashed #F5C26B}
.track-strip .truck-bounce{position:absolute;bottom:22px;left:0;height:auto}
.tb-red{width:230px;animation:drive 11s linear infinite,bounce .8s ease-in-out infinite}
.tb-blue{width:170px;animation:drive 15s linear infinite,bounce .6s ease-in-out infinite;animation-delay:-7s,-.2s}

/* CTA */
.ibm-cta{position:relative;z-index:2;padding:70px 0 80px;text-align:center}
.ibm-cta .ibm-sub{margin-left:auto;margin-right:auto}
.cta-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:900px;margin:0 auto}
.cta-item{background:#fff;border:3px solid var(--navy);border-radius:20px;padding:18px;box-shadow:0 7px 0 var(--navy)}
.cta-item .cover{width:150px;margin:0 auto 10px;border-radius:6px;transition:transform .3s}
.cta-item:hover .cover,.cta-item:focus-within .cover{animation:wiggle .6s ease-in-out}
.cta-name{font:400 1.1rem "Bungee",sans-serif;margin:.2em 0 .7em}
.ibm-note{font-size:.95rem;margin-top:24px}

/* Click effects (js/ibm-fx.js) */
.fx{position:fixed;z-index:60;pointer-events:none}
.fx-dust{width:46px;height:32px;background:url(/img/series/ibm/deco/dust.svg) no-repeat center/contain;animation:fx-dust .8s ease-out forwards}
.fx-spark{width:8px;height:8px;border-radius:50%;background:#FFE36E;box-shadow:0 0 8px 3px #FFB300;animation:fx-spark .7s ease-out forwards}
@keyframes fx-dust{0%{opacity:.95;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.4)}}
@keyframes fx-spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

@media (max-width:700px){
  .ibm-hero{padding-bottom:160px}.road{height:100px}.road::after{top:48px}.road-truck{width:150px;bottom:30px}
  .hc{width:30vw}
  .clouds{display:none}
  .zone-art{height:300px}.zone-space .zone-art{height:360px}
  .excavator{width:300px}.crane{width:200px;height:270px;top:0}.crane-cable{top:40px;width:56px;height:220px}.crane-hook{width:56px}
  .rocket-wrap,.rocket-fly,.rocket{width:80px}.satellite{width:90px}.station{width:110px}.rover{width:140px}
  .tb-green{width:170px}.tb-red{width:170px}.tb-blue{width:130px}
}
@media (prefers-reduced-motion:reduce){
  .series-ibm *{animation:none !important;transition:none !important}
  .road-truck{translate:none;left:8%}.tb-red{translate:none;left:6%}.tb-blue{translate:none;left:55%}
  .cl1{transform:translateX(10vw)}.cl2{transform:translateX(60vw)}.cl3{transform:translateX(80vw)}
  .rocket-fly{transform:none}.smoke-trail img:nth-child(-n+3){opacity:.85}
  .hc-0{transform:rotate(-7deg) translateY(10px)}.hc-1{transform:translateY(-12px)}.hc-2{transform:rotate(7deg) translateY(10px)}
  .fx{display:none}
}
@media print{.clouds,.road,.zone-art,.track-strip,.starfield,.stripes,.fx{display:none}.ibm-hero,.zone-space,.zone-track{color:#000;background:#fff}}