/* ================================================================
   JUST S'MORES — site-base.css
   Shared styles for all pages
   ================================================================ */

/* ── FONTS ── */
@font-face { font-family:'Roc Grotesk Condensed'; src:url('fonts/Roc_Grotesk_Condensed_Black.otf') format('opentype'); font-weight:950; }
@font-face { font-family:'Roc Grotesk Condensed'; src:url('fonts/Roc_Grotesk_Condensed_Extra_Bold.otf') format('opentype'); font-weight:800; }
@font-face { font-family:'Roc Grotesk Condensed'; src:url('fonts/Roc_Grotesk_Condensed_Bold.otf') format('opentype'); font-weight:700; }
@font-face { font-family:'Roc Grotesk'; src:url('fonts/Roc_Grotesk_Black.otf') format('opentype'); font-weight:950; }
@font-face { font-family:'Roc Grotesk'; src:url('fonts/Roc_Grotesk_Bold.otf') format('opentype'); font-weight:700; }
@font-face { font-family:'Roc Grotesk'; src:url('fonts/Roc_Grotesk_Regular.otf') format('opentype'); font-weight:400; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; }
@font-face { font-family:'Montserrat'; src:url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:italic; }

/* ── VARIABLES ── */
:root {
  --dark:#1a0e07; --brown:#402f22; --mid:#6d4f39;
  --tan:#ac906e;  --gold:#c9a97a;
  --rose:#f7e9dd; --cream:#fffaf9; --blue:#d6e3ed;
  --disp:'Roc Grotesk Condensed', sans-serif;
  --body:'Montserrat', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--body); background:var(--cream); color:var(--brown); overflow-x:hidden; }
body.intro-active { overflow:hidden; }
a { text-decoration:none; }
img { max-width:100%; display:block; }

/* ── ANIMATIONS ── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes iLogo   { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes iWipe   { from{transform:scaleY(1)} to{transform:scaleY(0)} }
@keyframes iVid    { from{opacity:0;transform:scale(1.05)} to{opacity:.65;transform:scale(1)} }
@keyframes iTag    { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse   { 0%,100%{opacity:.35} 50%{opacity:.9} }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 60px; display:flex; align-items:center; justify-content:space-between;
  transition:background 400ms ease, padding 300ms ease, backdrop-filter 400ms ease;
}
nav.scrolled {
  background:rgba(26,14,7,.96); backdrop-filter:blur(20px);
  padding:14px 60px; border-bottom:1px solid rgba(172,144,110,.15);
}
.nav-logo { height:38px; filter:brightness(0) invert(1); opacity:.88; }
.nav-links { display:flex; gap:18px; align-items:center; }
.nav-links a {
  font-family:var(--body); font-weight:700; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,250,249,.88); transition:color 200ms; white-space:nowrap; text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.nav-links a:hover, .nav-links a.current { color:var(--cream); }
.nav-links a.current { color:var(--tan); }
.nav-cta {
  font-family:var(--disp); font-weight:950; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.05em;
  background:var(--tan); color:var(--cream);
  border:none; border-radius:9999px; padding:10px 22px; cursor:pointer;
  transition:background 200ms, transform 80ms; display:inline-block;
  white-space:nowrap;
}
.nav-cta:hover { background:var(--gold); }

/* ── PAGE HERO ── */
.page-hero {
  min-height:52vh; background:var(--dark);
  display:flex; align-items:flex-end; padding:0 64px 80px;
  position:relative; overflow:hidden; padding-top:100px;
}
.page-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center; opacity:.72;
}
.page-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent, rgba(26,14,7,.38));
}
.page-hero-inner { position:relative; max-width:1280px; width:100%; }
.page-eyebrow {
  display:block; font-family:var(--body); font-weight:700; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--tan);
  margin-bottom:16px; animation:fadeUp .7s .3s ease both;
}
.page-title {
  font-family:var(--disp); font-weight:950;
  font-size:clamp(72px,12vw,152px);
  text-transform:uppercase; color:var(--cream);
  line-height:.88; letter-spacing:-.025em;
  animation:fadeUp .9s .5s ease both;
}
.page-sub {
  font-family:var(--body); font-size:15px; color:rgba(255,250,249,.5);
  line-height:1.8; margin-top:20px; max-width:520px;
  animation:fadeUp .8s .7s ease both;
}

