/* Visual Addicts — production stylesheet (design tokens + page styles) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Archivo+Expanded:wght@600;700&display=swap');

:root{
  /* base palette */
  --black:#050403;
  --black-soft:#0d0b09;
  --ivory:#f6f1e7;
  --white:#ffffff;
  --gold-1:#e7aa51;
  --gold-2:#ffe499;
  --gold-3:#8d5a1b;
  --gold-4:#ac7031;
  --bronze:#805a16;
  --ember-1:#ff7a3c;
  --ember-2:#ffce81;
  --hairline:rgba(246,241,231,0.14);
  --hairline-gold:rgba(231,170,81,0.35);
  /* semantic */
  --surface-page:var(--black);
  --surface-raised:var(--black-soft);
  --text-primary:var(--ivory);
  --text-muted:rgba(246,241,231,0.58);
  --text-on-gold:var(--black);
  --border-default:var(--hairline);
  --border-accent:var(--hairline-gold);
  --link-default:var(--gold-1);
  --link-hover:var(--ember-1);
  /* gradients */
  --gradient-gold:linear-gradient(180deg,#e7aa51 0%,#ffe499 25%,#8d5a1b 55%,#e7aa51 78%,#ac7031 100%);
  --gradient-ember:linear-gradient(45deg,#ff7a3c 0%,#ffce81 100%);
  /* type */
  --font-display:"Archivo","Archivo Expanded",Helvetica,Arial,sans-serif;
  --font-body:"Archivo",Helvetica,Arial,sans-serif;
  --nav-size:17px;
  --nav-size-active:18px;
  --nav-tracking:0.29em;
  --nav-gap:35px;
  --nav-weight:100;
  --eyebrow-size:12px;
  --eyebrow-tracking:0.28em;
  --eyebrow-weight:600;
  --body-size:16px;
  --body-size-lg:19px;
  --body-line:1.6;
  --body-weight:400;
  --caption-size:13px;
  --caption-tracking:0.04em;
  /* spacing */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:144px;
  --radius-0:0px;
  --radius-1:2px;
  --radius-pill:999px;
  --page-margin:clamp(24px,6vw,96px);
  --content-max:1400px;
  /* motion + effects */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:150ms;
  --duration-standard:280ms;
  --glow-gold:0 0 24px rgba(231,170,81,0.25);
  --glow-ember:0 0 24px rgba(255,122,60,0.35);
  --shadow-card:0 24px 60px rgba(0,0,0,0.55);
  color-scheme:dark;
}
@media (max-width:1150px){
  :root{ --nav-tracking:0.05em; --nav-gap:5px; }
}
@media (max-width:850px){
  :root{ --nav-tracking:0.03em; --nav-gap:1px; }
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{background:var(--surface-page);color:var(--text-primary);margin:0;font-family:var(--font-body);}
a{color:var(--gold-1);text-decoration:none;}
a:hover{color:#ffce81;}

/* header */
#site-header{transform:translateY(0);}
#site-header.va-hidden{transform:translateY(-100%);}

/* category nav (matches the CategoryNav component) */
#va-nav{display:flex;gap:var(--nav-gap);justify-content:flex-end;align-items:center;flex-wrap:nowrap;padding:0;}
#va-nav a{
  font-family:var(--font-display);
  font-weight:var(--nav-weight);
  font-size:var(--nav-size);
  letter-spacing:var(--nav-tracking);
  text-transform:uppercase;
  white-space:nowrap;
  background-image:var(--gradient-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.9;
  line-height:1.3;
  transform:scale(1);
  transform-origin:center center;
  transition:transform var(--duration-fast) var(--ease-standard);
}
#va-nav a.active{background-image:var(--gradient-ember);transform:scale(1.06);}
#va-nav:hover a.active:not(:hover){background-image:var(--gradient-gold);transform:scale(1);}
#va-nav a:hover{background-image:var(--gradient-ember);transform:scale(1.06);}

/* commissions gallery hover (zoomed at rest, relaxes on hover) */
#commissions-gallery img{
  transform:scale(1.03);
  transition:transform 250ms cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
#commissions-gallery img:hover{transform:scale(1);}

/* contact links */
.contact-link{
  font-size:18px;line-height:1.7;font-weight:300;text-decoration:none;
  color:rgba(248,245,239,.91);
  transition:font-size 200ms cubic-bezier(.4,0,.2,1);
}
.contact-link:hover{
  background-image:linear-gradient(45deg,#ff7a3c,#ffce81);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:19px;
}

/* lightbox controls */
.lb-ctl{color:var(--gold-1);}
.lb-ctl:hover{color:#ffce81;}

/* clients wall cycling */
@keyframes va-c3a{0%,29%{opacity:1}33%,95%{opacity:0}100%{opacity:1}}
@keyframes va-c3b{0%,29%{opacity:0}33%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes va-c3c{0%,62%{opacity:0}66%,95%{opacity:1}100%{opacity:0}}
@keyframes va-cellfade{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes va-cellfade-b{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}

/* section-header logo fade + gold shimmer */
@keyframes va-hdr-fadein{from{opacity:0}to{opacity:1}}
@keyframes va-shimmer{from{background-position:85% 0}to{background-position:12% 0}}
@keyframes va-shimmer-end{to{background-image:none;background-color:transparent;color:var(--ivory)}}
.va-anim-hdr img{animation:va-hdr-fadein 2880ms ease 500ms both}
.va-anim-hdr h2,.va-anim-shimmer h2{
  background-color:var(--ivory) !important;
  background-image:linear-gradient(100deg,rgba(255,206,129,0) 44%,#ffce81 50%,rgba(255,206,129,0) 56%) !important;
  background-size:300% 100% !important;
  background-repeat:no-repeat !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  animation-name:va-shimmer,va-shimmer-end !important;
  animation-duration:1296ms,1ms !important;
  animation-timing-function:linear,linear !important;
  animation-delay:930ms,2226ms !important;
  animation-iteration-count:1,1 !important;
  animation-fill-mode:both,forwards !important;
}