/* ============================================
   BAR NOCTURNE — 銀座の大人の隠れ家バー
   Theme: Cinematic Dark / Gold / Full-screen Snap
   STANDALONE — No base.css
   ============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth}
body{
  font-family:'Noto Sans JP','Helvetica Neue',sans-serif;
  color:rgba(255,255,255,.5);background:#050505;font-size:15px;line-height:1.9;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(212,168,83,.3);color:#fff}

/* === PALETTE === */
:root{
  --black:#050505;--dark:#0a0a0a;--dark2:#111;--dark3:#1a1a1a;
  --gold:#d4a853;--gold2:#b8943e;--gold-glow:rgba(212,168,83,.08);
  --text:rgba(255,255,255,.4);--heading:#fff;
  --serif:'Cormorant Garamond','Georgia',serif;
  --sans:'Noto Sans JP',sans-serif;
}

/* === FULL-SCREEN SECTION SNAP === */
.snap{min-height:100vh;scroll-snap-align:start;position:relative;display:flex;align-items:center;overflow:hidden}

/* === HEADER — Transparent, ultra minimal === */
.hdr{position:fixed;top:0;left:0;width:100%;z-index:800;padding:1.5rem clamp(2rem,5vw,3.5rem);display:flex;align-items:center;justify-content:space-between}
.hdr-logo{font-family:var(--serif);font-size:1.1rem;color:var(--gold);font-weight:400;letter-spacing:.25em}
.hdr-reserve{font-family:var(--serif);font-size:.7rem;letter-spacing:.2em;color:var(--gold);border:1px solid rgba(212,168,83,.3);padding:.45rem 1.5rem;transition:all .4s}
.hdr-reserve:hover{background:var(--gold);color:var(--black);opacity:1}

/* === SECTION 1: HERO — Full image, centered text === */
.hero-bar{background:var(--black)}
.hero-bar-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1470337458703-46ad1756a187?w=1920&h=1080&fit=crop&q=80') center/cover;opacity:.3;transition:opacity 1s}
.hero-bar-content{position:relative;z-index:1;text-align:center;width:100%;padding:0 2rem}
.hero-bar-eyebrow{font-family:var(--serif);font-size:.65rem;letter-spacing:.4em;color:var(--gold);text-transform:uppercase;margin-bottom:2rem;opacity:0;animation:fadeUp 1s .5s forwards}
.hero-bar h1{font-family:var(--serif);font-size:clamp(3rem,8vw,7rem);font-weight:300;color:var(--heading);letter-spacing:.08em;line-height:1.1;opacity:0;animation:fadeUp 1s .8s forwards}
.hero-bar h1 em{font-style:italic;color:var(--gold)}
.hero-bar-sub{font-size:.8rem;color:var(--text);margin-top:1.5rem;letter-spacing:.05em;opacity:0;animation:fadeUp 1s 1.2s forwards}
.hero-bar-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;animation:fadeUp 1s 1.5s forwards}
.hero-bar-scroll span{font-family:var(--serif);font-size:.6rem;letter-spacing:.2em;color:rgba(255,255,255,.2)}
.hero-bar-scroll::after{content:'';width:1px;height:40px;background:linear-gradient(to bottom,rgba(212,168,83,.4),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.4);opacity:.3}}

/* === SECTION 2: CONCEPT — Split layout === */
.concept-bar{background:var(--dark)}
.concept-inner{display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:100vh}
.concept-img{position:relative;overflow:hidden}
.concept-img img{width:100%;height:100%;object-fit:cover;opacity:.7}
.concept-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,6vw,6rem)}
.concept-text .gold-line{width:40px;height:1px;background:var(--gold);margin-bottom:1.5rem}
.concept-text h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.5rem);color:var(--heading);font-weight:300;letter-spacing:.1em;line-height:1.6;margin-bottom:1.5rem}
.concept-text p{font-size:.85rem;line-height:2.4}
@media(max-width:768px){.concept-inner{grid-template-columns:1fr;min-height:auto}.concept-img{aspect-ratio:16/9}}

