/* Real photographic scenery and a separate optical control surface. */
.optical-definitions {
  position: absolute;
  pointer-events: none;
}
.intro-body .cover-art,
.hero-base {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  filter: none;
}
.intro-body .cover-art {
  animation: winter-breath 32s ease-in-out infinite alternate;
}
.intro-body .cover-photo,
.home-hero .hero-slide {
  object-position: 50% 50%;
  filter: none;
  opacity: 0;
  transition: opacity 2400ms ease;
}
.intro-body .cover-photo.is-active,
.home-hero .hero-slide.is-active {
  opacity: 1;
}
.cover-parallax:has(.cover-photo.is-active) .cover-art {
  opacity: 1;
}
.intro-body .cover-atmosphere {
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgb(239 247 253 / 62%),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgb(230 240 248 / 12%),
      transparent 60%,
      rgb(229 240 249 / 34%)
    );
}
:root[data-theme="night"] .intro-body .cover-atmosphere {
  background:
    radial-gradient(ellipse at 50% 43%, rgb(6 19 35 / 27%), transparent 65%),
    linear-gradient(
      180deg,
      rgb(5 16 30 / 15%),
      transparent 65%,
      rgb(5 16 30 / 45%)
    );
}
.intro-body .cover-title h1 {
  text-shadow: 0 2px 22px rgb(255 255 255 / 50%);
}
:root[data-theme="night"] .intro-body .cover-title h1 {
  text-shadow: 0 2px 24px rgb(0 8 22 / 55%);
}
.cover-title {
  animation-fill-mode: backwards;
}
.cover-credits {
  display: block;
  margin-top: 10px;
  width: fit-content;
  font-size: 10px;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cover-scene-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cover-scene-controls .scene-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
[data-scene-next] {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--lab-glass-edge);
  border-radius: 50%;
  background: var(--lab-glass-clear);
  color: var(--lab-text);
  cursor: pointer;
  font: inherit;
}
.scene-controls [data-scene-next] {
  width: 38px;
  height: 38px;
}
/* The material exists in CSS before the module or any optical map is loaded. */
:root {
  --page-scenery: url("/images/winter-biei-960.webp");
  --glass-transparency: 78;
  --glass-density: calc(1 - var(--glass-transparency) / 100);
  --glass-control-fill: rgb(
    239 248 252 / calc(0.16 + var(--glass-density) * 0.8)
  );
  --glass-reading-fill: rgb(
    242 250 253 / calc(0.025 + var(--glass-density) * 0.95)
  );
  --glass-cover-fill: rgb(
    246 252 255 / calc(0.02 + var(--glass-density) * 0.8)
  );
  --glass-edge: rgb(255 255 255 / 42%);
  --glass-face-reflection: rgb(255 255 255 / 8%);
  --glass-shadow:
    0 14px 34px -22px rgb(12 35 52 / 30%), 0 2px 5px rgb(22 50 66 / 7%),
    inset 0 1px 1px rgb(255 255 255 / 55%),
    inset 0 -1px 1px rgb(54 94 115 / 13%);
}
:root[data-theme="night"] {
  --page-scenery: url("/images/winter-yotei-blue-960.webp");
  --glass-control-fill: rgb(9 24 34 / calc(0.2 + var(--glass-density) * 0.76));
  --glass-reading-fill: rgb(
    10 24 34 / calc(0.04 + var(--glass-density) * 0.92)
  );
  --glass-cover-fill: rgb(5 18 29 / calc(0.02 + var(--glass-density) * 0.8));
  --glass-edge: rgb(207 233 243 / 22%);
  --glass-face-reflection: rgb(220 240 255 / 3%);
  --glass-shadow:
    0 14px 34px -22px rgb(0 5 12 / 60%), 0 2px 5px rgb(0 5 12 / 20%),
    inset 0 1px 1px rgb(233 247 255 / 23%), inset 0 -1px 1px rgb(0 6 12 / 32%);
}
body
  :where(
    .header-inner,
    .mobile-nav,
    .glass-settings-panel,
    .studio-header,
    .journal-filters,
    .editor-toolbar,
    .editor-actions,
    .article-toc,
    .cover-settings,
    .cover-emblem,
    .cover-enter,
    .cover-clock,
    [id="cover-motion"],
    [data-scene-next],
    .window-panel,
    .project-card:not(.window-panel .project-card),
    .research-context > div,
    .detail-grid > div,
    .feature-grid > div,
    .status-panel,
    .research-question,
    .topic-list,
    .latest-updates ol,
    .business,
    .journal-card,
    .journal-empty,
    .article-paper,
    .hero-glass
  ) {
  position: relative;
}
:is(
  .header-inner,
  .mobile-nav,
  .glass-settings-panel,
  .studio-header,
  .journal-filters,
  .editor-toolbar,
  .editor-actions,
  .article-toc,
  .cover-settings,
  .cover-emblem,
  .cover-enter,
  .cover-clock,
  [id="cover-motion"],
  [data-scene-next]
) {
  --glass-fill: var(--glass-control-fill);
  --glass-roughness: 5px;
}
:is(
  .window-panel,
  .project-card:not(.window-panel .project-card),
  .research-context > div,
  .detail-grid > div,
  .feature-grid > div,
  .status-panel,
  .research-question,
  .topic-list,
  .latest-updates ol,
  .business,
  .journal-card,
  .journal-empty,
  .article-paper
) {
  --glass-fill: var(--glass-reading-fill);
  --glass-roughness: 0.85px;
  border-radius: 18px;
}
#entrance
  :is(
    .header-inner,
    .mobile-nav,
    .glass-settings-panel,
    .studio-header,
    .journal-filters,
    .editor-toolbar,
    .editor-actions,
    .article-toc,
    .cover-settings,
    .cover-emblem,
    .cover-enter,
    .cover-clock,
    [id="cover-motion"],
    [data-scene-next]
  ) {
  --glass-fill: var(--glass-cover-fill);
  --glass-roughness: 0.12px;
}
.home-hero .hero-glass {
  --glass-fill: var(--glass-cover-fill);
  --glass-roughness: 0.12px;
}
/* Unsupported preference features evaluate false within this negated condition. */
@media not ((prefers-reduced-transparency: reduce) or (prefers-contrast: more) or (forced-colors: active) or (update: slow)) {
  :root:not([data-effects="simple"])
    :is(
      .header-inner,
      .mobile-nav,
      .glass-settings-panel,
      .studio-header,
      .journal-filters,
      .editor-toolbar,
      .editor-actions,
      .article-toc,
      .cover-settings,
      .cover-emblem,
      .cover-enter,
      .cover-clock,
      [id="cover-motion"],
      [data-scene-next],
      .window-panel,
      .project-card:not(.window-panel .project-card),
      .research-context > div,
      .detail-grid > div,
      .feature-grid > div,
      .status-panel,
      .research-question,
      .topic-list,
      .latest-updates ol,
      .business,
      .journal-card,
      .journal-empty,
      .article-paper,
      .hero-glass
    ),
  :root:not([data-effects="simple"])
    #entrance
    :is(
      .header-inner,
      .mobile-nav,
      .glass-settings-panel,
      .studio-header,
      .journal-filters,
      .editor-toolbar,
      .editor-actions,
      .article-toc,
      .cover-settings,
      .cover-emblem,
      .cover-enter,
      .cover-clock,
      [id="cover-motion"],
      [data-scene-next]
    ) {
    --glass-filter: blur(var(--glass-roughness));
    isolation: isolate;
    background:
      linear-gradient(
        125deg,
        var(--glass-face-reflection),
        transparent 28%,
        transparent 72%,
        rgb(195 229 242 / 2%)
      ),
      var(--glass-fill);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter, blur(var(--glass-roughness)))
      saturate(1.08);
    backdrop-filter: var(--glass-filter, blur(var(--glass-roughness)))
      saturate(1.08);
    /* A decoded map changes the rounded lip, never the material density. */
    transition-property: color, border-color, box-shadow;
  }
}

