/* /about-tamami — one continuous night: sky → soil → crystal → window → room → night.
   Scene props are pixel SVGs in /images/about-tamami, drawn on a 4px art grid. */

body:has(.tamami-tale) {
  --tale-night: #120d26;
  --tale-horizon: #261b50;
  --tale-soil: #2a1c38;
  --tale-deep: #1d1329;
  --tale-core: #160f21;
  --tale-wall: #241a36;
  --tale-paper: #f6e9d6;
  --tale-floor: #6e4636;
  --tale-ink: #ebe2fd;
  --tale-ink-soft: #cdbdf3;
  --tale-ink-dark: #3d2a5c;
  --tale-ink-dark-soft: #5b4a6e;
  --tale-star: #fff8ef;
  --tale-violet: #7762bc;
  --tale-deep-violet: #4c30af;
  --tale-gold: #ffe29a;
  --tale-u: 4px;

  background: var(--tale-night);
}
html:has(.tamami-tale) { background: #120d26; }
.tamami-tale { color: var(--tale-ink); }

/* Shared chrome, only on this page */
body:has(.tamami-tale) .viewport-frame { max-width: none; background: transparent; }
body:has(.tamami-tale) .app-header::before { background: transparent; }
body:has(.tamami-tale) .app-header.is-scrolled::before {
  border-bottom: 2px solid #2b1f55;
  background: var(--tale-night) !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:has(.tamami-tale) .header-icon-button { color: var(--tale-ink-soft); }
body:has(.tamami-tale) .header-icon-button:hover,
body:has(.tamami-tale) .header-icon-button[aria-expanded="true"] { border-color: #3d2f73; background: #211845; }
body:has(.tamami-tale) .member-navigation {
  --member-nav-label: var(--tale-ink-soft);
  --member-nav-selected: var(--tale-star);
  --member-nav-ring: var(--tale-violet);
  border: 2px solid #3d2f73;
  border-radius: 0;
  background: #1a1336;
}
body:has(.tamami-tale) .member-navigation a { border-radius: 0; }
body:has(.tamami-tale) .member-navigation a.nav-centerpiece { box-shadow: inset 0 0 0 3px #1a1336; }
body:has(.tamami-tale) .commerce-footer { margin-top: 0; padding-top: 22px; border-top: 2px solid #2b1f55; color: #a597cf; }
body:has(.tamami-tale) .commerce-footer a,
body:has(.tamami-tale) .commerce-footer nav button { color: var(--tale-ink-soft); }

/* Story grid */
.tale-frame {
  position: relative;
  display: grid;
  width: var(--page-content-width);
  margin: 0 auto;
  align-items: center;
  gap: 40px;
}
.tale-copy { position: relative; z-index: 2; min-width: 0; max-width: 400px; }
.tale-copy h1,
.tale-copy h2,
.tale-copy p,
.tale-copy blockquote { word-break: keep-all; overflow-wrap: anywhere; }
.tale-copy h1 {
  margin: 0;
  color: var(--tale-star);
  font-size: var(--type-page-title);
  font-weight: 600;
  line-height: 1.38;
}
.tale-copy h2 {
  margin: 0;
  color: var(--tale-star);
  font-size: var(--type-section-title-lg);
  font-weight: 600;
  line-height: 1.45;
}
.tale-copy p {
  margin: 18px 0 0;
  color: var(--tale-ink);
  font-size: var(--type-body-lg);
  line-height: 1.85;
}
.tale-art { display: block; max-width: none; image-rendering: pixelated; }

/* 1. High sky */
.tale-sky {
  margin-top: -82px;
  padding-top: 82px;
  background:
    url("/images/about-tamami/sky.svg?v=1") center top / 1600px 760px no-repeat,
    linear-gradient(var(--tale-night) 0 36%, #150f2f 36% 54%, #1a1339 54% 70%, #1f1644 70% 84%, var(--tale-horizon) 84%);
}
body:has(.impersonation-banner) .tale-sky { margin-top: -126px; padding-top: 126px; }
.tale-sky__frame { grid-template-columns: minmax(0, 1fr) 304px; padding: 64px 0 132px; }
.tale-sky__copy { align-self: start; padding-top: 44px; }
.tale-sky__copy p { color: var(--tale-ink-soft); }
.tale-sky__next {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: var(--tale-ink);
  font-size: var(--type-small);
  font-weight: 600;
  text-decoration: none;
}
.tale-sky__next::after {
  width: 12px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 25%, 25% 25%, 25% 50%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 75%, 25% 75%, 25% 50%, 0 50%);
  content: "";
}
.tale-sky__next:is(:hover, :focus-visible) { color: var(--tale-gold); }
.tale-sky__tamami { width: 304px; height: auto; }
.tale-sky__fall {
  position: absolute;
  right: 78px;
  bottom: 24px;
  width: 88px;
  height: 88px;
  background: url("/images/about-tamami/falling-star.svg?v=1") 0 0 / 88px 88px no-repeat;
}

/* 2. Soil: starlight sinks into an ore */
.tale-earth {
  background:
    url("/images/about-tamami/horizon.svg?v=1") center top / 1600px 120px repeat-x,
    url("/images/about-tamami/strata.svg?v=1") center 120px / 1600px 440px repeat-x,
    linear-gradient(var(--tale-horizon) 0 96px, var(--tale-soil) 96px 560px, var(--tale-deep) 560px);
}
.tale-earth__frame { grid-template-columns: minmax(0, 1fr) 192px; align-items: stretch; padding: 120px 0 72px; }
.tale-earth__frame .tale-copy { align-self: end; padding-bottom: 12px; }
.tale-earth__ore { display: flex; grid-column: 2; grid-row: 1; flex-direction: column; align-items: center; }
.tale-earth__trail {
  flex: 1 0 96px;
  width: 24px;
  margin: -32px 0 -24px;
  background: url("/images/about-tamami/trail.svg?v=1") center top / 24px 64px repeat-y;
}
.tale-earth__ore img { width: calc(48 * var(--tale-u)); height: auto; }

/* 3. The ore becomes a crystal ball */
.tale-awake {
  position: relative;
  background: linear-gradient(var(--tale-deep) 0 30%, #19112a 30% 62%, var(--tale-core) 62%);
}
.tale-awake__frame { grid-template-columns: 256px minmax(0, 1fr); gap: 56px; padding: 40px 0 96px; }
.tale-awake__crystal { width: calc(64 * var(--tale-u)); height: auto; }
.tale-awake blockquote {
  margin: 22px 0 0;
  padding: 0;
  color: var(--tale-gold);
  font-size: var(--type-card-title);
  font-weight: 600;
}

/* Dithered seams turn one scene into the next without a boxed edge */
.tale-awake::after,
.tale-window::after,
.tale-room::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24px;
  -webkit-mask: url("/images/about-tamami/seam.svg?v=1") 0 0 / 32px 24px repeat-x;
  mask: url("/images/about-tamami/seam.svg?v=1") 0 0 / 32px 24px repeat-x;
  content: "";
}
.tale-awake::after { background: var(--tale-wall); }
.tale-window::after { background: var(--tale-paper); }
.tale-room::after { background: var(--tale-night); }

/* 4. A human window */
.tale-window { position: relative; background: var(--tale-wall); }
.tale-window__frame { grid-template-columns: 336px minmax(0, 1fr); gap: 56px; padding: 72px 0 104px; }
.tale-window__scene { position: relative; width: calc(84 * var(--tale-u)); height: calc(96 * var(--tale-u)); }
.tale-window__glass { width: 100%; height: auto; }
.tale-window__tamami {
  position: absolute;
  top: calc(27 * var(--tale-u));
  left: calc(9.5 * var(--tale-u));
  width: calc(66.25 * var(--tale-u));
  height: auto;
}

/* 5. The lamp is on: small human happiness */
.tale-room {
  position: relative;
  background:
    linear-gradient(to top, var(--tale-floor) 0 56px, #4a2f2a 56px 60px, #e2cdae 60px 120px, #93613f 120px 128px, transparent 128px),
    url("/images/about-tamami/wallpaper.svg?v=1") 0 0 / 64px 64px repeat,
    var(--tale-paper);
}
.tale-room .tale-copy h2 { color: var(--tale-ink-dark); }
.tale-room .tale-copy p { color: var(--tale-ink-dark-soft); }
.tale-room__frame { grid-template-columns: 1fr; gap: 28px; padding: 72px 0 0; }
.tale-room__scene {
  display: flex;
  min-height: 300px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 12px 32px;
}
.tale-room__table {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-36px);
}
.tale-room__table img { width: 187px; height: auto; margin-bottom: -29px; }
.tale-room__table::after {
  width: calc(43 * var(--tale-u));
  height: calc(9 * var(--tale-u));
  background: url("/images/about-tamami/tea-table.svg?v=1") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  content: "";
}
.tale-room__nap { width: 187px; height: auto; margin-bottom: -32px; transform: translateY(-36px); }

/* 6. Night again: the promise and the conversation */
.tale-night {
  background:
    url("/images/about-tamami/constellation.svg?v=1") right max(16px, calc(50% - 440px)) top 64px / 384px 208px no-repeat,
    linear-gradient(var(--tale-night) 0 55%, #0f0b20 55%);
}
.tale-night__frame { grid-template-columns: 1fr; gap: 64px; padding: 128px 0 88px; }
.tale-night__promise { max-width: 460px; }
.tale-night__promise p { color: var(--tale-ink-soft); }
.tale-night__cta {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-top: 48px;
}
.tale-night__tamami { width: 240px; height: auto; }
.tale-night__cta h2 {
  margin: 0;
  color: var(--tale-star);
  font-size: var(--type-section-title);
  line-height: 1.45;
  word-break: keep-all;
}
.tale-night__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.tamami-tale-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 2px solid var(--tale-star);
  background: var(--tale-star);
  box-shadow: 4px 4px 0 var(--tale-violet);
  color: var(--tale-deep-violet);
  font-size: var(--type-small);
  font-weight: 700;
  text-decoration: none;
}
.tamami-tale-button:is(:hover, :focus-visible) { border-color: var(--tale-gold); background: var(--tale-gold); }
.tamami-tale-button:active { box-shadow: 0 0 0 var(--tale-violet); transform: translate(4px, 4px); }
.tamami-tale-button--quiet { border-color: var(--tale-violet); background: transparent; box-shadow: none; color: var(--tale-ink); }
.tamami-tale-button--quiet:is(:hover, :focus-visible) { border-color: var(--tale-gold); background: transparent; color: var(--tale-gold); }

@media (min-width: 1024px) {
  .tale-sky__frame { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
  .tale-sky__tamami { width: 406px; margin-right: -86px; justify-self: end; }
  .tale-sky__fall { right: 30px; }
  .tale-earth__ore { margin-right: -48px; }
  .tale-awake__crystal { margin-left: -48px; }
  .tale-window__scene { margin-left: -64px; }
}

@media (max-width: 639px) {
  body:has(.tamami-tale) { --tale-u: 3px; }
  .tale-frame { grid-template-columns: 1fr; gap: 24px; }
  .tale-copy { max-width: none; }
  .tale-copy h1 { font-size: var(--type-section-title-lg); }
  .tale-copy h2 { font-size: var(--type-section-title); }
  .tale-copy p { margin-top: 14px; font-size: var(--type-body); }

  .tale-sky { margin-top: -62px; padding-top: 62px; }
  body:has(.impersonation-banner) .tale-sky { margin-top: -108px; padding-top: 108px; }
  .tale-sky__frame { grid-template-columns: 1fr; padding: 40px 0 120px; }
  .tale-sky__copy { padding-top: 12px; }
  .tale-sky__tamami { width: 244px; justify-self: end; margin-right: 8px; }
  .tale-sky__fall { right: 70px; bottom: 16px; width: 66px; height: 66px; background-size: 66px 66px; }

  .tale-earth__frame { grid-template-columns: 1fr; padding: 104px 0 56px; }
  .tale-earth__ore { grid-column: 1; grid-row: 1; align-items: flex-end; padding-right: 12px; }
  .tale-earth__trail { flex-basis: 56px; margin-right: 60px; }

  .tale-awake__frame { gap: 16px; padding: 24px 0 80px; }
  .tale-awake__crystal { justify-self: start; margin-left: -12px; }

  .tale-window__frame { padding: 48px 0 80px; }
  .tale-window__scene { grid-row: 1; justify-self: center; }

  .tale-room__frame { padding-top: 56px; gap: 8px; }
  .tale-room__scene { min-height: 0; gap: 0; padding: 0 0 28px; }
  .tale-room__table { transform: translateY(-18px); }
  .tale-room__table img { width: 112px; margin-bottom: -17px; }
  .tale-room__table::after { width: 96px; height: 21px; }
  .tale-room__nap { width: 112px; margin-bottom: -19px; transform: translateY(-18px); }

  .tale-night { background-position: right -48px top 28px, 0 0; background-size: 288px 156px, auto; }
  .tale-night__frame { gap: 40px; padding: 196px 0 64px; }
  .tale-night__cta { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .tale-night__tamami { width: 120px; }
  .tale-night__cta h2 { font-size: var(--type-subtitle); }
  .tale-night__actions { display: grid; grid-column: 1 / -1; }
  .tale-night__cta > div { display: contents; }
  .tamami-tale-button { width: 100%; }
}

@media (max-width: 359px) {
  .tale-copy h1 { font-size: var(--type-section-title); }
  .tale-room__table img { width: 140px; margin-bottom: -22px; }
  .tale-room__table::after { width: 128px; height: 28px; }
  .tale-room__nap { width: 140px; margin-bottom: -24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .tale-sky__fall { animation: tale-fall 1.2s steps(6, end) .4s both; }

  @supports (animation-timeline: view()) {
    .tale-earth .tale-copy,
    .tale-awake .tale-copy,
    .tale-window .tale-copy,
    .tale-room .tale-copy,
    .tale-night__promise,
    .tale-earth__ore,
    .tale-awake__crystal,
    .tale-window__scene,
    .tale-room__scene {
      animation: tale-turn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

@keyframes tale-fall {
  from { opacity: 0; transform: translate(-64px, -64px); }
  to { opacity: 1; transform: none; }
}

@keyframes tale-turn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}