/* =====================================================
   YOSHIMURA OPENING ANIMATION
   Scene 1: Noren flutter open (3D rotate)
   Scene 2: Store interior + steam + wafu text
   Scene 3: Logo finale (large)
   ===================================================== */

/* Trigger element provides scroll height */
#op-trigger {
  position: relative;
  height: 800vh;     /* more scroll room → slower, more relaxed opening */
  z-index: 1;
}

/* Fixed overlay — inset:0 guarantees full viewport, no bottom gap */
#op-opening {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: #f0e8d8;
}

/* ---- Base background ---- */
.op-bg {
  position: absolute;
  inset: 0;
  background: #f0e8d8;
  z-index: 1;
}

/* ====================================================
   GUARD: the opening is driven SOLELY by GSAP.
   The theme adds site-wide .scroll-animation / .fade-in-*
   classes to every <p>/<img>; these would force the
   opening text visible (flash) before GSAP takes over.
   ID-level rules below out-rank those class rules.
   ==================================================== */
#op-opening img:not(.op-cloud) { opacity: 1 !important; }  /* clouds are GSAP-faded, so exempt them */
#op-opening .op-text-item { opacity: 0; }              /* resting; GSAP animates via inline style */
#op-opening .op-text-item.scroll-animation,
#op-opening .op-text-item.fade-in-text {
  transition: none !important;
  transform: none;
}

/* いらっしゃいませ：GSAPが制御するためサイトワイドアニメーションを無効化 */
#op-opening .op-irasshai,
#op-opening .op-irasshai.fade-in-section,
#op-opening .op-irasshai.scroll-animation {
  transition: none !important;
}
#op-opening .op-irasshai p,
#op-opening .op-irasshai p.fade-in-text,
#op-opening .op-irasshai p.scroll-animation {
  opacity: 1;          /* GSAPのinline styleが上書きするので初期値は問わない */
  transform: none !important;
  transition: none !important;
}

/* ====================================================
   ANTI-FLICKER: GSAP読み込み前でも「最初のフレーム」を
   正しく描画する。下記要素は opening.js が gsap.set() で
   フェード/拡大しながら登場させるため、初期状態を指定して
   おかないとGSAP初期化までフル表示でチラついてしまう。
   （GSAPが走るとインラインstyleで上書きされるため演出は不変）
   ==================================================== */
#op-opening .op-store-wrap,
#op-opening .op-logo-wrap,
#op-opening .op-logo-backdrop { opacity: 0; }

/* モバイルは暖簾を出さず店内から開始する（opening.jsが display:none に
   する）。同じ条件をCSSにも持たせ、スマホで暖簾が一瞬出ないようにする。 */
@media (max-width: 768px) {
  #op-opening .op-noren-container { display: none; }
}

/* ====================================================
   SCENE 1 decoration: 和雲（scattered, fly off on scroll）
   Elements are created/positioned/animated by opening.js.
   ==================================================== */
.op-clouds {
  position: absolute;
  inset: 0;
  z-index: 3;            /* behind the noren(7), in front of bg(1) & store(2) */
  pointer-events: none;
  overflow: hidden;
}
.op-cloud {
  position: absolute;
  height: auto;
  display: block;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}

/* ====================================================
   SCENE 2: Store interior
   ==================================================== */
.op-store-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: #f0e8d8;
}

.op-tennai {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Steam wisps */
.op-steam-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.op-steam-wisp {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.2) 50%, transparent 75%);
  filter: blur(18px);
  animation: steamFloat 4s ease-in-out infinite;
}