/* === SECTION 3: DRINKS — Horizontal scroll === */
.drinks-bar{background:var(--dark2);flex-direction:column;justify-content:center;padding:clamp(4rem,8vw,6rem) 0}
.drinks-header{padding:0 clamp(2rem,5vw,3.5rem);margin-bottom:2.5rem;width:100%}
.drinks-header h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--heading);font-weight:300;letter-spacing:.15em}
.drinks-header p{font-size:.75rem;color:var(--text);margin-top:.5rem}
.drinks-scroll{display:flex;gap:1.5rem;overflow-x:auto;padding:0 clamp(2rem,5vw,3.5rem) 1.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.drinks-scroll::-webkit-scrollbar{display:none}
.drink-card{flex:0 0 280px;scroll-snap-align:start;position:relative;overflow:hidden;border-radius:4px}
.drink-card img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:brightness(.7);transition:all .6s}
.drink-card:hover img{filter:brightness(.4);transform:scale(1.03)}
.drink-card-text{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;transform:translateY(20px);opacity:0;transition:all .4s}
.drink-card:hover .drink-card-text{transform:none;opacity:1}
.drink-card-name{font-family:var(--serif);font-size:1.1rem;color:var(--heading);letter-spacing:.1em;margin-bottom:.2rem}
.drink-card-desc{font-size:.65rem;color:var(--text)}
.drink-card-always{position:absolute;bottom:1rem;left:1.5rem;font-family:var(--serif);font-size:.85rem;color:var(--gold);letter-spacing:.1em;transition:opacity .3s}
.drink-card:hover .drink-card-always{opacity:0}

/* === SECTION 4: ATMOSPHERE — Full image === */
.atmo-bar{background:var(--black)}
.atmo-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1572116469696-31de0f17cc34?w=1920&h=1080&fit=crop&q=80') center/cover;opacity:.25}
.atmo-content{position:relative;z-index:1;text-align:center;padding:0 2rem}
.atmo-content h2{font-family:var(--serif);font-size:clamp(2rem,5vw,4rem);color:var(--heading);font-weight:300;letter-spacing:.15em;margin-bottom:1rem}
.atmo-content p{font-size:.8rem;color:var(--text);max-width:400px;margin:0 auto;line-height:2.2}

/* === SECTION 5: INFO + RESERVATION === */
.info-bar{background:var(--dark);flex-direction:column;justify-content:center}
.info-inner{width:100%;max-width:900px;margin:0 auto;padding:0 clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5rem)}
.info-col h3{font-family:var(--serif);font-size:1rem;color:var(--gold);letter-spacing:.2em;margin-bottom:1.5rem}
.info-item{margin-bottom:1.25rem}
.info-label{font-family:var(--serif);font-size:.55rem;letter-spacing:.15em;color:rgba(255,255,255,.25);text-transform:uppercase;margin-bottom:.25rem}
.info-value{font-size:.85rem;color:rgba(255,255,255,.6);line-height:1.8}
.reserve-box{border:1px solid rgba(212,168,83,.15);padding:2rem;text-align:center;margin-top:1rem}
.reserve-box p{font-size:.75rem;color:var(--text);margin-bottom:1rem}
.reserve-tel{font-family:var(--serif);font-size:clamp(1.2rem,2.5vw,1.8rem);color:var(--gold);letter-spacing:.1em;display:block;margin-bottom:.5rem}
.reserve-note{font-size:.6rem;color:rgba(255,255,255,.2)}
.reserve-btn{display:inline-block;margin-top:1rem;font-family:var(--serif);font-size:.7rem;letter-spacing:.2em;color:var(--gold);border:1px solid rgba(212,168,83,.3);padding:.6rem 2rem;transition:all .4s}
.reserve-btn:hover{background:var(--gold);color:var(--black);opacity:1}
@media(max-width:768px){.info-inner{grid-template-columns:1fr}}

/* === FOOTER === */
.ftr-bar{padding:1.5rem clamp(2rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between;align-items:center;font-size:.55rem;color:rgba(255,255,255,.15);background:var(--black)}
@media(max-width:640px){.ftr-bar{flex-direction:column;gap:.5rem}}

/* === SCROLL ANIMATIONS === */
.sa{opacity:0;transform:translateY(25px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.sa.v{opacity:1;transform:none}
.d1{transition-delay:.15s}.d2{transition-delay:.3s}.d3{transition-delay:.45s}

/* === BADGE === */
.badge{position:fixed;bottom:1.25rem;right:1.25rem;font-size:.55rem;color:rgba(255,255,255,.2);letter-spacing:.06em;display:flex;align-items:center;gap:.4rem;z-index:700}
.badge::before{content:'';width:4px;height:4px;background:var(--gold);border-radius:50%}