/* ================================================================
   CSS Awards レベル エフェクト集
   ================================================================ */

/* === ページローディング === */
.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--navy, #0c1420);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .8s ease, visibility .8s;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo {
  width: 60px; height: 69px; color: var(--gold-light);
  animation: loader-breathe 1.5s ease-in-out infinite;
}
.loader-logo svg { width: 100%; height: 100%; }
.loader-text {
  margin-top: 16px; font-family: var(--serif);
  font-size: 14px; letter-spacing: 6px; color: rgba(255,255,255,.4);
  animation: loader-fade 1.5s ease-in-out infinite;
}
.loader-bar {
  width: 120px; height: 1px; margin-top: 24px; background: rgba(255,255,255,.1);
  overflow: hidden; border-radius: 1px;
}
.loader-bar-fill {
  width: 0; height: 100%; background: var(--gold);
  animation: loader-fill 1.8s ease-in-out forwards;
}
@keyframes loader-breathe { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes loader-fade { 0%,100% { opacity: .3; } 50% { opacity: .7; } }
@keyframes loader-fill { 0% { width: 0; } 100% { width: 100%; } }

/* === スクロールプログレスバー === */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--green-light), var(--gold));
  z-index: 9998; transition: width .05s linear;
}

/* === カスタムカーソル === */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  background: var(--green-main); border-radius: 50%;
  pointer-events: none; z-index: 9997;
  transition: transform .15s ease, opacity .15s;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 36px; height: 36px;
  border: 1px solid var(--green-main); border-radius: 50%;
  pointer-events: none; z-index: 9996;
  transition: width .3s ease, height .3s ease, border-color .3s;
  transform: translate(-50%, -50%);
  opacity: .4;
}
.cursor-ring.hover {
  width: 56px; height: 56px;
  border-color: var(--gold); opacity: .6;
}
.cursor-dot.hover { transform: translate(-50%, -50%) scale(2.5); background: var(--gold); }

/* === スクロールアニメーション === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* 遅延 */
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }
.delay-5 { transition-delay: .5s; }
.delay-6 { transition-delay: .6s; }
.delay-7 { transition-delay: .7s; }

/* === パララックスレイヤー === */
.parallax-container { overflow: hidden; position: relative; }
.parallax-bg {
  position: absolute; inset: -20% 0; width: 100%;
  will-change: transform; transition: transform .1s linear;
}

/* === セクション区切りウェーブ === */
.wave-divider {
  position: relative; width: 100%; overflow: hidden; line-height: 0;
}
.wave-divider svg {
  display: block; width: 100%; height: 60px;
}
.wave-divider.flip { transform: rotate(180deg); }

/* === マイクロインタラクション === */

/* ボタンの波紋エフェクト */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,.3) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.btn-ripple:active::after { opacity: 1; }

/* カードのチルトエフェクト */
.tilt-card {
  transition: transform .4s cubic-bezier(.03,.98,.52,.99);
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* テキストのグラデーションアニメーション */
.text-shimmer {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 40%, #fff 50%, var(--gold-light) 60%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: -100% 50%; } }

/* 画像のズームホバー */
.img-zoom {
  overflow: hidden;
}
.img-zoom > * {
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.img-zoom:hover > * {
  transform: scale(1.08);
}

/* フローティングアニメーション */
.float {
  animation: float-gentle 6s ease-in-out infinite;
}
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* パルスアニメーション */
.pulse-soft {
  animation: pulse-soft 3s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

/* === スムーズなページ遷移 === */
.page-transition {
  position: fixed; inset: 0; z-index: 9990;
  background: var(--green-dark);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

/* === マグネットボタン === */
.magnetic {
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}

/* === セクションの背景ノイズテクスチャ === */
.noise::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}

/* === スマートシャドウ（ホバー時に持ち上がる） === */
.lift {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.lift:hover {
  box-shadow: 0 20px 50px rgba(26,58,42,.12);
}
/* tilt-card以外のliftのみtranslateY */
.lift:not(.tilt-card):hover {
  transform: translateY(-6px);
}

/* === 縦書きスクロールテキスト === */
.vertical-scroll-text {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-family: var(--serif);
  font-size: 11px; letter-spacing: 8px; color: rgba(45,106,79,.08);
  z-index: 50; pointer-events: none;
  font-weight: 200;
  transition: opacity .3s;
}
.vertical-scroll-text.hidden { opacity: 0; }

/* === マーキー（お知らせスクロール） === */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === Awards-Level Effects === */
/* advanced-effects.js がCSSを注入するため、ここでは最小限のフォールバックのみ */

/* Parallax depth */
[data-parallax-depth] { will-change: transform; }

/* === レスポンシブでカスタムカーソル無効化 === */
@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
  .vertical-scroll-text { display: none; }
  .section-clip { clip-path: none !important; }
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}
