/* ══════════════════════════════════════════════════════════════
   Home hero — covers fly out of Suno's cloud and into a folder.
   Every colour is a theme token, so the toggle repaints it like the rest of
   the page; only the cloud, the folder and the accent keep their own hues.
   The animation itself is assets/js/hero.js.
   ══════════════════════════════════════════════════════════════ */

.ss-hero{position:relative;display:flex;flex-direction:column;gap:clamp(28px,4vw,56px);
  /* Air between the link form above and the headline; the form's own 34px
     margin read as the headline being part of it. Padding, not margin: a
     margin collapses into that 34px and adds nothing. */
  padding-top:clamp(20px,3vw,44px)}
/* Two columns only where both fit at 520px; below that the copy stacks above
   the buttons, which is tablet portrait and every phone. */
.ss-hero__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));
  gap:clamp(24px,4vw,64px);align-items:end}
.ss-hero__col{display:flex;flex-direction:column;gap:24px;min-width:0}
/* The headline is sized from its own column (cqi), so it can stay on two
   lines at every width instead of breaking "On your / disk". */
.ss-hero__col:first-child{container-type:inline-size}

/* .masthead h1 from counter.css brings its own size and margins; two classes
   put this one back in charge of both. */
.masthead .ss-title{margin:0;max-width:none;font-weight:500;
  /* "On your disk" is ~5.2em wide; 18.5cqi leaves it a little air. */
  font-size:min(clamp(46px,7.6vw,120px),18.5cqi);line-height:.92;letter-spacing:-.05em}
.ss-title__line{display:block;white-space:nowrap}
.ss-grad-text{background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  /* The descender of "y" sits below a .92 line box and the clip cut it off. */
  padding-bottom:.08em}
.ss-lead{margin:0;max-width:560px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}

