/* =========================================================================
   The landing page. Big pictures, deep colour, and things that move a little
   when you do.
   ========================================================================= */

body.home{background:#140f22;color:#f3ecff}
body.home .sky-bits{display:none}
body.home .topbar{
  background:transparent;border-bottom:0;position:fixed;left:0;right:0;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
}
body.home .topbar.stuck{background:rgba(20,15,34,.86);backdrop-filter:blur(14px);border-bottom:1px solid #2f2447}
body.home .brand,body.home .nav a{color:#fff}
body.home .brand-text em{color:#ffd6a5}
body.home .nav a:hover{background:rgba(255,255,255,.14)}
body.home .nav a.on{background:#ffca3a;color:#3b2a4a}
body.home .footer{margin-top:0}

body.home h2{font-size:clamp(1.9rem,4vw,3.1rem);color:#fff}
.eyebrow{font-family:var(--font-hand);font-size:1.5rem;color:#ffb4a2;display:block;margin-bottom:.1rem}
.lead{font-size:1.14rem;color:#cdbde8;max-width:38rem}
.center-lead{margin-inline:auto}
.band-head{margin-bottom:2.2rem}
.band-head p{color:#cdbde8;margin:.2rem 0 0}

.btn-big{font-size:1.12rem;padding:.95rem 1.9rem}
.btn-glass{
  background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(8px);
  box-shadow:0 6px 0 rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.25);
}
.btn-glass:hover{background:rgba(255,255,255,.22)}

/* ---------------- hero stage ---------------- */
.stage{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
}
.stage-sky{
  position:absolute;inset:-8% -4% -4%;background-size:cover;background-position:center 42%;
  will-change:transform;z-index:0;
}
.stage-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% 15%, rgba(255,214,165,.30), transparent 70%),
    linear-gradient(180deg, rgba(20,15,34,.42) 0%, rgba(20,15,34,0) 30%, rgba(20,15,34,.55) 78%, #140f22 100%);
}
.stage-fade{position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,#140f22)}

.stage-cast{position:absolute;inset:0;z-index:3;pointer-events:none}
.cast{
  position:absolute;bottom:9vh;will-change:transform;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));
  animation:castFloat 7s ease-in-out infinite;
}
.cast-anmolya{left:4%;height:60vh;z-index:2}
.cast-juniper{left:23%;height:43vh;z-index:3;animation-duration:8.5s;animation-delay:-1.5s;transform:scaleX(-1)}
.cast-lillypoo{left:37%;height:24vh;bottom:4vh;z-index:4;animation-duration:6s;animation-delay:-3s}
@keyframes castFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}

.stage-copy{
  position:relative;z-index:5;margin-left:auto;width:min(44rem,48vw);
  padding:0 clamp(1.4rem,5vw,5rem) clamp(5rem,12vh,9rem) 0;
}
.stage-copy .kicker{
  display:inline-block;font-family:var(--font-hand);font-size:1.6rem;color:#3b2a4a;
  background:#ffd6a5;padding:.1rem 1.1rem;border-radius:999px;transform:rotate(-2deg);
}
.stage-copy h1{
  font-size:clamp(2.8rem,7vw,5.6rem);line-height:.97;margin:.5rem 0 .6rem;color:#fff;
  text-shadow:0 8px 40px rgba(0,0,0,.55);
}
.stage-copy h1 .shine{
  background:linear-gradient(95deg,#ffd6a5,#ff8fab 40%,#9ad9ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stage-copy p{font-size:1.2rem;color:#e6dcff;max-width:32rem;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}

.scroll-hint{
  position:absolute;bottom:2.2rem;left:50%;translate:-50% 0;z-index:6;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:1.2rem;text-decoration:none;animation:hintBob 2.4s ease-in-out infinite;
}
.scroll-hint:hover{background:rgba(255,255,255,.28);text-decoration:none}
@keyframes hintBob{0%,100%{translate:-50% 0}50%{translate:-50% 9px}}

@media (max-width:900px){
  /* Portrait has no room for copy beside the cast, so they stack: words at the
     top, cast along the bottom, and a gradient between them so the overlap
     reads as depth rather than collision. */
  .stage{align-items:flex-start;padding-top:13vh;min-height:100svh}
  .stage-copy{width:auto;margin:0;padding:0 1.3rem}
  .stage-copy h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .stage-copy p{font-size:1.02rem;max-width:30rem}
  .cta{margin-top:1.1rem}
  .btn-big{font-size:1rem;padding:.8rem 1.4rem}
  .cast{bottom:1vh}
  .cast-anmolya{height:30vh;left:1%}
  .cast-juniper{height:22vh;left:34%}
  .cast-lillypoo{height:15vh;left:60%;bottom:1vh}
  .stage-fade{height:14vh}
  .scroll-hint{bottom:1.2rem;width:38px;height:38px}
}

/* ---------------- friends ---------------- */
.band-friends{position:relative;padding:clamp(3.5rem,9vw,6.5rem) 0;background:#140f22}
.cast-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.6rem}
.cast-card{
  position:relative;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s ease;
}
.cast-card:hover{transform:translateY(-10px);box-shadow:0 26px 50px rgba(0,0,0,.5)}
.cast-art{
  aspect-ratio:1/1;display:grid;place-items:center;padding:1rem 1rem 0;
  background:radial-gradient(60% 60% at 50% 60%, var(--tint,#ffd6a5)33, transparent 72%);
}
.cast-art img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.45))}
.cast-body{padding:.4rem 1.4rem 1.6rem}
.cast-body h3{font-size:1.45rem;margin:0;color:#fff}
.cast-body .role{font-family:var(--font-hand);font-size:1.3rem;color:var(--tint,#ffd6a5);margin:.1rem 0 .5rem}
.cast-body .blurb{color:#cdbde8;font-size:.98rem;margin:0}

/* ---------------- shelf ---------------- */
.band-shelf{padding:clamp(3.5rem,9vw,6.5rem) 0;background:linear-gradient(180deg,#140f22,#1d1636)}
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.6rem}
.tile{
  border-radius:24px;overflow:hidden;text-decoration:none;color:#fff;display:flex;flex-direction:column;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s ease;
}
.tile:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 26px 50px rgba(0,0,0,.5);text-decoration:none}
.tile-art{position:relative;aspect-ratio:8/5;overflow:hidden;background:#241b3d}
.tile-art img,.tile-art svg{width:100%;height:100%;object-fit:cover;display:block}
.tile-emoji{
  position:absolute;left:14px;top:12px;font-size:1.7rem;width:48px;height:48px;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(20,15,34,.7);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);
}
.tile-body{padding:1.1rem 1.3rem 1.4rem}
.tile-body h3{margin:0 0 .2rem;font-size:1.28rem;color:#fff}
.tile-body p{font-family:var(--font-hand);font-size:1.22rem;color:#ffb4a2;margin:0 0 .6rem}
.tile-meta{font-size:.86rem;color:#a795c9}

/* ---------------- cinema ---------------- */
.band-cinema{
  position:relative;padding:clamp(4rem,10vw,7rem) 0;background-size:cover;background-position:center;
}
.band-cinema::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,8,22,.92) 0%,rgba(11,8,22,.72) 55%,rgba(11,8,22,.35) 100%)}
.cinema-in{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.cinema-in p{color:#d9cdf5;max-width:34rem}
.cinema-art{display:grid;place-items:center}
.cinema-art img{max-height:340px;filter:drop-shadow(0 24px 34px rgba(0,0,0,.6));animation:castFloat 6s ease-in-out infinite}
@media(max-width:820px){.cinema-in{grid-template-columns:1fr}.cinema-art{display:none}}

/* ---------------- about ---------------- */
.band-about{padding:clamp(3.5rem,9vw,6.5rem) 0;background:#1d1636}
.about-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.about-art{
  position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/3;
  background-size:cover;background-position:center;display:grid;place-items:end center;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 26px 50px rgba(0,0,0,.45);
}
.about-art img{height:84%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))}
@media(max-width:820px){.about-in{grid-template-columns:1fr}}

/* ---------------- years ---------------- */
.band-years{padding:clamp(3.5rem,9vw,6rem) 0;background:linear-gradient(180deg,#1d1636,#140f22)}
.rings{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.ring{
  width:156px;height:156px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:rgba(255,255,255,.07);border:4px solid #ffca3a;color:#fff;text-decoration:none;
  font-family:var(--font-head);transition:transform .25s ease;
}
.ring:hover{transform:scale(1.07) rotate(-3deg);text-decoration:none}
.ring b{font-size:2rem;display:block;line-height:1;letter-spacing:-.02em}
.ring span{font-size:.84rem;color:#cdbde8}
.ring.future{border-color:rgba(255,255,255,.22);border-style:dashed;color:#8e7fb0}

/* ---------------- wishes ---------------- */
.band-wishes{padding:clamp(3.5rem,9vw,6rem) 0;background:#140f22}
.band-wishes .wish{
  background:rgba(255,255,255,.07);border-left:8px solid #ffca3a;color:#f3ecff;
  border-radius:16px;padding:1.1rem 1.2rem;font-family:var(--font-hand);font-size:1.45rem;
}
.band-wishes .wish b{color:#a795c9}

@media (prefers-reduced-motion:reduce){
  .cast,.cinema-art img,.scroll-hint{animation:none}
  .stage-sky{transform:none !important}
}