/* ============================================
   Studio be Photostudio — Main Stylesheet
   ============================================ */

/* === Reset === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#FAFAF8;color:#3A3A3A;overflow-x:hidden;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#DDD;border-radius:2px}

/* === Nav === */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:14px 0;transition:all .5s cubic-bezier(.4,0,.2,1);background:rgba(250,250,248,.95);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(221,221,221,.2)}
.nav.solid{padding:10px 0;box-shadow:0 1px 8px rgba(0,0,0,.04);border-bottom-color:rgba(221,221,221,.3)}

/* WP admin bar offset */
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* === Mobile menu === */
.mm{position:fixed;inset:0;z-index:50;background:rgba(250,250,248,.98);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);clip-path:circle(0% at calc(100% - 36px) 36px);transition:clip-path .6s cubic-bezier(.4,0,.2,1)}
.mm.open{clip-path:circle(150% at calc(100% - 36px) 36px)}
.mm-link{opacity:0;transform:translateX(20px);transition:opacity .4s ease,transform .4s ease}
.mm.open .mm-link{opacity:1;transform:translateX(0)}
/* メニュー項目はウォーカー出力のためインラインdelayを付けられない。
   表示順のスタガーをCSS側で担保する（nth-child は .mm-link 同士で数える）。 */
.mm .mm-link:nth-child(1){transition-delay:.06s}
.mm .mm-link:nth-child(2){transition-delay:.12s}
.mm .mm-link:nth-child(3){transition-delay:.18s}
.mm .mm-link:nth-child(4){transition-delay:.24s}
.mm .mm-link:nth-child(5){transition-delay:.30s}
.mm .mm-link:nth-child(6){transition-delay:.36s}
.mm .mm-link:nth-child(7){transition-delay:.42s}
.mm .mm-link:nth-child(8){transition-delay:.48s}
.mm .mm-link:nth-child(9){transition-delay:.54s}
.mm .mm-link:nth-child(n+10){transition-delay:.60s}

