/* ============ NARSIS COFFEE — LUXURY SYSTEM ============ */
:root{
  --black: #0a0806;
  --black-2: #12100c;
  --black-3: #1a1610;
  --gold: #c9a24b;
  --gold-light: #f1d78c;
  --gold-dark: #8a6a26;
  --cream: #ede3cf;
  --line: rgba(201,162,75,0.25);
  --serif: 'Cormorant Garamond', serif;
  --script: 'Tangerine', cursive;
  --sans: 'Marcellus', serif;
  --body: 'EB Garamond', serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--black); }
body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  overflow-x:hidden;
  cursor:none;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img,video{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:var(--black); }

@media (max-width: 900px){
  body{ cursor:auto; }
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:9998; pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
}

/* ---------- custom cursor ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background:var(--gold-light); z-index:10000; pointer-events:none;
  transform:translate(-50%,-50%); transition:opacity .2s;
}
.cursor-ring{
  position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--gold); z-index:9999; pointer-events:none;
  transform:translate(-50%,-50%); transition:width .3s,height .3s,background .3s,border-color .3s;
  display:flex; align-items:center; justify-content:center;
}
.cursor-ring span{
  font-family:var(--sans); font-size:9px; letter-spacing:0.15em; color:var(--gold-light);
  opacity:0; transition:opacity .25s; text-transform:uppercase; text-align:center;
}
.cursor-ring.hover{ width:64px; height:64px; background:rgba(201,162,75,0.08); }
.cursor-ring.hover span{ opacity:1; }
.cursor-ring.play{ width:84px; height:84px; background:rgba(201,162,75,0.12); border-color:var(--gold-light); }

/* ---------- floating drop canvas ---------- */
#dropCanvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; mix-blend-mode:screen;
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; background:var(--black); z-index:20000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .9s ease, visibility .9s ease;
}
.preloader.done{ opacity:0; visibility:hidden; }
.pre-n path{
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:drawN 1.4s ease forwards;
}
@keyframes drawN{ to{ stroke-dashoffset:0; } }
.pre-drop{
  width:6px; height:6px; border-radius:50% 50% 50% 0; background:var(--gold);
  animation:preDrop 1.6s ease-in 1.1s forwards; opacity:0;
  box-shadow:0 0 12px 2px rgba(201,162,75,0.8);
}
@keyframes preDrop{
  0%{ opacity:1; transform:translateY(-10px) rotate(45deg); }
  70%{ opacity:1; transform:translateY(20px) rotate(45deg); }
  100%{ opacity:0; transform:translateY(24px) rotate(45deg) scale(2.5); }
}
.pre-label{
  font-family:var(--sans); letter-spacing:0.5em; font-size:12px; color:var(--gold);
  opacity:0; animation:fadeUp 1s ease 1.6s forwards;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 5vw; transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,8,6,0.85); backdrop-filter:blur(14px);
  padding:16px 5vw; border-color:var(--line);
}
.nav-logo{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; font-family:var(--sans); }

.logo-mark{ display:flex; align-items:baseline; line-height:1; }
.logo-n{
  font-family:var(--script); font-weight:700; font-size:52px; color:var(--gold-light);
  text-shadow:0 0 16px rgba(201,162,75,0.55);
  font-variant-ligatures:common-ligatures discretionary-ligatures historical-ligatures;
  -webkit-font-feature-settings:"liga" 1,"dlig" 1,"hlig" 1,"swsh" 1;
  font-feature-settings:"liga" 1,"dlig" 1,"hlig" 1,"swsh" 1;
  margin-right:-2px; transform-origin:70% 80%;
  animation:logoFloat 4.5s ease-in-out infinite;
  position:relative; z-index:2;
}
.logo-coffee{
  font-family:var(--script); font-weight:400; font-size:26px; color:var(--gold);
  font-variant-ligatures:common-ligatures discretionary-ligatures historical-ligatures;
  -webkit-font-feature-settings:"liga" 1,"dlig" 1,"hlig" 1,"swsh" 1;
  font-feature-settings:"liga" 1,"dlig" 1,"hlig" 1,"swsh" 1;
  position:relative; z-index:1; top:2px;
  animation:logoFloat 4.5s ease-in-out infinite .6s;
}
.logo-arsis{
  font-size:10px; letter-spacing:0.42em; color:rgba(237,227,207,0.7); text-transform:uppercase;
  margin-top:-2px;
}
@keyframes logoFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-4px) rotate(-2deg); }
}

