/* ABOUT / SERVICE / NEWS share one fixed backdrop. Each section clips a viewport-fixed
   layer, so the same scene stays still while the cards and headings scroll over it. */
.cxsb-section { position:relative; isolation:isolate; clip-path:inset(0); background:transparent; }
.cxh-home .cxsb-section { background:transparent; }
.cxsb-backdrop { position:fixed; top:0; left:0; z-index:-2; width:100%; height:100vh; height:100lvh; background:#eef4fa url('/material/home-2026/section-bg-pc.webp') center bottom / cover no-repeat; pointer-events:none; }
/* A light veil keeps navy text readable over the sky; the edges fade into the white neighbours. */
.cxsb-backdrop::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.62),rgba(255,255,255,.28) 55%,rgba(255,255,255,.12)); }
.cxsb-section::before,.cxsb-section::after { content:''; position:absolute; left:0; right:0; z-index:-1; height:clamp(48px,8vw,120px); pointer-events:none; }
.cxsb-section::before { top:0; background:linear-gradient(#fff,rgba(255,255,255,0)); }
.cxsb-section::after { bottom:0; background:linear-gradient(rgba(255,255,255,0),#fff); }
@media (max-width:768px), (max-aspect-ratio:3/4) {
  .cxsb-backdrop { background-image:url('/material/home-2026/section-bg-mobile.webp'); }
  .cxsb-backdrop::after { background:linear-gradient(rgba(255,255,255,.58),rgba(255,255,255,.3) 60%,rgba(255,255,255,.14)); }
}

/* Large pale section names, matching the ABOUT wordmark from the Hero transition. */
.cxsb-label { position:absolute; top:clamp(10px,1.6vw,26px); left:3%; z-index:0; width:94%; overflow:hidden; color:rgba(21,88,161,.09); font-family:Arial,sans-serif; font-size:clamp(56px,14.2vw,250px); font-weight:900; line-height:1; letter-spacing:-.06em; white-space:nowrap; pointer-events:none; user-select:none; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.cxha-wordmark.cxsb-label { color:rgba(21,88,161,.09); }
.cxsb-section>.cxh-shell,.cxsb-section>.container { position:relative; z-index:1; }

/* ABOUT: the backdrop replaces the white panel opened by the Hero transition. */
.cxha-transition { position:relative; }
.cxha-about.cxsb-section { background:transparent; }

/* SERVICE */
.cxh-services.cxsb-section { padding-top:clamp(104px,10vw,168px); }
.cxsb-section .cxh-service-column { background:linear-gradient(145deg,rgba(234,246,255,.95),rgba(248,251,255,.92) 64%); box-shadow:0 18px 50px rgba(17,52,104,.07); }
.cxsb-section .cxh-service-creative { background:linear-gradient(145deg,rgba(255,245,238,.95),rgba(255,250,247,.92) 64%); }
.cxsb-section .cxh-service-cta { background:rgba(238,243,248,.94); }

/* NEWS has its own quiet list styles in home-news.css. */

/* PC: sections settle gently at their top edge. Touch devices keep free scrolling. */
@media (min-width:1025px) and (hover:hover) and (pointer:fine) {
  html:has(> body.cxh-home) { scroll-snap-type:y proximity; }
  /* Same specificity as `.cxh-home main [id]` (80px anchor offset) and loaded later, so 64px wins. */
  .cxh-home main .cxsb-section { scroll-snap-align:start; scroll-margin-top:64px; }
  /* During the Hero → ABOUT scene, ABOUT is complete at the end of the sticky distance. */
  .cxha-transition.cxha-ready .cxha-about.cxsb-section { scroll-snap-align:none; }
  .cxha-transition.cxha-ready .cxsb-about-snap { position:absolute; top:var(--cxha-distance); left:0; width:1px; height:1px; scroll-snap-align:start; scroll-margin-top:64px; pointer-events:none; }
}

/* Motion: headings fade/slide; SERVICE columns add a slight scale. */
@media (prefers-reduced-motion:no-preference) {
  .cxh-motion-ready .cxsb-label[data-cxh-reveal] { transform:translateX(-2.5%); transition:opacity 1.1s ease,transform 1.25s cubic-bezier(.16,1,.3,1); }
  .cxh-motion-ready .cxsb-label[data-cxh-reveal].cxh-in-view { transform:none; }
  .cxh-motion-ready .cxsb-section .cxh-service-column[data-cxh-reveal] { transform:translateY(30px) scale(.97); }
  .cxh-motion-ready .cxsb-section .cxh-service-column[data-cxh-reveal].cxh-in-view { transform:none; }
}

@media (max-width:768px) {
  .cxsb-label { font-size:clamp(52px,18vw,130px); }
  .cxh-services.cxsb-section { padding-top:clamp(84px,22vw,124px); }
}

/* Adjacent backdrop sections (ABOUT → CREATIVE X) read as one continuous scene: no white seam. */
.cxsb-section.cxsb-join-next::after,.cxsb-section.cxsb-join-prev::before { display:none; }

/* Fixed section names (Issue #89, timing revised in #93). With JS (html.cxsb-fixed-labels) the
   per-section names are hidden and js/home-section-labels.js draws the *current* section name inside
   every backdrop. All backdrops show the same name at the same screen position, so a section
   boundary never cuts it. The current section is the one under a line 40% down the screen: the next
   name appears earlier when scrolling down and stays a little longer when scrolling back up. */
html.cxsb-fixed-labels .cxsb-section > .cxsb-label { display:none; }
.cxsb-names { position:absolute; inset:0; z-index:1; pointer-events:none; }
.cxsb-name { position:absolute; top:calc(64px + clamp(10px,1.6vw,26px)); left:3%; width:94%; overflow:hidden; color:rgba(21,88,161,.09); font-family:Arial,sans-serif; font-size:clamp(56px,14.2vw,250px); font-weight:900; line-height:1; letter-spacing:-.06em; white-space:nowrap; opacity:0; transition:opacity .2s ease; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.cxsb-name.is-current { opacity:1; }
/* ABOUT keeps the Hero → ABOUT reveal: it fades in while the Hero shrinks. */
.cxsb-name.is-current[data-for="home-about"] { opacity:var(--cxha-wordmark,1); }
@media (max-width:768px) {
  .cxsb-name { font-size:clamp(52px,18vw,130px); }
}
@media (max-width:480px) {
  .cxsb-name { top:calc(56px + clamp(10px,1.6vw,26px)); }
}
@media (prefers-reduced-motion:reduce) {
  .cxsb-name { transition:none; }
}