/*
Theme Name: Steambull Vapor
Theme URI: https://steambull.com/
Author: Steambull Vapor
Description: Custom black & gold theme for Steambull Vapor — premium craft e-liquid showcase. Homepage with hero, pillars and flavour teasers; scroll-driven Juice page with one flavour per viewport.
Version: 1.0.5
License: Private — all rights reserved.
Text Domain: steambull-vapor
*/

:root{
  --ink:#0a0a0f;
  --ink-2:#111118;
  --paper:#f5f3ee;
  --muted:rgba(245,243,238,.62);
  --line:rgba(245,243,238,.14);
  --gold:#e8b64c;
  --gold-deep:#b8860b;
  --gold-pale:#f6d47c;
  --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--ink); color:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
img{max-width:100%;height:auto}
a{color:var(--gold)}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,15,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1.4rem; max-width:1100px; margin:0 auto;
}
.brand img{display:block; height:52px; width:auto}
.site-nav .links{display:flex; gap:1.1rem; list-style:none; align-items:center}
.site-nav .links a{color:var(--muted); text-decoration:none; font-size:.85rem; font-weight:600}
.site-nav .links a:hover{color:var(--paper)}
.site-nav .links .current-menu-item a{color:var(--gold)}

/* ---------- homepage hero ---------- */
.hero{
  max-width:1100px; margin:0 auto; padding:4.5rem 1.4rem 4rem; text-align:center;
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-20%; z-index:-1;
  background:
    radial-gradient(42% 42% at 20% 30%, rgba(232,182,76,.30), transparent 70%),
    radial-gradient(38% 38% at 82% 62%, rgba(184,134,11,.26), transparent 70%),
    radial-gradient(30% 30% at 55% 85%, rgba(246,212,124,.16), transparent 70%);
  filter:blur(10px);
}
/* Breathing gold spotlights — desktop only: slow glow pulse + gentle vertical drift */
@keyframes sb-spotlight-breathe{
  from{opacity:.68; transform:translateY(-16px)}
  to{opacity:1; transform:translateY(16px)}
}
@media (min-width:1024px){
  .hero::before{animation:sb-spotlight-breathe 7s ease-in-out infinite alternate; will-change:opacity,transform}
}
@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
}
.hero .hero-logo{width:min(300px,62vw); margin:0 auto 1.6rem; display:block;
  filter:drop-shadow(0 10px 40px rgba(232,182,76,.25))}
.hero .kicker{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.4rem;
  border:1px solid var(--line); border-radius:999px; padding:.45rem 1.1rem;
}
.hero .tagline{font-size:clamp(1.6rem,6vw,2.6rem); color:var(--paper); font-weight:800;
  letter-spacing:-.01em; margin-bottom:1.1rem}
