/*
 * Starcloud home hero, version 4.
 * The panoramic image (assets/images/hero-wide-*) is shown at its own size or smaller, never
 * stretched, anchored on the right. The rest of the hero is filled with a sky sampled from the
 * image's own left edge, and the image's left, top and bottom edges blend into it.
 * Motion is tied to the scene: the star breathes, light falls from the cloud into the racks,
 * mist drifts. The picture itself stays still. A keyboard-only control pauses the animation.
 * The image and the effects layer use the same scaling (cover) and anchor (right, middle),
 * so the effects stay locked to the picture at every screen shape.
 */

/* ---------- Announcement bar ---------- */
.notice .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 12px;text-align:center}
.notice strong{color:#9fe6ff;font-size:11px;letter-spacing:.16em;font-weight:600}
.notice span{color:#b9c4dc;font-size:12.5px}

/* ---------- Header tools (temporary until the shared site header replaces them) ---------- */
header .tools{display:flex;align-items:center;gap:6px}
header .tools #language{min-height:40px;min-width:40px;padding:0 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:transparent;color:#c9d3e6;font:600 12px Geist,'Segoe UI',sans-serif;cursor:pointer}
header .tools #language:hover{border-color:rgba(115,233,255,.6);color:#fff}
header .tools>a.tool-signin{min-height:40px;padding:0 12px;border:0;border-radius:999px;background:none;color:#e9edfb;font:500 14px Geist,'Segoe UI',sans-serif}
header .tools>a.tool-signin:hover{background:rgba(255,255,255,.06);color:#fff}
header .tools>a.tool-start{min-height:40px;padding:0 18px;border:1px solid #91f0ff;border-radius:999px;background:#73e9ff;color:#07192b;font:600 14px Geist,'Segoe UI',sans-serif;transition:background .2s,transform .2s}
header .tools>a.tool-start:hover{background:#a6f2ff!important;transform:translateY(-1px)}
header .tools>a.tool-start:active{transform:scale(.98)}
#navigation .nav-signin{display:none}
@media(max-width:850px){header .wrap.header{flex-wrap:nowrap!important;gap:8px!important}}
@media(max-width:700px){
  header .tools>a.tool-signin{display:none}
  #navigation.open .nav-signin{display:flex}
  header .tools>a.tool-start{padding:0 14px;font-size:13px}
}
@media(max-width:540px){header .header>.tools{width:auto!important}}

/* ---------- Hero shell: sky sampled from the image's left edge ---------- */
.cloud-hero-shell.hero-v2{
  --hero-h:clamp(580px,calc(100dvh - 118px),800px);
  /* The picture (2.4:1) is placed by its scene, not by its edges: the scene centre (62% across the image)
     sits at 72% of the window on laptops and stays beside the content column on wide screens. */
  --stage-w:calc(var(--hero-h) * 2.4);
  --scene-x:min(72vw,calc(50vw + 360px));
  position:relative;isolation:isolate;overflow:hidden;border:0;color:#f4f7fc;
  font-family:Geist,'Segoe UI',Arial,sans-serif;
  background:
    radial-gradient(55% 40% at 12% 100%,rgba(150,96,214,.34),transparent 72%),
    radial-gradient(40% 32% at 40% 96%,rgba(214,120,206,.18),transparent 70%),
    linear-gradient(180deg,#000e51 0%,#001159 20%,#021a71 40%,#0c2280 52%,#07217a 62%,#071e73 76%,#071d70 88%,#02186a 100%);
}
/* Scrim above image and mist, below text: header blend, reading shade, night fade. */
.cloud-hero-shell.hero-v2::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;filter:none;
  background:
    linear-gradient(180deg,#14132d 0%,rgba(20,19,45,0) 13%),
    linear-gradient(90deg,rgba(5,7,26,.62) 0%,rgba(5,7,26,.40) 30%,rgba(5,7,26,.10) 50%,rgba(5,7,26,0) 62%),
    linear-gradient(0deg,#080c1c 0%,rgba(8,12,28,.78) 7%,rgba(8,12,28,0) 24%);
}
/* Faint twinkling stars in the open sky on the left. */
.cloud-hero-shell.hero-v2::after{
  content:"";position:absolute;inset:0 40% 45% 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 8% 22%,#fff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 19% 61%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 31% 14%,#fff 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 44% 40%,#cfe0ff 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 57% 9%,#fff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 68% 52%,#e4d8ff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 26%,#fff 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 92% 70%,#dfe8ff 50%,transparent 51%);
  opacity:.55;animation:heroTwinkle 7s ease-in-out infinite alternate;
}
@keyframes heroTwinkle{0%{opacity:.25}50%{opacity:.7}100%{opacity:.4}}

/* ---------- Stage: the image at natural size, placed by its scene, edges blended ---------- */
/* The wrapper holds the picture and its mirrored extension together. */
.cloud-hero-shell.hero-v2 .hero-stage-wrap{
  position:absolute;top:0;left:calc(var(--scene-x) - var(--stage-w) * .62);z-index:0;width:var(--stage-w);height:var(--hero-h);max-width:none;
}
.cloud-hero-shell.hero-v2 .hero-stage{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 20%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
/* Very wide screens (about 2300px and up): past the picture's right edge, a mirrored copy continues the sky and clouds.
   It matches pixel for pixel at the join, then softens, darkens and fades out toward the window edge. */
.cloud-hero-shell.hero-v2 .hero-mirror{position:absolute;top:0;bottom:0;left:calc(100% - 24px);width:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 10%,transparent 48%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 10%,transparent 48%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.cloud-hero-shell.hero-v2 .hero-mirror picture,.cloud-hero-shell.hero-v2 .hero-mirror img{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0}
.cloud-hero-shell.hero-v2 .hero-mirror img{object-fit:cover;object-position:50% 50%;transform:scaleX(-1)}
.cloud-hero-shell.hero-v2 .hero-mirror-soft{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 180px);mask-image:linear-gradient(90deg,transparent 0,#000 180px)}
.cloud-hero-shell.hero-v2 .hero-mirror-soft img{filter:blur(18px) saturate(.9)}
.cloud-hero-shell.hero-v2 .hero-mirror::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,34,0) 24px,rgba(6,9,34,.28) 12%,rgba(6,9,34,.62) 30%,rgba(6,9,34,.88) 48%),linear-gradient(0deg,rgba(6,9,34,.88) 0,rgba(6,9,34,.6) 24%,rgba(6,9,34,0) 52%)}
@media(max-width:2200px){.cloud-hero-shell.hero-v2 .hero-mirror{display:none}}
.cloud-hero-shell.hero-v2 .hero-scene,.cloud-hero-shell.hero-v2 .hero-scene img{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0}
.cloud-hero-shell.hero-v2 .hero-scene img{object-fit:cover;object-position:50% 50%}
.cloud-hero-shell.hero-v2 .hero-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* Two effect layers with the same content: one for the full image, one for the phone crop. */
.cloud-hero-shell.hero-v2 .hero-fx-crop{display:none}
/* Until the picture has loaded, keep the effects hidden and fade the picture in. */
.cloud-hero-shell.hero-v2 .hero-scene,.cloud-hero-shell.hero-v2 .hero-fx,.cloud-hero-shell.hero-v2 .hero-mirror{opacity:0;transition:opacity .7s ease}
.cloud-hero-shell.hero-v2.scene-ready .hero-scene,.cloud-hero-shell.hero-v2.scene-ready .hero-fx,.cloud-hero-shell.hero-v2.scene-ready .hero-mirror{opacity:1}

/* Star: a slow breath of light around the star in the image. */
.cloud-hero-shell.hero-v2 .fx-aura{mix-blend-mode:screen;transform-box:fill-box;transform-origin:center;animation:fxAura 6.5s ease-in-out infinite}
.cloud-hero-shell.hero-v2 .fx-ring{transform-box:fill-box;transform-origin:center;opacity:0;animation:fxRing 6.5s ease-out infinite}
@keyframes fxAura{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes fxRing{0%,45%{opacity:0;transform:scale(.8)}60%{opacity:.45}100%{opacity:0;transform:scale(1.9)}}

/* Data: short pulses of light falling along the streaks into the racks. */
.cloud-hero-shell.hero-v2 .fx-flow{mix-blend-mode:screen;filter:drop-shadow(0 0 4px rgba(150,235,255,.9))}
.cloud-hero-shell.hero-v2 .fx-flow line{fill:none;stroke:#e2fbff;stroke-width:5.5;stroke-linecap:round;stroke-dasharray:10 300;stroke-dashoffset:10;opacity:0;animation:fxFlow 3.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes fxFlow{0%{stroke-dashoffset:10;opacity:0}15%{opacity:1}85%{opacity:.9}100%{stroke-dashoffset:-100;opacity:0}}

/* Mist drifting across the full width, tying the image to the sky fill. */
.cloud-hero-shell.hero-v2 .hero-mist{position:absolute;left:-8%;right:-8%;bottom:0;height:46%;z-index:1;pointer-events:none;}
.cloud-hero-shell.hero-v2 .hero-mist span{position:absolute;inset:0;mix-blend-mode:screen;filter:blur(26px)}
.cloud-hero-shell.hero-v2 .hero-mist span:first-child{
  background:radial-gradient(28% 42% at 18% 70%,rgba(196,150,255,.30),transparent 70%),radial-gradient(24% 38% at 52% 78%,rgba(255,160,226,.22),transparent 70%),radial-gradient(30% 40% at 84% 72%,rgba(170,150,255,.22),transparent 70%);
  animation:heroMistA 46s ease-in-out infinite alternate}
.cloud-hero-shell.hero-v2 .hero-mist span:last-child{
  background:radial-gradient(26% 36% at 34% 88%,rgba(220,170,255,.24),transparent 70%),radial-gradient(30% 40% at 70% 92%,rgba(255,180,232,.18),transparent 70%);
  animation:heroMistB 62s ease-in-out infinite alternate}
@keyframes heroMistA{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@keyframes heroMistB{from{transform:translateX(3%)}to{transform:translateX(-3%)}}

/* Pause control. */
.cloud-hero-shell.hero-v2 .motion-button{position:absolute;right:24px;bottom:28px;z-index:4;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;margin:0;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(10,14,40,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e8ecff;cursor:pointer;transition:border-color .2s,background .2s}
.cloud-hero-shell.hero-v2 .motion-button:hover{border-color:rgba(115,233,255,.6);background:rgba(16,22,58,.7)}
/* Kept for keyboard and screen-reader users (WCAG 2.2.2); invisible until it receives keyboard focus. */
.cloud-hero-shell.hero-v2 .motion-button:not(:focus-visible){clip-path:inset(50%);opacity:0;pointer-events:none}
.cloud-hero-shell.hero-v2 .motion-button:focus-visible{outline:2px solid #73e9ff;outline-offset:3px}
.cloud-hero-shell.hero-v2 .motion-button svg{width:14px;height:14px}
.cloud-hero-shell.hero-v2 .motion-button .icon-play{display:none}
.cloud-hero-shell.hero-v2.paused .motion-button .icon-play{display:block}
.cloud-hero-shell.hero-v2.paused .motion-button .icon-pause{display:none}
.cloud-hero-shell.hero-v2.paused::after,
.cloud-hero-shell.hero-v2.paused .hero-fx *,
.cloud-hero-shell.hero-v2.paused .hero-mist span{animation-play-state:paused!important}

/* ---------- Layout ---------- */
.cloud-hero-shell.hero-v2 .hero{
  position:static;z-index:auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  min-height:var(--hero-h);max-width:1320px;padding-top:56px;padding-bottom:72px;gap:0;
}
.cloud-hero-shell.hero-v2 .hero-copy{position:relative;z-index:3;order:0;max-width:560px;width:100%;text-align:left;margin:0}

/* ---------- Text ---------- */
.cloud-hero-shell.hero-v2 .hero .eyebrow{margin:0 0 20px;max-width:none;color:#9fe6ff;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.cloud-hero-shell.hero-v2 .hero h1{margin:0 0 22px;max-width:none;font-size:clamp(48px,5.2vw,80px);font-weight:700;line-height:1.02;letter-spacing:-.045em;color:#f4f7fc;text-wrap:balance}
.cloud-hero-shell.hero-v2 .hero h1 span{display:block;padding-bottom:.06em;color:#f8a5e5;background:linear-gradient(100deg,#ffb0df 0%,#d493ff 70%,#95c8ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.cloud-hero-shell.hero-v2 .hero .lead{margin:0;max-width:30em;font-family:inherit;font-size:18px;line-height:1.65;color:#d7def0}

.cloud-hero-shell.hero-v2 .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:32px}
.cloud-hero-shell.hero-v2 .hero-cta{min-height:52px;padding:0 26px;border:1px solid #91f0ff;border-radius:999px;background:#73e9ff;color:#07192b;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 10px 36px rgba(54,184,229,.28);transition:background .2s,box-shadow .2s,transform .2s}
.cloud-hero-shell.hero-v2 .hero-cta:hover{background:#a6f2ff;box-shadow:0 12px 40px rgba(54,184,229,.38);transform:translateY(-1px)}
.cloud-hero-shell.hero-v2 .hero-cta:active{transform:scale(.98)}
.cloud-hero-shell.hero-v2 .hero-link{color:#e8ecff;font-size:15px;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:color .2s,border-color .2s}
.cloud-hero-shell.hero-v2 .hero-link:hover{color:#73e9ff;border-color:#73e9ff}
.cloud-hero-shell.hero-v2 :is(.hero-cta,.hero-link,.os-card):focus-visible{outline:2px solid #73e9ff;outline-offset:3px}

/* ---------- Linux / Windows cards ---------- */
.cloud-hero-shell.hero-v2 .os-dock{position:relative;z-index:3;order:2;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(560px,100%);margin-top:56px}
.cloud-hero-shell.hero-v2 .os-card{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(14,18,52,.52);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);color:#fff;text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
.cloud-hero-shell.hero-v2 .os-card:hover{border-color:rgba(115,233,255,.55);background:rgba(20,26,70,.66);transform:translateY(-2px)}
.cloud-hero-shell.hero-v2 .os-logo{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff}
.cloud-hero-shell.hero-v2 .os-logo svg{width:26px;height:26px}
.cloud-hero-shell.hero-v2 .os-logo-windows{color:#9fe6ff}
.cloud-hero-shell.hero-v2 .os-card span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cloud-hero-shell.hero-v2 .os-card strong{font-size:15px;font-weight:600}
.cloud-hero-shell.hero-v2 .os-card small{font-size:12.5px;color:#aab6d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cloud-hero-shell.hero-v2 .os-card::after{content:"\2192";margin-left:auto;padding-left:8px;color:#9fe6ff;font-size:16px;transition:transform .25s}
.cloud-hero-shell.hero-v2 .os-card:hover::after{transform:translateX(3px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cloud-hero-shell.hero-v2 .os-card{background:rgba(14,18,52,.9)}}

@media(max-width:1180px){
  .cloud-hero-shell.hero-v2 .hero h1{font-size:clamp(46px,5.6vw,64px)}
  .cloud-hero-shell.hero-v2 .hero-copy,.cloud-hero-shell.hero-v2 .os-dock{max-width:500px}
}

/* ---------- Tablet and phone: text, then the scene, then the cards ---------- */
@media(max-width:1023px){
  .cloud-hero-shell.hero-v2::before{background:linear-gradient(180deg,#14132d 0%,rgba(20,19,45,0) 10%),linear-gradient(0deg,#080c1c 0%,rgba(8,12,28,0) 12%)}
  .cloud-hero-shell.hero-v2::after{inset:0 0 60% 0}
  .cloud-hero-shell.hero-v2 .hero{min-height:0;align-items:stretch;padding-top:44px;padding-bottom:32px}
  .cloud-hero-shell.hero-v2 .hero-copy{max-width:640px}
  .cloud-hero-shell.hero-v2 .hero-stage-wrap{position:relative;top:auto;left:auto;order:1;width:100vw;height:auto;aspect-ratio:1497/1600;max-height:78vh;margin:20px 0 0 calc(50% - 50vw);transform:none}
  .cloud-hero-shell.hero-v2 .hero-fx-wide{display:none}
  .cloud-hero-shell.hero-v2 .hero-fx-crop{display:block}
  .cloud-hero-shell.hero-v2 .hero-stage{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 84%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .cloud-hero-shell.hero-v2 .hero-mist,.cloud-hero-shell.hero-v2 .hero-mirror{display:none}
  .cloud-hero-shell.hero-v2 .os-dock{max-width:none;width:100%;margin-top:0}
}
@media(max-width:560px){
  .cloud-hero-shell.hero-v2 .hero{padding-top:34px}
  .cloud-hero-shell.hero-v2 .hero .eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:16px}
  .cloud-hero-shell.hero-v2 .hero h1{font-size:clamp(38px,11vw,48px);margin-bottom:16px}
  .cloud-hero-shell.hero-v2 .hero .lead{font-size:16px}
  .cloud-hero-shell.hero-v2 .hero-actions{margin-top:24px}
  .cloud-hero-shell.hero-v2 .os-dock{grid-template-columns:1fr}
}

/* ---------- Reduced motion: a still picture ---------- */
@media(prefers-reduced-motion:reduce){
  .cloud-hero-shell.hero-v2::after,.cloud-hero-shell.hero-v2 .hero-fx *,.cloud-hero-shell.hero-v2 .hero-mist span{animation:none!important}
  .cloud-hero-shell.hero-v2 .fx-flow line,.cloud-hero-shell.hero-v2 .fx-ring{opacity:0}
  .cloud-hero-shell.hero-v2 .fx-aura{opacity:.5}
  .cloud-hero-shell.hero-v2 .hero-stage-wrap,.cloud-hero-shell.hero-v2 .hero-mist{transform:none;transition:none}
  .cloud-hero-shell.hero-v2 .motion-button{display:none}
}