/* =========================================================
   YOGABOND 2027 Teaser — Pattern B "Dark Editorial"
   ========================================================= */

:root {
  --cream: #f3eee1;
  --cream-dim: rgba(243,238,225,.62);
  --olive: #b5a72a;
  --olive-deep: #8c8117;
  --sumi: #1c1210;
  --sumi-2: #231815;

  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans CJK JP", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
  --font-latin: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;

  --pad: clamp(24px, 6vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--sumi);
  color: var(--cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

.stage { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }

/* ---------- Background ---------- */
.bg { position: absolute; inset: 0; z-index: 0; background: #f3eee1; }
.bg__video, .bg__still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
  background-size: cover; background-position: 50% 62%;
}
.bg__still { opacity: 0; transform-origin: 50% 60%; will-change: transform, opacity, filter; }
.bg__dark {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 45%, rgba(28,18,16,.55) 0%, rgba(28,18,16,.9) 70%, #1c1210 100%);
  opacity: 0;
}
/* 粒状ノイズ（SVG feTurbulence） */
.bg__grain {
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(4%, -7%); }
  60%  { transform: translate(-3%, -3%); }
  80%  { transform: translate(6%, 5%); }
  100% { transform: translate(0,0); }
}

/* ワイプ（オリーブ） */
.wipe {
  position: absolute; inset: 0; z-index: 5;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- Scenes ---------- */
.scene {
  position: absolute; inset: 0; z-index: 2;
  visibility: hidden; pointer-events: none;
}
.scene.is-active { visibility: visible; }
.scene.is-active a { pointer-events: auto; }

.frame {
  position: absolute;
  left: var(--pad); right: var(--pad);
  top: 50%; transform: translateY(-50%);
}
.frame--bottom {
  top: auto; transform: none;
  bottom: calc(var(--pad) + 40px);
}

/* マスク（行ごとの下から出現） */
.mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.mask__in { display: inline-block; will-change: transform; } /* 初期位置はJS(gsap.set)で設定 */


/* --- Scene 1: Title --- */
.kicker {
  margin: 0 0 1.6em;
  display: flex; align-items: center; gap: 1em;
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 18px);
  letter-spacing: .28em;
  color: var(--olive);
}
.kicker__line { display: block; width: clamp(32px, 5vw, 72px); height: 1px; background: var(--olive); transform: scaleX(0); transform-origin: left center; }
.title {
  margin: 0;
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: clamp(64px, 10vw, 220px);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: flex-start;
}
.title { padding-left: .55em; } /* ぶら下げた 「 の分 */
.title .mask { display: block; padding: 0 0 .06em .55em; margin: 0 0 -.06em -.55em; }
.title__row { position: relative; white-space: nowrap; }
/* カギ括弧：本文と同じ細さ・ほぼ同じ大きさで、開きは左にぶら下げて YOGA / FORWARD の左端を揃える */
.title__q {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: .78em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--cream);
  opacity: .85;
  vertical-align: .02em;
}
.title__q:not(.title__q--c) { margin-left: -.62em; margin-right: -.02em; }
.title__q--c { margin-left: .02em; }
.title__meta {
  margin: 3.2em 0 0;
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .34em;
  color: var(--cream-dim);
}

/* --- Scene 2: Subtitle (縦書き) --- */
.tate {
  position: absolute; inset: 0;
  display: flex; flex-direction: row-reverse; /* 1行目を右に */
  align-items: flex-start; justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  padding-top: 9vh;
}
.tate__line {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(22px, min(3vw, 4.2vh), 36px);
  letter-spacing: .24em;
  line-height: 1;
  font-feature-settings: "vhal"; /* 縦書き：句読点（、。）を半角幅に詰める。全文字を詰めたい場合は "vpal" */
  will-change: clip-path, transform;
}
.tate__line--2 { padding-top: 2.2em; } /* 字下げ */

/* --- Scene 3: Summary --- */
.big {
  margin: 0;
  display: flex; align-items: baseline; gap: .1em;
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: clamp(120px, 24vw, 380px);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}
.big__num { display: inline-block; min-width: 2.45ch; text-align: right; }
.big__unit {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: .22em;
  letter-spacing: .1em;
  color: var(--cream);
}
.big__caption {
  margin-bottom: 1.6em;
  display: flex; flex-direction: column; gap: .9em;
  border-bottom: 1px solid rgba(243,238,225,.28);
  padding-bottom: 1.4em;
}
.cap { margin: 0; font-size: clamp(14px, 1.5vw, 20px); letter-spacing: .18em; font-weight: 400; }
.cap--lead {                                   /* 見出し：日本最大級のオンラインヨガイベント */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 46px);
  letter-spacing: .14em;
  line-height: 1.3;
}
.cap--sub { color: var(--cream-dim); }        /* 2026年開催 参加者数 */
.br-sp { display: none; }                      /* スマホだけ改行 */