/* === Ornaments === */
.orn-v{width:1px;height:50px;background:linear-gradient(to bottom,transparent,#EEE8AA,transparent);margin:0 auto}
.orn-h{height:1px;background:linear-gradient(to right,transparent,#EEE8AA,transparent)}
.orn-dot{width:4px;height:4px;background:#EEE8AA;border-radius:50%}

/* === Reveal system === */
.rv{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.vis{opacity:1;transform:translateY(0)}
.rv-l{opacity:0;transform:translateX(-50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv-l.vis{opacity:1;transform:translateX(0)}
.rv-r{opacity:0;transform:translateX(50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv-r.vis{opacity:1;transform:translateX(0)}
.rv-s{opacity:0;transform:scale(.92);transition:opacity 1s ease,transform 1s ease}
.rv-s.vis{opacity:1;transform:scale(1)}
[data-d="1"]{transition-delay:.12s!important}[data-d="2"]{transition-delay:.24s!important}[data-d="3"]{transition-delay:.36s!important}[data-d="4"]{transition-delay:.48s!important}[data-d="5"]{transition-delay:.6s!important}

/* === Photo card === */
.pcard{overflow:hidden;position:relative}
.pcard img{transition:transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.pcard:hover img,.pcard:active img{transform:scale(1.06)}

/* === Dot pattern === */
.dots{background-image:radial-gradient(circle,#EEE8AA .7px,transparent .7px);background-size:18px 18px;opacity:.2}

/* === Noise === */
.noise{position:relative}
.noise::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* === Text utils === */
.lc2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tgold{background:linear-gradient(135deg,#D4CE8A,#EEE8AA 50%,#D4CE8A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* === Shimmer btn === */
.btn-sh{position:relative;overflow:hidden}
.btn-sh::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .7s ease}
.btn-sh:hover::after{left:100%}

/* === Float === */
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.afloat{animation:flt 5s ease-in-out infinite}

/* === Safe area === */
.safe-b{padding-bottom:max(env(safe-area-inset-bottom),14px)}

/* === Horizontal scroll === */
.hscroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 20px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll-item{scroll-snap-align:center;flex-shrink:0}

/* === Marquee === */
@keyframes mrq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.mrq-track{animation:mrq 45s linear infinite;display:flex;white-space:nowrap}

/* === Step line === */
.step-line{position:absolute;left:15px;top:36px;bottom:0;width:1px;background:linear-gradient(to bottom,#EEE8AA,#DDDDDD 80%,transparent)}

/* === Lightbox === */
#lightbox{position:fixed;inset:0;z-index:60;background:rgba(58,58,58,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease}
#lightbox.show{display:flex;opacity:1}
#lightbox img{max-width:92vw;max-height:85vh;object-fit:contain;border-radius:8px}

/* === Reservation Modal === */
.reserve-modal{position:fixed;inset:0;z-index:70;background:rgba(58,58,58,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.4,0,.2,1),visibility .35s;padding:20px}
.reserve-modal.show{opacity:1;visibility:visible}
.reserve-modal-inner{position:relative;background:#FAFAF8;border-radius:20px;padding:32px 28px 28px;width:100%;max-width:400px;box-shadow:0 25px 60px rgba(0,0,0,.12),0 0 0 1px rgba(221,221,221,.15);transform:translateY(20px) scale(.97);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow:hidden}
.reserve-modal-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#EEE8AA,#D4CE8A,#EEE8AA)}
.reserve-modal.show .reserve-modal-inner{transform:translateY(0) scale(1)}
.reserve-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border-radius:14px;border:1px solid rgba(221,221,221,.3);transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none}
.reserve-card:hover{border-color:#EEE8AA;box-shadow:0 4px 20px rgba(238,232,170,.2);transform:translateY(-1px)}
.reserve-card-icon{width:42px;height:42px;border-radius:12px;background:#06C75510;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* === Scroll progress === */
#scrollProgress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#EEE8AA,#D4CE8A);z-index:100;width:0;transition:none}
.admin-bar #scrollProgress{top:32px}
@media(max-width:782px){.admin-bar #scrollProgress{top:46px}}

/* === Loading === */
#loader{position:fixed;inset:0;z-index:9999;background:#FAFAF8;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1s cubic-bezier(.4,0,.2,1),visibility 1s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.2;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}
.loader-breathe{animation:breathe 2s ease-in-out infinite}
.loader-bar{width:100px;height:1px;background:#EEE;margin-top:28px;position:relative;overflow:hidden;border-radius:1px}
.loader-bar::after{content:'';position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#EEE8AA,#D4CE8A);animation:lbar 2.2s ease-out forwards}
@keyframes lbar{to{width:100%}}
.loader-text{margin-top:14px;font-family:'Zen Kaku Gothic New',sans-serif;font-size:9px;letter-spacing:.4em;color:#BBB;animation:breathe 2s ease-in-out infinite}

/* === Hero Mosaic === */
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;background:#FAFAF8}
.hero-mosaic{display:grid;height:100%;padding:68px 16px 16px;gap:8px}
.hero-mosaic{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1.4fr 0.3fr 1fr 0.8fr}
.hm-a{grid-column:1/3;grid-row:1/2}
.hm-b{grid-column:3/4;grid-row:1/3}
.hm-c{grid-column:1/2;grid-row:2/3}
.hm-d{grid-column:2/3;grid-row:2/3}
.hm-text{grid-column:1/4;grid-row:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0}
.hm-e{grid-column:1/2;grid-row:4/5}
.hm-f{grid-column:2/4;grid-row:4/5}
@media(min-width:768px){
  .hero-mosaic{padding:72px 20px 20px;gap:10px;grid-template-columns:1.2fr 0.8fr 0.6fr 1fr;grid-template-rows:1.2fr 0.4fr 1fr}
  .hm-a{grid-column:1/2;grid-row:1/3}
  .hm-b{grid-column:2/3;grid-row:1/2}
  .hm-c{grid-column:3/4;grid-row:1/2}
  .hm-d{grid-column:4/5;grid-row:1/3}
  .hm-text{grid-column:2/4;grid-row:2/3;padding:0}
  .hm-e{grid-column:1/3;grid-row:3/4}
  .hm-f{grid-column:3/5;grid-row:3/4}
}
.hm-img{overflow:hidden;border-radius:10px}
.hm-img img{width:100%;height:100%;object-fit:cover}
.hm-cycle{position:relative;width:100%;height:100%}
.hm-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s cubic-bezier(.4,0,.2,1)}
.hm-frame.active{opacity:1}
.hm-img{opacity:0;transform:scale(1.04);transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.hm-img.in{opacity:1;transform:scale(1)}

/* === WordPress specific === */
.wp-block-image img{max-width:100%;height:auto}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left;margin-right:1.5em}
.alignright{float:right;margin-left:1.5em}