/* ── Custom properties (needed by pseudo-elements & JS) ── */
:root {
  --bg:#0e0b07; --fg:#f0e6d0; --muted:#7a6855; --dim:#1b1308;
  --border:#2a1e12; --card:#161009;
  --accent:oklch(64% 0.18 44); --acc2:oklch(58% 0.11 142);
  --ease:cubic-bezier(0.76,0,0.24,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
a{color:inherit;text-decoration:none;}
body>*{position:relative;z-index:1;}

/* ── Ndebele geometric background ── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 28,0 0,28' fill='%23261508' opacity='0.7'/%3E%3Cpolygon points='80,0 52,0 80,28' fill='%23261508' opacity='0.7'/%3E%3Cpolygon points='0,80 28,80 0,52' fill='%23261508' opacity='0.7'/%3E%3Cpolygon points='80,80 52,80 80,52' fill='%23261508' opacity='0.7'/%3E%3Cpath d='M40 10 L70 40 L40 70 L10 40 Z' fill='none' stroke='%23261508' stroke-width='1'/%3E%3Cpath d='M40 26 L54 40 L40 54 L26 40 Z' fill='%23261508' opacity='0.18'/%3E%3Ccircle cx='40' cy='40' r='2.5' fill='%23261508' opacity='0.25'/%3E%3C/svg%3E");opacity:.7;}
/* ── Grain ── */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.022;}

/* ── Wildlife fixed positions ── */
.wildlife{position:fixed;pointer-events:none;z-index:0;color:var(--accent);}
.w-giraffe{right:-2vw;top:4vh;width:clamp(110px,12vw,200px);opacity:.13;}
.w-gorilla{left:-2vw;bottom:10vh;width:clamp(120px,14vw,220px);opacity:.12;}
.w-zebra{right:0;top:52vh;width:clamp(52px,7vw,90px);opacity:.11;}
.w-mask{left:-2vw;top:36vh;width:clamp(80px,10vw,155px);opacity:.09;}
.w-gazelle{bottom:0;left:50%;transform:translateX(-50%);width:clamp(300px,38vw,520px);opacity:.09;}

/* ── Section safari animals ── */
.sa{
  position:absolute;pointer-events:none;z-index:0;
  filter:brightness(0) saturate(100%) invert(55%) sepia(92%) saturate(850%) hue-rotate(346deg) brightness(103%);
}
@keyframes saFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes saSway{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-6px) rotate(1.8deg);}}
.sa-float{animation:saFloat 9s ease-in-out infinite;}
.sa-sway{animation:saSway 12s ease-in-out infinite;}
@media(max-width:960px){.sa{display:none;}.sa-always{display:block;}}

/* ── Custom cursor ── */
#cur{position:fixed;width:10px;height:10px;background:var(--fg);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s;mix-blend-mode:difference;}
#cur-r{position:fixed;width:40px;height:40px;border:1px solid rgba(240,230,208,.28);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .4s var(--ease),height .4s var(--ease),opacity .3s,border-color .3s;}
body.ch #cur{width:6px;height:6px;}
body.ch #cur-r{width:70px;height:70px;border-color:var(--accent);}
body.cl #cur{width:60px;height:60px;background:var(--accent);}
body.cl #cur-r{opacity:0;}

/* ── Progress bar ── */
#prog{position:fixed;top:0;left:0;height:1px;background:var(--accent);z-index:1001;width:0;}

/* ── Keyframes ── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes sd{0%{top:-100%}100%{top:100%}}
@keyframes mrq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Pseudo-element content ── */
nav::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,11,7,.97) 0%,transparent 100%);z-index:-1;pointer-events:none;}
#home::before{content:'';position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom,transparent,var(--accent),transparent);opacity:.35;}
.n-avail::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc2);animation:blink 2.5s infinite;}
.pf-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--acc2);animation:blink 1.8s infinite;}
.s-label::after{content:'';height:1px;width:40px;background:var(--border);}
.pc-status.wip::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);animation:blink 1.5s infinite;}
#contact::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 24px,var(--border) 24px,var(--border) 26px,var(--acc2) 26px,var(--acc2) 50px,var(--border) 50px,var(--border) 52px,#7a5c1e 52px,#7a5c1e 76px,var(--border) 76px,var(--border) 78px);}

