@charset "UTF-8";
/* =========================================================
   effects.css ｜ 動的演出（AOZORA BREW / SUMMER FEST 2026）

   このファイルがやること（演出の見た目だけ）：
    1. オープニング・ローディング演出（夜明けカーテン）
    2. スクロールプログレスバー（上部のゴールド線）
    3. カスタムカーソル（PCのみ）
    4. 漂う泡パーティクル（canvasの土台スタイル）
    5. SKY WHALE（スクロールで泳ぐ鯨）
    6. トースト通知
    7. フローティングカート ＋ 商品が飛んでいくアニメ
    8. TOPへ戻るボタン
    9. 横からスルスル出る予約バナー
   10. 見出しの一文字ずつ登場
   11. カードの時間差リビール
   12. 画像のマスクワイプ
   13. ヒーローの Ken Burns ＆ パララックス補助
   14. ナビのスクロール演出

   ※ 動きのロジックは effects.js が担当。
   ※ JavaScript が動かなくても本文は普通に表示されます
     （演出が付かないだけ）。
   ※ 既存の index.html 内 <style> は一切触っていません。
     ここは「上から足すだけ」の追加スタイルです。
   ========================================================= */

/* ---------------------------------------------------------
   0. 共通
   .fx-on は effects.js が <html> に付ける合図クラス。
   「JSが動いている時だけ演出を出す」ためのスイッチです。
   --------------------------------------------------------- */
.fx-on body {
 cursor: auto;
}

/* =========================================================
   1. オープニング・ローディング演出（夜明けカーテン）
   紺色のパネルが上下に分かれて、奥から空が晴れるイメージ。
   ========================================================= */
