@charset "UTF-8";

:root {
  --deep: #15259e;
  --mid: #2966a0;;
  --ripple: #cfeff5;
  --droplet: #f2fbfd;
  --ink: #20323c;
  --accent: #5a98a8;
}
* { box-sizing: border-box; }

html, body { 
  margin: 0; padding: 0; 
  overflow: hidden; 
  height: 100%;
}

.sr-only {
  display: block;
  text-align: center;
  margin-top: 10px;
  animation: slowBlink 6s ease-in-out infinite;
}
@keyframes slowBlink {
  0%, 100% {
    opacity: 0.15; /* 一番暗いとき（完全に消したくない場合は少し残す） */
  }
  50% {
    opacity: 0.85; /* 一番明るいとき */
  }
}


/* ---------------- ローダー全体 ---------------- */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  --impact-top: 72%;
  --impact-left: 50%;
  background:
    radial-gradient(ellipse 130% 80% at 50% 78%, var(--mid) 0%, #2a3885 42%, var(--deep) 100%);
  overflow: hidden;
}

/* ページ読み込み完了時（JSでクラスがついた時）にフェードアウト */
#loader.is-loaded {
  animation: loaderFade 1s ease-in forwards;
  animation-delay: 1.55s; /* 雫が落ちて波紋が広がる時間を待ってから消去 */
}

@keyframes loaderFade {
  0% { opacity: 1; visibility: visible; }
  92% { opacity: 0; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

.scene { position: absolute; inset: 0; }

/* ---------------- 山並みとその反射 ---------------- */
/* 💡 手前の白い山（.ridge）のコードは完全に消去しました */

/* ✨【維持】奥の山並みの反射：水面の揺れを表現するためにゆったり歪ませ続けます */
.ridge-reflection {
  position: absolute; left: 0; width: 100%; height: 11%; top: 38%;
  fill: rgba(255,255,255,.06);
  transform: scaleY(-1); transform-origin: top;
  filter: blur(2.5px);
  opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
  animation: fadeIn 1.2s ease-out forwards, reflectionRipple 3s ease-in-out infinite alternate;
  animation-delay: .1s;
}

@keyframes reflectionRipple {
  0% { transform: scaleY(-1) skewX(-1deg) scaleX(1); filter: blur(2px); }
  100% { transform: scaleY(-1) skewX(2deg) scaleX(1.05); filter: blur(3px); }
}

/* ---------------- ブランドラベル ---------------- */
/* 最初からフワッと現れた後、その場でピタッと綺麗に静止します */
.brand-label {
  position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%);
  font-family: 'Shippori Mincho', serif; color: #eaf6f8;
  letter-spacing: .4em; font-size: .78rem; font-weight: 500;
  opacity: 0; animation: fadeUp .9s ease-out forwards; animation-delay: .15s;
}

/* ---------------- 雫が落ちるシーン ---------------- */
.droplet-start { position: absolute; left: var(--impact-left); top: 24%; width: 0; height: 0; }

/* 読み込み完了（.is-loaded）と同時に落下開始 */
.droplet-fall {
  position: absolute; left: -8px; top: -11px; width: 16px; height: auto; display: block;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.55));
  opacity: 0;
}
.is-loaded .droplet-fall {
  animation: dropletFall .95s cubic-bezier(.5,0,.85,.4) forwards;
}
.droplet-fall path { fill: var(--droplet); }

@keyframes dropletFall {
  0%  { transform: translateY(0) scale(1,1); opacity: 1; }
  78% { transform: translateY(46vh) scale(.85,1.18); opacity: 1; }
  100%{ transform: translateY(48vh) scale(1.5,.25); opacity: 0; }
}

/* ---------------- 着水：斜めから見た水面の波紋 ---------------- */
.fx-anchor { position: absolute; left: var(--impact-left); top: var(--impact-top); width: 0; height: 0; }

.flash {
  position: absolute; left: -9px; top: -3px; width: 18px; height: 6px;
  border-radius: 50%; background: #fff; opacity: 0;
}
.is-loaded .flash { animation: flashPop .4s ease-out forwards; animation-delay: .95s; }

@keyframes flashPop {
  0% { transform: scale(.3,.3); opacity: .85; }
  100% { transform: scale(7,2.4); opacity: 0; }
}

.ripple {
  position: absolute; left: -9px; top: -3px; width: 18px; height: 6px;
  border-radius: 50%; border: 2px solid var(--ripple); opacity: 0;
}
.is-loaded .r1 { animation: rippleOut 1.2s ease-out forwards; animation-delay: .95s; }
.is-loaded .r2 { animation: rippleOut 1.2s ease-out forwards; animation-delay: 1.08s; }
.is-loaded .r3 { animation: rippleOut 1.2s ease-out forwards; animation-delay: 1.21s; }

@keyframes rippleOut {
  0%  { transform: scale(.4,.35); opacity: .8; border-width: 2.4px; }
  55% { opacity: .3; }
  100%{ transform: scale(12,4.4); opacity: 0; border-width: .3px; }
}

.bead {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--droplet); opacity: 0;
}
.is-loaded .bead { animation: beadBurst .5s ease-out forwards; animation-delay: .95s; }

@keyframes beadBurst {
  0%  { transform: translate(0,0) scale(1); opacity: .9; }
  100%{ transform: translate(var(--tx), var(--ty)) scale(.2); opacity: 0; }
}
.b1 { --tx: -26px; --ty: -9px; }
.b2 { --tx: -12px; --ty: -15px; }
.b3 { --tx: 0px;   --ty: -17px; }
.b4 { --tx: 12px;  --ty: -15px; }
.b5 { --tx: 26px;  --ty: -9px; }

.halo {
  position: absolute; left: -25px; top: -9px; width: 50px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.95) 0%, rgba(207,243,248,.45) 35%, rgba(207,243,248,0) 72%);
  filter: blur(2px);
  opacity: 0; transform: scale(0);
}
.is-loaded .halo { animation: haloGrow 1.25s ease-in-out forwards; animation-delay: 1.4s; }

@keyframes haloGrow {
  0%  { transform: scale(0); opacity: 0; }
  22% { opacity: .85; }
  100%{ transform: scale(13); opacity: 0; }
}

/* ---------------- スペックタグ ---------------- */
/* 最初から表示（ブランドロゴと同じタイミングで下からスッと現れます） */
.spec-tag {
  position: absolute; bottom: 9%; left: calc(50% - 7px);
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
  letter-spacing: .1em; color: var(--ripple); font-size: .92rem;
  white-space: nowrap;
  
  opacity: 0;
  animation: fadeUp .8s ease-out forwards;
  animation-delay: .15s;
}

.spec-tag .num {
  font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 600;
  font-size: 1.55rem; color: #fff; margin: 0 0.18em 0 0.2em;
}
.spec-tag small {
  font-family: 'Noto Sans JP', sans-serif; font-size: .62rem; letter-spacing: .04em; opacity: .8;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%,10px); } to { opacity: 1; transform: translate(-50%,0); } }

/* 動きを抑えたい環境への配慮 */
@media (prefers-reduced-motion: reduce) {
  #loader, .droplet-fall, .ripple, .bead, .flash, .brand-label, .spec-tag, .ridge-reflection, #page {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
    transition: none !important;
  }
}