/*
 * HOME entry: the finished scrollytelling placed ahead of the existing HOME.
 *
 * Everything here is scoped to the HOME page so that /scrollytelling-test/
 * keeps behaving exactly as it does on its own, and so that none of the
 * existing HOME chrome is redesigned — it is only hidden while the entry is
 * running and handed back untouched afterwards.
 */

.home-entry {
  position: relative;
  z-index: 1;
}

/* A direct HOME hash must not smooth-scroll through the entry without JS. */
html:not(.js):has(.hero#home:target) {
  scroll-behavior: auto;
}

/* ------------------------------------------------------------------ */
/* HOME_ACTIVE                                                          */
/* ------------------------------------------------------------------ */

/*
 * The page has three states:
 *
 *   ENTRY_ACTIVE    body.entry-active   the story owns the screen
 *   ENTRY_HANDOFF   neither class       Scene 08 is giving way to the hero
 *   HOME_ACTIVE     html.home-active    HOME owns the page
 *
 * HOME_ACTIVE is set in the head for a direct #home — before the body is
 * parsed, so the entry never reaches a frame — and by the hand-off, the skip
 * and the HOME logo afterwards. The entry is collapsed rather than hidden
 * because it must also stop holding scroll height: once HOME has been handed
 * the page, scrolling back up must not be able to reach a finished entry.
 */
html.home-entry-enabled.home-active .home-entry {
  display: none;
}

/*
 * The swap itself, held only for the few frames it takes.
 *
 * Collapsing the entry takes thousands of pixels out from above the hero, and
 * the browser answers that by scroll-anchoring: it keeps whatever it had
 * anchored on in view by scrolling down, which is how a completed entry used
 * to land in the middle of HOME instead of at its top. Anchoring is switched
 * off and smooth scrolling is suspended until HOME is settled at scrollY 0;
 * the page's own scroll behaviour is untouched either side of that.
 */
html.home-activating,
html.home-activating body {
  overflow-anchor: none;
  scroll-behavior: auto !important;
}

/*
 * Once the entry is out of the document the hero is the top of the page, so a
 * #home link frames it below the sticky header instead of behind it. Declared
 * unconditionally because the scripted move into HOME_ACTIVE reads this value
 * while the entry is still in place.
 */
html.home-entry-enabled .hero#home {
  scroll-margin-top: var(--header-height);
}

html.js.story-initializing.home-entry-enabled .home-entry {
  visibility: hidden;
}

/*
 * The site header keeps its own sticky flow. The entry is pulled up under it
 * so Scene 01 starts at the very top of the window instead of below a blank
 * header band; the header itself is only faded out, never moved or resized.
 */
html.home-entry-enabled .home-entry {
  margin-top: calc(var(--header-height) * -1);
}

/* Held clear of the stage so Scene 08 can be read before HOME arrives. */
.entry-hold {
  height: 55vh;
  height: 55svh;
}

.entry-handoff {
  height: 95vh;
  height: 95svh;
}

/*
 * The hero rides up over the tail of the hand-off, so the office can recede
 * while the hero rises in the same stretch of scroll rather than after it.
 */
html.home-entry-enabled .home-entry {
  margin-bottom: -85vh;
  margin-bottom: -85svh;
}

html.home-entry-enabled .hero {
  position: relative;
  z-index: 3;
}

/* ------------------------------------------------------------------ */
/* Existing HOME chrome, hidden only while the entry is on screen       */
/* ------------------------------------------------------------------ */