.footer-brand .logo-mark-lg .logo-n{ font-size:76px; margin-right:-3px; }
.footer-brand .logo-mark-lg .logo-coffee{ font-size:38px; }
.footer-brand .logo-arsis{ font-size:12px; }
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-family:var(--sans); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  position:relative; color:var(--cream); opacity:0.85;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold);
  transition:width .35s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-links a:hover{ opacity:1; }
.nav-cta{
  border:1px solid var(--gold); padding:10px 20px !important; border-radius:2px;
}
.nav-cta::after{ display:none; }
.nav-burger{ display:none; background:none; border:none; flex-direction:column; gap:5px; cursor:pointer; }
.nav-burger span{ width:24px; height:1px; background:var(--gold); }

@media (max-width: 900px){
  .nav-burger{ display:flex; }
  .nav-links{
    position:fixed; top:0; right:-100%; height:100vh; width:70vw; max-width:320px;
    background:var(--black-2); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:0 40px; transition:right .5s ease; gap:28px; border-left:1px solid var(--line);
  }
  .nav-links.open{ right:0; }
}

/* ---------- section shared ---------- */
section{ position:relative; padding:140px 6vw; }
.eyebrow{
  font-family:var(--sans); font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.eyebrow.light{ color:var(--gold-light); }
.section-head{ max-width:760px; margin:0 auto 70px; text-align:center; }
.section-head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(32px,4.5vw,56px); line-height:1.1; color:var(--cream); }
.section-head .lede{ margin-top:20px; font-size:18px; line-height:1.7; color:rgba(237,227,207,0.7); }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(40px); }
[data-reveal].revealed{ animation:revealUp 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes revealUp{ to{ opacity:1; transform:translateY(0); } }

/* ---------- HERO ---------- */
.hero{
  position:relative; height:100vh; width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  filter:saturate(0.85) brightness(0.55);
}
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.35) 40%, rgba(10,8,6,0.9) 100%);
}
.hero-vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 200px 60px rgba(0,0,0,0.75);
}
.hero-content{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; }
.hero-kicker{ font-family:var(--sans); letter-spacing:0.4em; font-size:12px; text-transform:uppercase; color:var(--gold-light); margin-bottom:20px; }
.hero-title{ line-height:0.9; }
.shimmer-text{
  font-family:var(--serif); font-weight:600; font-size:clamp(70px,15vw,190px);
  background:linear-gradient(100deg, var(--gold-dark) 20%, var(--gold-light) 40%, var(--gold) 55%, var(--gold-dark) 75%);
  background-size:250% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 6s linear infinite;
  letter-spacing:0.03em;
}
@keyframes shimmer{ to{ background-position:250% center; } }
.hero-script{ font-family:var(--script); font-size:clamp(38px,6vw,64px); color:var(--gold); margin-top:-14px; }
.hero-sub{ margin-top:26px; font-size:19px; line-height:1.7; color:rgba(237,227,207,0.75); max-width:520px; }
.btn-gold{
  margin-top:38px; display:inline-block; padding:16px 42px; border:1px solid var(--gold);
  font-family:var(--sans); letter-spacing:0.18em; font-size:12px; text-transform:uppercase;
  color:var(--gold-light); position:relative; overflow:hidden; z-index:1; border-radius:1px;
  transition:color .4s ease;
}
.btn-gold::before{
  content:''; position:absolute; inset:0; background:var(--gold); z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.btn-gold:hover{ color:var(--black); }
.btn-gold:hover::before{ transform:scaleX(1); }

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-drop{
  width:8px; height:8px; border-radius:50% 50% 50% 0; background:var(--gold);
  transform:rotate(45deg); animation:scrollBob 1.8s ease-in-out infinite;
}
@keyframes scrollBob{ 0%,100%{ transform:translateY(0) rotate(45deg); opacity:1;} 50%{ transform:translateY(10px) rotate(45deg); opacity:0.4;} }
.scroll-text{ font-family:var(--sans); font-size:10px; letter-spacing:0.25em; text-transform:uppercase; color:rgba(237,227,207,0.55); }

/* ---------- RITUAL (3D cup scroll rotation) ---------- */
.ritual{ height:400vh; position:relative; background:radial-gradient(ellipse at center, #16120c 0%, #0a0806 70%); }
.ritual-pin{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ritual-caption{
  position:absolute; left:8vw; top:50%; transform:translateY(-50%); max-width:340px; z-index:4;
}
.ritual-index{ font-family:var(--serif); font-size:70px; color:var(--gold-dark); opacity:0.5; line-height:1; }
.ritual-caption h3{ font-family:var(--serif); font-size:34px; font-weight:500; color:var(--cream); margin:8px 0 14px; }
.ritual-caption p{ color:rgba(237,227,207,0.65); line-height:1.7; font-size:16px; }

.cup-stage{ position:relative; width:320px; height:420px; perspective:1400px; z-index:3; }
.cup-orbit{
  position:absolute; inset:-80px; border:1px solid rgba(201,162,75,0.15); border-radius:50%;
  animation:spinSlow 40s linear infinite;
}
.cup-orbit::before, .cup-orbit::after{
  content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 14px 3px rgba(201,162,75,0.7);
}
.cup-orbit::before{ top:-3px; left:50%; }
.cup-orbit::after{ bottom:-3px; left:50%; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

.ritual-photo-stage{ position:relative; width:100%; height:100%; perspective:1400px; }
.ritual-photo-shadow{
  position:absolute; bottom:20px; left:50%; width:200px; height:30px;
  background:radial-gradient(ellipse, rgba(0,0,0,0.65), transparent 70%);
  transform:translateX(-50%); filter:blur(6px);
}
.ritual-photo{
  position:absolute; top:40px; left:50%; width:230px; height:auto; margin-left:-115px;
  border-radius:8px; border:1px solid rgba(201,162,75,0.4);
  box-shadow:0 30px 60px rgba(0,0,0,0.65);
  opacity:0; transform:rotateY(-14deg) translateY(10px); transform-style:preserve-3d;
  transition:opacity .5s ease, transform .6s ease;
  pointer-events:none;
}
.ritual-photo.active{ opacity:1; transform:rotateY(0deg) translateY(0); }

.ritual-progress{
  position:absolute; right:6vw; top:50%; transform:translateY(-50%); width:2px; height:200px;
  background:rgba(201,162,75,0.15); z-index:4;
}
.ritual-progress-fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--gold); }

@media (max-width:900px){
  .ritual-caption{ left:6vw; max-width:220px; }
  .ritual-caption h3{ font-size:24px; }
  .cup-stage{ width:220px; height:340px; }
  .ritual-photo{ width:170px; margin-left:-85px; }
}

/* ---------- ORIGIN ---------- */
.origin-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); max-width:1200px; margin:0 auto; }
.origin-card{
  background:var(--black-2); padding:44px 30px; transition:background .4s ease;
}
.origin-card:hover{ background:var(--black-3); }
.origin-num{ font-family:var(--serif); font-size:36px; color:var(--gold-dark); }
.origin-card h3{ font-family:var(--serif); font-size:26px; font-weight:500; margin:14px 0 12px; color:var(--cream); }
.origin-card h3 em{ display:block; font-style:italic; color:var(--gold); font-size:18px; }
.origin-card p{ font-size:14px; color:rgba(237,227,207,0.6); line-height:1.6; }

@media (max-width:900px){ .origin-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .origin-grid{ grid-template-columns:1fr; } }

/* ---------- STORY (cinematic video) ---------- */
.story{ height:100vh; padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.story-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.5) saturate(0.9); }
.story-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,6,0.9), rgba(10,8,6,0.2)); }
.story-text{ position:relative; z-index:2; text-align:center; max-width:800px; padding:0 20px; }
.story-text h2{ font-family:var(--serif); font-size:clamp(30px,5vw,58px); font-weight:500; line-height:1.2; color:var(--cream); margin-top:14px; }

