/* ============================================================
   景品キング 新年会特集 プリローダー「初夢」
   一富士二鷹三茄子 → 初日の出 → あけましておめでとうございます！ → エ霞が左右に晴れる
   依存: GSAP 3 (gsap.min.js)。マークアップは preloader.js が生成。
   ============================================================ */
:root{
  --nyp-cream:#FFF6D8;
  --nyp-cream-2:#FFEFBF;
  --nyp-cloud:#FEE8AA;
  --nyp-cloud-2:#FFF3CF;
  --nyp-white:#FFFDF6;
  --nyp-gold:#E5B800;
  --nyp-gold-2:#C99A00;
  --nyp-red:#D22600;
  --nyp-red-2:#F0542E;
  --nyp-ink:#7E432C;
  --nyp-ink-2:#9E7260;
  --nyp-font-display:"Zen Maru Gothic","Noto Sans JP","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  --nyp-font-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
}
html.nyp-lock,html.nyp-lock body{overflow:hidden!important;overscroll-behavior:none}

.nyp{position:fixed;inset:0;z-index:2147483000;overflow:hidden;font-family:var(--nyp-font-body);color:var(--nyp-ink);
  -webkit-font-smoothing:antialiased;contain:strict;pointer-events:auto;user-select:none}
.nyp *{box-sizing:border-box;margin:0;padding:0}
.nyp img{display:block;max-width:none}

/* ---- 背景パネル（左右に割れて晴れる） ---- */
.nyp__panel{position:absolute;top:0;bottom:0;width:52%;background:var(--nyp-cream);will-change:transform}
.nyp__panel--l{left:0}
.nyp__panel--r{right:0}
.nyp__pattern{ /* 市松 */
  position:absolute;inset:0;opacity:0;
  background-image:
    linear-gradient(45deg,rgba(229,184,0,.10) 25%,transparent 25%,transparent 75%,rgba(229,184,0,.10) 75%),
    linear-gradient(45deg,rgba(229,184,0,.10) 25%,transparent 25%,transparent 75%,rgba(229,184,0,.10) 75%);
  background-size:56px 56px;background-position:0 0,28px 28px}
.nyp__panel::after{ /* 外側へ向けて金色に沈むビネット（つなぎ目は透明） */
  content:"";position:absolute;inset:0;pointer-events:none}
.nyp__panel--l::after{background:radial-gradient(130% 100% at 100% 48%,rgba(229,184,0,0) 0%,rgba(229,184,0,0) 42%,rgba(229,184,0,.18) 100%)}
.nyp__panel--r::after{background:radial-gradient(130% 100% at 0% 48%,rgba(229,184,0,0) 0%,rgba(229,184,0,0) 42%,rgba(229,184,0,.18) 100%)}
/* パネルの縁（雲形）。パネル本体の下に敷き、開いたときだけ見える */
.nyp__edge{position:absolute;top:0;height:100%;width:0;pointer-events:none;will-change:transform}
.nyp__edge svg{position:absolute;top:0;left:0;height:100%;width:auto;overflow:visible;display:block}
.nyp__edge--l{left:52%}
.nyp__edge--r{left:48%}
.nyp__edge--r svg{transform:scaleX(-1);transform-origin:0 0}

/* ---- シーン ---- */
.nyp__scene{position:absolute;inset:0;will-change:opacity}
.nyp__center{position:absolute;left:50%;top:50%;width:0;height:0}