/* --- Scene 4: Detail --- */
.label {
  margin: 0 0 1.2em;
  font-family: var(--font-latin);
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .4em;
  color: var(--olive);
}
.date {
  margin: 0;
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 176px);
  line-height: .95;
  letter-spacing: .02em;
  display: flex; flex-direction: column; align-items: flex-start;
  font-variant-numeric: tabular-nums;
}
.date .mask { display: block; padding-bottom: .08em; margin-bottom: -.08em; }
.date__row { display: inline-flex; align-items: baseline; white-space: nowrap; }
.date__row small {
  font-size: .22em; letter-spacing: .3em; margin-left: .9em;
  color: var(--cream-dim);
  font-family: var(--font-latin);
}
.date__row--to { padding-left: 1.4em; }
.date__dash {
  display: inline-block; width: .8em; height: 1px; background: var(--olive);
  margin-right: .3em; vertical-align: .32em; transform: translateY(-.32em);
}
.hr {
  display: block; width: 100%; height: 1px;
  margin: clamp(20px, 3vw, 44px) 0;
  background: rgba(243,238,225,.32);
  transform: scaleX(0); transform-origin: left center;
}
.price {
  margin: 0;
  display: flex; align-items: baseline; justify-content: flex-end; /* 右寄せ */
  font-size: clamp(20px, 2.6vw, 36px);                              /* 数字は 2.6em → 最大 94px */
  letter-spacing: .18em;
}
.price__label { font-weight: 400; margin-right: 1.4em; color: var(--cream-dim); }
.price__num {
  font-family: var(--font-latin); font-weight: 400;
  font-size: 2.6em; line-height: 1; letter-spacing: .02em; margin-right: .15em;
  color: var(--olive);
}
.price__yen { font-weight: 400; }
.price__tax { font-size: .8em; margin-left: .4em; color: var(--cream-dim); }

/* --- Scene 5: Last（クリーム背景） --- */
.scene--last { background: var(--cream); color: var(--sumi-2); }
.last {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--pad);
}
.logo { display: block; width: clamp(150px, 24vw, 320px); height: auto; margin-bottom: clamp(20px, 3vw, 40px); opacity: 0; }
.last__msg {
  margin: 0 0 1.6em;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 40px);
  letter-spacing: .26em; text-indent: .26em;
}
.entry {
  margin: 0 0 2em;
  display: inline-flex; align-items: center; gap: 1.2em;
  padding: .9em 1.8em;
  border: 1px solid var(--olive-deep);
  border-radius: 999px;
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: .14em;
  opacity: 0;
  transform: translateY(12px);
}
.entry__label {
  font-weight: 500; color: var(--olive-deep);
  padding-right: 1.2em; border-right: 1px solid rgba(140,129,23,.5);
}
.entry__date { font-family: var(--font-latin); font-weight: 500; font-size: 1.35em; letter-spacing: .06em; white-space: nowrap; }
.entry__date small { font-family: var(--font-sans); font-size: .58em; letter-spacing: .1em; margin: 0 .2em; font-weight: 400; }
.url {
  font-family: var(--font-latin); font-weight: 500;
  font-size: clamp(14px, 1.2vw, 30px); letter-spacing: .2em;
  color: var(--sumi-2); text-decoration: none; position: relative; padding-bottom: .15em;
  opacity: 0; transform: translateY(12px);
}
.url::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--olive-deep); transform-origin: left center; transition: transform .4s var(--ease); }
.url:hover::after { transform: scaleX(0); transform-origin: right center; }

/* ---------- Progress ---------- */
.progress {
  position: absolute; z-index: 10;
  left: var(--pad); right: auto;
  bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom) + 6px);
  display: flex; gap: 8px;
  opacity: 0; transition: opacity .6s;
}
.progress.is-visible { opacity: 1; }
.progress span { display: block; width: clamp(18px, 3vw, 40px); height: 1px; background: rgba(243,238,225,.25); position: relative; overflow: hidden; }
.progress span::after { content: ""; position: absolute; inset: 0; background: var(--olive); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease); }
.progress span.is-done::after, .progress span.is-on::after { transform: scaleX(1); }
.progress.is-light span { background: rgba(35,24,21,.2); }
.progress.is-light span::after { background: var(--olive-deep); }

