@media screen and (min-width: 769px) {
  #body-wrap.type-landing #page-header.full_page {
    background-position: 52% 50%;
  }

  #page-header.full_page.jquery-ripples > canvas {
    transform: none;
  }

  #page-header.full_page #homepage-bubbles {
    transform: translate3d(var(--scene-bubble-x, 0), var(--scene-bubble-y, 0), 0);
    transition: transform 220ms ease-out;
  }

  #home-scene-layer {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .scene-ambience {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    transition: background 1.8s ease, opacity 1.8s ease;
  }

  #page-header[data-home-period='morning'] .scene-ambience {
    background: linear-gradient(115deg, rgba(255, 214, 142, 0.16), rgba(86, 184, 222, 0.08) 48%, transparent 72%);
    mix-blend-mode: screen;
  }

  #page-header[data-home-period='day'] .scene-ambience {
    background: radial-gradient(circle at 30% 18%, rgba(210, 253, 255, 0.12), transparent 48%);
    mix-blend-mode: screen;
  }

  #page-header[data-home-period='evening'] .scene-ambience {
    background: linear-gradient(115deg, rgba(244, 145, 72, 0.2), rgba(27, 56, 83, 0.16) 66%);
    mix-blend-mode: soft-light;
  }

  #page-header[data-home-period='night'] .scene-ambience {
    background: linear-gradient(180deg, rgba(2, 13, 32, 0.32), rgba(1, 17, 34, 0.22));
    mix-blend-mode: multiply;
  }

  .scene-notebook {
    position: absolute;
    z-index: 2;
    bottom: -12px;
    left: 50%;
    width: 318px;
    min-height: 174px;
    padding: 22px 31px 30px;
    background:
      repeating-linear-gradient(0deg, transparent 0 25px, rgba(74, 117, 130, 0.2) 25px 26px),
      linear-gradient(100deg, #f4ebbc, #fff8cf 52%, #e8daa2);
    color: #273129;
    clip-path: polygon(3% 2%, 98% 0, 100% 94%, 94% 100%, 2% 96%, 0 8%);
    font-family: "Noto Serif SC", serif;
    box-shadow: 0 10px 24px rgba(0, 12, 10, 0.34);
    pointer-events: auto;
    transform: translate3d(calc(-50% + var(--scene-front-x, 0px)), var(--scene-front-y, 0), 0) perspective(700px) rotateX(7deg) rotateZ(-1.2deg);
    transition: transform 220ms ease-out;
  }

  .scene-notebook::before {
    position: absolute;
    top: 0;
    left: 19px;
    width: 6px;
    height: 100%;
    border-right: 1px solid rgba(178, 67, 52, 0.38);
    border-left: 1px solid rgba(178, 67, 52, 0.38);
    content: '';
  }

  .scene-notebook-heading {
    font-family: "Courier New", monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .scene-notebook-subtitle {
    margin: 2px 0 9px;
    color: #4e5b4c;
    font-size: 12px;
    letter-spacing: 0.35em;
    text-align: center;
  }

  .scene-notebook ol {
    margin: 0;
    padding-left: 24px;
    font-size: 13px;
    line-height: 1.9;
  }

  .scene-notebook li {
    padding-left: 3px;
  }

  .scene-notebook a {
    display: block;
    overflow: hidden;
    color: #273129;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scene-notebook a:hover {
    color: #796022;
    text-decoration: underline;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-header.full_page #homepage-bubbles,
  .scene-ambience,
  .scene-notebook {
    transition: none;
  }
}