/* ---------- CRAFT (vertical gallery) ---------- */
.craft-grid{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; max-width:1200px; margin:0 auto; }
.craft-card{
  position:relative; width:280px; aspect-ratio:9/16; border-radius:6px; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,0.6); transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.craft-card:hover{ transform:translateY(-14px); }
.craft-card video{ width:100%; height:100%; object-fit:cover; filter:saturate(0.9) brightness(0.85); }
.craft-frame{ position:absolute; inset:12px; border:1px solid rgba(201,162,75,0.5); border-radius:3px; pointer-events:none; }
.craft-label{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--sans); letter-spacing:0.2em; font-size:12px; text-transform:uppercase; color:var(--gold-light);
  padding:8px 18px; border:1px solid var(--gold); background:rgba(10,8,6,0.5); backdrop-filter:blur(6px);
}

/* ---------- OBJECT / PACKAGING ---------- */
.object-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:60px 50px; max-width:940px; margin:0 auto; text-align:center; }
.object-item h4{ font-family:var(--serif); font-size:22px; font-weight:500; margin-top:34px; color:var(--cream); }
.object-item p{ font-size:14px; color:rgba(237,227,207,0.6); margin-top:8px; }
.tilt-wrap{ position:relative; display:flex; align-items:center; justify-content:center; height:340px; perspective:1000px; }
.tilt-wrap::before{
  content:''; position:absolute; left:50%; bottom:14%; width:240px; height:180px;
  transform:translateX(-50%); border-radius:50%; z-index:-1; filter:blur(6px);
  background:radial-gradient(ellipse, rgba(201,162,75,0.14), transparent 72%);
}
.pack-card .tilt-wrap::before{ width:190px; height:150px; }