.ss-ctas{display:flex;flex-wrap:wrap;gap:14px}
.ss-btn{flex:1 1 240px;display:flex;align-items:center;gap:12px;min-width:0;padding:10px 16px 10px 10px;
  border:1px solid transparent;border-radius:16px;color:var(--ink-1);
  transition:box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.ss-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.ss-btn--primary{background-image:var(--grad);background-origin:border-box;color:#fff;
  box-shadow:0 10px 40px -12px rgba(242,54,127,.6)}
.ss-btn--primary:hover{color:#fff;box-shadow:0 16px 48px -12px rgba(242,54,127,.8)}
.ss-btn--secondary{background-color:var(--paper-2);border-color:var(--line)}
.ss-btn--secondary:hover{background-color:var(--paper-3);border-color:var(--line-firm)}
.ss-btn__icon{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.ss-btn__icon svg{display:block;width:26px;height:26px}
.ss-btn__icon--grad{background-image:var(--grad-edge)}
.ss-btn__icon--grad svg{width:18px;height:18px}
.ss-btn__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ss-btn__title{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.ss-btn__sub{font-size:13px;line-height:1.35;color:var(--ink-2)}
.ss-btn--primary .ss-btn__sub{color:rgba(255,255,255,.88)}

/* ---------- the stage ----------
   Cloud on the left, folder on the right, the wordmark between them on a
   dashed line. Covers are positioned by the script in stage pixels. */
.ss-stage{position:relative;height:clamp(220px,30vw,400px);
  /* The cloud and the folder stand on one floor: the folder's front reaches
     .86 of its height below the centre line, and the cloud is set down to it. */
  --ss-fold-h:clamp(64px,9.6vw,128px);--ss-cloud-w:clamp(120px,24vw,320px);
  --ss-floor:calc(50% + .86 * var(--ss-fold-h));
  /* The lower half of the stage is air: the covers arc over the top and
     nothing hangs below the folder. Taking it back out makes the gap to the
     next band the bands' own rhythm, measured from the folder. 0.86 is how far
     the folder's front reaches below the centre line, in its own heights. */
  margin-bottom:calc(.86 * var(--ss-fold-h) - clamp(110px,15vw,200px))}
/* The same 96 / 72 / 56 / 44 a .band uses at each width. One class, after
   counter.css, so it also beats that file's `.page { padding: 0 14px }`. */
.masthead-hero{padding-bottom:96px}
@media (max-width:1024px){.masthead-hero{padding-bottom:72px}}
@media (max-width:720px){.masthead-hero{padding-bottom:56px}}
@media (max-width:480px){.masthead-hero{padding-bottom:44px}}
.ss-glow{position:absolute;top:50%;width:min(520px,70vw);aspect-ratio:1;translate:0 -50%;border-radius:50%;pointer-events:none}
/* The glows bleed into the page gutter, but never past the viewport: below
   1280px the gutter is narrower than 120px and the right one scrolled the page
   sideways. (100% − 100vw)/2 is minus the gutter; 16px covers a scrollbar. */
.ss-glow--l{left:max(-120px,calc((100% - 100vw) / 2 + 16px));background:radial-gradient(closest-side,rgba(242,54,127,.22),rgba(242,54,127,0))}
.ss-glow--r{right:max(-120px,calc((100% - 100vw) / 2 + 16px));background:radial-gradient(closest-side,rgba(58,138,230,.2),rgba(58,138,230,0))}
.ss-line{position:absolute;left:20%;right:20%;top:50%;height:1px;
  /* Drawn, not a border: a 1px dashed border renders 1-2px dashes that read
     as a solid rule. 5px on, 9px off is plainly a dotted route. */
  background:repeating-linear-gradient(90deg,var(--line-firm) 0 5px,transparent 5px 14px)}
.ss-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  padding:0 clamp(10px,1.2vw,16px);background:var(--paper);display:flex;align-items:center;color:var(--ink-1)}
.ss-logo svg{display:block;width:clamp(96px,12vw,170px);height:auto;aspect-ratio:1858.29/307.43}
/* What the picture says, under the wordmark that says who. It sits below the
   line, where no cover flies — they all arc over the top. */
.ss-tagline{position:absolute;left:50%;top:calc(50% + clamp(18px,2.3vw,30px));translate:-50% 0;z-index:1;
  width:max-content;max-width:min(46%,440px);margin:0;text-align:center;text-wrap:balance;
  font-family:var(--t-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

.ss-cloud{position:absolute;left:0;width:var(--ss-cloud-w);aspect-ratio:240/150;z-index:4;
  /* Its shape ends at y=142 of the 150-unit box (×.625 for the height), so
     that edge, not the box, goes on the floor. */
  top:calc(var(--ss-floor) - 142 / 150 * .625 * var(--ss-cloud-w));
  transform-origin:50% 94.7%;
  /* A CSS animation, not the script: set from JS every frame, the scale made
     Chrome repaint the whole page each frame — grain filter, 30px blur and all —
     and on a busy GPU a hover was enough for tiles to flash dark. */
  animation:ss-breathe 4.4s ease-in-out infinite alternate}
@keyframes ss-breathe{from{scale:.982}to{scale:1.018}}
.ss-cloud__glow{position:absolute;left:8%;right:8%;top:20%;bottom:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(240,96,42,.55),rgba(240,96,42,0));filter:blur(30px)}
.ss-cloud__svg{position:relative;width:100%;height:100%;display:block;overflow:visible}
.ss-cloud__label{position:absolute;left:0;right:0;top:56%;text-align:center;font-family:var(--t-mono);
  font-size:clamp(11px,1.3vw,18px);font-weight:500;letter-spacing:.32em;text-indent:.32em;color:#fff}

/* clip on x only: a card still in flight when the window narrows keeps its old
   coordinates and would scroll the page sideways until it lands. */
.ss-lane{position:absolute;inset:0;z-index:2;pointer-events:none;overflow-x:clip}
.ss-cover{position:absolute;left:0;top:0;overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1);will-change:transform,opacity}
:root[data-theme="light"] .ss-cover{box-shadow:0 18px 36px -16px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.08)}

.ss-folder-back{position:absolute;right:0;top:50%;width:clamp(104px,16vw,220px);height:clamp(80px,12vw,160px);transform:translateY(-44%);z-index:1}
.ss-folder-back__tab{position:absolute;left:0;top:-16px;width:42%;height:30px;border-radius:12px 12px 0 0;background:#3f8fe0}
.ss-folder-back__body{position:absolute;inset:0;border-radius:6px 16px 16px 16px;background:linear-gradient(180deg,#3f8fe0,#2a6fc4)}
.ss-folder-front{position:absolute;right:0;top:50%;width:clamp(104px,16vw,220px);height:var(--ss-fold-h);transform:translateY(-14%);z-index:3;
  will-change:scale;
  border-radius:clamp(10px,1.4vw,16px);background:linear-gradient(180deg,#8fd0ff 0%,#5aaef5 45%,#3a8ae6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 24px 60px -20px rgba(58,138,230,.6);transform-origin:50% 100%;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:clamp(8px,1.2vw,14px) clamp(10px,1.4vw,16px)}
.ss-folder-front__count{font-size:clamp(15px,1.8vw,22px);font-weight:600;letter-spacing:-.02em;color:#08203f;font-variant-numeric:tabular-nums}
.ss-folder-front__path{font-family:var(--t-mono);font-size:clamp(9px,.9vw,11px);color:rgba(8,30,60,.75);white-space:nowrap}

/* Phones: the wordmark would sit on top of the cloud and the folder, so it
   leaves and the dashed line carries the route on its own. */
@media (max-width:520px){
  /* Here the tagline is the lowest thing, ~81px below the centre line. */
  .ss-stage{margin-bottom:-28px}
  .ss-logo{display:none}
  /* No wordmark to hang from: the line goes full width, under the folder. */
  .ss-tagline{top:calc(50% + 64px);left:0;translate:none;width:100%;max-width:none;font-size:11px}
  .ss-line{left:30%;right:30%}
}

@media (prefers-reduced-motion:reduce){.ss-cloud{animation:none}}