/* ============================================================================
   Homepage — the scroll-through-a-day atmosphere.
   Only the homepage loads this file.
   ========================================================================== */

#sky{position:fixed;inset:0;z-index:0;background:linear-gradient(#2A2740,#6E5A63);transition:background .1s linear}
#sun{
  /* Anchored at the origin and moved with a transform. It used to be animated
     by writing `left` and `top`, which are layout properties — every frame of
     the sun crossing the sky was recorded as a layout shift and counted
     against CLS. A transform is composited and counts for nothing. */
  position:fixed;z-index:1;left:0;top:0;width:clamp(90px,11vw,150px);aspect-ratio:1;border-radius:50%;
  will-change:transform;
  background:radial-gradient(circle at 50% 50%,#FFF4E2,#F6D9A8 45%,rgba(246,217,168,0) 71%);
  filter:blur(1px);opacity:.9;pointer-events:none;
}
#floorlight{
  /* Same reason as #sun: moved by transform, not by `left`. The skew stays in
     the transform, so the script composes both rather than replacing it. */
  position:fixed;z-index:1;left:0;bottom:0;height:46vh;width:38vw;pointer-events:none;
  background:linear-gradient(to top,rgba(255,236,203,.5),rgba(255,236,203,0));
  transform:skewX(-16deg);filter:blur(26px);opacity:.55;will-change:transform;
}
#grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(43,36,48,.10) .5px,transparent .5px);background-size:3px 3px;
}
.silhouette{position:fixed;left:0;bottom:0;width:100%;z-index:2;pointer-events:none;line-height:0}
.silhouette svg{width:100%;height:auto;display:block}
#content{position:relative;z-index:3}
.sheet{background:var(--paper);position:relative;z-index:3}
.sheet.tint{background:var(--paper-2)}

/* ------------------------------------------------------------- hero */
.home-hero{min-height:88svh;display:flex;align-items:center;padding:calc(70px + var(--header-h,69px)) 0 80px;color:var(--on-dark)}
.home-hero__grid{display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media(min-width:1000px){.home-hero__grid{grid-template-columns:1.25fr .85fr}}
.home-hero__clock{font-family:var(--display);font-size:13px;letter-spacing:.24em;color:rgba(247,241,233,.72);margin:0 0 22px}
.home-hero h1{font-size:clamp(2.7rem,7.2vw,5.6rem);letter-spacing:-.035em}
.home-hero h1 em{color:var(--hero-accent);font-weight:300}
.home-hero__lede{max-width:46ch;margin:24px 0 0;font-size:clamp(1rem,1.8vw,1.2rem);color:rgba(247,241,233,.84)}

/* Names the full range directly under the buttons — the thing a family scans for. */
.home-hero__services{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.home-hero__services a{
  font-size:13px;letter-spacing:.02em;text-decoration:none;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(247,241,233,.28);color:rgba(247,241,233,.86);transition:.18s;white-space:nowrap;
}
.home-hero__services a:hover{border-color:rgba(247,241,233,.75);background:rgba(247,241,233,.09);color:#fff}
.home-hero__services a.is-all{border-color:transparent;color:var(--hero-accent);padding-left:8px}
.home-hero__services a.is-all:hover{background:none;color:#F7D9AC}
@media(max-width:560px){
  .home-hero__services{gap:7px}
  .home-hero__services a{font-size:12.5px;padding:6px 12px}
}

/* --------------------------------------------------------- day story */
.stage{min-height:132vh;display:flex;padding:0 0 4vh}
.stage__panel{
  position:sticky;top:22vh;align-self:flex-start;width:min(430px,86vw);
  background:var(--card);backdrop-filter:blur(10px);border:1px solid rgba(43,36,48,.09);
  border-radius:6px;padding:34px 34px 30px;box-shadow:0 26px 60px -30px rgba(43,36,48,.45);
  opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;
}
.stage.is-seen .stage__panel{opacity:1;transform:none}
.stage:nth-child(even) .stage__panel{margin-left:auto}
.stage__time{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.stage__time b{font-family:var(--display);font-size:29px;font-weight:300;letter-spacing:-.02em}
.stage__time span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--moss);font-weight:500}
.stage__panel h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:12px}
.stage__panel h2 em{color:var(--apricot)}
.stage__panel p{margin:0;color:var(--ink-soft);font-size:15.5px}
.stage__panel .chips{margin-top:20px}
.stage__link{display:inline-flex;gap:7px;margin-top:20px;font-size:13.5px;color:var(--moss);font-weight:500;text-decoration:none;transition:gap .25s}
.stage__link:hover{gap:12px}

.daylight-rail{
  position:fixed;right:clamp(12px,2.4vw,30px);top:50%;transform:translateY(-50%);z-index:30;
  display:flex;flex-direction:column;gap:16px;align-items:flex-end;opacity:0;transition:opacity .3s;
}
.daylight-rail button{
  background:none;border:0;padding:2px 0;cursor:pointer;display:flex;align-items:center;gap:9px;
  font-family:var(--body);font-size:10px;letter-spacing:.12em;color:rgba(247,241,233,.55);
}
.daylight-rail i{display:block;width:16px;height:1px;background:rgba(247,241,233,.4);transition:all .3s}
.daylight-rail button.is-on{color:var(--hero-accent)}
.daylight-rail button.is-on i{width:30px;background:var(--hero-accent)}
.daylight-rail.is-dark button{color:rgba(43,36,48,.5)}
.daylight-rail.is-dark i{background:rgba(43,36,48,.35)}
.daylight-rail.is-dark button.is-on{color:var(--moss)}
.daylight-rail.is-dark button.is-on i{background:var(--moss)}

@media(max-width:900px){
  .daylight-rail{display:none}
  .stage__panel{top:14vh;padding:28px 24px}
  .stage{min-height:112vh}
}

/* --------------------------------------------------- out-of-hours band */
.home-ooh{position:relative;z-index:3;background:var(--moss-deep);color:var(--on-dark);overflow:hidden}
.home-ooh::before{
  content:"";position:absolute;right:-6%;top:-40%;width:44vw;height:44vw;border-radius:50%;
  background:radial-gradient(circle,rgba(230,180,124,.28),transparent 66%);
}
.home-ooh .wrap{position:relative;z-index:2}
.home-ooh .eyebrow{color:var(--amber)}
.home-ooh h2 em{color:var(--amber)}
.home-ooh__grid{display:grid;gap:26px;margin-top:38px}
@media(min-width:760px){.home-ooh__grid{grid-template-columns:repeat(3,1fr)}}
.home-ooh__cell{border-top:1px solid rgba(241,237,228,.22);padding-top:20px}
.home-ooh__cell b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:300;margin-bottom:8px;color:#fff}
.home-ooh__cell p{margin:0;font-size:14.5px;color:rgba(241,237,228,.76)}

/* ------------------------------------------------------- rate preview */