#azb-loader {
 position: fixed;
 inset: 0;
 z-index: 9000;
 overflow: hidden;
}
/* 上下の紺色パネル（これが実際の「幕」） */
.azb-loader-panel {
 position: absolute;
 left: 0;
 width: 100%;
 height: 51%;
 background: var(--navy, #0b1628);
 z-index: 1;
 transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.azb-loader-top {
 top: 0;
}
.azb-loader-btm {
 bottom: 0;
}
/* 中央のロゴ群（パネルの上に乗る） */
.azb-loader-core {
 position: absolute;
 inset: 0;
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 14px;
 transition:
  opacity 0.5s ease,
  transform 0.7s ease;
}
.azb-loader-whale {
 width: 116px;
 height: auto;
 opacity: 0;
 transform: translateY(14px) scale(0.92);
 filter: drop-shadow(0 0 22px rgba(244, 201, 93, 0.45));
 animation: azbLoaderWhaleIn 1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s forwards;
}
.azb-loader-whale path {
 fill: var(--gold, #f4c95d);
}
.azb-loader-whale circle {
 fill: var(--navy, #0b1628);
}
.azb-loader-brand {
 font-family: var(--ff-display, serif);
 font-size: 1.5rem;
 letter-spacing: 0.5em;
 padding-left: 0.5em;
 color: var(--gold-pale, #f9e4a0);
 opacity: 0;
 animation: azbLoaderBrandIn 1s ease 0.55s forwards;
}
.azb-loader-line {
 display: block;
 width: 180px;
 max-width: 60vw;
 height: 1px;
 background: linear-gradient(
  90deg,
  transparent,
  var(--gold, #f4c95d),
  transparent
 );
 transform: scaleX(0);
 animation: azbLoaderLineIn 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.85s forwards;
}
.azb-loader-sub {
 font-family: var(--ff-display, serif);
 font-size: 0.62rem;
 letter-spacing: 0.3em;
 text-transform: uppercase;
 color: var(--muted, #7a96b8);
 opacity: 0;
 animation: azbLoaderBrandIn 1s ease 1.05s forwards;
}
@keyframes azbLoaderWhaleIn {
 to {
  opacity: 0.95;
  transform: translateY(0) scale(1);
 }
}
@keyframes azbLoaderBrandIn {
 to {
  opacity: 1;
 }
}
@keyframes azbLoaderLineIn {
 to {
  transform: scaleX(1);
 }
}
/* JSが「完了」を付けたらカーテンが開く */
#azb-loader.azb-done .azb-loader-top {
 transform: translateY(-100%);
}
#azb-loader.azb-done .azb-loader-btm {
 transform: translateY(100%);
}
#azb-loader.azb-done .azb-loader-core {
 opacity: 0;
 transform: scale(1.08);
}
/* JSが消し終わったら完全に除去（クリックも貫通させない） */
#azb-loader.azb-gone {
 display: none;
}
/* 万一 JS が動かなくても、5秒で必ず幕を消す安全装置 */
#azb-loader {
 animation: azbLoaderFailsafe 0s linear 5s forwards;
}
@keyframes azbLoaderFailsafe {
 to {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
 }
}

/* =========================================================
   2. スクロールプログレスバー
   ページ上部に、読み進めた割合のゴールド線。
   ========================================================= */
#azb-progress {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 z-index: 950;
 transform: scaleX(0);
 transform-origin: left center;
 background: linear-gradient(
  90deg,
  var(--gold-dark, #c9962a),
  var(--gold, #f4c95d),
  var(--gold-pale, #f9e4a0)
 );
 box-shadow: 0 0 12px rgba(244, 201, 93, 0.6);
 pointer-events: none;
}

/* =========================================================
   3. カスタムカーソル（PC・マウス操作時のみ）
   ゴールドのリング＋小さなドット。
   タッチ端末では一切出ません。
   ========================================================= */
#azb-cursor,
#azb-cursor-dot {
 display: none;
}
@media (hover: hover) and (pointer: fine) {
 /* JSがカーソル準備OKにしたら、標準カーソルを隠す */
 .fx-on body.azb-cursor-on,
 .fx-on body.azb-cursor-on a,
 .fx-on body.azb-cursor-on button,
 .fx-on body.azb-cursor-on input,
 .fx-on body.azb-cursor-on select,
 .fx-on body.azb-cursor-on .p-card {
  cursor: none;
 }
 .azb-cursor-on #azb-cursor,
 .azb-cursor-on #azb-cursor-dot {
  display: block;
 }
 #azb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(244, 201, 93, 0.8);
  border-radius: 50%;
  z-index: 9990;
  pointer-events: none;
  transition:
   width 0.25s ease,
   height 0.25s ease,
   margin 0.25s ease,
   background-color 0.25s ease,
   opacity 0.25s ease;
  will-change: transform;
 }
 #azb-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--gold, #f4c95d);
  border-radius: 50%;
  z-index: 9991;
  pointer-events: none;
  transition: opacity 0.25s ease;
  will-change: transform;
 }
 /* リンク・ボタンの上ではリングが大きく＆淡く光る */
 #azb-cursor.azb-cursor-hover {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: rgba(244, 201, 93, 0.12);
  border-color: var(--gold-pale, #f9e4a0);
 }
}

/* =========================================================
   4. 漂う泡パーティクル（canvas）
   ビールの泡 兼 空気感。canvas自体はJSが描画します。
   ここは「置き場所」のスタイルだけ。
   ========================================================= */
#azb-bubbles {
 position: fixed;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 pointer-events: none;
 mix-blend-mode: screen;
}

/* =========================================================
   5. SKY WHALE（スクロールで空を泳ぐ鯨）
   このサイトの主役級の演出。
   薄っすらと、画面全体をゆっくり横切ります。
   ========================================================= */
#azb-whale {
 position: fixed;
 top: 33%;
 left: 0;
 width: 260px;
 z-index: 3;
 pointer-events: none;
 opacity: 0.14;
 mix-blend-mode: screen;
 transition: opacity 0.8s ease;
 will-change: transform;
}
/* 鯨のセクション付近に来たら、ふわっと存在感が増す */
#azb-whale.azb-whale-near {
 opacity: 0.34;
}
#azb-whale svg,
#azb-whale img {
 width: 100%;
 height: auto;
 display: block;
 /* たゆたい・傾き・横移動はすべて effects.js が物理で制御します */
 filter: drop-shadow(0 0 34px rgba(244, 201, 93, 0.55));
}
#azb-whale svg path {
 fill: var(--gold, #f4c95d);
}
/* 透過PNGを「イラストのまま」見せるモード（WHALE_GLOW = false 時） */
#azb-whale.azb-whale-plain {
 mix-blend-mode: normal;
 opacity: 0.45;
}
#azb-whale.azb-whale-plain.azb-whale-near {
 opacity: 0.72;
}
#azb-whale.azb-whale-plain svg,
#azb-whale.azb-whale-plain img {
 filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