/* ===== BAG — real 3D stand-up pouch (5-face box) ===== */
.bag3d{ position:relative; width:180px; height:250px; margin:0 auto; }
.bag-shadow-ground{
  position:absolute; bottom:-26px; left:50%; width:150px; height:26px;
  background:radial-gradient(ellipse, rgba(0,0,0,0.65), transparent 72%);
  transform:translateX(-50%); filter:blur(5px); z-index:-1;
}
.bag-shadow-ground::after{
  content:''; position:absolute; inset:6px 30px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 75%); filter:blur(1px);
}
.bag-cube{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transform:rotateY(-28deg) rotateX(3deg);
  animation:bagFloat 6s ease-in-out infinite;
}
@keyframes bagFloat{
  0%,100%{ transform:rotateY(-28deg) rotateX(3deg) translateY(0); }
  50%{ transform:rotateY(-28deg) rotateX(3deg) translateY(-9px); }
}
.bag-face{ position:absolute; backface-visibility:hidden; border-radius:4px 4px 30px 30px; }

.bag-f-front{
  width:180px; height:250px; left:0; top:0; transform:translateZ(23px);
  background:linear-gradient(150deg, #221c15 0%, #14100b 45%, #050403 100%);
  border:1px solid rgba(201,162,75,0.4);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.06), inset 0 0 50px rgba(0,0,0,0.4);
  overflow:hidden;
}
.bag-f-back{
  width:180px; height:250px; left:0; top:0; transform:rotateY(180deg) translateZ(23px);
  background:linear-gradient(150deg,#0c0906,#030202);
  border:1px solid rgba(201,162,75,0.15);
}
.bag-f-left{
  width:46px; height:250px; left:67px; top:0; transform:rotateY(-90deg) translateZ(90px);
  background:linear-gradient(90deg,#050403,#100d09 60%,#050403);
}
.bag-f-right{
  width:46px; height:250px; left:67px; top:0; transform:rotateY(90deg) translateZ(90px);
  background:linear-gradient(270deg,#050403,#0d0a07 60%,#050403);
}
.bag-f-top{
  width:180px; height:46px; left:0; top:102px; transform:rotateX(90deg) translateZ(125px);
  background:linear-gradient(180deg,#1e1912,#0d0a07); border:1px solid rgba(201,162,75,0.3);
  display:flex; align-items:center; justify-content:center;
}
.bag-top-stitch{ position:absolute; inset:6px; border:1px dashed rgba(201,162,75,0.4); border-radius:2px; pointer-events:none; }
.bag-seal{
  position:relative; z-index:2; width:24px; height:24px; border-radius:50%; transform:rotate(-6deg);
  background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold-dark) 75%);
  box-shadow:0 3px 8px rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:12px; color:#2a1c08;
}
.bag-valve{
  position:absolute; top:26px; left:50%; transform:translateX(-50%); width:14px; height:14px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%,#3a3226,#050403 75%);
  border:1px solid var(--gold-dark); z-index:2;
}
.bag-stripe{
  position:absolute; top:56px; left:0; right:0; height:3px; z-index:2;
  background:var(--accent, var(--gold-dark)); opacity:0.9;
  box-shadow:0 0 10px var(--accent, rgba(201,162,75,0.4));
}
.bag-content{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.bag-f-front::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.7; z-index:1;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 6px),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px);
  background-size:auto, 3px 3px;
}
.bag-monogram{ font-family:var(--serif); font-size:42px; color:var(--gold); text-shadow:0 0 14px rgba(201,162,75,0.4); }
.bag-word{ font-family:var(--sans); letter-spacing:0.25em; font-size:13px; color:var(--cream); }
.bag-script{ font-family:var(--script); font-size:22px; color:var(--gold); margin-top:-4px; }
.bag-origin{ font-size:8px; letter-spacing:0.15em; color:rgba(237,227,207,0.55); margin-top:16px; }
.bag-foot{ position:absolute; bottom:16px; font-size:7px; letter-spacing:0.2em; color:rgba(201,162,75,0.6); }
.bag-sheen{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.12) 45%, transparent 62%);
}
.bag-sheen::after{
  content:''; position:absolute; top:0; left:0; right:0; height:34%;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
}