.nyp__sun{position:absolute;left:50%;top:50%;width:min(34vmin,340px);height:min(34vmin,340px);margin:calc(min(34vmin,340px) / -2) 0 0 calc(min(34vmin,340px) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#FF7A4F 0%,#F0542E 38%,#D22600 100%);
  will-change:transform,opacity}
.nyp__halo{position:absolute;left:50%;top:50%;width:min(34vmin,340px);height:min(34vmin,340px);margin:calc(min(34vmin,340px) / -2) 0 0 calc(min(34vmin,340px) / -2);
  border-radius:50%;background:radial-gradient(circle,rgba(255,170,90,.55) 0%,rgba(255,200,120,.25) 40%,rgba(255,220,150,0) 70%);
  transform:scale(1.6);opacity:0;will-change:transform,opacity;pointer-events:none}
.nyp__rays{position:absolute;left:50%;top:50%;width:min(120vmin,1100px);height:min(120vmin,1100px);margin:calc(min(120vmin,1100px) / -2) 0 0 calc(min(120vmin,1100px) / -2);
  border-radius:50%;opacity:0;pointer-events:none;will-change:transform,opacity;
  background:repeating-conic-gradient(from 0deg,rgba(229,184,0,.14) 0deg 6deg,rgba(229,184,0,0) 6deg 15deg);
  -webkit-mask:radial-gradient(circle,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,0) 62%);mask:radial-gradient(circle,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,0) 62%)}

/* 初夢の三要素（ラッパーを動かし、添え書きはラッパー基準） */
.nyp__item{position:absolute;will-change:transform,opacity}
.nyp__item--fuji{left:50%;bottom:-2vmin;width:min(60vmin,620px);margin-left:calc(min(60vmin,620px) / -2)}
.nyp__item--taka{left:50%;top:50%;width:min(24vmin,250px);margin-left:calc(min(24vmin,250px) / -2);margin-top:calc(min(24vmin,250px) / -2)}
.nyp__item--nasu{left:50%;top:50%;width:min(12vmin,130px);margin-left:calc(min(12vmin,130px) / -2);margin-top:calc(min(12vmin,130px) / -2)}
.nyp__fuji{width:100%;filter:drop-shadow(0px 18px 24px rgba(126,67,44,.16))}
.nyp__taka{width:100%;will-change:transform;filter:drop-shadow(0 10px 14px rgba(126,67,44,.16))}
.nyp__nasu{width:100%;filter:drop-shadow(0 8px 12px rgba(126,67,44,.18))}
.nyp__caption{position:absolute;writing-mode:vertical-rl;text-orientation:upright;font-family:var(--nyp-font-display);font-weight:700;
  font-size:clamp(13px,1.6vmin,18px);letter-spacing:.28em;color:var(--nyp-ink);opacity:0;will-change:transform,opacity;white-space:nowrap;line-height:1}
.nyp__caption::before{content:"";position:absolute;left:50%;top:-1.5em;width:1px;height:1.1em;background:var(--nyp-gold);transform:translateX(-50%)}
/* 「一富士」は雲より前に出すため富士ラッパーの外（富士の静止位置を基準に配置） */
.nyp__caption--fuji{left:calc(50% + min(60vmin,620px) / 2 + 1.2em);bottom:calc(-2vmin + min(60vmin,620px) * 0.6124 * 0.42)}
.nyp__item--taka .nyp__caption{left:-2.2em;top:18%}
.nyp__item--nasu .nyp__caption{right:-2.4em;top:4%}

/* 羊（未年）: ポンっと現れてふわふわ浮く */
.nyp__sheep{position:absolute;left:50%;top:50%;width:min(19vmin,190px);height:min(19vmin,190px);margin:calc(min(19vmin,190px) / -2) 0 0 calc(min(19vmin,190px) / -2);
  opacity:0;will-change:transform,opacity;pointer-events:none}
.nyp__sheep-f{position:absolute;inset:0;will-change:transform}
.nyp__sheep img{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 8px 10px rgba(126,67,44,.16))}
.nyp__sheep img.flip{transform:translateX(-50%) scaleX(-1)}

/* 雲（エ霞） */
.nyp__cloud{position:absolute;left:50%;top:50%;will-change:transform,opacity;pointer-events:none}
.nyp__cloud svg{display:block;width:100%;height:auto;overflow:visible}

