/* 入口のアイキャッチ(土台)— 2026-10-17
   演出の中身は js/ec/fx-*.js。ここは画面の枠・医院名(ブランド)・閉じ方だけ */
.ec { position: fixed; inset: 0; z-index: 1000; overflow: hidden; cursor: pointer; background: var(--ec-sky2, #dff2ff); }
.ec canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ec .ec-layer { position: absolute; inset: 0; pointer-events: none; }
body.ec-lock { overflow: hidden; }

/* 閉じ方 */
.ec.x-iris { animation: ecxIris .8s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes ecxIris { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
.ec.x-fade { animation: ecxFade .7s ease forwards; }
@keyframes ecxFade { to { opacity: 0; } }
.ec.x-up { animation: ecxUp .8s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes ecxUp { to { transform: translateY(-100%); } }
.ec.x-zoom { animation: ecxZoom .7s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes ecxZoom { to { opacity: 0; transform: scale(1.35); filter: blur(6px); } }

/* 医院名(歯のマーク+名前) */
.ecb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; text-align: center; color: var(--ec-ink); pointer-events: none; }
.ecb-tooth { display: block; width: clamp(70px, 14vw, 104px); height: auto; margin: 0 auto 8px; overflow: visible; filter: drop-shadow(0 0 16px var(--ec-glow)); }
.ecb-tooth path { fill: #fff; stroke: var(--ec-accent); stroke-width: 3.2; }
.ecb-name { font-size: clamp(30px, 7.4vw, 66px); font-weight: 800; letter-spacing: .12em; line-height: 1.3; white-space: nowrap; position: relative; }
.ecb-name span { display: inline-block; text-shadow: 0 0 20px var(--ec-glow), 0 0 4px var(--ec-glow); }
.ecb-tooth, .ecb-name span { opacity: 0; }
.ecb.no-tooth .ecb-tooth { display: none; }

/* 出方(--at=開始ms, 文字は --i で順番) */
.ecb.s-pop .ecb-tooth { animation: ecbPop .8s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: var(--at); }
.ecb.s-pop .ecb-name span { animation: ecbPop .7s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(var(--at) + 250ms + var(--i) * 70ms); }
@keyframes ecbPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

.ecb.s-rise .ecb-tooth { animation: ecbRise 1s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: var(--at); }
.ecb.s-rise .ecb-name span { animation: ecbRise .9s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: calc(var(--at) + 200ms + var(--i) * 80ms); }
@keyframes ecbRise { from { opacity: 0; transform: translateY(40px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.ecb.s-fade .ecb-tooth, .ecb.s-fade .ecb-name span { animation: ecbFade 1.2s ease forwards; animation-delay: var(--at); }
@keyframes ecbFade { from { opacity: 0; filter: blur(10px); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }

.ecb.s-drop .ecb-tooth { animation: ecbDrop .8s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: var(--at); }
.ecb.s-drop .ecb-name span { animation: ecbDrop .7s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: calc(var(--at) + 300ms + var(--i) * 90ms); }
@keyframes ecbDrop { from { opacity: 0; transform: translateY(-70px) rotate(-8deg); } to { opacity: 1; transform: none; } }

.ecb.s-glow .ecb-tooth, .ecb.s-glow .ecb-name span { animation: ecbGlow 1.1s ease-out forwards; animation-delay: calc(var(--at) + var(--i, 0) * 40ms); }
@keyframes ecbGlow { 0% { opacity: 0; filter: brightness(3) blur(8px); } 60% { opacity: 1; filter: brightness(1.8) blur(1px); } 100% { opacity: 1; filter: none; } }

/* 位置も大きさも変えず、透明度だけで出す(描いた絵と重ねて入れ替えるとき用) */
.ecb.s-plain .ecb-tooth, .ecb.s-plain .ecb-name span { animation: ecbPlain .7s ease forwards; animation-delay: var(--at); }
@keyframes ecbPlain { from { opacity: 0; } to { opacity: 1; } }

/* 出たあとの光の筋 */
.ecb .ecb-name::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -30%; width: 26%; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent); transform: skewX(-20deg);
  animation: ecbShine .8s ease-out forwards; animation-delay: var(--shine, 99s); }
@keyframes ecbShine { 0% { left: -30%; opacity: 1; } 100% { left: 115%; opacity: 0; } }

/* スキップ・確認用の表示 */
.ec-skip { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 9; background: rgba(255,255,255,.85); color: #23343f;
  border: 0; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ec-debug { position: absolute; left: 10px; top: 10px; z-index: 9; background: rgba(0,0,0,.55); color: #fff; font: 12px/1.5 monospace; padding: 4px 8px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { .ec { display: none !important; } }