/* Top edge */
.op-steam-wisp.sw1  { width: 110px; height: 180px; top: -50px; left:  4%; animation-delay: 0s;   animation-duration: 3.6s; }
.op-steam-wisp.sw2  { width:  80px; height: 140px; top: -40px; left: 22%; animation-delay: 0.6s; animation-duration: 4.2s; }
.op-steam-wisp.sw3  { width:  95px; height: 160px; top: -45px; right: 18%; animation-delay: 1.0s; animation-duration: 3.9s; }
.op-steam-wisp.sw4  { width:  75px; height: 130px; top: -30px; right:  4%; animation-delay: 1.4s; animation-duration: 4.4s; }
/* Left edge */
.op-steam-wisp.sw5  { width: 150px; height: 100px; top: 12vh;  left: -40px; animation-delay: 0.3s; animation-duration: 5.0s; }
.op-steam-wisp.sw6  { width: 130px; height:  90px; top: 35vh;  left: -30px; animation-delay: 1.1s; animation-duration: 4.6s; }
/* Right edge */
.op-steam-wisp.sw7  { width: 150px; height: 100px; top: 10vh;  right: -40px; animation-delay: 0.7s; animation-duration: 4.8s; }
.op-steam-wisp.sw8  { width: 130px; height:  90px; top: 33vh;  right: -30px; animation-delay: 1.5s; animation-duration: 4.3s; }
/* Bottom edge */
.op-steam-wisp.sw9  { width: 200px; height: 100px; bottom: 3vh; left:  8%; animation-delay: 0.2s; animation-duration: 5.5s; }
.op-steam-wisp.sw10 { width: 180px; height:  90px; bottom: 6vh; right: 8%; animation-delay: 0.9s; animation-duration: 5.2s; }

@keyframes steamFloat {
  0%   { transform: translateY(0)     scale(1);    opacity: 0.75; }
  33%  { transform: translateY(-18px) scale(1.08); opacity: 0.55; }
  66%  { transform: translateY(-8px)  scale(0.96); opacity: 0.65; }
  100% { transform: translateY(0)     scale(1);    opacity: 0.75; }
}

/* ====================================================
   SCENE 2: Wafu concept text — 黒文字・はっきり
   ==================================================== */
.op-texts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  width: 90%;
  pointer-events: none;
}

.op-text-item {
  font-family: 'Yuji Boku', 'Kaisei HarunoUmi', 'Sawarabi Mincho', serif;
  font-size: clamp(1.4rem, 3.8vw, 2.8rem);
  color: #1a0f05;
  text-shadow:
    0 0 20px rgba(255,255,255,1),
    0 0 40px rgba(255,255,255,0.9),
    0 0 60px rgba(255,255,255,0.7),
    2px 2px 0   rgba(255,255,255,0.8),
    -2px -2px 0 rgba(255,255,255,0.8);
  letter-spacing: 0.35em;
  margin: 0.4em 0;
  opacity: 0;
  line-height: 1.8;
}

/* ====================================================
   SCENE 1.5: いらっしゃいませ — 中央にフワッと一言
   （のれんが開いた後、コンセプト文の前に表示）
   ==================================================== */
.op-irasshai {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  width: 90%;
  pointer-events: none;
  opacity: 0;            /* GSAP読み込み前のチラつき防止 */
}

.op-irasshai p {
  font-family: 'Kaisei HarunoUmi', 'Yuji Boku', 'Sawarabi Mincho', serif;
  font-size: clamp(2rem, 6vw, 4.2rem);
  color: #1a0f05;
  letter-spacing: 0.4em;
  margin: 0;
  text-shadow:
    0 0 20px rgba(255,255,255,1),
    0 0 40px rgba(255,255,255,0.9),
    0 0 60px rgba(255,255,255,0.7),
    2px 2px 0   rgba(255,255,255,0.8),
    -2px -2px 0 rgba(255,255,255,0.8);
}

/* ====================================================
   SCENE 3: Logo finale — 大きく
   ==================================================== */
.op-logo-backdrop {
  position: absolute;
  inset: 0;
  background: #f5efe6;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

.op-logo-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  opacity: 0;
  text-align: center;
}

.op-logo {
  width: auto;
  height: min(72vh, 580px);
  display: block;
  mix-blend-mode: multiply;
}

/* ====================================================
   SCENE 1: Noren — 3D fabric flutter open
   ==================================================== */
.op-noren-container {
  position: absolute;
  inset: 0;
  z-index: 7;
  perspective: 1200px;
  perspective-origin: 50% 30%;
}

/* Decorative wooden rod above noren */
.op-noren-rod {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18px;
  background: linear-gradient(180deg, #a0632c 0%, #6b3d18 45%, #8a5222 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  z-index: 8;
}

.op-noren-left,
.op-noren-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
}

