/* ============================================================
   BLACK ANANAS — site styles
   ============================================================ */
:root{
  --accent:#e3a53c;     /* gold accent — change here to re-theme the whole site */
  --bg:#050505;
  --ink:#f4efe6;
  --muted:#a59c8e;
  --faint:#8a8175;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:#ece9e3;font-family:'Plus Jakarta Sans',sans-serif;overflow-x:hidden;}
img{-webkit-user-drag:none;user-select:none;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#100e0c;}

/* ---- animations ---- */
@keyframes ba-marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@keyframes ba-bounce{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(9px);opacity:1;}}
@keyframes ba-grain{0%{transform:translate(0,0);}10%{transform:translate(-4%,-3%);}30%{transform:translate(3%,-6%);}50%{transform:translate(-5%,4%);}70%{transform:translate(4%,5%);}90%{transform:translate(-3%,2%);}100%{transform:translate(0,0);}}
@keyframes ba-breathe{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.04);}}

/* ---- scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);}
[data-reveal][data-shown="1"]{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){[data-reveal]{transition:none;}}

/* ---- image shots ---- */
.shot img{display:block;width:100%;object-fit:cover;cursor:zoom-in;transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.shot:hover img{transform:scale(1.05);}

/* ---- hover helpers (replace inline :hover) ---- */
.lnk{transition:color .3s;}
.lnk:hover{color:#fff;}
.pill-ghost{transition:border-color .3s,color .3s;}
.pill-ghost:hover{border-color:var(--accent);color:#fff;}
.pill-solid{transition:background .3s,transform .3s;}
.pill-solid:hover{background:var(--accent);transform:translateY(-2px);}

/* ---- contact form ---- */
.field{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(239,233,223,.16);padding:16px 2px;color:#f4efe6;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(16px,1.5vw,19px);font-weight:500;outline:none;transition:border-color .35s;}
.field::placeholder{color:#6b6358;}
.field:focus{border-bottom-color:var(--accent);}
textarea.field{resize:vertical;min-height:96px;line-height:1.6;}
.send-btn{cursor:pointer;border:none;font-family:'Plus Jakarta Sans',sans-serif;}