/* ============================================================
   encore — STAGE GIFTS
   Shared stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Noto+Sans+JP:wght@200;300;400;500&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --bg: #EFEAE0;
  --bg-deep: #E8E2D3;
  --fg: #181815;
  --fg-mute: #6E6A60;
  --fg-soft: #A8A294;
  --rule: rgba(24, 24, 21, 0.16);
  --rule-strong: rgba(24, 24, 21, 0.42);
  --accent: #6B2A24;
  --accent-soft: rgba(107, 42, 36, 0.10);

  --sans: 'Jost', 'Noto Sans JP', sans-serif;
  --jp-sans: 'Noto Sans JP', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --pad: 48px;
  --pad-sm: 32px;
}

@media (max-width: 800px) {
  :root { --pad: 24px; --pad-sm: 20px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; overflow-x: hidden; }
body[data-lang="jp"] { font-family: var(--jp-sans); font-weight: 300; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

/* ----- i18n display ----- */
body[data-lang="jp"] [data-lang="en"] { display: none !important; }
body[data-lang="en"] [data-lang="jp"] { display: none !important; }

/* ============================================================
   HEADER — Ceramicah style
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 36px var(--pad) 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  z-index: 50;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.site-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.site-nav a {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--fg);
  text-transform: uppercase;
  line-height: 1.4;
  position: relative;
  transition: color 0.3s ease;
}
.site-nav a:hover { color: var(--fg-mute); }
.site-nav a.active::before {
  content: '— ';
  color: var(--fg);
  margin-right: 2px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1;
  justify-self: center;
}
.brand .wordmark {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 38px;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* matinée brand replaces encore wordmark on matinée subsite */
.brand.brand-matinee .wordmark {
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.005em;
}
.brand.brand-matinee .tagline {
  margin-top: 4px;
  letter-spacing: 0.42em;
}
.brand .tagline {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.42em;
  color: var(--fg-mute);
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 4px;
}