/* Hinge at the outer top edge for natural fabric fold */
.op-noren-left  {
  left: 0;
  transform-origin: left top;
}
.op-noren-right {
  right: 0;
  transform-origin: right top;
}

/* Each side shows exactly half of the noren image */
.op-noren-left img,
.op-noren-right img {
  position: absolute;
  top: 0;
  width: 200%;
  height: auto;
  display: block;
  /* Subtle fabric wave — layered on top of GSAP panel rotation */
  animation: norenFabricWave 3.5s ease-in-out infinite;
}

.op-noren-left  img { left:  0; }
.op-noren-right img {
  right: 0;
  animation-delay: 0.9s;
}

/* Gentle fabric ripple (applies to the image inside, not the rotating panel) */
@keyframes norenFabricWave {
  0%, 100% { transform: skewX(0deg) skewY(0deg); }
  25%       { transform: skewX(-0.6deg) skewY(0.2deg); }
  75%       { transform: skewX(0.6deg) skewY(-0.2deg); }
}

/* ====================================================
   Scroll hint (replaces tanuki)
   ==================================================== */
.op-scroll-hint-wrap {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  /* 入場アニメは付けない（fill:both が GSAP の opacity 制御を上書きするため）。
     既定で表示 → GSAP がスクロールに応じて終盤でフェードアウトする。 */
}

/* 和風・大きめ・筆線の装飾つきスクロールテキスト */
.op-scroll-hint {
  font-family: 'Yuji Boku', 'Kaisei HarunoUmi', 'Sawarabi Mincho', serif;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  color: #3a1e0c;
  letter-spacing: 0.45em;
  text-indent: 0.45em;        /* letter-spacing による右余白を相殺して中央寄せ */
  margin: 0;
  padding-bottom: 0.45em;
  position: relative;
  text-shadow:
    0 0 14px rgba(255,255,255,0.95),
    0 0 30px rgba(255,255,255,0.85),
    0 2px 4px rgba(255,255,255,0.9);
}

/* 筆ストローク風の下線 */
.op-scroll-hint::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2.6em;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #9a2f2f 18%, #c0392b 50%, #9a2f2f 82%, transparent);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.8));
}

/* アニメする山形（シェブロン）矢印 */
.op-scroll-arrow {
  display: block;
  width: 20px;
  height: 20px;
  border-right: 3px solid #3a1e0c;
  border-bottom: 3px solid #3a1e0c;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
  animation: arrowPulse 1.6s ease-in-out infinite;
}

@keyframes skipFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes arrowPulse {
  0%, 100% { transform: rotate(45deg) translate(0, 0);     opacity: 0.55; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1;    }
}

/* ====================================================
   SKIP button — どの背景（紫のれん/店内写真/クリーム）でも視認できる濃色ピル
   ==================================================== */
#op-skip {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 100000;
  background: rgba(58, 30, 12, 0.85);
  color: #f7f0e3;
  border: 1px solid rgba(247, 240, 227, 0.65);
  padding: 10px 28px;
  font-family: 'Kaisei HarunoUmi', 'Noto Sans JP', serif;
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s, border-color 0.25s, transform 0.15s;
  animation: skipFadeIn 0.6s ease 1.2s both;
}

#op-skip:hover {
  background: rgba(58, 30, 12, 0.97);
  border-color: rgba(247, 240, 227, 0.95);
  transform: translateY(-1px);
}

/* ====================================================
   Mobile adjustments
   ==================================================== */
@media (max-width: 768px) {
  .op-text-item  { font-size: clamp(1.1rem, 4.5vw, 1.7rem); letter-spacing: 0.2em; }
  .op-logo       { height: min(55vh, 380px); }
  #op-skip       { bottom: 20px; right: 16px; padding: 8px 20px; font-size: 0.82rem; }
  .op-scroll-hint { font-size: clamp(1.2rem, 6vw, 1.7rem); }

  /* Mobile: remove the noren performance entirely (scroll text stays) */
  .op-noren-container,
  .op-noren-rod { display: none !important; }
}