/* =========================================================
   6. トースト通知
   「カートに追加しました」などを画面下からふわっと。
   ========================================================= */
#azb-toast-wrap {
 position: fixed;
 left: 50%;
 bottom: 26px;
 transform: translateX(-50%);
 z-index: 2100;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 pointer-events: none;
 width: max-content;
 max-width: 92vw;
}
.azb-toast {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 13px 22px;
 background: rgba(22, 36, 64, 0.96);
 border: 1px solid var(--border, rgba(244, 201, 93, 0.18));
 border-left: 3px solid var(--gold, #f4c95d);
 border-radius: 6px;
 color: var(--white, #f0f4ff);
 font-size: 0.84rem;
 letter-spacing: 0.02em;
 box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
 backdrop-filter: blur(8px);
 opacity: 0;
 transform: translateY(20px) scale(0.96);
 transition:
  opacity 0.4s ease,
  transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.azb-toast.azb-toast-in {
 opacity: 1;
 transform: translateY(0) scale(1);
}
.azb-toast-ico {
 font-size: 1.1rem;
 line-height: 1;
}

/* =========================================================
   7. フローティングカート ＋ 飛んでいくアニメ
   ※ 営業サンプルのルールに合わせ「右下＝TOPボタン」専用。
     カートは左下に配置して住み分けています。
   ========================================================= */
#azb-fab-cart {
 position: fixed;
 left: 22px;
 bottom: 22px;
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: var(--gold, #f4c95d);
 color: var(--navy, #0b1628);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.4rem;
 z-index: 940;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
 /* 初期は隠す。カートに商品が入ったら出る */
 opacity: 0;
 transform: translateY(24px) scale(0.7);
 pointer-events: none;
 transition:
  opacity 0.4s ease,
  transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#azb-fab-cart.azb-show {
 opacity: 1;
 transform: translateY(0) scale(1);
 pointer-events: auto;
}
#azb-fab-cart:hover {
 background: var(--gold-pale, #f9e4a0);
}
/* 商品追加時にプルッと弾むアニメ */
#azb-fab-cart.azb-fab-pop {
 animation: azbFabPop 0.55s ease;
}
@keyframes azbFabPop {
 0%,
 100% {
  transform: translateY(0) scale(1);
 }
 35% {
  transform: translateY(-6px) scale(1.18);
 }
 60% {
  transform: translateY(0) scale(0.94);
 }
}
.azb-fab-ico {
 line-height: 1;
}
.azb-fab-badge {
 position: absolute;
 top: -4px;
 right: -4px;
 min-width: 22px;
 height: 22px;
 padding: 0 5px;
 border-radius: 11px;
 background: var(--navy, #0b1628);
 color: var(--gold, #f4c95d);
 border: 1.5px solid var(--gold, #f4c95d);
 font-size: 0.72rem;
 font-weight: 600;
 display: flex;
 align-items: center;
 justify-content: center;
}
/* カートへ飛んでいく商品（円形のミニ画像） */
.azb-fly {
 position: fixed;
 width: 54px;
 height: 54px;
 margin: 0;
 border-radius: 50%;
 background-color: var(--gold, #f4c95d);
 background-size: cover;
 background-position: center;
 border: 2px solid var(--gold-pale, #f9e4a0);
 box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
 z-index: 2090;
 pointer-events: none;
 transform: translate(-50%, -50%);
}

/* =========================================================
   8. TOPへ戻るボタン（右下固定）
   ========================================================= */
#azb-top {
 position: fixed;
 right: 22px;
 bottom: 22px;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: rgba(22, 36, 64, 0.92);
 border: 1px solid var(--gold, #f4c95d);
 color: var(--gold, #f4c95d);
 font-size: 1.1rem;
 z-index: 940;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 backdrop-filter: blur(6px);
 opacity: 0;
 transform: translateY(24px) scale(0.8);
 pointer-events: none;
 transition:
  opacity 0.35s ease,
  transform 0.35s ease,
  background-color 0.3s ease,
  color 0.3s ease;
}
#azb-top.azb-show {
 opacity: 1;
 transform: translateY(0) scale(1);
 pointer-events: auto;
}
#azb-top:hover {
 background: var(--gold, #f4c95d);
 color: var(--navy, #0b1628);
}

/* =========================================================
   9. 横からスルスル出る予約バナー（右辺・縦中央）
   ========================================================= */
#azb-banner {
 position: fixed;
 right: 0;
 top: 50%;
 z-index: 870;
 width: 192px;
 padding: 20px 18px 18px;
 background: linear-gradient(
  150deg,
  rgba(30, 48, 80, 0.97),
  rgba(11, 22, 40, 0.97)
 );
 border: 1px solid var(--border, rgba(244, 201, 93, 0.18));
 border-right: none;
 border-radius: 10px 0 0 10px;
 box-shadow: -12px 0 36px rgba(0, 0, 0, 0.45);
 /* 初期は壁の中に隠れている */
 transform: translate(100%, -50%);
 transition: transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
}
#azb-banner.azb-show {
 transform: translate(0, -50%);
}
.azb-banner-x {
 position: absolute;
 top: 6px;
 right: 8px;
 width: 22px;
 height: 22px;
 background: transparent;
 color: var(--muted, #7a96b8);
 font-size: 1rem;
 line-height: 1;
 border-radius: 50%;
}
.azb-banner-x:hover {
 color: var(--gold, #f4c95d);
}
.azb-banner-cap {
 font-family: var(--ff-display, serif);
 font-size: 0.54rem;
 letter-spacing: 0.18em;
 color: var(--gold, #f4c95d);
 text-transform: uppercase;
 margin-bottom: 6px;
}
.azb-banner-main {
 font-family: var(--ff-display, serif);
 font-size: 1.15rem;
 line-height: 1.35;
 color: var(--white, #f0f4ff);
 margin-bottom: 14px;
}
.azb-banner-btn {
 display: block;
 text-align: center;
 padding: 10px 12px;
 background: var(--gold, #f4c95d);
 color: var(--navy, #0b1628);
 font-family: var(--ff-display, serif);
 font-size: 0.74rem;
 font-weight: 600;
 letter-spacing: 0.1em;
 border-radius: 4px;
 transition:
  background 0.3s ease,
  transform 0.3s ease;
}
.azb-banner-btn:hover {
 background: var(--white, #f0f4ff);
 transform: translateY(-2px);
}
/* バナーが出ている間、ほのかに脈打つフチ */
#azb-banner.azb-show {
 animation: azbBannerGlow 2.6s ease-in-out infinite;
}
@keyframes azbBannerGlow {
 0%,
 100% {
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.45);
 }
 50% {
  box-shadow:
   -12px 0 36px rgba(0, 0, 0, 0.45),
   0 0 22px rgba(244, 201, 93, 0.28);
 }
}

/* =========================================================
   10. 見出しの一文字ずつ登場
   .sec-title の各文字を span 化して順番に出します。
   （span化は effects.js が実行）
   トリガーは既存の .reveal.in を流用。
   ========================================================= */
.fx-on .sec-title .azb-ch {
 display: inline-block;
 opacity: 0;
 transform: translateY(0.45em) rotateX(-55deg);
 transform-origin: 50% 100%;
 transition:
  opacity 0.5s ease,
  transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fx-on .reveal.in .sec-title .azb-ch {
 opacity: 1;
 transform: none;
}

/* =========================================================
   11. カードの時間差リビール
   グリッドの子カードを1枚ずつ順番に。
   親 .reveal のブロック演出は打ち消して、子に主役を譲ります。
   ========================================================= */
.fx-on .event-grid.reveal,
.fx-on .lineup-grid.reveal {
 opacity: 1;
 transform: none;
}
.fx-on .event-grid .ev-card,
.fx-on .lineup-grid .p-card {
 opacity: 0;
 transform: translateY(36px);
 transition:
  opacity 0.7s ease,
  transform 0.75s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.fx-on .event-grid.in .ev-card,
.fx-on .lineup-grid.in .p-card {
 opacity: 1;
 transform: none;
}
/* 順番に出すための遅延（最大6枚想定） */
.fx-on .event-grid.in .ev-card:nth-child(2),
.fx-on .lineup-grid.in .p-card:nth-child(2) {
 transition-delay: 0.1s;
}
.fx-on .event-grid.in .ev-card:nth-child(3),
.fx-on .lineup-grid.in .p-card:nth-child(3) {
 transition-delay: 0.2s;
}
.fx-on .lineup-grid.in .p-card:nth-child(4) {
 transition-delay: 0.3s;
}
.fx-on .lineup-grid.in .p-card:nth-child(5) {
 transition-delay: 0.4s;
}
.fx-on .lineup-grid.in .p-card:nth-child(6) {
 transition-delay: 0.5s;
}

/* =========================================================
   12. 画像のマスクワイプ
   鯨セクションの写真が、紺色の幕がスッと引けて現れる。
   （.azb-wipe クラス付与は effects.js が実行）
   ========================================================= */
.azb-wipe {
 position: relative;
 overflow: hidden;
}
.azb-wipe::after {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--navy, #0b1628);
 transform-origin: right center;
 transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
 z-index: 3;
}
.azb-wipe.azb-wipe-in::after {
 transform: scaleX(0);
}
.azb-wipe img {
 transform: scale(1.14);
 transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.azb-wipe.azb-wipe-in img {
 transform: scale(1);
}

/* =========================================================
   13. ヒーロー Ken Burns ＆ パララックス補助
   スライド画像がゆっくりズーム。文字はパララックスで流れる。
   （文字の移動量は effects.js が制御。ここはズームのみ）
   ========================================================= */
.fx-on .hero .slide.active {
 animation: azbKenBurns 6.5s ease-out both;
}
@keyframes azbKenBurns {
 from {
  transform: scale(1);
 }
 to {
  transform: scale(1.1);
 }
}
.fx-on .hero-content {
 will-change: transform, opacity;
}

/* =========================================================
   14. ナビのスクロール演出
   少し下げると、コンパクト＆影が濃くなる。
   ========================================================= */
.fx-on .nav {
 transition:
  padding 0.35s ease,
  background-color 0.35s ease,
  box-shadow 0.35s ease;
}
.fx-on .nav.azb-nav-shrink {
 padding-top: 9px;
 padding-bottom: 9px;
 background: rgba(11, 22, 40, 0.96);
 box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   ヘッダー・フッターのロゴ画像
   サイト名の左にロゴをきれいに並べる。
   ロゴが横長・正方形・縦長どれでも崩れないように
   高さ固定＋幅は自動で比率を保ちます。
   ========================================================= */
.nav-logo a {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 line-height: 1;
}
.nav-logo img {
 height: 22px;
 width: auto;
 display: block;
}
.f-brand {
 display: inline-flex;
 align-items: center;
 gap: 10px;
}
.f-brand img {
 height: 28px;
 width: auto;
 display: block;
}
/* ローディングのロゴ画像（PNG差替え後の見え方） */
img.azb-loader-whale {
 object-fit: contain;
}

/* =========================================================
   15. アクセシビリティ配慮
   OS側で「視差効果を減らす」をONにしている方には、
   揺れ・流れ系の演出を切って、最初から見える状態にします。
   （体調や酔いに配慮した、Webの標準的なマナーです）
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
 /* ローディングは即終了 */
 #azb-loader .azb-loader-whale,
 #azb-loader .azb-loader-brand,
 #azb-loader .azb-loader-line,
 #azb-loader .azb-loader-sub {
  animation: none !important;
  opacity: 1;
  transform: none;
 }
 .azb-loader-line {
  transform: scaleX(1);
 }
 /* 揺れ・ズーム系は止める */
 #azb-whale svg,
 #azb-banner.azb-show,
 .fx-on .hero .slide.active {
  animation: none !important;
 }
 .fx-on .hero-content {
  transform: none !important;
  opacity: 1 !important;
 }
 /* 文字・カード・画像リビールは「動かさず即表示」 */
 .fx-on .sec-title .azb-ch,
 .fx-on .event-grid .ev-card,
 .fx-on .lineup-grid .p-card {
  opacity: 1;
  transform: none;
  transition: none;
 }
 .azb-wipe::after {
  transform: scaleX(0);
  transition: none;
 }
 .azb-wipe img {
  transform: scale(1);
  transition: none;
 }
 /* トースト等の出入りは控えめに */
 .azb-toast,
 #azb-fab-cart,
 #azb-top,
 #azb-banner {
  transition-duration: 0.15s;
 }
}
