/* PALKA shared design tokens + reset + common components
   Loaded first on every page; page-specific styles remain inline */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{background:#080808;color:#fff;font-family:'Inter',sans-serif;overflow-x:hidden;line-height:1.5}
img,picture,video,canvas,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* Design tokens */
:root{
  --black:#080808;
  --cyan:#00C8FF;
  --yellow:#E8FF00;
  --pink:#FF2D78;
  --orange:#FF8C2F;
  --green:#39FF14;
  --purple:#B44FFF;
  --teal:#00E5CC;
  --white:#fff;
  --dim:rgba(255,255,255,0.55);
  --dimmer:rgba(255,255,255,0.35);
  --hairline:rgba(255,255,255,0.08);
  --page-max:1440px;
  --gutter:24px;
  --nav-h:64px;
}

/* Utility */
.sw{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.hairline{height:1px;background:var(--hairline);width:100%}

/* Nav (shared) */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;background:rgba(8,8,8,0.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,200,255,0.1)}
.site-nav .nav-links{display:flex;gap:32px}
.site-nav .nav-links a{color:rgba(255,255,255,0.55);font-size:13px;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;transition:color .2s}
.site-nav .nav-links a:hover{color:var(--cyan)}
.site-nav .nav-cta{background:var(--yellow);color:var(--black);padding:10px 24px;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;border:none;cursor:pointer;transition:transform .15s}
.site-nav .nav-cta:hover{transform:scale(1.04)}

/* Common typography */
.section-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--cyan);margin-bottom:12px;font-weight:600}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:1px;margin-bottom:24px}

/* Buttons */
.btn-primary{background:var(--yellow);color:var(--black);padding:16px 34px;font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:3px;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;white-space:nowrap;display:inline-block;text-decoration:none;position:relative}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(232,255,0,0.25)}
.btn-secondary{border:1.5px solid var(--cyan);color:var(--cyan);padding:14px 28px;font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:3px;background:none;cursor:pointer;transition:all .2s;white-space:nowrap;display:inline-block;text-decoration:none}
.btn-secondary:hover{background:rgba(0,200,255,0.07)}

/* CTA glow (used by main.js) */
.cta-glow{position:relative;overflow:visible}
.cta-glow::before{content:'';position:absolute;inset:-4px;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(232,255,0,0.35),transparent 40%);opacity:0;transition:opacity .2s;pointer-events:none;filter:blur(20px)}
.cta-glow:hover::before{opacity:1}
.cta-glow.secondary::before{background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(0,200,255,0.35),transparent 40%)}

/* Photo cover — new default for any img in a design slot */
.photo{position:relative;overflow:hidden;background:#0a0a0a;isolation:isolate}
.photo picture,.photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.photo--contain img{object-fit:contain;background:transparent}

/* Cutout — no background, drop-shadow via filter */
.cutout img{background:transparent;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5))}

/* Reveal on scroll (motion.dev sets .in-view) */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(0.22,1,0.36,1),transform .8s cubic-bezier(0.22,1,0.36,1)}
.reveal.in-view{opacity:1;transform:none}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Mobile nav collapse */
@media (max-width:900px){
  .site-nav .nav-links{display:none}
  .site-nav{padding:12px 20px}
}
