/* Home hero: rising bubbles, sliding waves, and the running headline strip */
.hero > :not(.hero-fx):not(.hero-card):not(.hero-covers){position:relative;z-index:1}
.hero-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-fx .b{position:absolute;bottom:-40px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(255,255,255,.06));animation:hx-rise linear infinite}
.hero-fx .b1{left:6%;width:14px;height:14px;animation-duration:11s;animation-delay:0s}
.hero-fx .b2{left:14%;width:24px;height:24px;animation-duration:15s;animation-delay:3s}
.hero-fx .b3{left:23%;width:9px;height:9px;animation-duration:9s;animation-delay:1s}
.hero-fx .b4{left:33%;width:18px;height:18px;animation-duration:13s;animation-delay:6s}
.hero-fx .b5{left:44%;width:11px;height:11px;animation-duration:10s;animation-delay:2s}
.hero-fx .b6{left:52%;width:28px;height:28px;animation-duration:17s;animation-delay:5s}
.hero-fx .b7{left:61%;width:12px;height:12px;animation-duration:12s;animation-delay:8s}
.hero-fx .b8{left:70%;width:20px;height:20px;animation-duration:14s;animation-delay:0.5s}
.hero-fx .b9{left:79%;width:8px;height:8px;animation-duration:9.5s;animation-delay:4s}
.hero-fx .b10{left:86%;width:16px;height:16px;animation-duration:12.5s;animation-delay:7s}
.hero-fx .b11{left:92%;width:26px;height:26px;animation-duration:16s;animation-delay:2.5s}
.hero-fx .b12{left:38%;width:7px;height:7px;animation-duration:8.5s;animation-delay:9s}
@keyframes hx-rise{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:1}50%{transform:translate3d(18px,-260px,0)}90%{opacity:.9}100%{transform:translate3d(-14px,-620px,0);opacity:0}}
.hero-fx .wave{position:absolute;left:0;bottom:0;width:200%;height:84px;animation:hx-slide linear infinite}
.hero-fx .wave path{fill:rgba(255,255,255,.12)}
.hero-fx .w2{height:64px;animation-duration:12s;animation-direction:reverse}
.hero-fx .w2 path{fill:rgba(255,255,255,.18)}
.hero-fx .w1{animation-duration:20s}
@keyframes hx-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* running strip */
.ticker{display:flex;align-items:stretch;background:#052c5e;color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.14)}
.ticker-label{flex:none;display:flex;align-items:center;padding:0 18px;background:#00a9d8;color:#06274a;font-weight:700;font-size:.85rem;letter-spacing:.02em}
.ticker-window{flex:1;overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;align-items:center;animation:tk-run 70s linear infinite;will-change:transform}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:10px;padding:13px 30px 13px 0;color:#e1f9ff;font-size:.92rem}
.ticker-item a{color:#fff;text-decoration:none}
.ticker-item a:hover,.ticker-item a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.ticker-item b{padding:2px 8px;background:rgba(255,255,255,.14);color:#d2f9ff;font-size:.74rem;font-weight:700}
.ticker-item:after{content:"";width:6px;height:6px;margin-left:20px;border-radius:50%;background:#00a9d8}
@keyframes tk-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .hero-fx .b,.hero-fx .wave{animation:none}
  .hero-fx .b{display:none}
  .ticker-track{animation:none}
  .ticker-window{overflow-x:auto}
}
@media (max-width:640px){.ticker-label{padding:0 12px}.hero-fx .b:nth-child(n+8){display:none}}
/* Running hero messages: fixed background, only the text swaps */
.hero-slides{display:grid;position:relative;z-index:1}
.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s}
.hero-slide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .15s,transform .6s ease .15s,visibility 0s}
.hero .hs-h{max-width:720px;margin:0;font:inherit;font-family:var(--heading);letter-spacing:-.035em;font-size:clamp(2.7rem,5vw,5.35rem);line-height:.96;font-weight:700}
.hero .hero-slide>p:last-child{margin-bottom:0}
.hero-dots{grid-area:2/1;display:flex;gap:8px;margin-top:34px}
.hero-dots button{width:34px;height:4px;padding:0;border:0;background:rgba(255,255,255,.35);cursor:pointer}
.hero-dots button[aria-current]{background:#fff}
.hero-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){.hero .hs-h{font-size:3rem}}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}

/* Newest three magazine covers in the home hero (replaces the "latest issue" card) */
.hero-covers{position:absolute;z-index:1;top:64px;right:5%;width:480px;height:400px}
.hc{position:absolute;left:50%;top:50%;width:220px;height:290px;margin:-145px 0 0 -110px;display:block;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 22px 50px rgba(0,28,60,.38);transition:transform .35s ease,box-shadow .35s ease}
.hc img{display:block;width:100%;height:100%;object-fit:cover}
.hc-1{transform:rotate(-9deg) translateX(-118px)}
.hc-2{transform:translateY(-8px);z-index:3}
.hc-3{transform:rotate(9deg) translateX(118px);z-index:2}
.hc:hover{z-index:4;box-shadow:0 28px 60px rgba(0,28,60,.5)}
.hc-2:hover{transform:translateY(-14px)}
.hc-tile{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:18px;color:#fff;background:linear-gradient(160deg,#0a5d9e,#0aa6d8)}
.hc-tile b{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.hc-tile i{font:normal 700 1.8rem/1 var(--heading)}
.hc-tile u{text-decoration:none;font-size:1rem;opacity:.85}
@media (max-width:940px){.hero-covers{top:auto;bottom:18px;right:50%;transform:translateX(50%);width:360px;height:250px}.hc{width:140px;height:190px;margin:-95px 0 0 -70px}.hc-1{transform:rotate(-8deg) translateX(-78px)}.hc-3{transform:rotate(8deg) translateX(78px)}}
@media (prefers-reduced-motion:reduce){.hc{transition:none}}
@media (min-width:941px){.hero-slides{max-width:min(56%,700px)}.hero-covers{right:3%}}
@media (min-width:941px) and (max-width:1400px){.hero-covers{transform:scale(.8);transform-origin:right center;right:2%}.hero-slides{max-width:54%}}