/* ── Hero title slide-up ── */
.h-line span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease);}
.h-line span.vis{transform:translateY(0);}

/* ── Scroll indicator ── */
.s-line{width:1px;height:60px;background:var(--border);position:relative;overflow:hidden;}
.s-line::after{content:'';position:absolute;top:-100%;width:100%;height:100%;background:var(--accent);animation:sd 2.2s var(--ease) infinite;}

/* ── Marquee ── */
.mqt{display:flex;white-space:nowrap;animation:mrq 32s linear infinite;}

/* ── Pata Pro screen overlay + image filter ── */
.pf-screen{position:relative;background:var(--card);overflow:hidden;}
.pf-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(14,11,7,.65) 100%);pointer-events:none;z-index:1;}
.pf-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;filter:saturate(0.42) brightness(0.72) contrast(1.14) sepia(0.14);transition:filter .5s var(--ease);}
.pf-screen:hover img{filter:saturate(0.68) brightness(0.85) contrast(1.08) sepia(0.06);}

/* ── Product card: accent bar + image overlay + filter ── */
.pc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);z-index:2;}
.pc:hover::before{transform:scaleX(1);}
.pc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(14,11,7,.72) 100%);pointer-events:none;z-index:1;transition:opacity .5s var(--ease);}
.pc:hover .pc-img::after{opacity:.5;}
.pc-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;filter:saturate(0.38) brightness(0.68) contrast(1.18) sepia(0.18);transition:filter .6s var(--ease),transform .7s var(--ease);}
.pc:hover .pc-img img{filter:saturate(0.65) brightness(0.82) contrast(1.1) sepia(0.06);transform:scale(1.025);}
.pc:hover .pc-link-icon{background:var(--accent);border-color:var(--accent);color:var(--bg);}

/* ── Magnetic button fill ── */
.mag-btn::before{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);border-radius:99px;}
.mag-btn:hover::before{transform:scaleX(1);transform-origin:left;}

/* ── Kente strip ── */
.kente{height:5px;background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 22px,var(--border) 22px,var(--border) 24px,var(--acc2) 24px,var(--acc2) 46px,var(--border) 46px,var(--border) 48px,#7a5c1e 48px,#7a5c1e 70px,var(--border) 70px,var(--border) 72px);border-radius:3px;margin-top:3rem;}

/* ── Reveal animation ── */
.rv{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.vis{opacity:1;transform:none;}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ── Child-selector hover effects (can't use Tailwind group here) ── */
.ab-geo-item:hover .ab-geo-dot{background:var(--accent);}
.exp-item{transition:padding-left .4s var(--ease);}
.exp-item:hover{padding-left:.8rem;}
.exp-co a{opacity:.5;transition:opacity .3s;}
.exp-co a:hover{opacity:1;}
.sc li:hover .s-dot{background:var(--accent);}

/* ── Mobile menu ── */
body.menu-open{overflow:hidden;}
#menu-dots{transition:transform .4s var(--ease);}
body.menu-open #menu-dots{transform:rotate(90deg);}
body.menu-open #menu-btn{background:var(--accent);border-color:var(--accent);}
body.menu-open #menu-btn .menu-dot{background:var(--bg);}
#menu-sheet{transition:transform .45s var(--ease);}

/* ── Active sheet link ── */
.sheet-link .animal-icon{
  opacity:0;
  transition:opacity .35s var(--ease);
  filter:brightness(0) saturate(100%) invert(55%) sepia(92%) saturate(850%) hue-rotate(346deg) brightness(103%);
}
.sheet-link:hover .animal-icon{opacity:.3;}
.sheet-link.is-active .animal-icon{opacity:1;}
.sheet-link.is-active .link-num{color:var(--accent);}
.sheet-link.is-active .link-title{color:var(--fg);}

/* ── Responsive ── */
@media(max-width:960px){
  .wildlife,.w-gazelle{display:none;}
}