/* ── SHARED SECTIONS ── */
.sec { padding:100px 64px; }
.sec-inner { max-width:1280px; margin:0 auto; }
.eyebrow {
  font-family:var(--body); font-weight:700; font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--tan); margin-bottom:14px;
  opacity:0; transform:translateY(10px);
  transition:opacity .55s ease, transform .55s ease;
}
.eyebrow.ey-vis { opacity:1; transform:translateY(0); }
.headline {
  font-family:var(--disp); font-weight:950;
  font-size:clamp(44px,5.8vw,82px);
  text-transform:uppercase; line-height:.9; letter-spacing:-.02em; color:var(--brown);
}
.headline.light { color:var(--cream); }
.body-copy { font-family:var(--body); font-size:15px; line-height:1.82; color:var(--mid); margin-top:18px; max-width:460px; }
.body-copy.light { color:rgba(255,250,249,.55); }

/* ── BUTTONS ── */
.btn-p {
  font-family:var(--disp); font-weight:950; font-size:16px;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--cream); color:var(--dark); border:none;
  border-radius:9999px; padding:14px 40px; cursor:pointer;
  transition:background 200ms, color 200ms; display:inline-block;
}
.btn-p:hover { background:var(--tan); color:var(--cream); }
.btn-g {
  font-family:var(--disp); font-weight:950; font-size:16px;
  text-transform:uppercase; letter-spacing:.04em;
  background:transparent; color:var(--cream);
  border:1.5px solid rgba(255,250,249,.35); border-radius:9999px;
  padding:14px 40px; cursor:pointer; transition:border-color 200ms; display:inline-block;
}
.btn-g:hover { border-color:rgba(255,250,249,.88); }
.btn-tan {
  font-family:var(--disp); font-weight:950; font-size:16px;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--tan); color:var(--cream); border:none;
  border-radius:9999px; padding:14px 40px; cursor:pointer;
  transition:background 200ms; display:inline-block;
}
.btn-tan:hover { background:var(--gold); }

/* ── PRODUCT CARDS ── */
.p-card {
  background:var(--cream); border-radius:20px; overflow:hidden;
  transition:transform 250ms ease, box-shadow 250ms ease; cursor:pointer;
  position:relative; isolation:isolate;
}
.p-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(64,47,34,.18); }
.p-card::before {
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(108deg,transparent 35%,rgba(255,250,249,.11) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform 700ms ease;
}
.p-card:hover::before { transform:translateX(120%); }
.p-img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 500ms ease; }
.p-card:hover .p-img { transform:scale(1.04); }
.p-info { padding:24px; }
.p-tag { font-family:var(--body); font-weight:700; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tan); margin-bottom:7px; }
.p-name { font-family:var(--disp); font-weight:950; font-size:27px; text-transform:uppercase; color:var(--brown); line-height:.9; letter-spacing:-.01em; margin-bottom:8px; }
.p-desc { font-family:var(--body); font-size:12.5px; color:var(--mid); line-height:1.65; }

/* ── BLOG CARDS ── */
.blog-feat { border-radius:20px; overflow:hidden; background:var(--cream); cursor:pointer; transition:box-shadow 250ms ease; }
.blog-feat:hover { box-shadow:0 20px 48px rgba(64,47,34,.14); }
.blog-feat-img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.blog-feat-body { padding:32px; }
.b-card { border-radius:20px; overflow:hidden; background:var(--cream); display:grid; grid-template-columns:140px 1fr; cursor:pointer; transition:box-shadow 250ms ease; }
.b-card:hover { box-shadow:0 12px 32px rgba(64,47,34,.12); }
.b-card-img { width:100%; height:100%; object-fit:cover; }
.b-card-body { padding:20px 22px; }
.b-tag { font-family:var(--body); font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tan); margin-bottom:8px; }
.b-title { font-family:var(--disp); font-weight:950; text-transform:uppercase; color:var(--brown); line-height:.92; letter-spacing:-.01em; margin-bottom:8px; }
.b-title.lg { font-size:36px; } .b-title.sm { font-size:22px; }
.b-excerpt { font-family:var(--body); font-size:13px; color:var(--mid); line-height:1.65; }
.b-meta { font-family:var(--body); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tan); margin-top:14px; }

/* ── TIP / HOW-TO CARDS ── */
.cf-card { border-radius:20px; overflow:hidden; transition:transform 250ms ease, box-shadow 250ms ease; cursor:pointer; }
.cf-card:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(64,47,34,.14); }
.cf-img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.cf-body { padding:28px; background:#fff; }
.cf-tag { font-family:var(--body); font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tan); margin-bottom:10px; }
.cf-title { font-family:var(--disp); font-weight:950; font-size:28px; text-transform:uppercase; color:var(--brown); line-height:.9; letter-spacing:-.01em; margin-bottom:10px; }
.cf-text { font-family:var(--body); font-size:13px; color:var(--mid); line-height:1.72; }

