/* ==========================================================================
   YehScene : painted Japanese scenery "video" background (canvas, no assets)
   Tokens (all optional, every one has a fallback):
     --yh-ink  --yh-paper  --yh-accent  --yh-accent-2  --yh-sans
   Host element rule: the page's own content needs  position:relative; z-index:1
   ========================================================================== */
.yh-scene-host{position:relative}

.yh-scene{
  /* overlay colours: rgba fallback first, token-aware version where color-mix exists */
  --yhs-ink-90:rgba(26,13,19,.88); --yhs-ink-70:rgba(26,13,19,.68); --yhs-ink-40:rgba(26,13,19,.38); --yhs-ink-15:rgba(26,13,19,.14);
  --yhs-pap-95:rgba(250,245,235,.95); --yhs-pap-80:rgba(250,245,235,.80); --yhs-pap-45:rgba(250,245,235,.42); --yhs-pap-0:rgba(250,245,235,0); --yhs-pap-30:rgba(250,245,235,.3);
  position:absolute;left:0;top:0;right:0;bottom:0;z-index:0;overflow:hidden;pointer-events:none;
  background:#17142b;
  border-radius:inherit;
  contain:layout paint style;
}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .yh-scene{
    --yhs-ink-90:color-mix(in srgb,var(--yh-ink,#1a0d13) 88%,transparent);
    --yhs-ink-70:color-mix(in srgb,var(--yh-ink,#1a0d13) 68%,transparent);
    --yhs-ink-40:color-mix(in srgb,var(--yh-ink,#1a0d13) 38%,transparent);
    --yhs-ink-15:color-mix(in srgb,var(--yh-ink,#1a0d13) 14%,transparent);
    --yhs-pap-95:color-mix(in srgb,var(--yh-paper,#faf5eb) 95%,transparent);
    --yhs-pap-80:color-mix(in srgb,var(--yh-paper,#faf5eb) 80%,transparent);
    --yhs-pap-45:color-mix(in srgb,var(--yh-paper,#faf5eb) 42%,transparent);
    --yhs-pap-0:color-mix(in srgb,var(--yh-paper,#faf5eb) 0%,transparent);
    --yhs-pap-30:color-mix(in srgb,var(--yh-paper,#faf5eb) 30%,transparent);
  }
}
.yh-scene[data-fade="bottom"]{
  -webkit-mask-image:linear-gradient(#000 calc(100% - 90px),transparent);
          mask-image:linear-gradient(#000 calc(100% - 90px),transparent);
}
.yh-scene__cv{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block}

/* readability overlay */
.yh-scene__shade{position:absolute;left:0;top:0;right:0;bottom:0}
.yh-scene[data-overlay="dark"] .yh-scene__shade{
  background:
    linear-gradient(90deg,var(--yhs-ink-90) 0%,var(--yhs-ink-70) 38%,var(--yhs-ink-15) 74%,transparent 100%),
    linear-gradient(180deg,var(--yhs-ink-40) 0,transparent 26%,transparent 66%,var(--yhs-ink-40) 100%);
}
.yh-scene[data-overlay="light"] .yh-scene__shade{
  background:
    linear-gradient(90deg,var(--yhs-pap-95) 0%,var(--yhs-pap-80) 40%,var(--yhs-pap-45) 76%,var(--yhs-pap-30) 100%),
    linear-gradient(180deg,var(--yhs-pap-45) 0,var(--yhs-pap-0) 30%,var(--yhs-pap-0) 70%,var(--yhs-pap-80) 100%);
}
.yh-scene[data-overlay="none"] .yh-scene__shade{display:none}
@media (max-width:760px){
  .yh-scene[data-overlay="dark"] .yh-scene__shade{
    background:linear-gradient(180deg,var(--yhs-ink-70) 0,var(--yhs-ink-70) 55%,var(--yhs-ink-40) 100%);
  }
  .yh-scene[data-overlay="light"] .yh-scene__shade{
    background:linear-gradient(180deg,var(--yhs-pap-80) 0,var(--yhs-pap-80) 55%,var(--yhs-pap-45) 100%);
  }
}

/* vignette + film grain */
.yh-scene__vig{position:absolute;left:0;top:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 46%,transparent 54%,rgba(10,6,16,.5) 100%)}
.yh-scene[data-overlay="light"] .yh-scene__vig{background:radial-gradient(ellipse at 50% 46%,transparent 62%,rgba(60,40,30,.2) 100%)}
.yh-scene__grain{position:absolute;left:-60px;top:-60px;right:-60px;bottom:-60px;opacity:.1;mix-blend-mode:overlay;background-size:160px 160px;animation:yhs-grain .9s steps(1) infinite}
.yh-scene[data-overlay="light"] .yh-scene__grain{opacity:.07}
.yh-scene.is-paused .yh-scene__grain{animation-play-state:paused}
@keyframes yhs-grain{
  0%{transform:translate(0,0)}20%{transform:translate(-31px,17px)}40%{transform:translate(22px,-28px)}
  60%{transform:translate(-14px,-9px)}80%{transform:translate(35px,24px)}100%{transform:translate(0,0)}
}

/* scene chip : "朝 Morning Mist" + dots.  Placement via data-yh-scene-chip = bottom-right (default) | bottom-left | right | left | off
   left / right = vertically centred on that edge (compact, desktop only; below 521px they behave like bottom-*). */
.yh-scene__chip{
  position:absolute;z-index:2;right:max(14px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));left:auto;top:auto;
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 28px);
  padding:6px 10px 6px 7px;border-radius:999px;
  background:rgba(22,14,24,.62);border:1px solid rgba(240,214,150,.3);color:#f6ecdc;
  font:600 .74rem/1 var(--yh-sans,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);letter-spacing:.07em;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.6);
}
.yh-scene__chip[data-pos="bottom-left"]{right:auto;left:max(14px,env(safe-area-inset-left,0px))}
.yh-scene__k{
  display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--yh-accent-2,#d9ae5b);color:#2a1a10;
  font:700 .82rem/1 "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","MS Mincho",serif;transition:opacity .45s;
}
.yh-scene__n{display:inline-block;min-width:8.6em;white-space:nowrap;transition:opacity .45s}
.yh-scene__chip.is-swap .yh-scene__n,.yh-scene__chip.is-swap .yh-scene__k{opacity:0}
.yh-scene__dots{display:flex;gap:0}
/* each dot button is a 44x44 hit area; the visible dot stays 6px. Negative margins keep the chip itself slim. */
.yh-scene__dots button{
  display:grid;place-items:center;width:44px;height:44px;padding:0;margin:-9px 0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;border-radius:50%;
}
.yh-scene__dots button i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(246,236,220,.45);transition:background .4s,transform .4s}
.yh-scene__dots button.is-on i{background:var(--yh-accent-2,#d9ae5b);transform:scale(1.4)}
.yh-scene__dots button:hover i{background:rgba(246,236,220,.85)}
.yh-scene__dots button:focus-visible{outline:2px solid var(--yh-accent-2,#d9ae5b);outline-offset:-6px}
.yh-scene__pips{display:none;gap:5px;padding-right:4px}
.yh-scene__pips i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(246,236,220,.45);transition:background .4s}
.yh-scene__pips i.is-on{background:var(--yh-accent-2,#d9ae5b)}
@media (min-width:521px){
  .yh-scene__chip[data-pos="left"],.yh-scene__chip[data-pos="right"]{
    top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:6px;padding:8px 7px;border-radius:26px;
  }
  .yh-scene__chip[data-pos="left"]{left:max(10px,env(safe-area-inset-left,0px));right:auto}
  .yh-scene__chip[data-pos="right"]{right:max(10px,env(safe-area-inset-right,0px));left:auto}
  .yh-scene__chip[data-pos="left"] .yh-scene__n,.yh-scene__chip[data-pos="right"] .yh-scene__n{
    position:absolute;width:1px;height:1px;min-width:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .yh-scene__chip[data-pos="left"] .yh-scene__dots,.yh-scene__chip[data-pos="right"] .yh-scene__dots{flex-direction:column}
  .yh-scene__chip[data-pos="left"] .yh-scene__dots button,.yh-scene__chip[data-pos="right"] .yh-scene__dots button{margin:0 -9px}
}
@media (max-width:520px){
  .yh-scene__dots{display:none}
  .yh-scene__pips{display:flex}
  .yh-scene__n{min-width:0}
  .yh-scene__chip[data-pos="left"]{right:auto;left:max(14px,env(safe-area-inset-left,0px))}
  .yh-scene__chip[data-pos="bottom-left"]{right:auto;left:max(14px,env(safe-area-inset-left,0px))}
}

/* canvas layer fades in fast (<=600ms) so the hero never reads washed-out on load */
.yh-scene{animation:yhs-in .5s ease-out both}
@keyframes yhs-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .yh-scene{animation:none}
  .yh-scene__grain{animation:none}
  .yh-scene__k,.yh-scene__n,.yh-scene__dots button i{transition:none}
}