.hero .tagline .gold{
  background:linear-gradient(100deg,#f6d47c,#e8b64c 55%,#b8860b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .intro{color:var(--muted); max-width:37rem; margin:0 auto 2.2rem; font-size:1rem}
.cta{
  display:inline-block; background:linear-gradient(135deg,#f6d47c,#e8b64c); color:#1a1206; font-weight:700;
  text-decoration:none; border-radius:999px; padding:.95rem 2.2rem; font-size:.95rem;
  border:0; cursor:pointer;
}
.cta:hover{filter:brightness(1.06)}
.cta.ghost{background:transparent; color:var(--paper); border:1px solid var(--line); margin-left:.6rem}
.hero .cta-row{margin-bottom:.5rem}

/* ---------- pillars ---------- */
.pillars{max-width:1100px; margin:0 auto; padding:1rem 1.4rem 3.5rem; display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:760px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; background:var(--ink-2)}
.pillar .t{font-weight:800; font-size:.95rem; margin-bottom:.35rem; letter-spacing:.02em; color:var(--gold-pale)}
.pillar p{font-size:.88rem; color:var(--muted)}

/* ---------- teaser cards ---------- */
.teaser{max-width:1100px; margin:0 auto; padding:1rem 1.4rem 4.5rem}
.teaser h2{font-size:clamp(1.6rem,5vw,2.2rem); text-align:center; margin-bottom:.5rem; font-weight:800; letter-spacing:-.01em}
.teaser .sub{color:var(--muted); text-align:center; margin-bottom:2rem; font-size:.95rem}
.cards{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem;
  background:var(--ink-2); position:relative; overflow:hidden; min-height:230px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.card::before{content:""; position:absolute; inset:0; opacity:.9; background:var(--card-grad,linear-gradient(135deg,#333,#111))}
.card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 15%,rgba(5,5,8,.82) 100%)}
.card > *{position:relative; z-index:1}
.card .fname{font-size:1.9rem; line-height:1.05; color:#fff; margin-bottom:.35rem}
.card p{font-size:.85rem; color:rgba(255,255,255,.85)}
.more-wrap{text-align:center; margin-top:2.2rem}

/* flavour wordmark typefaces */
.fnt-dmserif{font-family:'DM Serif Display',Georgia,serif; font-style:italic; font-weight:400}
.fnt-fredoka{font-family:'Fredoka',sans-serif; font-weight:700; letter-spacing:.01em}
.fnt-anton{font-family:'Anton',sans-serif; font-weight:400; letter-spacing:.03em}
.fnt-pacifico{font-family:'Pacifico',cursive; font-weight:400}
.fnt-monoton{font-family:'Monoton',cursive; font-weight:400; letter-spacing:.02em}
.fnt-luckiest{font-family:'Luckiest Guy',cursive; font-weight:400; letter-spacing:.03em}
.fnt-cinzel{font-family:'Cinzel Decorative',serif; font-weight:900; letter-spacing:.05em}
.fnt-rye{font-family:'Rye',serif; font-weight:400}
.fnt-bungee{font-family:'Bungee',sans-serif; font-weight:400}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:2.5rem 1.4rem; text-align:center;
  color:var(--muted); font-size:.82rem}
.site-footer .footer-inner{max-width:1100px; margin:0 auto}
.site-footer img{width:150px; margin:0 auto 1rem; display:block}
.site-footer .tagline{color:var(--gold); font-weight:700; margin-bottom:.6rem}

/* ---------- generic page ---------- */
.page-wrap{max-width:760px; margin:0 auto; padding:4rem 1.4rem 5rem}
.page-wrap h1{font-size:clamp(2rem,7vw,3rem); font-weight:800; letter-spacing:-.01em; margin-bottom:1.2rem}
.page-wrap h1 .gold{
  background:linear-gradient(100deg,#f6d47c,#e8b64c 55%,#b8860b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-wrap p{color:var(--muted); margin-bottom:1.1rem}
.page-wrap a{color:var(--gold)}

/* ---------- JUICE page ---------- */
.flavours-head{max-width:1100px; margin:0 auto; padding:4.5rem 1.4rem 1rem; text-align:center}
.flavours-head .kicker{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1rem;
  border:1px solid var(--line); border-radius:999px; padding:.45rem 1.1rem;
}
.flavours-head h2{font-size:clamp(2.2rem,8vw,4rem); font-weight:800; letter-spacing:-.01em; margin-bottom:.8rem}
.flavours-head h2 .grad{
  background:linear-gradient(100deg,#f6d47c,#e8b64c 55%,#b8860b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.flavours-head p{color:var(--muted); max-width:34rem; margin:0 auto; font-size:.98rem}
.flavours-head .scroll-hint{
  margin-top:1.6rem; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.scroll-progress{position:sticky; top:69px; z-index:50; height:3px; background:var(--line); display:block}
.scroll-progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,#b8860b,#e8b64c,#f6d47c)}

.flavor{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:5rem 1.4rem;
  opacity:.12; filter:blur(8px) saturate(.6); transform:translateY(56px) scale(.985);
  transition:opacity .7s ease, filter .7s ease, transform .7s ease;
  background:var(--scene) center/cover no-repeat;
}
.flavor.is-active{opacity:1; filter:none; transform:none}
.flavor .scrim{position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.52), rgba(0,0,0,.18) 62%, transparent 82%)}
.flavor .inner{position:relative; z-index:1; max-width:640px; width:100%}
.flavor .fname{
  font-size:clamp(2.7rem,12vw,4.8rem); line-height:1.04; margin-bottom:1.1rem; color:#fff;
}
.f-humidity .fname{
  background:linear-gradient(180deg,#e6fff8 5%,#2fd9a4 45%,#e8a020 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 24px rgba(0,215,160,.5));
}
.f-electric .fname{
  background:linear-gradient(180deg,#eafff0 5%,#39ff88 50%,#0d9d4e 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 16px rgba(57,255,136,.75)) drop-shadow(0 4px 22px rgba(57,255,136,.4));
}
.f-bigisland .fname{
  background:linear-gradient(180deg,#fff6c9 5%,#ffb35c 40%,#ff5e78 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 24px rgba(255,150,80,.55));
}
.f-witchcraft .fname{
  background:linear-gradient(180deg,#efdcff 5%,#a86bff 45%,#4b158f 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 28px rgba(140,70,255,.6));
}
.f-jungledesert .fname{
  background:linear-gradient(180deg,#ffedbe 5%,#f0b429 45%,#a34d08 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 22px rgba(240,180,40,.5));
}
.f-slushy .fname{
  background:linear-gradient(180deg,#ffffff 5%,#a8dcff 45%,#2f6df6 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(140,200,255,.7)) drop-shadow(0 5px 22px rgba(90,170,255,.5));
}
.f-universal .fname{
  background:linear-gradient(180deg,#ffe3ec 5%,#ff8fab 45%,#e63956 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 24px rgba(255,95,120,.5));
}
.f-custy .fname{
  background:linear-gradient(180deg,#fff3d9 5%,#ffc94d 40%,#e2607a 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 24px rgba(255,175,95,.55));
}
.f-blackhole .fname{
  color:#f2ede4;
  text-shadow:0 0 30px rgba(190,140,255,.45), 0 4px 0 rgba(0,0,0,.65);
  -webkit-text-stroke:1px rgba(15,8,25,.9);
}
.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.1rem}
.chips span{
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.35); background:rgba(10,10,14,.45);
  backdrop-filter:blur(6px); color:#fff; border-radius:999px; padding:.45rem .95rem;
}
.flavor .desc{font-size:clamp(.98rem,3.6vw,1.12rem); color:rgba(255,255,255,.92); max-width:32rem;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}

/* category divider headers */
.cathead{
  min-height:72svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:4rem 1.4rem; position:relative; overflow:hidden;
  opacity:.12; filter:blur(8px); transform:translateY(48px);
  transition:opacity .7s ease, filter .7s ease, transform .7s ease;
}
.cathead.is-active{opacity:1; filter:none; transform:none}
.cathead .k{font-size:.75rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1rem}
.cathead h3{
  font-size:clamp(2.6rem,13vw,5.2rem); font-weight:800; letter-spacing:.02em; line-height:1;
  background:linear-gradient(100deg,#f6d47c,#e8b64c 35%,#b8860b 80%,#8a6d1f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 30px rgba(232,182,76,.25));
}
.cathead p{color:var(--muted); margin-top:1rem; font-size:.98rem}

/* side dots — desktop */
.dots{position:fixed; right:1.1rem; top:50%; transform:translateY(-50%); z-index:55;
  display:none; flex-direction:column; gap:.7rem}
@media(min-width:900px){.dots{display:flex}}
.dots a{width:10px; height:10px; border-radius:50%; background:rgba(245,243,238,.28);
  transition:all .3s ease; display:block}
.dots a.is-on{background:var(--paper); transform:scale(1.5); box-shadow:0 0 12px rgba(255,255,255,.6)}

@media (prefers-reduced-motion: reduce){
  .flavor,.cathead{opacity:1; filter:none; transform:none; transition:none}
  .flavours-head .scroll-hint{animation:none}
  html{scroll-behavior:auto}
}