/* real photo product frames */
.photo-frame{
  position:relative; width:220px; height:300px; border-radius:8px; overflow:hidden;
  border:1px solid rgba(201,162,75,0.4);
  box-shadow:0 30px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,0,0,0.4);
  transition:transform .3s ease;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.photo-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.5);
  background:linear-gradient(180deg, rgba(0,0,0,0.05), transparent 20%, transparent 70%, rgba(0,0,0,0.25));
}
.pack-card .photo-frame{ width:210px; height:280px; }
.object-item .photo-frame{ width:240px; height:300px; }

/* mini scroll gallery of the 4 real bags, inside The Object section */
.mini-packs-track{
  display:flex; gap:16px; align-items:center; height:340px; padding:0 14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
}
.mini-packs-track::-webkit-scrollbar{ display:none; }
.mini-packs-track .photo-frame.mini{
  flex:0 0 auto; width:170px; height:230px; scroll-snap-align:center;
}

/* origin bag color accents */
.bag--sumatra{ --accent:#c14d4d; }
.bag--java{ --accent:#5a9a68; }
.bag--sulawesi{ --accent:#d99a3f; }
.bag--bali{ --accent:#3fa9a4; }

/* ===== ESPRESSO CUP — realistic cylindrical shading ===== */
.cup-mock-scene{ position:relative; width:170px; height:220px; margin:0 auto; perspective:800px; }
.cup-mock{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  animation:cupFloat 6s ease-in-out infinite;
}
@keyframes cupFloat{ 0%,100%{ transform:translateY(0) rotateY(0deg);} 50%{ transform:translateY(-8px) rotateY(0deg);} }
.cup-mock-body{
  position:relative; width:150px; height:105px; margin:0 auto; border-radius:0 0 74px 74px;
  background:linear-gradient(90deg, #050403 0%, #221c14 18%, #3a2f1e 32%, #221c14 48%, #050403 62%, #0c0906 100%);
  border:1px solid rgba(201,162,75,0.35); border-top:none;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow:0 30px 50px rgba(0,0,0,0.6), inset 0 -20px 30px rgba(0,0,0,0.4);
  overflow:hidden;
}
.cup-mock-rim{
  position:relative; width:170px; height:28px; border-radius:50%; margin:0 auto;
  background:linear-gradient(90deg,#0a0806 0%,#241d14 20%,#453723 38%,#c9a24b 50%,#453723 62%,#241d14 80%,#0a0806 100%);
  border:1px solid var(--gold); box-shadow:inset 0 4px 8px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  z-index:2;
}
.cup-mock-rim::after{
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, #4a3a24, #17130e 75%);
}
.cup-mock-band{ position:relative; z-index:2; font-family:var(--sans); font-size:10px; letter-spacing:0.2em; color:var(--gold-light); margin-top:14px; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
.cup-mock-monogram{ position:relative; z-index:2; font-family:var(--serif); font-size:26px; color:var(--gold-light); margin-top:4px; text-shadow:0 2px 4px rgba(0,0,0,0.6); }
.cup-mock-base{ width:66px; height:12px; background:linear-gradient(180deg,#100d09,#050403); margin:0 auto; border-radius:0 0 12px 12px; border:1px solid rgba(201,162,75,0.25); border-top:none; }
.cup-mock-shine{
  position:absolute; top:6px; left:28px; width:20px; height:60px; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.05) 70%, transparent);
  transform:rotate(-10deg); filter:blur(1.5px); pointer-events:none; z-index:3;
}
.cup-mock-shine::after{
  content:''; position:absolute; top:18px; left:76px; width:8px; height:34px; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.16), transparent 75%);
  filter:blur(1px);
}
.cup-mock-saucer{
  width:210px; height:18px; border-radius:50%; margin:12px auto 0;
  background:linear-gradient(180deg,#1c1712,#0a0806);
  border:1px solid rgba(201,162,75,0.3);
  box-shadow:0 24px 36px rgba(0,0,0,0.65), inset 0 2px 4px rgba(255,255,255,0.05);
}
.cup-mock-steam{
  position:absolute; top:-46px; left:50%; width:3px; height:44px; margin-left:-1px; border-radius:50%;
  background:linear-gradient(180deg, rgba(237,227,207,0.4), transparent); filter:blur(2px);
  opacity:0; animation:cupSteam 4s ease-in infinite;
}
@keyframes cupSteam{
  0%{ transform:translateY(0) scaleX(1); opacity:0; }
  25%{ opacity:0.5; }
  100%{ transform:translateY(-40px) scaleX(2); opacity:0; }
}

/* ===== GIFT CARTON — 3D box ===== */
.carton-scene{ perspective:900px; }
.carton-shadow-ground{
  position:absolute; bottom:-30px; left:50%; width:170px; height:26px;
  background:radial-gradient(ellipse, rgba(0,0,0,0.6), transparent 72%);
  transform:translateX(-50%); filter:blur(5px); z-index:-1;
}
.carton{
  position:relative; width:150px; height:150px; transform-style:preserve-3d;
  transform:rotateX(-18deg) rotateY(28deg);
  animation:cartonFloat 6s ease-in-out infinite;
}
@keyframes cartonFloat{
  0%,100%{ transform:rotateX(-18deg) rotateY(28deg) translateY(0); }
  50%{ transform:rotateX(-18deg) rotateY(28deg) translateY(-8px); }
}
.carton-face{ position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; }
.carton-front{
  width:150px; height:150px; background:linear-gradient(155deg,#1c1712,#0a0806 70%);
  border:1px solid rgba(201,162,75,0.35); transform:translateZ(75px);
  font-family:var(--sans); letter-spacing:0.2em; font-size:14px; color:var(--gold-light); flex-direction:column; gap:4px;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.05);
}
.carton-front span{ font-family:var(--script); font-size:20px; letter-spacing:0; color:var(--gold); }
.carton-side{
  width:150px; height:150px; background:linear-gradient(155deg,#120e0a,#040302);
  border:1px solid rgba(201,162,75,0.25); transform:rotateY(90deg) translateZ(75px);
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.carton-side span{
  writing-mode:vertical-rl; font-family:var(--sans); font-size:8px; letter-spacing:0.2em;
  color:rgba(201,162,75,0.55); text-transform:uppercase;
}
.carton-bottom{
  width:150px; height:150px; background:#020201; transform:rotateX(-90deg) translateZ(75px);
}
.carton-top{
  width:150px; height:150px; transform:rotateX(90deg) translateZ(75px);
  background:linear-gradient(155deg,#241d15,#0e0b08);
  border:1px solid var(--gold); box-shadow:0 6px 18px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.18);
}
.carton-n{ font-family:var(--serif); font-weight:700; font-size:16px; color:#2a1c08; position:relative; z-index:2; }
.carton-ribbon-v, .carton-ribbon-h{
  position:absolute; background:linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  box-shadow:0 2px 6px rgba(0,0,0,0.4); z-index:1;
}
.carton-ribbon-v{ top:0; bottom:0; left:50%; width:12px; margin-left:-6px; }
.carton-ribbon-h{ left:0; right:0; top:50%; height:12px; margin-top:-6px; }
.carton-bow{
  position:absolute; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold-dark) 75%);
  box-shadow:0 3px 10px rgba(0,0,0,0.5); z-index:1;
}

@media (max-width:900px){
  .object-grid{ grid-template-columns:1fr; gap:80px; }
}

/* ---------- FOUR ORIGINS / PACKS SHOWCASE ---------- */
.packs{ background:var(--black-2); padding-top:110px; padding-bottom:80px; }
.packs-wrap{ position:relative; max-width:1300px; margin:0 auto; display:flex; align-items:center; gap:10px; }

.packs-track{
  display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:20px 10px 30px; scrollbar-width:none; flex:1;
}
.packs-track::-webkit-scrollbar{ display:none; }

.pack-card{
  flex:0 0 auto; width:280px; scroll-snap-align:center; text-align:center;
  padding:0 30px; opacity:0.35; transform:scale(0.88);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.pack-card.active{ opacity:1; transform:scale(1); }
.pack-card .tilt-wrap{ height:280px; }
.pack-num{ font-family:var(--serif); font-size:14px; color:var(--gold-dark); letter-spacing:0.2em; }
.pack-card h4{ font-family:var(--serif); font-size:22px; font-weight:500; color:var(--cream); margin-top:10px; }
.pack-card h4 em{ font-style:italic; color:var(--gold); display:block; font-size:16px; }
.pack-card p{ margin-top:8px; font-size:12px; letter-spacing:0.05em; color:rgba(237,227,207,0.55); }

.packs-arrow{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--gold);
  background:transparent; color:var(--gold-light); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .35s ease, color .35s ease;
}
.packs-arrow:hover{ background:var(--gold); color:var(--black); }

.packs-progress{ display:flex; justify-content:center; gap:10px; margin-top:10px; }
.packs-progress span{
  width:7px; height:7px; border-radius:50%; background:rgba(201,162,75,0.3); cursor:pointer;
  transition:background .35s ease, transform .35s ease;
}
.packs-progress span.active{ background:var(--gold); transform:scale(1.3); }

@media (max-width:900px){
  .packs-arrow{ display:none; }
  .pack-card{ width:240px; }
}

/* ---------- QUOTE ---------- */
.quote{ text-align:center; background:var(--black-2); padding:160px 6vw; }
.quote-mark{ font-family:var(--serif); font-size:100px; color:var(--gold-dark); line-height:0.5; opacity:0.6; }
.quote blockquote{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.6vw,44px); line-height:1.5; max-width:900px; margin:0 auto; color:var(--cream); }
.quote blockquote em{ font-style:italic; color:var(--gold); }
.quote-attr{ margin-top:28px; font-family:var(--sans); font-size:12px; letter-spacing:0.2em; color:rgba(237,227,207,0.5); text-transform:uppercase; }

/* ---------- RESERVE ---------- */
.reserve{ text-align:center; background:radial-gradient(ellipse at center, #16120c, #0a0806 70%); }
.reserve-inner{ max-width:600px; margin:0 auto; }
.reserve h2{ font-family:var(--serif); font-size:clamp(32px,4.5vw,54px); font-weight:500; color:var(--cream); }
.reserve .lede{ margin:20px 0 40px; color:rgba(237,227,207,0.7); font-size:17px; line-height:1.7; }
.reserve-form{ display:flex; gap:0; border:1px solid var(--gold); max-width:460px; margin:0 auto; border-radius:2px; overflow:hidden; }
.reserve-form input{
  flex:1; background:transparent; border:none; padding:16px 20px; color:var(--cream); font-family:var(--body); font-size:15px; outline:none;
}
.reserve-form input::placeholder{ color:rgba(237,227,207,0.4); }
.reserve-form .btn-gold{ margin:0; border:none; border-left:1px solid var(--gold); }

@media (max-width:560px){ .reserve-form{ flex-direction:column; border:none; gap:12px; } .reserve-form input{ border:1px solid var(--gold); } }

/* ---------- FOOTER ---------- */
.footer{ position:relative; padding:100px 6vw 30px; border-top:1px solid var(--line); overflow:hidden; }
.footer-watermark{
  position:absolute; bottom:-60px; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size:22vw; font-weight:600; color:transparent;
  -webkit-text-stroke:1px rgba(201,162,75,0.08); white-space:nowrap; pointer-events:none; line-height:1;
}
.footer-grid{ position:relative; z-index:2; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; max-width:1200px; margin:0 auto 70px; }
.footer-brand p{ margin-top:16px; color:rgba(237,227,207,0.55); font-size:14px; max-width:280px; line-height:1.6; }
.footer-col h5{ font-family:var(--sans); font-size:12px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.footer-col a{ display:block; margin-bottom:12px; font-size:14px; color:rgba(237,227,207,0.65); }
.footer-col a:hover{ color:var(--gold-light); }
.footer-bottom{
  position:relative; z-index:2; display:flex; justify-content:space-between; max-width:1200px; margin:0 auto;
  padding-top:24px; border-top:1px solid var(--line); font-size:12px; color:rgba(237,227,207,0.4); flex-wrap:wrap; gap:10px;
}

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}