/* 浅草橋ホテルガイド — grounds, texture, video, and scroll motion.
   Loaded last. */

/* =================================================================== grounds
   Cream is no longer one flat colour: each kind of page gets its own paper, taken from
   traditional Japanese colour names, so the site changes character as you move through it.
   Every tint keeps ink text above AA (checked by the contrast audit). */

.c-hotels  { --cream: #f4eee2; }   /* 生成り  — stay */
.c-stay    { --cream: #f3ead8; }   /* 鳥の子  — choosing */
.c-district{ --cream: #efe3d0; }   /* 砂色    — the district */
.c-walks   { --cream: #e3ece8; }   /* 白緑    — river walks */
.c-transit { --cream: #e3eaf1; }   /* 白藍    — trains and airports */
.c-events  { --cream: #f3e2dc; }   /* 桜色    — festivals */
.c-compare { --cream: #f1ead3; }   /* 淡黄    — comparisons */
.c-inbound, .c-about, .c-hub { --cream: #f4eee2; }

/* Paper grain on cream grounds, and a finer one on night — texture, not decoration. */
.ground-cream { position: relative; isolation: isolate; }
.ground-cream::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* sheets: warm white rather than screen white, with a hairline of the ground's ink */
.book, .propcard, .choose__out, .form { background: #fffdf8; }
.book { border-left: 4px solid var(--verm); }

/* =================================================================== video
   Click-to-play facade. Nothing loads from YouTube until the reader asks. */

.yt { margin: 1.8em 0; }
.yt__play { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.yt__play img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .3s, transform .6s; }
.yt__play:hover img { opacity: 1; transform: scale(1.02); }
.yt__btn { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; background: rgba(23, 27, 39, .78); border: 2px solid rgba(255, 255, 255, .85); }
.yt__btn::after { content: ""; position: absolute; left: 30px; top: 22px;
  border-left: 22px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.yt__play:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.yt figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px;
  font-size: 12px; color: var(--ink-2); padding-top: 6px; }
.yt .credit { color: var(--muted); font-size: 11px; }

/* =================================================================== scroll motion
   Blocks slide up slowly and fade in as they enter. Scroll-driven where the browser supports
   it (the motion follows the scroll itself); an IntersectionObserver fallback elsewhere
   (html.rv-js, set by site.js — without JS nothing is ever hidden). The opening of each page
   is excluded so the first screen is never half-faded. Reduced motion: off. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* leaf blocks only — a moving block inside a moving block would double the travel */
    :is(.idx__row, .photo:not(.room .photo), .yt, .tbl, .diagram, .room, .bc__band, .fit,
        .book, .propcard, .hour__b > *, .sources, .hubnav > section, .mag__label, .mag__dek,
        .prose > :is(h2, h3, p, ul, ol), .sec > :is(h2, p, ul)):not(.atlas-hero *, .proph *, .phead *) {
      animation: rv-slide linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    @keyframes rv-slide {
      from { opacity: 0; transform: translateY(56px); }
      to   { opacity: 1; transform: none; }
    }
  }
  @supports not (animation-timeline: view()) {
    .rv-js .rv { opacity: 0; transform: translateY(56px);
      transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.16, .7, .2, 1); }
    .rv-js .rv.is-in { opacity: 1; transform: none; }
  }
}

/* =================================================================== sky strip
   The site's signature: the colour of the sky over 浅草橋 right now, under the masthead. */
.sky { display: block; position: relative; height: 6px; background: var(--sky, #2b3144);
  transition: background-color 2s; text-decoration: none; }
.sky__t { position: absolute; right: max(16px, calc(50vw - 560px)); top: 10px; font-size: 11.5px;
  letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.sky__t::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sky); margin-right: 7px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(243, 239, 230, .35); }
.sky:hover .sky__t { color: var(--ink); }

/* =================================================================== arrival planner */
.arr { border-top: 2px solid var(--rule-2); margin: 3em 0 2em; padding-top: 12px; }
.arr__k { font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0; }
.arr h2 { border: 0; padding: 0; margin: .3em 0 .4em; }
.arr__lede { color: var(--ink-2); max-width: 46em; }
.arr__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; max-width: 46em; margin: 1em 0; }
.arr__f { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.arr__f--wide { grid-column: 1 / -1; }
.arr__f b { color: var(--ink); }
.arr__f select, .arr__f input[type=time] { font: inherit; font-size: 16px; padding: 9px 10px; border: 1px solid var(--rule);
  background: transparent; color: var(--ink); border-radius: 2px; color-scheme: dark; }
.ground-cream .arr__f :is(select, input[type=time]) { color-scheme: light; }
.arr__f select option { color: #1b1b1b; background: #fff; }
.arr__f input[type=range] { accent-color: var(--verm); width: 100%; }
.arr__out { border-left: 4px solid var(--indigo); padding: 14px 18px; background: var(--wash); max-width: 46em; }
.arr__out--tight { border-left-color: #d49a3a; }
.arr__out--late { border-left-color: var(--verm); }
.arr__out--early { border-left-color: #7fa38a; }
.arr__steps { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 13px; color: var(--ink-2); }
.arr__steps li { margin: 0; padding-right: 22px; position: relative; }
.arr__steps li + li { padding-left: 16px; }
.arr__steps li + li::before { content: "→"; position: absolute; left: -2px; color: var(--muted); }
.arr__steps b { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.arr__at b { color: var(--indigo); font-size: 24px; }
.arr__verdict { margin: 0 0 6px; color: var(--ink-2); }
.arr__verdict strong { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.arr__more { margin: 0; font-size: 14px; }
.arr__note { font-size: 12.5px; color: var(--muted); max-width: 52em; margin-top: 10px; }
@media (max-width: 767px) { .arr__form { grid-template-columns: 1fr; } .sky__t { display: none; } }

.film--home { margin: 2em 0 1em; }
.film--home h2 { margin-top: .4em; }