/* HOME_ACTIVE is excluded throughout: HOME always keeps its own chrome. */
html.home-entry-enabled:not(.home-active) body.entry-active .site-header,
html.home-entry-enabled:not(.home-active) body.entry-active .page-index,
html.home-entry-enabled:not(.home-active) body.entry-active .scroll-progress,
html.js.story-initializing.home-entry-enabled:not(.home-active) .site-header,
html.js.story-initializing.home-entry-enabled:not(.home-active) .page-index,
html.js.story-initializing.home-entry-enabled:not(.home-active) .scroll-progress {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

html.home-entry-enabled .site-header,
html.home-entry-enabled .page-index,
html.home-entry-enabled .scroll-progress {
  transition: opacity .5s ease, visibility .5s ease;
}

/* The story's own 01-08 index only exists while the entry is running. */
html.home-entry-enabled .scene-index {
  transition: opacity .4s ease, visibility .4s ease;
}

html.home-entry-enabled body:not(.entry-active) .scene-index {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ------------------------------------------------------------------ */
/* Entry controls                                                       */
/* ------------------------------------------------------------------ */

.entry-skip {
  position: fixed;
  z-index: 1400;
  top: 22px;
  right: clamp(16px, 3vw, 38px);
  padding: 9px 16px;
  border: 1px solid rgba(104, 97, 89, .32);
  border-radius: 2px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  color: #3f3a35;
  font-size: .8rem;
  letter-spacing: .06em;
  line-height: 1;
  text-decoration: none;
  transform: translateY(0);
  transition: opacity .4s ease, visibility .4s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.entry-skip:hover,
.entry-skip:focus-visible {
  border-color: rgba(88, 81, 73, .52);
  color: #302c28;
}

@media (hover: hover) and (pointer: fine) {
  .entry-skip:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .11);
    transform: translateY(-2px);
  }
}

.entry-cue {
  position: fixed;
  z-index: 1400;
  bottom: 52px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  /* The same quiet plate the scene copy uses, so the cue stays readable over
     the photograph without becoming a button. */
  padding: 10px 17px 11px;
  margin: 0;
  border: 1px solid rgba(104, 97, 89, .32);
  border-radius: 2px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  color: #3f3a35;
  font-size: .82rem;
  letter-spacing: .1em;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .5s ease, visibility .5s ease, box-shadow .2s ease;
}

/* A small chevron, drawn rather than typed so it stays quiet. */
.entry-cue__mark {
  display: block;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: entry-cue-drift 3.2s ease-in-out infinite;
}

@keyframes entry-cue-drift {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(2px, 2px); }
}

/* Both controls belong to the entry only. */
html.js.home-entry-enabled:not(.story-motion-reduced):not(.story-no-motion) body:not(.entry-active) .entry-skip,
body:not(.entry-active) .entry-cue,
body.entry-cue-hidden .entry-cue {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/*
 * Without JavaScript the page is one ordinary document: the story reads as
 * plain sections and "サイトを見る" is a normal anchor, so neither control may
 * be left floating over the content.
 */
html:not(.home-entry-enabled) .entry-cue {
  display: none;
}

html:not(.home-entry-enabled) .entry-skip {
  position: absolute;
  top: 16px;
}

html:not(.home-entry-enabled) .entry-hold,
html:not(.home-entry-enabled) .entry-handoff {
  display: none;
}

@media (max-width: 700px) {
  .entry-skip {
    top: 14px;
    padding: 7px 12px;
    font-size: .74rem;
  }

  .entry-cue {
    bottom: 44px;
    font-size: .78rem;
  }

  .entry-hold {
    height: 40vh;
    height: 40svh;
  }

  .entry-handoff {
    height: 80vh;
    height: 80svh;
  }

  html.home-entry-enabled .home-entry {
    margin-bottom: -70vh;
    margin-bottom: -70svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  /*
   * No pin, no scrubbing and no hand-off: the story simply reads through into
   * the hero, so the spacers and the overlap are removed entirely.
   */
  html.home-entry-enabled .home-entry {
    margin-top: 0;
    margin-bottom: 0;
  }

  .entry-hold,
  .entry-handoff {
    display: none;
  }

  .entry-cue__mark {
    animation: none;
  }

  html.home-entry-enabled body.entry-active .site-header,
  html.home-entry-enabled body.entry-active .page-index,
  html.home-entry-enabled body.entry-active .scroll-progress {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .entry-cue {
    display: none;
  }

  .entry-skip {
    position: absolute;
    top: 16px;
  }
}