.lang-switch {
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.lang-switch button {
  background: none;
  border: none;
  color: var(--fg-mute);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  padding: 0;
  text-transform: uppercase;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.lang-switch button.active { color: var(--fg); }
.lang-switch button:hover { color: var(--fg); }

/* ============================================================
   PIN-SCROLL SYSTEM
   ============================================================ */
.pin-page {
  position: relative;
}
.pin-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Scroll snap targets — created dynamically by initPinScroll.
   They live INSIDE pin-page, so the body scroll container can
   snap to them. mandatory + stop:always means the user cannot
   over-shoot a section in one fling. */
html.has-pin-snap {
  scroll-snap-type: y mandatory;
}
.pin-snap {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  pointer-events: none;
  visibility: hidden;
}

/* Snap targets for the standalone pin-footer (used on process.html
   after the horizontal scroll). One at the very start of the
   pin-footer-wrap, so scroll snaps cleanly into the footer scene. */
.pin-footer-wrap {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hscroll-wrapper {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.pin-section {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(40px);
  will-change: opacity, transform;
}
.pin-section.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pin-section.above {
  opacity: 0;
  transform: translateY(-40px);
}

/* Staggered child animations within pin sections */
.pin-section.active .stagger { opacity: 1; transform: translateY(0); }
.stagger {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.stagger:nth-child(1) { transition-delay: 0.1s; }
.stagger:nth-child(2) { transition-delay: 0.25s; }
.stagger:nth-child(3) { transition-delay: 0.4s; }
.stagger:nth-child(4) { transition-delay: 0.55s; }
.stagger:nth-child(5) { transition-delay: 0.7s; }

/* Artistic reveal: clip-path wipe */
.reveal-left {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-section.active .reveal-left,
.reveal-left.in {
  clip-path: inset(0 0 0 0);
}
.reveal-up {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-section.active .reveal-up,
.reveal-up.in {
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding: 64px var(--pad) 32px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 88px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.30em;
  color: var(--fg);
  text-transform: uppercase;
}
.site-footer a { color: var(--fg); transition: color 0.3s ease; }
.site-footer a:hover { color: var(--fg-mute); }

.footer-bottom {
  margin-top: 80px;
  padding: 0 var(--pad) 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.footer-bottom .circular-logo {
  width: 96px; height: 96px;
  color: var(--fg);
}
.footer-bottom .circular-logo svg {
  width: 100%; height: 100%;
  animation: rot 60s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }
.footer-bottom .footer-meta {
  display: flex; gap: 28px;
  justify-self: end; align-items: center;
  font-family: var(--sans); font-size: 10px;
  font-weight: 400; letter-spacing: 0.24em;
}
.footer-bottom .footer-meta a { color: var(--fg-mute); }
.footer-bottom .footer-meta a:hover { color: var(--fg); }
.footer-bottom .footer-center {
  text-align: center; font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.28em; color: var(--fg-mute);
}

/* ============================================================
   SECONDARY LOGO — proper infinity lemniscate (not two circles)
   ============================================================ */
.sec-logo {
  display: inline-block;
  width: 56px; height: 28px;
}
.sec-logo svg { width: 100%; height: 100%; overflow: visible; }
.sec-logo path { fill: none; stroke: currentColor; stroke-width: 1.2; }

/* Infinity draw animation */
.sec-logo.draw path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw-infinity 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes draw-infinity {
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.rule { height: 1px; background: var(--rule); width: 100%; }

.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.fade-in.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   PAGE TRANSITION — sumi-brush ∞ + curtain
   ============================================================ */
.page-trans {
  position: fixed; inset: 0;
  z-index: 998;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Two-half curtain: top slides down, bottom slides up to meet in middle */
.page-trans::before,
.page-trans::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 51%;
  background: var(--bg);
  z-index: 1;
}
.page-trans::before {
  top: 0;
  transform: translateY(-100%);
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}
.page-trans::after {
  bottom: 0;
  transform: translateY(100%);
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Outgoing: curtains close — slow & deliberate */
.page-trans.run { pointer-events: auto; }
.page-trans.run::before { transform: translateY(0); }
.page-trans.run::after  { transform: translateY(0); }

/* Incoming: start closed, then open slowly */
.page-trans.incoming { pointer-events: auto; }
.page-trans.incoming::before { transform: translateY(0); transition: none; }
.page-trans.incoming::after  { transform: translateY(0); transition: none; }
.page-trans.incoming.opening::before {
  transform: translateY(-100%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-trans.incoming.opening::after {
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Brush ∞ — sits between/above curtains, slow brush motion */
.page-trans .sec-logo {
  position: relative;
  z-index: 2;
  width: 160px; height: 80px;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.page-trans.run .sec-logo {
  opacity: 1;
  transition-delay: 0.5s;
}
.page-trans.incoming .sec-logo {
  opacity: 1;
}
.page-trans.incoming.opening .sec-logo {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.page-trans .sec-logo path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}
.page-trans.run .sec-logo path {
  animation: trans-brush-draw 2.2s cubic-bezier(0.25, 0.05, 0.35, 1) 0.6s forwards;
}
.page-trans.incoming .sec-logo path {
  stroke-dashoffset: 0; /* arrives pre-drawn */
}

@keyframes trans-brush-draw {
  0%   { stroke-dashoffset: 500; }
  45%  { stroke-dashoffset: 250; }   /* slowly through left loop */
  55%  { stroke-dashoffset: 220; }   /* tiny pause at center */
  100% { stroke-dashoffset: 0; }     /* through right loop */
}

/* ============================================================
   PIN-FOOTER — standalone version for pages that don't use pin-page
   (e.g. after the horizontal-scroll on process.html)
   Footer takes 100vh of scroll so the speed feels uniform
   ============================================================ */
.pin-footer-wrap {
  position: relative;
  height: 100vh;
  background: var(--bg);
}
.pin-footer-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  overflow: hidden;
}
.pin-footer-content {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pin-footer-content.in {
  opacity: 1;
  transform: translateY(0);
}

/* When site-footer / footer-bottom sit inside pin-section or pin-footer-content,
   strip the top border and margins that they normally rely on */
.pin-section .site-footer,
.pin-footer-content .site-footer {
  margin-top: 0;
  padding: 0 0 0;
  border-top: none;
}
.pin-section .footer-bottom,
.pin-footer-content .footer-bottom {
  margin-top: 0;
  padding: 0;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 600px) {
  .site-header { padding: 20px var(--pad) 0; }
  .brand .wordmark { font-size: 28px; }
  .site-nav { gap: 4px; }
  .site-nav a { font-size: 10px; }
  .site-footer { gap: 40px; flex-wrap: wrap; }
  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center; text-align: center;
  }
  .footer-bottom .footer-meta { justify-self: center; }
}