/* ---------- UI ---------- */
.ui {
  position: absolute; z-index: 10;
  right: var(--pad);
  bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom));
  appearance: none;
  border: 1px solid rgba(243,238,225,.45);
  background: transparent;
  color: var(--cream);
  font-family: var(--font-latin);
  font-size: 13px; letter-spacing: .26em; text-indent: .1em;
  padding: .7em 1.2em .6em 1.4em; border-radius: 999px;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease), background .3s, color .3s, border-color .3s;
}
.ui.is-visible { opacity: 1; pointer-events: auto; }
.ui:hover { background: var(--cream); color: var(--sumi); border-color: var(--cream); }
.ui.is-light { color: var(--sumi-2); border-color: rgba(35,24,21,.45); }
.ui.is-light:hover { background: var(--sumi-2); color: var(--cream); border-color: var(--sumi-2); }
.ui.is-on-video { color: var(--sumi-2); border-color: rgba(35,24,21,.45); background: rgba(243,238,225,.5); }

/* ---------- Start (autoplay fallback) ---------- */
.start {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  width: 100%; border: 0; background: var(--cream); color: var(--sumi-2);
  font-family: var(--font-latin); font-size: 16px; letter-spacing: .3em; text-indent: .3em; cursor: pointer;
}
.start[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  :root { --pad: 22px; }
  .bg__video, .bg__still { object-position: 50% 70%; background-position: 50% 70%; }

  .title { font-size: clamp(44px, 15vw, 64px); letter-spacing: .02em; padding-left: 0; }
  .title__meta { font-size: 13px; letter-spacing: .26em; line-height: 1.9; } /* 2行表示（/ の前で改行） */

  /* スマホも縦書きのまま。PCより一回り大きく */
  .tate { gap: clamp(20px, 6vw, 32px); padding-top: 10vh; }
  .tate__line { font-size: clamp(26px, 7vw, 32px); letter-spacing: .22em; }
  .tate__line--2 { padding-top: 2em; }

  /* サマリーは下寄せではなく上下中央（やや下） */
  .scene--summary .frame--bottom { top: 54%; bottom: auto; transform: translateY(-50%); }
  .big { font-size: clamp(96px, 30vw, 130px); }
  .big__caption { gap: .6em; margin-bottom: 1.2em; padding-bottom: 1em; }
  .cap { font-size: 13px; letter-spacing: .12em; }
  .cap--lead { font-size: clamp(20px, 5.6vw, 26px); letter-spacing: .1em; line-height: 1.45; }
  .br-sp { display: inline; }

  .date { font-size: clamp(52px, 16vw, 72px); }
  .date__row--to { padding-left: .8em; }
  .price { font-size: clamp(16px, 5.6vw, 20px); }
  /* ブロック全体は右寄せ、中身は「受け放題」と 9,900 の左端を揃える */
  .price .mask { display: block; }
  .price .mask__in { display: grid; grid-template-columns: auto auto auto; align-items: baseline; justify-items: start; }
  .price__label { grid-column: 1 / -1; margin: 0 0 .5em; }

  .logo { width: 230px; }
  .last__msg { font-size: clamp(18px, 5.4vw, 24px); letter-spacing: .18em; }
  .entry { flex-direction: column; gap: .5em; padding: 1em 1.6em; border-radius: 18px; font-size: 13px; }
  .entry__label { padding-right: 0; border-right: 0; }
  .progress { display: none; }

  .ui {bottom: calc(clamp(24px, 3vw, 32px) + env(safe-area-inset-bottom));}
}

@media (max-height: 480px) and (orientation: landscape) {
  .title { font-size: clamp(40px, 16vh, 80px); }
  .big { font-size: clamp(80px, 34vh, 160px); }
  .date { font-size: clamp(40px, 16vh, 80px); }
  .logo { width: 20vh; margin-bottom: 10px; }
  .entry { margin-bottom: 1em; }
}

@media (prefers-reduced-motion: reduce) {
  .bg__grain { animation: none; }
  .ui, .url::after, .progress, .progress span::after { transition: none; }
}