/*!
 * fv-motion — first-view sky for 辰栄堂
 * Everything is scoped to `.legacy-hero-sky.fvm-on`, which fv-motion.js adds
 * only after WebGL starts. Without that class this file changes nothing.
 */

.fvm {
    --fvm-line: rgba(255, 246, 232, .5);
    --fvm-line-faint: rgba(255, 246, 232, .22);
    --fvm-glyph: rgba(255, 246, 232, .62);
    --fvm-gold: #e2d2b2;
    /* 五行 */
    --fvm-e0: #afcdb9;  /* 木 */
    --fvm-e1: #deafa1;  /* 火 */
    --fvm-e2: #d8c7a2;  /* 土 */
    --fvm-e3: #ece6dc;  /* 金 */
    --fvm-e4: #afc0dd;  /* 水 */
    /* 四柱 */
    --fvm-year: #d6c498;
    --fvm-month: #d9b0a4;
    --fvm-day: #f4f1ec;
    --fvm-hour: #b1c4de;
    --fvm-ease: cubic-bezier(.65, 0, .35, 1);
    --fvm-ease-out: cubic-bezier(.16, 1, .3, 1);
}
.legacy-hero-sky.fvm-on { background: #070d1f; }

/* Previous sky layers stay in the markup; they are only hidden while active. */
.legacy-hero-sky.fvm-on > :not(.fvm):not(.sky-veil) { display: none !important; }

.fvm {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.fvm .fvm-e0 { --e: var(--fvm-e0); } .fvm .fvm-e1 { --e: var(--fvm-e1); } .fvm .fvm-e2 { --e: var(--fvm-e2); }
.fvm .fvm-e3 { --e: var(--fvm-e3); } .fvm .fvm-e4 { --e: var(--fvm-e4); }
.fvm .fvm-col--year { --c: var(--fvm-year); } .fvm .fvm-col--month { --c: var(--fvm-month); }
.fvm .fvm-col--day { --c: var(--fvm-day); } .fvm .fvm-col--hour { --c: var(--fvm-hour); }

/* ---------- Sky ---------- */
.fvm-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 1.6s var(--fvm-ease-out);
}
.fvm.is-ready .fvm-sky { opacity: 1; }

.fvm-grain {
    position: absolute;
    inset: -50%;
    opacity: .16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* ---------- 天盤 ---------- */
.fvm-ring {
    position: absolute;
    left: var(--fvm-x, 72%);
    top: var(--fvm-y, 50%);
    width: var(--fvm-size, 70vmin);
    height: var(--fvm-size, 70vmin);
    overflow: visible;
    transform:
        translate(-50%, -50%)
        translate(calc(var(--fvm-px, 0) * -16px), calc(var(--fvm-py, 0) * -12px + var(--fvm-scroll, 0) * -60px));
    opacity: calc(1 - var(--fvm-scroll, 0) * .9);
    fill: none;
    stroke: var(--fvm-line);
    stroke-width: 1;
    stroke-linecap: round;
}
.fvm-ring * { vector-effect: non-scaling-stroke; }
.fvm-ring .fvm-faint, .fvm-ring .fvm-ticks { stroke: var(--fvm-line-faint); }

/* Lines draw themselves from 子 (top), clockwise. */
.fvm-ring .fvm-draw {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.4s var(--fvm-ease) calc(.2s + var(--i, 0) * .18s);
}
.fvm.is-ready .fvm-ring .fvm-draw { stroke-dashoffset: 0; }
.fvm-ring .fvm-dash { stroke-dasharray: .003 .007; stroke-dashoffset: 0; opacity: 0; transition: opacity 2s ease 1s; }
.fvm.is-ready .fvm-ring .fvm-dash { opacity: 1; }
.fvm-ring .fvm-ticks { opacity: 0; transition: opacity 1.6s ease .8s; }
.fvm.is-ready .fvm-ring .fvm-ticks { opacity: 1; }

/* Travelling light on the rim */
.fvm-ring .fvm-sweep {
    stroke: var(--fvm-gold);
    stroke-width: 2.5;
    stroke-dasharray: .09 .91;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(226, 210, 178, .6));
    transition: opacity 1.2s ease;
}
.fvm.is-locked .fvm-ring .fvm-sweep { opacity: .45; }

/* Glyphs */
.fvm-ring .fvm-glyph {
    fill: var(--fvm-glyph);
    stroke: none;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    font-size: 34px;
    opacity: 0;
    filter: blur(6px);
    transition: opacity 1.2s ease, filter 1.2s var(--fvm-ease-out), fill .8s ease;
    transition-delay: calc(.5s + var(--i, 0) * .05s);
}
.fvm-ring .fvm-glyph--stem { font-size: 29px; }
.fvm-ring .fvm-glyph.is-tatsu { fill: var(--fvm-gold); }
.fvm.is-ready .fvm-ring .fvm-glyph { opacity: 1; filter: blur(0); }
.fvm.is-locked .fvm-ring .fvm-glyph.is-on {
    fill: var(--e);
    font-weight: 600;
    filter: drop-shadow(0 0 3px var(--e));
    transition-delay: 0s;
}

/* Highlighted 支・干 cells */
.fvm-ring .fvm-sector {
    fill: var(--c);
    fill-opacity: .06;
    stroke: var(--c);
    stroke-opacity: .32;
    opacity: 0;
    transition: opacity .9s ease;
}
.fvm.is-locked .fvm-ring .fvm-sector { opacity: 1; }
.fvm-ring .fvm-stemdot { fill: var(--c); stroke: none; opacity: 0; transition: opacity .8s ease .3s; }
.fvm.is-locked .fvm-ring .fvm-stemdot { opacity: 1; }

/* Pillar markers: 年 → 月 → 日 → 時 */
.fvm-ring .fvm-mark {
    opacity: 0;
    transition: opacity .7s ease;
    transition-delay: calc(.25s + var(--o, 0) * .28s);
}
.fvm.is-locked .fvm-ring .fvm-mark { opacity: 1; }
.fvm-ring .fvm-mark line { stroke: var(--c); stroke-opacity: .8; }
.fvm-ring .fvm-mark__dot { fill: var(--c); stroke: none; filter: drop-shadow(0 0 3px var(--c)); }
.fvm-ring .fvm-mark__text {
    fill: #fff;
    stroke: none;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 26px;
    letter-spacing: .06em;
    paint-order: stroke;
    stroke: rgba(8, 12, 30, .55);
    stroke-width: 6px;
    stroke-linejoin: round;
    vector-effect: none;
    filter: none;
}

/* 五行 */
.fvm-ring .fvm-star { stroke: var(--fvm-line-faint); opacity: 0; transition: opacity 2s ease 1.4s; }
.fvm.is-ready .fvm-ring .fvm-star { opacity: 1; }
.fvm-ring .fvm-elem { opacity: 0; transition: opacity 1.4s ease 1.6s; }
.fvm.is-ready .fvm-ring .fvm-elem { opacity: 1; }
.fvm-ring .fvm-elem circle { fill: rgba(9, 13, 32, .45); stroke: var(--e); stroke-opacity: .5; }
.fvm-ring .fvm-elem text { fill: var(--e); stroke: none; font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif; font-size: 26px; }
.fvm.is-locked .fvm-ring .fvm-elem.is-self circle { fill: var(--e); fill-opacity: .14; stroke-opacity: .8; filter: none; }

/* Ripples when the wheels lock / a pillar changes */
.fvm-ring .fvm-ripple {
    stroke: var(--fvm-gold);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: fvm-ripple 2s var(--fvm-ease-out) forwards;
}
.fvm-ring .fvm-ripple.is-soft { stroke-width: 1; }
@keyframes fvm-ripple {
    from { transform: scale(1); opacity: .9; }
    to   { transform: scale(1.22); opacity: 0; }
}
.fvm.is-tick .fvm-ring .fvm-glyph.is-on { animation: fvm-tick 1.4s ease; }
@keyframes fvm-tick { 30% { opacity: .2; } 100% { opacity: 1; } }

/* Per-page adjustments -------------------------------------------------- */
.fvm--umeda .fvm-ring { --fvm-glyph: rgba(255, 246, 232, .5); }

@media (max-width: 760px) {
    .fvm-ring .fvm-glyph { font-size: 40px; }
    .fvm-ring .fvm-glyph--stem { font-size: 34px; }
    .fvm-ring .fvm-mark__text { font-size: 30px; }
    .fvm-grain { opacity: .12; }
}

/* Reduced motion: final state, no transitions. */
.fvm.is-still *, .fvm.is-still { transition: none !important; animation: none !important; }

@media print { .fvm { display: none; } }

/* Labels over page text collapse to the dot */
.fvm-ring .fvm-mark.is-muted line,
.fvm-ring .fvm-mark.is-muted .fvm-mark__text { visibility: hidden; }

/* ---------- 梅田: ink watermark of the 天盤 inside the centre panel ---------- */
.fvm-ink-host { position: relative; }
.fvm.fvm-ink { z-index: 1; }
.fvm.fvm-ink--ink {
    --fvm-line: rgba(47, 53, 59, .26);
    --fvm-line-faint: rgba(47, 53, 59, .13);
    --fvm-glyph: rgba(47, 53, 59, .3);
    --fvm-gold: #97825c;
    --fvm-e0: #557a64;
    --fvm-e1: #9c6456;
    --fvm-e2: #8f7a55;
    --fvm-e3: #7a6f63;
    --fvm-e4: #5a6f94;
    --fvm-year: #93805a;
    --fvm-month: #9a6658;
    --fvm-day: #2f353b;
    --fvm-hour: #5d7397;
}
.fvm-ink--ink .fvm-ring { opacity: 1; }
.fvm-ink--ink .fvm-ring .fvm-sweep { filter: none; stroke-width: 2; }
.fvm.fvm-ink--ink.is-locked .fvm-ring .fvm-sweep { opacity: .55; }
.fvm.fvm-ink--ink.is-locked .fvm-ring .fvm-glyph.is-on { filter: none; font-weight: 700; }
.fvm-ink--ink .fvm-ring .fvm-sector { fill-opacity: .05; stroke-opacity: .25; }
.fvm-ink--ink .fvm-ring .fvm-mark__dot { filter: none; }
.fvm-ink--ink .fvm-ring .fvm-mark line,
.fvm-ink--ink .fvm-ring .fvm-mark__text { display: none; }
.fvm-ink--ink .fvm-ring .fvm-elem circle { fill: none; stroke-opacity: .35; }
.fvm-ink--ink .fvm-ring .fvm-elem text { opacity: .55; }
.fvm.fvm-ink--ink.is-locked .fvm-ring .fvm-elem.is-self circle { filter: none; fill-opacity: .16; }
.fvm-ink--ink .fvm-ring .fvm-ripple { stroke-width: 1; }

/* ---------- 心斎橋・河原町: glass copy of the 天盤 over the photo ---------- */
.fvm.fvm-ink--glass {
    --fvm-line: rgba(255, 255, 255, .62);
    --fvm-line-faint: rgba(255, 255, 255, .34);
    --fvm-glyph: rgba(255, 255, 255, .72);
}
.fvm-ink--glass .fvm-ring { filter: drop-shadow(0 0 1.5px rgba(20, 22, 45, .55)); }
.fvm-ink--glass .fvm-ring .fvm-mark line,
.fvm-ink--glass .fvm-ring .fvm-mark__text { display: none; }
.fvm-ink--glass .fvm-ring .fvm-elem circle { fill: rgba(20, 24, 52, .18); }
.fvm-ink--glass .fvm-ring .fvm-sector { fill-opacity: .08; }
.fvm-ring .fvm-lens { display: none; }
.fvm-ink--glass .fvm-ring .fvm-lens {
    display: block;
    stroke: none;
    fill: rgba(10, 14, 36, .34);
    opacity: 0;
    transition: opacity 1.6s ease .3s;
}
.fvm.fvm-ink--glass.is-ready .fvm-ring .fvm-lens { opacity: 1; }
.fvm.fvm-ink--glass.is-ready .fvm-ring .fvm-glyph:not(.is-on) { filter: drop-shadow(0 0 3px rgba(10, 14, 36, .6)); }