/* ---- ご挨拶 ---- */
.nyp__greet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(92vw,1100px);pointer-events:none}
.nyp__year{display:inline-flex;align-items:center;gap:.9em;font-family:var(--nyp-font-display);font-weight:700;font-size:clamp(12px,1.5vmin,17px);
  letter-spacing:.42em;color:var(--nyp-gold-2);opacity:0;will-change:transform,opacity;text-indent:.42em}
.nyp__year::before,.nyp__year::after{content:"";width:2.6em;height:1px;background:var(--nyp-gold);opacity:.8}
.nyp__msg{margin-top:.25em;font-family:var(--nyp-font-display);font-weight:900;color:var(--nyp-red);
  font-size:clamp(24px,5.1vw,78px);line-height:1.18;letter-spacing:.02em;
  text-shadow:0 .035em 0 #FFFDF6,0 .07em 0 rgba(229,184,0,.55);
  will-change:transform}
.nyp__w{display:inline-block;white-space:nowrap}
.nyp__c{display:inline-block;opacity:0;will-change:transform,opacity;transform-origin:50% 100%}
.nyp__sub{margin-top:.9em;font-family:var(--nyp-font-display);font-weight:500;font-size:clamp(12px,1.75vmin,19px);letter-spacing:.2em;color:var(--nyp-ink);opacity:0;will-change:transform,opacity}

/* ---- UI ---- */
.nyp__ui{position:absolute;left:0;right:0;bottom:max(22px,3.2vmin);display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 max(22px,3.2vmin);font-size:12px;letter-spacing:.14em;color:var(--nyp-ink-2);pointer-events:none}
.nyp__progress{display:flex;align-items:baseline;gap:.6em;font-family:var(--nyp-font-display);opacity:0;will-change:opacity}
.nyp__pct{font-size:clamp(20px,3vmin,30px);font-weight:700;color:var(--nyp-ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;min-width:2.2ch;text-align:right}
.nyp__pct::after{content:"%";font-size:.5em;margin-left:.1em;color:var(--nyp-ink-2);font-weight:500}
.nyp__label{font-weight:500}
.nyp__skip{pointer-events:auto;appearance:none;border:1px solid rgba(126,67,44,.28);background:rgba(255,253,246,.7);color:var(--nyp-ink);
  font:inherit;font-family:var(--nyp-font-display);font-weight:700;letter-spacing:.18em;padding:.7em 1.1em .7em 1.3em;border-radius:999px;cursor:pointer;
  opacity:0;transform:translateY(6px);transition:background .25s,border-color .25s;backdrop-filter:blur(4px)}
.nyp__skip:hover,.nyp__skip:focus-visible{background:#fff;border-color:var(--nyp-gold);outline:none}
.nyp__skip span{display:inline-block;transition:transform .25s}
.nyp__skip:hover span{transform:translateX(3px)}


/* 完了後 */
.nyp.is-done{display:none}

/* 本ページ側：クラウドが開く間の「着地」用（任意） */
.nyp-page{will-change:transform;transform-origin:50% 0}

/* 起動前のちらつき防止（index.html の inline script が html.nyp-boot を付与し、マウント時に外す） */
html.nyp-boot{background:var(--nyp-cream)}
html.nyp-boot .nyp-page{visibility:hidden}

@media (max-width:640px){
  .nyp__panel{width:54%}
  .nyp__msg{font-size:clamp(24px,8.4vw,44px);line-height:1.22}
  .nyp__caption--fuji{left:calc(50% + min(70vmin,620px) / 2 + 1em);bottom:calc(14vh + min(70vmin,620px) * 0.6124 * 0.55)}
  .nyp__item--taka .nyp__caption{left:40%;top:100%;margin-top:1.6em}
  .nyp__item--fuji{width:min(70vmin,620px);margin-left:calc(min(70vmin,620px) / -2);bottom:14vh}
  .nyp__ui{font-size:11px;bottom:max(18px,env(safe-area-inset-bottom,0px) + 14px)}
}
@media (prefers-reduced-motion:reduce){
  .nyp__c{opacity:1}
}