/* ============================================================================
   Nippon Bike World — layout.css  (curtain loader, top nav, footer)
   ============================================================================ */

/* Curtain loader */
.curtain{ position:fixed; inset:0; z-index:9999; background:var(--navy); display:grid; place-content:center; justify-items:center; gap:1.4rem; transition:transform 1s var(--ease); }
.curtain.is-done{ transform:translateY(-100%); }
.curtain__mark{ font-family:var(--font-jp); font-weight:800; font-size:clamp(2rem,6vw,3.4rem); letter-spacing:.3em; color:var(--ivory); }
.curtain__rule{ width:min(60vw,320px); height:1px; background:var(--line-soft); overflow:hidden; }
.curtain__rule span{ display:block; height:100%; width:0; background:var(--grad-gold); }
.curtain__est{ font-family:var(--font-ui); font-size:.7rem; letter-spacing:.4em; color:var(--gold); }

/* Top navigation (three-column editorial) */
.top{ position:fixed; inset:0 0 auto 0; z-index:900; transition:background .5s var(--ease), border-color .5s, padding .5s; border-bottom:1px solid transparent; padding:.4rem 0; }
.top.is-scrolled{ background:rgba(10,20,40,.78); backdrop-filter:blur(10px); border-color:var(--line); }
.top__inner{ width:min(100% - 2rem, 1480px); margin-inline:auto; height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.8rem; }
.top__nav{ display:flex; gap:2rem; align-items:center; }
.top__nav--r{ justify-content:flex-end; }
.top__link{ font-family:var(--font-ui); font-size:.82rem; letter-spacing:.16em; color:var(--ivory); position:relative; padding:.3rem 0; transition:color .3s; }
.top__link::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:width .4s var(--ease); }
.top__link:hover::after,.top__link.is-active::after{ width:100%; }
.top__link:hover,.top__link.is-active{ color:var(--gold-2); }
.top__brand{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.top__brand-jp{ font-family:var(--font-jp); font-weight:800; font-size:1.4rem; letter-spacing:.28em; padding-left:.28em; }
.top__brand-en{ font-size:.6rem; letter-spacing:.36em; color:var(--gold); margin-top:.15rem; }
.top__reserve{ font-family:var(--font-ui); font-size:.78rem; letter-spacing:.14em; border:1px solid var(--line); padding:.6rem 1.2rem; color:var(--gold-2); transition:.35s; }
.top__reserve:hover{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.top__burger{ display:none; width:44px; height:40px; flex-direction:column; gap:6px; justify-content:center; align-items:flex-end; }
.top__burger span{ height:1px; background:var(--ivory); transition:.35s; }
.top__burger span:nth-child(1){ width:24px; } .top__burger span:nth-child(2){ width:18px; } .top__burger span:nth-child(3){ width:24px; }
.top__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:24px; }
.top__burger.is-open span:nth-child(2){ opacity:0; }
.top__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:24px; }

.drawer{ position:fixed; inset:76px 0 auto; z-index:890; background:rgba(10,20,40,.98); backdrop-filter:blur(10px); display:none; flex-direction:column; padding:1rem 1.5rem 2rem; border-bottom:1px solid var(--line); }
.drawer.is-open{ display:flex; }
.drawer a{ font-family:var(--font-jp); font-size:1.2rem; padding:1rem 0; border-bottom:1px solid var(--line-soft); }

/* Footer */
.foot{ background:var(--navy-2); border-top:1px solid var(--line); }
.foot__top{ width:min(100% - 2rem, var(--container)); margin-inline:auto; padding:var(--sp-6) 0 var(--sp-5); display:grid; grid-template-columns:1fr 2fr; gap:3rem; }
.foot__jp{ font-family:var(--font-jp); font-weight:800; font-size:2rem; letter-spacing:.2em; }
.foot__en{ font-size:.8rem; letter-spacing:.34em; color:var(--gold); margin-top:.4rem; }
.foot__tag{ font-family:var(--font-en); font-style:italic; color:var(--gold-2); margin-top:1.2rem; font-size:1.2rem; }
.foot__cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; }
.foot__col h4{ font-family:var(--font-ui); font-weight:400; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
.foot__col a{ display:block; color:var(--muted); padding:.3rem 0; transition:color .3s; }
.foot__col a:hover{ color:var(--gold-2); }
.foot__col p{ color:var(--muted); font-size:.9rem; margin-bottom:.6rem; }
.foot__social{ display:flex; gap:1rem; margin-top:1rem; }
.foot__form{ display:flex; border-bottom:1px solid var(--line); margin-top:.4rem; }
.foot__form input{ flex:1; background:none; border:0; padding:.7rem 0; }
.foot__form button{ color:var(--gold); font-size:1.2rem; padding:0 .4rem; }
.foot__note{ color:var(--gold-2); font-size:.82rem; min-height:1.3em; margin-top:.5rem; }
.foot__bottom{ width:min(100% - 2rem, var(--container)); margin-inline:auto; padding:1.6rem 0; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--font-ui); font-size:.76rem; letter-spacing:.08em; color:var(--muted); }