/* ===== Iris Empire shared styles (gray-site) ===== */
body { font-family: 'Inter', system-ui, sans-serif; }
.font-serif { font-family: 'Cormorant Garamond', serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.pulse-dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.cat-card { transition: transform .35s ease, box-shadow .35s ease; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -22px rgba(41,31,24,.5); }
.age-gate { backdrop-filter: blur(8px); }
.drawer { transition: transform .35s ease; }

/* ===== Cinematic animated hero ===== */
.hero { background:#150e08; }
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-photo { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06); animation:heroZoom 22s ease-in-out infinite alternate; }
@keyframes heroZoom { from{transform:scale(1.06)} to{transform:scale(1.16)} }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,10,6,.88) 0%, rgba(15,10,6,.55) 48%, rgba(15,10,6,.30) 100%); }
.cat-photo { position:relative; height:13rem; background-size:cover; background-position:center; transition: transform .55s ease; }
.cat-card:hover .cat-photo { transform: scale(1.05); }
.cat-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(18,12,7,.92) 4%, rgba(18,12,7,.05) 55%); }
.prod-photo { height:11rem; background-size:cover; background-position:center; transition: transform .55s ease; }
.cat-card:hover .prod-photo { transform: scale(1.04); }
.blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform; }
.blob-1 { width:48vw; height:48vw; left:-12vw; top:-14vw; background:radial-gradient(circle at 30% 30%, #ad524d, transparent 60%); animation:drift1 18s ease-in-out infinite; }
.blob-2 { width:42vw; height:42vw; right:-10vw; top:4vw; background:radial-gradient(circle at 50% 50%, #c98a3f, transparent 62%); animation:drift2 22s ease-in-out infinite; }
.blob-3 { width:40vw; height:40vw; left:26vw; bottom:-16vw; background:radial-gradient(circle at 50% 50%, #4a3424, transparent 60%); animation:drift3 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vw) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,5vw) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,-4vw) scale(1.15)} }
.hero-grain { position:absolute; inset:0; opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(8,5,3,.78) 100%); }
.text-gradient { background:linear-gradient(120deg,#e9b27a,#ad524d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-visual { position:relative; }
.float-bottle { animation:floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.glass-pill { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(10px); color:#f7ede0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border-radius:999px; box-shadow:0 12px 30px -12px rgba(0,0,0,.55); }
.scroll-cue { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:24px; height:40px; border:1.5px solid rgba(255,255,255,.35); border-radius:14px; }
.scroll-cue::before { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:3px; height:8px; background:rgba(255,255,255,.6); border-radius:2px; animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{opacity:0; transform:translate(-50%,0)} 50%{opacity:1; transform:translate(-50%,10px)} }

.cat-icon { transition: transform .5s ease; }
.cat-card:hover .cat-icon { transform: scale(1.08) rotate(-2deg); }

/* header / footer injected */
.nav-link { color: rgba(252,252,252,.80); transition: color .2s; }
.nav-link:hover { color: #ad524d; }
.nav-link.active { color: #ad524d; }

@media (prefers-reduced-motion: reduce) {
  .blob, .float-bottle, .scroll-cue::before, .pulse-dot, .hero-photo { animation:none !important; }
}

/* floating whatsapp + sticky quote bar */
body.has-sticky-bar { padding-bottom: 62px; }
.fab-wa { position:fixed; right:18px; bottom:86px; z-index:80; width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(0,0,0,.5); transition: transform .2s ease; }
.fab-wa:hover { transform: scale(1.07); }
.sticky-bar { position:fixed; left:0; right:0; bottom:0; z-index:79; background:#150e08; border-top:1px solid rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { .fab-wa { transition: none; } }

/* variant chips + faq */
.variant-chip { border:1px solid #e0deda; border-radius:8px; padding:8px 14px; font-size:13px; background:#fff; color:#0e0a07; transition: all .2s ease; }
.variant-chip:hover { border-color:#ad524d; }
.variant-chip.selected { background:#291f18; color:#fcfcfc; border-color:#291f18; }
.faq-item > summary { list-style:none; }
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item[open] > summary > span { transform: rotate(45deg); }
.faq-item > summary > span { display:inline-block; transition: transform .2s ease; }