/* ── MARQUEE ── */
.marquee-strip { background:var(--tan); overflow:hidden; padding:14px 0; display:flex; }
.marquee-track { display:flex; white-space:nowrap; animation:marquee 22s linear infinite; }
.marquee-track span { font-family:var(--disp); font-weight:950; font-size:15px; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,250,249,.85); padding:0 30px; }
.marquee-track .sep { color:rgba(255,250,249,.45); padding:0; }
.marquee-strip:hover .marquee-track { animation-play-state:paused; }

/* ── INTRO ── */
#intro { position:fixed; inset:0; z-index:9999; background:var(--dark); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:opacity .4s .1s ease; }
#intro.gone { opacity:0; pointer-events:none; }
/* Video version (home) */
#intro-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:iVid 1.5s .2s ease forwards; }
#intro-cover { position:absolute; inset:0; background:linear-gradient(to top,rgba(26,14,7,.9) 0%,rgba(26,14,7,.25) 65%,rgba(26,14,7,.5) 100%); }
#intro-cnt { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
#intro-tag { font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--tan); opacity:0; animation:iTag .6s 1.2s ease forwards; }
/* Default logo (inner pages) */
#intro > #intro-logo { position:relative; z-index:2; height:42px; filter:brightness(0) invert(1); opacity:0; animation:iLogo .7s .25s ease forwards; }
/* Logo inside #intro-cnt (home) */
#intro-cnt #intro-logo { height:52px; filter:brightness(0) invert(1); opacity:0; animation:iLogo .9s 1.5s ease forwards; }
/* Bar: fast for inner pages */
#intro-bar { position:absolute; inset:0; background:var(--dark); transform-origin:top; animation:iWipe .8s .9s cubic-bezier(.76,0,.24,1) forwards; }
/* Bar: delayed for home video */
#intro.has-video #intro-bar { animation:iWipe .9s 3s cubic-bezier(.76,0,.24,1) forwards; }

/* cursor: default */

/* ── PROGRESS BAR ── */
#prog { position:fixed; top:0; left:0; height:2px; z-index:9998; background:linear-gradient(to right, var(--tan), var(--gold)); width:0%; pointer-events:none; box-shadow:0 0 10px rgba(201,169,122,.55); transition:width 80ms linear; }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}
.t-wrap { overflow:hidden; display:block; }
.t-inner { display:block; transform:translateY(108%); transition:transform 1s cubic-bezier(.16,1,.3,1); }
.t-inner.up { transform:translateY(0); }

/* ── FOOTER ── */
footer { background:var(--brown); padding:80px 64px 40px; border-top:1px solid rgba(172,144,110,.2); }
.footer-inner { max-width:1280px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:56px; margin-bottom:60px; }
.footer-logo { height:36px; filter:brightness(0) invert(1); opacity:.8; }
.footer-tag { font-family:var(--body); font-size:13px; color:rgba(255,250,249,.4); line-height:1.75; margin-top:18px; max-width:210px; }
.fc-title { font-family:var(--body); font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tan); margin-bottom:20px; }
.fc-links { display:flex; flex-direction:column; gap:12px; }
.fc-links a { font-family:var(--body); font-size:13px; color:rgba(255,250,249,.45); transition:color 200ms; }
.fc-links a:hover { color:var(--cream); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:28px; border-top:1px solid rgba(172,144,110,.15); flex-wrap:wrap; gap:16px; }
.footer-copy { font-family:var(--body); font-size:11px; color:rgba(255,250,249,.28); letter-spacing:.06em; }
.footer-social { display:flex; gap:12px; }
.footer-social a { width:36px; height:36px; border-radius:9999px; border:1px solid rgba(172,144,110,.25); display:flex; align-items:center; justify-content:center; color:rgba(255,250,249,.5); transition:border-color 200ms, background 200ms, color 200ms; }
.footer-social a:hover { border-color:var(--tan); background:rgba(172,144,110,.12); color:var(--cream); }
.footer-social svg { width:15px; height:15px; fill:currentColor; }

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
  nav { padding:16px 32px; } nav.scrolled { padding:12px 32px; }
  .sec { padding:80px 32px; }
  .page-hero { padding:100px 32px 64px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  footer { padding:64px 32px 36px; }
}
@media (max-width:768px) {
  .sec { padding:64px 20px; }
  .page-hero { padding:90px 20px 48px; min-height:40vh; }
  .nav-links { display:none; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
  footer { padding:56px 20px 32px; }
  .b-card { grid-template-columns:1fr; }
  .b-card-img { aspect-ratio:16/9; }
}