/* Opening: flowing chocolate film → kamon reveal → SHUKA → curtain lifts */
html.is-opening,html.is-opening body{overflow:hidden}
.op{position:fixed;inset:0;z-index:1000;background:#f5f1e9;color:#d9bd84;overflow:hidden;
  clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1)}
.op.is-out{clip-path:inset(0 0 100% 0)}
.op-drip{position:absolute;inset:0;background:#f5f1e9}
.op-drip video{width:100%;height:100%;object-fit:cover;display:block}
.op-film{position:absolute;inset:0;opacity:0;transform:scale(1.04);
  transition:opacity .9s ease,transform 8s cubic-bezier(.22,.61,.36,1)}
.op.is-in .op-film{opacity:1;transform:scale(1)}
.op-film video,.op-film img{width:100%;height:100%;object-fit:cover;display:block}
.op-film img{animation:op-drift 14s ease-in-out infinite alternate}
@keyframes op-drift{from{transform:scale(1.08) translate(-1.5%,1%)}to{transform:scale(1.14) translate(1.5%,-1%)}}
.op-veil{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(20,10,5,.15),rgba(20,10,5,.72));opacity:0;transition:opacity 2.4s ease}
.op.is-mark .op-veil{opacity:1}
.op-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,3vh,34px)}
.op-mark{position:relative;width:clamp(120px,15vw,210px);aspect-ratio:1;filter:drop-shadow(0 0 18px rgba(230,190,120,0));transition:filter 2.2s ease}
.op.is-glow .op-mark{filter:drop-shadow(0 0 22px rgba(230,190,120,.35))}
.op-ring img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:brightness(.85) saturate(.9);transition:filter 2.6s ease}
.op.is-glow .op-ring img{filter:brightness(1.18) saturate(1.1)}
.op-ring{position:absolute;inset:0;-webkit-mask:conic-gradient(from -90deg,#000 var(--a,0deg),transparent 0);mask:conic-gradient(from -90deg,#000 var(--a,0deg),transparent 0)}
.op-word{font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(28px,3.4vw,46px);letter-spacing:.62em;margin-right:-.62em;line-height:1;
  display:flex;transition:letter-spacing 2.6s cubic-bezier(.22,.61,.36,1),margin 2.6s cubic-bezier(.22,.61,.36,1)}
.op.is-word .op-word{letter-spacing:.32em;margin-right:-.32em}
.op-word span{display:inline-block;opacity:0;transform:translateY(14px);filter:blur(6px);
  transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.22,.61,.36,1),filter 1.4s ease}
.op.is-word .op-word span{opacity:1;transform:none;filter:none}
.op-tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(14px,1.3vw,18px);letter-spacing:.14em;color:#cdb68c;opacity:0;transform:translateY(8px);transition:opacity 1.6s ease .9s,transform 1.6s ease .9s}
.op.is-word .op-tag{opacity:1;transform:none}
.op-line{width:0;height:1px;background:linear-gradient(90deg,transparent,#d9bd84,transparent);transition:width 2s cubic-bezier(.22,.61,.36,1) .5s}
.op.is-word .op-line{width:min(220px,40vw)}
.op.is-leave .op-center{opacity:0;transform:translateY(-18px) scale(.98);transition:opacity 1s ease,transform 1.4s ease}
.op-skip{position:absolute;right:clamp(16px,2.5vw,32px);bottom:clamp(16px,3vh,30px);background:none;border:0;border-bottom:1px solid rgba(217,189,132,.5);color:#d9bd84;
  font:500 10px Montserrat,sans-serif;letter-spacing:.24em;padding:8px 2px;cursor:pointer;opacity:0;transition:opacity 1s ease 1.2s}
.op-skip{opacity:.8;color:#7a5a3a;border-bottom-color:rgba(122,90,58,.5);transition:color 1s ease}
.op.is-in .op-skip{color:#d9bd84;border-bottom-color:rgba(217,189,132,.5)}