/* Kohana. design prototype (2026-10-31, not published) - first view "扉 (tobira)".
   Hypothesis-based: no concept document for 扉 was available. The hero photo first appears behind the closed doors of a
   wedding hall; light spills from the seam and the doors open inward, so the visitor steps into the scene as its main character.
   - Only the inside of the photo box (.ph) is touched. The copy, the LINE button, the IBJ AWARD band, the mizuhiki and the
     petals keep their exact sizes, positions and timing (the doors are below them in the stacking order).
   - '※イメージ写真' (.cap, z-index 3) stays above the doors and is readable the whole time.
   - Fully open by 2.9s, before the mizuhiki knot is tied (3.05s-4.4s).
   Roll back: remove the <link> to this file and the <span class="doors"> inside .ph. */
.fv .ph{isolation:isolate}
.doors{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;perspective:1600px;perspective-origin:50% 45%}
.doors i{position:absolute;display:block}
/* light from inside the hall, strongest at the seam, fading as the doors open */
.doors .glow{inset:0;background:radial-gradient(ellipse 34% 70% at 50% 46%,rgba(255,250,236,.95),rgba(255,250,236,.55) 45%,rgba(255,250,236,0) 75%);
 opacity:0;animation:tob-glow 3.2s ease .2s both}
.doors .dl,.doors .dr{top:0;bottom:0;width:50.4%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 background:linear-gradient(90deg,#f3e9da 0,#fbf6ec 38%,#f7efe2 70%,#efe3d1 100%);
 box-shadow:inset 0 0 0 1px rgba(176,138,62,.28),inset 0 -40px 60px -30px rgba(166,135,80,.14)}
.doors .dl{left:0;transform-origin:0 50%;animation:tob-open-l 2.5s cubic-bezier(.62,.02,.28,1) .45s both}
.doors .dr{right:0;transform-origin:100% 50%;animation:tob-open-r 2.5s cubic-bezier(.62,.02,.28,1) .45s both;
 background:linear-gradient(270deg,#f3e9da 0,#fbf6ec 38%,#f7efe2 70%,#efe3d1 100%)}
/* arched inner panel with a fine gold double line, and a slender handle by the seam */
.doors b{position:absolute;inset:9% 16% 8%;border:1px solid rgba(176,138,62,.55);border-radius:999px 999px 6px 6px/42% 42% 6px 6px;
 box-shadow:0 0 0 5px rgba(251,246,236,.85),0 0 0 6px rgba(176,138,62,.3)}
.doors b::after{content:"";position:absolute;top:50%;width:3px;height:44px;margin-top:-22px;border-radius:2px;
 background:linear-gradient(180deg,#d9bf86,#a68750);box-shadow:0 1px 2px rgba(43,36,32,.18)}
.doors .dl b::after{right:-11%}
.doors .dr b::after{left:-11%}
@keyframes tob-glow{0%{opacity:.25}30%{opacity:1}100%{opacity:0}}
@keyframes tob-open-l{0%{transform:rotateY(0)}12%{transform:rotateY(-3deg)}72%{opacity:1}100%{transform:rotateY(-104deg);opacity:0}}
@keyframes tob-open-r{0%{transform:rotateY(0)}12%{transform:rotateY(3deg)}72%{opacity:1}100%{transform:rotateY(104deg);opacity:0}}
/* phone: a narrower photo, so the handle and the arch are kept a little smaller */
@media(max-width:37.49em){.doors b{inset:10% 14% 9%}.doors b::after{height:32px;margin-top:-16px}}
@media(prefers-reduced-motion:reduce){.doors{display:none}}
@media(forced-colors:active){.doors{display:none}}