/* くだもの炭酸（動きの見本）。このページだけの CSS。
   --c・--c2・--bg・--ink は body に置き、「三つの味」でページ全体を塗り替える。
   html.mo ＝ 動き用の並び。付いていなければ、全部が上から順に並ぶ静かな形。 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  --pop: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  margin: 0; overflow-x: hidden;
  background: var(--bg); color: var(--ink);
  font: 16px/1.9 var(--pop); letter-spacing: .04em;
}
h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.3; letter-spacing: .02em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c2); outline-offset: 4px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .3em; color: var(--c2); margin-bottom: 10px; }
.ch { display: inline-block; }

/* ── 3Dの缶（細い面24枚の円柱） ────────────── */
.stage { perspective: 1100px; display: grid; place-items: center; position: relative; }
.can {
  /* 🔴 動かす変数の初期値は CSS に置く（ScrollTrigger の計り直しで JS の値が消えても、ここに戻る） */
  --tilt: -12deg; --spin: -20deg; --spin2: 0deg;
  --cw: clamp(120px, 22vmin, 220px);
  --ch: calc(var(--cw) * 1.86);
  --sw: calc(var(--cw) * .13165);           /* 面の幅＝直径 × tan(180°/24) */
  position: relative; width: var(--cw); height: var(--ch);
}
.can__cyl {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--tilt, -12deg)) rotateY(calc(var(--spin, -20deg) + var(--spin2, 0deg)));
}
.can__sl {
  position: absolute; top: 0; left: 50%; height: 100%;
  width: calc(var(--sw) + 3px); margin-left: calc(var(--sw) / -2 - 1.5px);
  overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * 15deg)) translateZ(calc(var(--cw) / 2));
}
.can__strip { position: absolute; top: 0; height: 100%; left: calc(var(--i) * var(--sw) * -1); width: calc(var(--sw) * 24); }
.can__top, .can__bot {
  position: absolute; left: 0; width: var(--cw); height: var(--cw); border-radius: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.can__top {
  top: calc(var(--cw) / -2); transform: rotateX(90deg); transform-style: preserve-3d;
  background:
    radial-gradient(circle, transparent 0 41%, #8f979f 42%, #e9edf1 45%, #a3abb3 48%, transparent 49%),
    radial-gradient(circle at 46% 44%, #f6f8fa, #c3cad1 58%, #9aa3ac);
}
.can__bot { top: calc(var(--ch) - var(--cw) / 2); transform: rotateX(-90deg); background: radial-gradient(circle, #b9c0c8, #7c858e); }
.can__hole { position: absolute; left: 34%; top: 16%; width: 32%; height: 20%; border-radius: 50%; background: #2a2f35; opacity: 0; }
.can__tab {
  position: absolute; left: 33%; top: 15%; width: 34%; height: 40%; border-radius: 40% 40% 30% 30%;
  background: radial-gradient(circle at 50% 70%, transparent 0 22%, #d9dee3 24%), linear-gradient(#e9edf1, #aeb6be);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transform-origin: 50% 100%;
}
.can__shade, .can__shine { position: absolute; inset: 0; border-radius: 50% / calc(var(--cw) * .1); pointer-events: none; }
.can__shade {
  background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 14%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .2) 82%, rgba(0, 0, 0, .55) 100%);
  mix-blend-mode: multiply;
}
.can__shine {
  background: linear-gradient(90deg, transparent 17%, rgba(255, 255, 255, .6) 25%, transparent 33%, transparent 68%, rgba(255, 255, 255, .22) 74%, transparent 79%);
  mix-blend-mode: screen;
}
/* ラベル（文字は画像にせず、ここで組む） */
.lb {
  position: absolute; inset: 0; color: #fff; font-family: var(--pop); font-weight: 900; overflow: hidden;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .3) 0 2px, transparent 2.5px) 0 0 / 23px 23px,
    radial-gradient(circle, rgba(255, 255, 255, .18) 0 1.2px, transparent 1.6px) 9px 13px / 15px 15px,
    linear-gradient(var(--lc), var(--lc2));
}
.lb__top {
  position: absolute; left: 0; right: 0; top: 0; height: 13%;
  display: flex; justify-content: space-around; align-items: center;
  background: #fff; color: var(--lc2); font-size: calc(var(--cw) * .052); letter-spacing: .18em; white-space: nowrap;
}
.lb__mark {
  position: absolute; left: 4%; top: 18%; writing-mode: vertical-rl;
  font-size: calc(var(--cw) * .34); line-height: 1; letter-spacing: -.02em;
  text-shadow: 0 calc(var(--cw) * .018) 0 var(--lc2);
}
.lb__fruit { position: absolute; left: 31%; top: 24%; width: calc(var(--cw) * .62); height: calc(var(--cw) * .62); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.lb__fruit--2 { left: 77%; top: 48%; width: calc(var(--cw) * .42); height: calc(var(--cw) * .42); transform: rotate(-20deg); }
.lb__name { position: absolute; left: 31%; width: calc(var(--cw) * .62); top: 60%; text-align: center; font-size: calc(var(--cw) * .12); text-shadow: 0 2px 0 var(--lc2); }
.lb__badge {
  position: absolute; left: 59%; top: 24%; width: calc(var(--cw) * .36); height: calc(var(--cw) * .36); border-radius: 50%;
  display: grid; place-content: center; text-align: center; line-height: 1;
  background: #fff; color: var(--lc2); font-size: calc(var(--cw) * .07);
}
.lb__badge small { display: block; font-size: calc(var(--cw) * .05); margin-bottom: 2px; }
.lb__badge b { font-size: calc(var(--cw) * .15); }
.lb__en { position: absolute; left: 4%; right: 4%; top: 76%; text-align: right; font-size: calc(var(--cw) * .06); letter-spacing: .3em; }
.lb__bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11%;
  background: radial-gradient(circle at 50% 0, transparent 0 calc(var(--cw) * .04), #fff calc(var(--cw) * .043)) 0 0 / calc(var(--cw) * .12) 100%;
}

/* 果物 */
.fr { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .16)); }

/* ── 1. 最初の画面 ─────────────────────────── */
.fv {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center; padding: 70px 16px 90px;
  background: var(--bg);
}
.fv__blob { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.fv__blob--1 { width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent); }
.fv__blob--2 { width: 60vmax; height: 60vmax; right: -24vmax; bottom: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent); }
.fv__title {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 10vh 0 18vh;
  font-size: clamp(56px, min(11vw, 19vh), 180px); line-height: 1; letter-spacing: .04em; color: var(--c);
  pointer-events: none;
}
.fv__row { display: block; }
.fv__row:first-child { transform: translateX(-17vw); }
.fv__row:last-child { transform: translateX(20vw); }
.stage--fv { z-index: 2; }
.can--fv { --cw: clamp(130px, 24vmin, 240px); cursor: pointer; }
.fv__fruits { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fv__fr { position: absolute; width: clamp(48px, 8vw, 110px); height: clamp(48px, 8vw, 110px); }
.fv__fr:nth-child(1) { left: 8%; top: 18%; }
.fv__fr:nth-child(2) { left: 78%; top: 14%; width: clamp(60px, 10vw, 140px); height: clamp(60px, 10vw, 140px); }
.fv__fr:nth-child(3) { left: 14%; top: 70%; }
.fv__fr:nth-child(4) { left: 70%; top: 72%; }
.fv__fr:nth-child(5) { left: 30%; top: 8%; width: clamp(36px, 5vw, 70px); height: clamp(36px, 5vw, 70px); }
.fv__fr:nth-child(6) { left: 86%; top: 46%; }
.fv__fr:nth-child(7) { left: 3%; top: 46%; width: clamp(36px, 5vw, 70px); height: clamp(36px, 5vw, 70px); }
.fv__fr:nth-child(8) { left: 84%; top: 82%; width: clamp(36px, 5vw, 70px); height: clamp(36px, 5vw, 70px); }
.fv__lead { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; font-weight: 800; letter-spacing: .14em; z-index: 4; }
.fv__tap {
  position: absolute; left: 0; right: 0; bottom: 24px; width: fit-content; margin: 0 auto; z-index: 4;
  background: none; border: 0; padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: var(--c2); border-bottom: 2px solid transparent; transition: border-color .3s;
}
.fv__tap:hover { border-bottom-color: var(--c2); }
html:not(.mo) .fv__tap { display: none; }

/* ── 2. 注がれて、満ちる ───────────────────── */
.pour { position: relative; background: var(--bg); }
.pour__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 90px 16px; }
.pour__psh { font-size: clamp(48px, 10vw, 150px); font-weight: 900; color: var(--c); letter-spacing: .04em; line-height: 1; }
.can--pour { --cw: clamp(120px, 22vmin, 220px); }
.spray, .burst, .stream, .liquid { display: none; }
.pour__cap { text-align: center; font-weight: 900; }
.pour__cap--1 { font-size: 15px; letter-spacing: .3em; color: var(--c2); }
.pour__cap--2 { font-size: clamp(30px, 5vw, 64px); color: var(--c2); }

.mo .pour { height: 100vh; height: 100svh; overflow: hidden; }
.mo .pour__stage { position: absolute; inset: 0; display: block; padding: 0; }
.mo .stage--pour { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; z-index: 2; }   /* 🔴 translate で寄せない（GSAP の x に上書きされ、1366 で注ぐ液が口から離れた） */
.mo .pour__psh { position: absolute; left: 0; right: 0; top: 14%; text-align: center; z-index: 3; }
.mo .pour__psh .ch { opacity: 0; }
.mo .spray, .mo .burst { display: block; position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; }
.mo .spray i { opacity: 0; }
.spray i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent); }
.burst__fr { position: absolute; left: 0; top: 0; width: clamp(44px, 7vw, 96px); height: clamp(44px, 7vw, 96px); margin: clamp(-48px, -3.5vw, -22px); opacity: 0; }
.mo .stream {
  display: block; position: absolute; left: 0; top: 0; z-index: 1; width: clamp(12px, 1.6vw, 22px); margin-left: clamp(-11px, -.8vw, -6px);
  border-radius: 999px; background: linear-gradient(90deg, var(--c2), var(--c) 40%, color-mix(in srgb, var(--c) 60%, #fff) 60%, var(--c));
  transform-origin: 50% 0; transform: scaleY(0);
}
.mo .liquid { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 1; visibility: hidden; }   /* 位置は JS の fromTo で決める */
.liquid__wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 200%; height: 60px; fill: var(--c); animation: wave 3.2s linear infinite; }
@keyframes wave { to { transform: translateX(-50%); } }
.liquid__body { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(var(--c), var(--c2)); }
.liquid__body i {
  position: absolute; left: var(--x); bottom: -20px; width: var(--s); height: var(--s); border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .15);
  animation: rise var(--d) ease-in infinite; animation-delay: calc(var(--w) * -1);
}
@keyframes rise { to { transform: translate(14px, -110vh); } }
.mo .pour__cap { position: absolute; left: 0; right: 0; padding: 0 16px; z-index: 4; }
.mo .pour__cap--1 { bottom: 12%; }
.mo .pour__cap--2 { top: 0; bottom: 0; height: fit-content; margin: auto 0; color: #fff; opacity: 0; text-shadow: 0 3px 0 var(--c2); }

/* ── 3. 三つの味 ───────────────────────────── */
.flavors { position: relative; overflow: hidden; padding: 110px 16px 120px; background: var(--bg); text-align: center; }
.flavors__head h2 { font-size: clamp(34px, 5vw, 64px); color: var(--c2); margin-bottom: 12px; }
.flavors__row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 5vw, 80px); margin: 56px auto 24px; max-width: 1000px; }
.flv { background: none; border: 0; padding: 12px 6px; cursor: pointer; display: grid; justify-items: center; gap: 18px; border-radius: 16px; position: relative; z-index: 2; }
.can--flv { --cw: clamp(78px, 14vmin, 150px); }
.flv__name { font-weight: 900; font-size: clamp(15px, 1.8vw, 20px); letter-spacing: .14em; padding: 4px 14px; border-radius: 999px; transition: background-color .3s, color .3s; }
.flv:hover .flv__name { background: color-mix(in srgb, var(--c) 18%, transparent); }
.flv[aria-pressed="true"] .flv__name { background: var(--c2); color: #fff; }
.flavors__note { font-weight: 700; min-height: 2em; position: relative; z-index: 2; }
.rain { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rain span { position: absolute; left: 0; top: 0; width: clamp(36px, 5vw, 64px); height: clamp(36px, 5vw, 64px); }

/* ── 4. 流れる文字 ─────────────────────────── */
.marq { overflow: hidden; padding: 70px 0; background: var(--c); color: #fff; }
.marq__row { overflow: hidden; }
.marq__track { display: flex; width: max-content; font-size: clamp(48px, 9vw, 140px); font-weight: 900; line-height: 1.2; white-space: nowrap; }
.marq__track span { padding: 0 .25em; }
.marq__row--rev .marq__track { color: transparent; -webkit-text-stroke: 2px #fff; }
.marq__dot { opacity: .6; }

/* ── 5. 売っている時期と場所 ───────────────── */
.info { padding: 110px 16px; background: #fffdf9; color: #2b2320; }
.info__in { width: min(980px, 100%); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; }
.info__fruit { width: min(360px, 70vw); aspect-ratio: 1; justify-self: center; }
.info__slice { display: block; width: 100%; height: 100%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .15)); }
.info h2 { font-size: clamp(30px, 4vw, 48px); color: var(--c2); margin-bottom: 26px; }
.info__dl { margin: 0 0 22px; }
.info__dl div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 16px 4px; border-bottom: 1px solid #eadfd6; }
.info__dl dt { color: #7a6a62; font-weight: 700; }
.info__dl dd { margin: 0; font-weight: 700; }
.info__fic { font-size: 13px; color: #7a6a62; }

/* ── 泡 ── */
.bubbles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
html:not(.mo) .bubbles { display: none; }

@media (max-width: 760px) {
  .fv__title { padding: 12vh 0 22vh; font-size: clamp(48px, 16vw, 100px); }
  .fv__row:first-child { transform: translateX(-4vw); }
  .fv__row:last-child { transform: translateX(14vw); }
  .info__in { grid-template-columns: 1fr; }
  .info__dl div { grid-template-columns: 1fr; gap: 2px; }
}