/* ============= HOMEPAGE ============= */

.home{ background:var(--paper); }
.home p{ padding:0; }

.h2{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  font-variation-settings:"opsz" 120;
  font-size:clamp(1.9rem, 3.4vw, 2.75rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink-900);
  margin:0; padding:0;
  text-wrap:balance;
}

.dulido a.btn-outline-light{ color:#fff; border-color:rgba(255,255,255,.45); background:transparent; }
.dulido a.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* --- hero: a real campus photograph, text set on the shaded left side --- */
.hero{
  position:relative; isolation:isolate;
  min-height:min(88vh, 760px);
  display:flex; align-items:flex-end;
  color:#fff;
  background:var(--green-900) var(--hero-img, none) center / cover no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
	linear-gradient(90deg, rgba(6,49,26,.92) 0%, rgba(6,49,26,.72) 38%, rgba(6,49,26,.15) 72%),
	linear-gradient(0deg, rgba(6,49,26,.6) 0%, rgba(6,49,26,0) 40%);
}
.hero__inner{
  width:100%;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 320px); align-items:end; gap:48px;
  padding-top:clamp(96px, 14vh, 160px); padding-bottom:clamp(40px, 7vh, 72px);
}
.hero__title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  font-variation-settings:"opsz" 144;
  font-size:clamp(2.6rem, 6.2vw, 5.25rem);
  line-height:.98;
  letter-spacing:-.03em;
  color:#fff;
  max-width:13ch;
  margin:0; padding:0;
  text-wrap:balance;
}
.hero__lede{
  max-width:46ch; margin:24px 0 0;
  font-size:var(--t-lg); line-height:1.6; color:rgba(255,255,255,.86);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__actions .btn{ padding:13px 22px; font-size:.95rem; }

/* PSB hero: the registration period sits above the title, the test dates fill the right column */
.home p.hero__period{ /* .home p resets padding, so this needs to outrank it */
  display:inline-block; margin:0 0 32px;
  padding:7px 16px; line-height:1.4; border-radius:var(--radius-pill);
  border:1px solid var(--gold-soft); color:var(--gold-soft);
  font-size:var(--t-sm); font-weight:600; letter-spacing:.01em;
}
.hero--psb .hero__title{ max-width:15ch; }

.hero__waves{
  padding:18px 22px 10px; border-radius:var(--radius-lg);
  background:rgba(6,49,26,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
.hero__waves-k{ margin:0; font-size:var(--t-sm); font-weight:600; color:var(--gold-soft); }
.hero__waves ol{ list-style:none; margin:10px 0 0; padding:0; }
.hero__waves li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.18);
  font-family:'Fraunces', Georgia, serif; font-size:1.1rem; line-height:1.3; color:#fff;
}
.hero__waves li:last-child{ border-bottom:0; }
.hero__waves li span{ font-family:inherit; font-size:var(--t-sm); color:rgba(255,255,255,.72); }

.hero__side{ display:grid; gap:14px; }
.hero__latest{ list-style:none; margin:0; padding:0 4px; display:grid; }
.hero__latest li{ grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.hero__latest li.is-current{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.dulido .hero__latest a{ display:block; color:#fff; }
.hero__latest-k{ display:block; font-size:var(--t-sm); color:rgba(255,255,255,.72); }
.hero__latest-t{ display:block; margin-top:4px; font-family:'Fraunces', Georgia, serif; font-size:1.05rem; line-height:1.3; }
.dulido .hero__latest a:hover .hero__latest-t{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* --- levels: typographic list, not cards --- */
.levels{ padding:0 0 clamp(48px, 6vw, 80px); }
.levels__grid{ border-top:1px solid var(--ink-200); padding-top:clamp(40px, 5vw, 64px); display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 6vw, 96px); }
.levels__head p{ margin:16px 0 0; max-width:38ch; color:var(--ink-500); font-size:var(--t-lg); line-height:1.6; }
.levels__list{ margin:0; }
.levels__row{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 0; border-bottom:1px solid var(--ink-200);
}
.levels__row dt{
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing:-.015em; color:var(--green-800); line-height:1.2;
}
.levels__row dd{ margin:0; color:var(--ink-700); line-height:1.5; font-size:var(--t-sm); }
.levels__row dt.levels__multi{ font-size:clamp(1.2rem, 1.6vw, 1.45rem); white-space:nowrap; }
.levels__multi span{ color:var(--gold); }

/* --- a day at the pesantren: the one bold element --- */
.day{
  --c-ibadah:var(--gold);
  --c-belajar:var(--green-500);
  --c-rutin:#7fa58c;
  --c-tidur:#123e26;
  background:var(--green-900); color:#e2efe6;
  padding:clamp(56px, 7vw, 88px) 0;
}
.day .h2{ color:#fff; }
.day__head{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; }
.day__head p{ margin:0; max-width:40ch; color:rgba(226,239,230,.75); line-height:1.6; }

.day__band{
  display:flex; gap:3px; height:56px; margin-top:clamp(28px, 4vw, 40px);
}
.day__seg{
  flex-basis:0; min-width:4px; border-radius:6px;
  background:var(--c-rutin);
  transition:transform .15s ease, filter .15s ease;
}
.day__seg--ibadah{ background:var(--c-ibadah); }
.day__seg--belajar{ background:var(--c-belajar); }
.day__seg--tidur{ background:var(--c-tidur); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.day__seg.is-on{ transform:scaleY(1.18); filter:brightness(1.15); }

.day__ruler{ position:relative; height:28px; margin-top:8px; font-size:.78rem; color:rgba(226,239,230,.6); font-variant-numeric:tabular-nums; }
.day__ruler span{ position:absolute; top:0; transform:translateX(-50%); }
.day__ruler span:first-child{ transform:none; }
.day__ruler span:last-child{ transform:translateX(-100%); }

.day__legend{ display:flex; flex-wrap:wrap; gap:20px; list-style:none; margin:14px 0 0; padding:0; font-size:var(--t-sm); }
.day__key{ display:inline-flex; align-items:center; gap:8px; }
.day__key::before{ content:""; width:12px; height:12px; border-radius:3px; background:var(--c-rutin); }
.day__key--ibadah::before{ background:var(--c-ibadah); }
.day__key--belajar::before{ background:var(--c-belajar); }
.day__key--tidur::before{ background:var(--c-tidur); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }

.day__list{
  list-style:none; margin:clamp(28px, 4vw, 40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:40px;
  grid-auto-flow:column; grid-template-rows:repeat(var(--rows3, 7), auto); /* --rows set from the schedule length in front-page.php */
}
.day__item{
  display:grid; grid-template-columns:104px minmax(0, 1fr); gap:12px; align-items:baseline;
  padding:8px 0 8px 12px; font-size:var(--t-sm); border-bottom:1px solid rgba(255,255,255,.1);
  border-left:3px solid transparent;
  transition:border-color .15s, background .15s;
  outline-offset:-2px;
}
.day__item time{ font-variant-numeric:tabular-nums; color:rgba(226,239,230,.65); font-size:var(--t-sm); }
.day__item span{ color:#fff; }
.day__item.is-on{ background:rgba(255,255,255,.05); }
.day__item--ibadah.is-on{ border-left-color:var(--c-ibadah); }
.day__item--belajar.is-on{ border-left-color:var(--c-belajar); }
.day__item--rutin.is-on{ border-left-color:var(--c-rutin); }
.day__item--tidur.is-on{ border-left-color:#5f8b70; }

/* --- profile --- */
.profile{ padding:clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); }
.profile__grid{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(32px, 6vw, 96px); align-items:start; }
.profile__seal{
  width:min(100%, 280px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--paper-2) 75%);
  box-shadow:inset 0 0 0 1px var(--ink-100);
}
.profile__seal img{ width:68%; height:auto; }
.profile__body > p{ margin:24px 0 0; max-width:62ch; font-size:var(--t-lg); line-height:1.7; color:var(--ink-700); }
.profile__facts{
  margin:40px 0 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 40px;
  border-top:1px solid var(--ink-200);
}
.profile__facts > div{ padding:18px 0; border-bottom:1px solid var(--ink-200); }
.profile__facts dt{ font-size:var(--t-sm); color:var(--ink-500); }
.profile__facts dd{ margin:4px 0 0; color:var(--ink-900); font-weight:600; }
.profile__facts dd a{ color:inherit; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
.profile__facts dd a:hover{ color:var(--green-800); }
.profile__note{ display:block; font-weight:400; color:var(--ink-500); font-size:var(--t-sm); }
.profile__date span{
  display:block; font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:400;
  color:var(--green-800); font-size:var(--t-lg);
}

/* --- extracurricular --- */
.extra{ padding:clamp(56px, 7vw, 88px) 0 clamp(72px, 9vw, 128px); }
.extra__list{
  list-style:none; padding:0; margin:36px 0 0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  border-top:1px solid var(--ink-200);
}
.extra__list li{ padding:28px 28px 0 0; }
.extra__list li + li{ padding-left:28px; border-left:1px solid var(--ink-200); }
.extra__list li:nth-child(4n+1){ padding-left:0; border-left:0; }
.extra__list li:nth-child(n+5){ margin-top:28px; }
.dulido .extra__list svg{ width:30px; height:30px; color:var(--green-700); }
.extra__list h3{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.2rem; line-height:1.25;
  color:var(--ink-900); margin:18px 0 0; padding:0;
}
.extra__list p{ margin:10px 0 0; color:var(--ink-500); line-height:1.6; font-size:.95rem; }

/* --- facilities --- */
.facilities{ padding:clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.facilities__grid{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(24px, 5vw, 72px); align-items:start; border-top:1px solid var(--ink-200); padding-top:clamp(32px, 4vw, 48px); }
.facilities__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.facilities__list li{ padding:8px 16px; border:1px solid var(--ink-200); border-radius:var(--radius-pill); background:#fff; color:var(--ink-700); font-size:.95rem; }

/* a facility with a photo (Customizer > Fasilitas) is the same pill with a small thumbnail;
   hovering shows a larger preview, clicking opens the lightbox */
.facilities__list li:has(.facilities__photo){ padding:0; position:relative; }
.dulido .facilities__photo{
  display:inline-flex; align-items:center; gap:10px; margin:0; padding:4px 16px 4px 4px;
  border:0; border-radius:var(--radius-pill); background:none; font:inherit; color:inherit; cursor:zoom-in;
}
.facilities__photo img{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; }
.facilities__photo::after{
  content:""; display:none; position:absolute; left:0; top:calc(100% + 8px); z-index:5;
  width:240px; aspect-ratio:4 / 3; border-radius:var(--radius);
  background:var(--green-100) var(--photo) center / cover no-repeat;
  box-shadow:0 12px 32px rgba(6,49,26,.28);
}
.facilities__photo:hover::after, .facilities__photo:focus-visible::after{ display:block; }
.facilities{ overflow:visible; } /* the preview hangs outside the pill row */
.facilities::before, .facilities::after{ display:none; }

.lightbox{ position:fixed; inset:0; margin:auto; width:max-content; max-width:min(92vw, 1100px); max-height:92vh; padding:0; border:0; background:transparent; overflow:visible; }
.lightbox::backdrop{ background:rgba(6,49,26,.88); }
.lightbox img{ display:block; width:auto; height:auto; max-width:min(92vw, 1100px); max-height:82vh; border-radius:var(--radius); }
.lightbox__cap{ margin:12px 0 0; color:#fff; text-align:center; font-size:var(--t-sm); }
.dulido .lightbox__close{
  position:absolute; top:-44px; right:0; width:36px; height:36px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer;
}
.dulido .lightbox__close:hover{ background:rgba(255,255,255,.28); }

/* --- international program --- */
.intl{ padding:clamp(72px, 9vw, 128px) 0; background:var(--green-900); color:#d6e8dc; }
.intl .h2{ color:#fff; }
.intl__head{ max-width:70ch; }
.intl__kicker{ margin:0 0 12px; font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.intl__head > p:not(.intl__kicker){ margin:16px 0 0; font-size:var(--t-lg); line-height:1.65; color:rgba(214,232,220,.85); }
.intl__pillars{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.intl__pillars li{ padding:7px 14px; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-pill); font-size:.9rem; color:#fff; }
.intl__sub{ margin:clamp(40px, 5vw, 56px) 0 0; padding:0; font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.4rem; color:#fff; }
.intl__corners{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.intl__corners li{ padding:22px; border-radius:var(--radius); background:rgba(255,255,255,.06); box-shadow:inset 0 3px 0 var(--gold); }
.intl__corners h4{ margin:0; padding:0; font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.1rem; color:#fff; }
.intl__corners p{ margin:10px 0 0; font-size:.93rem; line-height:1.55; }
.intl__corners .intl__route{ color:rgba(214,232,220,.7); }
.intl__note{ margin:20px 0 0; max-width:80ch; font-size:.88rem; line-height:1.6; color:rgba(214,232,220,.7); }
.intl__note + .intl__note{ margin-top:8px; }

/* --- news feed: one lead story, four headlines --- */
.feed{ padding:clamp(72px, 9vw, 128px) 0; background:var(--paper-2); }
.feed__head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
.dulido a.feed__all{ color:var(--green-700); font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.feed__grid{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(32px, 4vw, 56px);
  margin-top:clamp(28px, 4vw, 44px);
}
.feed__lead-img{ display:block; aspect-ratio:16 / 10; overflow:hidden; border-radius:var(--radius-lg); background:var(--ink-100); }
.feed__lead-img img{ width:100%; height:100%; object-fit:cover; }
.feed__meta{ display:flex; gap:16px; margin:18px 0 0; font-size:var(--t-sm); color:var(--ink-500); }
.feed__meta span{ color:var(--green-700); font-weight:600; }
.feed__lead h3{
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:clamp(1.5rem, 2.4vw, 2rem);
  line-height:1.15; letter-spacing:-.015em; margin:10px 0 0; padding:0; text-wrap:balance;
}
.dulido .feed__lead h3 a{ color:var(--ink-900); }
.dulido .feed__lead h3 a:hover{ color:var(--green-700); }
.feed__excerpt{ margin:12px 0 0; color:var(--ink-500); line-height:1.65; max-width:60ch; }

.feed__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink-200); }
.feed__list li{ border-bottom:1px solid var(--ink-200); }
.dulido .feed__list a{ display:grid; grid-template-columns:104px minmax(0, 1fr); gap:18px; padding:18px 0; color:var(--ink-900); }
.feed__thumb{ display:block; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:var(--ink-100); }
.feed__thumb img{ width:100%; height:100%; object-fit:cover; }
.feed__item time{ display:block; font-size:var(--t-sm); color:var(--ink-500); }
.feed__title{ display:block; margin-top:4px; font-family:'Fraunces', Georgia, serif; font-size:1.08rem; line-height:1.3; text-wrap:pretty; }
.dulido .feed__list a:hover .feed__title{ color:var(--green-700); }

/* --- info pendaftaran: three plain columns on the light green tint, right below the hero --- */
.psb{ background:var(--green-50); padding:clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 72px); }
.psb__head{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 5vw, 72px); align-items:end; }
.psb__head p{ margin:16px 0 0; max-width:48ch; color:var(--ink-500); font-size:var(--t-lg); line-height:1.6; }
.psb__head--brochure{ grid-template-columns:minmax(0, 1fr) auto; align-items:center; }
.psb__brochure{ justify-self:end; text-align:center; }
.psb__head .psb__brochure-k{ margin:0 0 10px; font-size:var(--t-sm); color:var(--ink-500); }
.psb__brochure ._df_thumb{ margin:0 auto; }
.psb__cols{
  margin-top:32px; padding-top:28px; border-top:1px solid var(--ink-200);
}
.psb__col h3{
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:var(--t-xl);
  color:var(--ink-900); margin:0 0 14px; padding:0;
}
.psb__col ul, .psb__col ol{ margin:0; padding:0; color:var(--ink-700); line-height:1.55; }
.psb__steps{ list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px 24px; }
.psb__steps li{ counter-increment:step; display:grid; grid-template-columns:28px minmax(0, 1fr); gap:8px; padding:7px 0; align-items:start; }
.psb__steps li::before{
  content:counter(step); width:24px; height:24px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:var(--green-700); color:#fff; font-size:.8rem; font-weight:600; line-height:1;
}
.psb__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:36px; }
.psb__foot p{ margin:0; color:var(--ink-500); line-height:1.5; }
.dulido .psb__foot a:not(.btn){ color:var(--green-700); white-space:nowrap; }

/* --- visit --- */
.visit{ padding:0 0 clamp(72px, 9vw, 128px); }
.visit__grid{ border-top:1px solid var(--ink-200); padding-top:clamp(40px, 5vw, 64px); display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 5vw, 72px); align-items:stretch; }
.visit__grid--nomap{ grid-template-columns:minmax(0, 1fr); }
.visit__info > p{ margin:16px 0 0; color:var(--ink-500); line-height:1.6; max-width:40ch; }
.visit__facts{ margin:28px 0 0; border-top:1px solid var(--ink-200); }
.visit__facts > div{ display:grid; grid-template-columns:110px minmax(0, 1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--ink-200); }
.visit__facts dt{ font-size:var(--t-sm); color:var(--ink-500); }
.visit__facts dd{ margin:0; color:var(--ink-900); line-height:1.5; min-width:0; overflow-wrap:anywhere; }
.dulido .visit__facts a{ color:var(--green-700); }
.visit__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.visit__map{ min-height:420px; border-radius:var(--radius-lg); overflow:hidden; background:var(--ink-100); }
.visit__map iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }

/* --- responsive --- */
@media (max-width: 960px){
  .hero__inner{ grid-template-columns:minmax(0, 1fr); gap:36px; }
  .hero::before{
	background:linear-gradient(0deg, rgba(6,49,26,.95) 0%, rgba(6,49,26,.75) 55%, rgba(6,49,26,.35) 100%);
  }
  .levels__grid, .profile__grid, .feed__grid, .visit__grid, .psb__head{ grid-template-columns:minmax(0, 1fr); }
  .psb__head p{ margin-top:12px; }
  .psb__head--brochure{ grid-template-columns:minmax(0, 1fr); }
  .psb__brochure{ justify-self:start; text-align:left; }
  .psb__brochure ._df_thumb{ margin:0; }
  .psb__steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .profile__seal{ width:160px; }
  .extra__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .extra__list li:nth-child(odd){ padding-left:0; border-left:0; }
  .extra__list li:nth-child(even){ padding-left:28px; border-left:1px solid var(--ink-200); }
  .extra__list li:nth-child(n+3){ margin-top:28px; }
  .facilities__grid{ grid-template-columns:minmax(0, 1fr); }
  .intl__corners{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .day__list{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(var(--rows, 7), auto); column-gap:40px; }
}
@media (max-width: 640px){
  .profile__facts{ grid-template-columns:minmax(0, 1fr); }
  .extra__list{ grid-template-columns:minmax(0, 1fr); }
  .extra__list li, .extra__list li + li, .extra__list li:nth-child(even){ padding:24px 0 0; border-left:0; margin-top:0 !important; }
  .intl__corners{ grid-template-columns:minmax(0, 1fr); }
  .day__band{ height:44px; gap:2px; }
  .day__list{ grid-auto-flow:row; grid-template-rows:none; grid-template-columns:minmax(0, 1fr); }
  .day__item{ grid-template-columns:96px minmax(0, 1fr); }
  .feed__head{ flex-direction:column; gap:8px; }
  .psb__steps{ grid-template-columns:minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  .day__seg, .day__item{ transition:none; }
  .day__seg.is-on{ transform:none; }
}

/* --- motion: one reveal per section, CSS-only, driven by an IntersectionObserver in main.js.
   Everything sits under no-preference so reduced-motion users (and no-JS) get the static page. --- */
@media (prefers-reduced-motion: no-preference){
  @keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
  @keyframes grow-x{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

  .hero__text > *, .hero__side{ animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero__text > :nth-child(2){ animation-delay:.1s; }
  .hero__text > :nth-child(3){ animation-delay:.2s; }
  .hero__text > :nth-child(4){ animation-delay:.3s; }
  .hero__side{ animation-delay:.45s; }

  .js .home section:not(.hero):not(.is-in) > .container{
    opacity:0; transform:translateY(22px);
    transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .js .home section:not(.hero) > .container{ transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }

  .js [data-stagger] > *{ transition:opacity .55s ease calc(var(--i, 0) * 60ms + .2s), transform .55s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 60ms + .2s); }
  .js section:not(.is-in) [data-stagger]:not(.day__band) > *{ opacity:0; transform:translateY(12px); }

  .js .day:not(.is-in) .day__seg{ transform:scaleX(0); }
  .js .day.is-in .day__seg{ transform-origin:left; animation:grow-x .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i, 0) * 30ms + .25s); }
}

/* --- ambient colour: two soft gradient glows drift behind every section.
   Transform-only animation (no filter), paused while the section is off-screen (.is-live from main.js). --- */
.home section{ position:relative; overflow:clip; --glow-a:rgba(214,168,58,.20); --glow-b:rgba(14,122,61,.14); }
.home section > .container{ position:relative; z-index:1; }
.home section:not(.hero)::before, .home section:not(.hero)::after, .hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:min(70vw, 760px); aspect-ratio:1;
  background:radial-gradient(circle at center, var(--glow-a) 0%, transparent 62%);
}
.home section:not(.hero)::before{ top:-28%; right:-14%; }
.home section:not(.hero)::after{ bottom:-34%; left:-18%; width:min(60vw, 620px); background:radial-gradient(circle at center, var(--glow-b) 0%, transparent 62%); }
.hero::after{ z-index:-1; bottom:-30%; right:-10%; --glow-a:rgba(214,168,58,.26); }
.day, .intl{ --glow-a:rgba(214,168,58,.22); --glow-b:rgba(38,160,90,.30); }
.psb{ --glow-a:rgba(14,122,61,.16); --glow-b:rgba(214,168,58,.22); }
.feed{ --glow-a:rgba(214,168,58,.18); --glow-b:rgba(14,122,61,.12); }

@media (prefers-reduced-motion: no-preference){
  @keyframes drift-a{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-14%, 12%) scale(1.18); } }
  @keyframes drift-b{ from{ transform:translate(0,0) scale(1.1); } to{ transform:translate(16%, -12%) scale(.92); } }
  .home section::before, .hero::after{ animation:drift-a 26s ease-in-out infinite alternate paused; will-change:transform; }
  .home section::after{ animation:drift-b 32s ease-in-out infinite alternate paused; will-change:transform; }
  .hero::before{ animation:none; will-change:auto; }
  .home section.is-live::before, .home section.is-live::after{ animation-play-state:running; }
}