/* A separate masked bevel keeps highlights off the flat face and text. */
.glass-bevel {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  display: none;
}
@media not ((prefers-reduced-transparency: reduce) or (prefers-contrast: more) or (forced-colors: active) or (update: slow)) {
  :root:not([data-effects="simple"]) .glass-bevel {
    display: block;
    padding: 1.5px;
    box-sizing: border-box;
    z-index: 1;
    background: linear-gradient(
      135deg,
      rgb(255 255 255 / 82%),
      rgb(255 255 255 / 14%) 23%,
      rgb(104 156 178 / 8%) 48%,
      rgb(210 239 250 / 52%) 76%,
      rgb(255 255 255 / 66%)
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  :root[data-theme="night"] .glass-bevel {
    opacity: 0.65;
  }
}

/* Separate paint-contained light layers never inherit pointer variables into
   card content. Fixed textures move on the compositor; the bevel mask is static. */
:root [data-glass-material] > .glass-light-face,
:root [data-glass-material] > .glass-rim-light {
  all: initial;
  position: absolute;
  inset: 0;
  display: none;
  box-sizing: border-box;
  border-radius: inherit;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  visibility: hidden;
  z-index: -1;
}
:root [data-glass-material] > .glass-rim-light {
  z-index: 0;
  padding: 3px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
:root [data-glass-material] .glass-light-spot {
  all: initial;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 380px;
  height: 200px;
  pointer-events: none;
  visibility: inherit;
  opacity: 0;
  background: radial-gradient(
    ellipse closest-side at center,
    #fff,
    transparent 100%
  );
}
:root [data-glass-material] .glass-light-flat {
  width: 480px;
  height: 320px;
  background: radial-gradient(
    ellipse closest-side at center,
    rgb(242 250 255),
    transparent 100%
  );
}
:root [data-glass-material] .glass-light-side {
  width: 200px;
  height: 380px;
  background: radial-gradient(
    ellipse closest-side at center,
    rgb(235 248 255),
    transparent 100%
  );
}
:root [data-glass-material] .glass-light-bottom {
  background: radial-gradient(
    ellipse closest-side at center,
    rgb(219 244 250),
    transparent 100%
  );
}
@media (prefers-reduced-motion: no-preference) {
  @media not ((prefers-reduced-transparency: reduce) or (prefers-contrast: more) or (forced-colors: active) or (update: slow)) {
    :root:not([data-effects="simple"])
      [data-glass-material]
      > .glass-light-face,
    :root:not([data-effects="simple"])
      [data-glass-material]
      > .glass-rim-light {
      display: block;
    }
    :root [data-glass-material] > .glass-light-face[data-active],
    :root [data-glass-material] > .glass-rim-light[data-active] {
      visibility: visible;
    }
    :root [data-glass-material] > [data-active] > .glass-light-spot {
      will-change: transform, opacity;
    }
  }
}

/* Snow rests on the border and grows upward, outside the reading surface.
   Clip photographs/toolbars individually so they keep their rounded corners. */
:root [data-snow-surface] {
  overflow: visible;
}
.home-hero:has(> [data-snow-surface]) {
  overflow: visible;
}
.home-hero > .hero-slides {
  overflow: hidden;
  border-radius: inherit;
}
.home-hero > .hero-wash {
  border-radius: inherit;
}
/* Leave room for the menu's snow cap below the header controls. */
.site-header > .mobile-nav {
  margin-top: 30px;
}
[data-snow-surface] > .window-toolbar,
[data-snow-surface] > .journal-card-image {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
[data-snow-surface] > .project-art {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
/* Explicit reset: content selectors such as .research-question > span must
   never add padding, margins, positioning, or filters to this decoration. */
:root [data-snow-surface] > .glass-snow {
  position: absolute;
  top: -52px;
  bottom: auto;
  /* The SVG underside traces the actual rounded upper rim. */
  left: 50%;
  right: 50%;
  height: 52px;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
  background: none;
  box-shadow: none;
  filter: none;
  z-index: 2;
  display: block;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: none;
  transition: opacity 800ms ease-out;
}
:root [data-snow-surface] > .glass-snow[data-settling="true"] {
  /* Growth adds real height above the rim, without fading in the deposit. */
  transition: none;
}
:root [data-snow-surface] > .glass-snow > .glass-snow-patch {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  filter: none;
  display: block;
  opacity: 0;
  transform: none;
  transition: none;
}
:root [data-snow-surface] > .glass-snow > .glass-snow-patch > svg,
.glass-snow-fall > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  filter: none;
  overflow: hidden;
}
.glass-snow-fall-plane {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: clip;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.glass-snow-fall {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}
.glass-snow-drift {
  fill: #f5faff;
}
:root[data-theme="night"] .glass-snow-drift {
  fill: #dceaf5;
}
:root [data-snow-surface] > .glass-snow[hidden],
:root [data-snow-surface] > .glass-snow[data-supported="false"],
:root[data-effects="simple"] [data-snow-surface] > .glass-snow {
  display: none;
}
@media (prefers-reduced-motion: reduce),
  (prefers-reduced-transparency: reduce),
  (prefers-contrast: more),
  (forced-colors: active),
  (update: slow) {
  :root [data-snow-surface] > .glass-snow,
  .glass-snow-fall-plane {
    display: none;
    transition: none;
  }
}

/* This floating control needs its own legible surface, including at 100%. */
.glass-settings-panel,
#entrance .glass-settings-panel {
  --glass-fill: rgb(242 250 253 / 80%);
  --glass-roughness: 12px;
}
:root[data-theme="night"] .glass-settings-panel,
:root[data-theme="night"] #entrance .glass-settings-panel {
  --glass-fill: rgb(14 30 43 / 82%);
}
body .glass-settings-panel {
  position: absolute;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-effects="simple"]) .glass-rim-light {
    display: none;
  }
}

/* A single page-level scene is seen through the actual backdrop filter.
   Never copy scenery into a pane: its crop must remain continuous across boundaries.
   Home keeps its plain backdrop; cover and Hero have their own real scenery. */
body[data-page] {
  position: relative;
  isolation: isolate;
}
body[data-page]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--page-scenery) var(--page-scenery-position, center 56%) /
    cover no-repeat;
  opacity: 0.28;
}
:root[data-theme="night"] body[data-page]::before {
  opacity: 0.36;
}
body[data-page="home"]::before {
  display: none;
}
body[data-page] .home-hero {
  border-radius: 20px;
}
.home-hero .hero-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
:root:not([data-effects="simple"]) .home-hero .hero-glass {
  box-shadow: none;
}
.window-panel .window-toolbar {
  background: rgb(230 245 252 / 12%);
  border-bottom-color: rgb(92 139 163 / 16%);
}
:root[data-theme="night"] .window-panel .window-toolbar {
  background: rgb(7 21 32 / 10%);
  border-bottom-color: rgb(215 238 248 / 12%);
}
body[data-page] .header-inner {
  border-radius: 16px;
}
:root[data-effects="simple"] body[data-page]::before {
  display: none;
}
:root[data-effects="simple"] .hero-glass {
  display: none;
}
@media (prefers-reduced-transparency: reduce),
  (prefers-contrast: more),
  (forced-colors: active),
  (update: slow) {
  body[data-page]::before,
  .hero-glass {
    display: none;
  }
}
/* Preserve sticky positioning for real toolbars; no glass nested inside glass. */
.site-header .header-inner {
  position: relative;
}
.admin-body .editor-toolbar[data-optics] {
  position: sticky;
}
.editor-actions[data-optics] {
  position: sticky;
}
.article-toc[data-optics] {
  position: sticky;
}
.mobile-nav[data-optics] {
  position: absolute;
}
.studio-header[data-optics] {
  position: sticky;
}
@media (max-width: 640px) {
  .cover-scene-controls {
    gap: 6px;
  }
  .cover-footer {
    gap: 8px;
  }
  .cover-caption {
    max-width: 180px;
    font-size: 11px;
  }
  .scene-controls {
    gap: 10px;
  }
  .scene-name {
    min-width: 0;
    text-align: left;
  }
  .intro-body .cover-atmosphere {
    background: radial-gradient(
      ellipse at 50% 43%,
      rgb(239 247 253 / 70%),
      rgb(239 247 253 / 15%) 68%
    );
  }
  :root[data-theme="night"] .intro-body .cover-atmosphere {
    background: linear-gradient(
      180deg,
      rgb(5 16 30 / 15%),
      rgb(5 16 30 / 12%) 40%,
      rgb(5 16 30 / 35%)
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-body .cover-art {
    animation: none;
  }
  .cover-photo,
  .hero-slide {
    transition: none !important;
  }
}
:root[data-effects="simple"] .intro-body .cover-art,
:root[data-still="true"] .intro-body .cover-art {
  animation: none;
}

/* A preview already belongs to its outer pane; do not lift another pane inside it. */
.window-panel .project-card:hover {
  transform: none;
  box-shadow: none;
}