/* Studio Pop — shared styles.
   Pages keep the design's inline styles. This file holds: base, keyframes, state rules
   (hover/focus/active from the design's style-hover/focus/active attributes — these use
   !important on purpose so they beat the inline base values), and a few helpers. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #0E3B42; color: #F1F1F1;
  font-family: Montserrat, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: #00F6ED; text-decoration: none; }
a:hover { color: #FFB2E6; }
input, textarea, button, select { font: inherit; }
::selection { background: #D972FF; color: #0E3B42; }
[hidden] { display: none !important; }

/* keyframes (from the design) */
@keyframes sp-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes sp-drift { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-14px,0) rotate(3deg); } 100% { transform: translate3d(0,0,0) rotate(0deg); } }
@keyframes sp-hang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
@keyframes sp-flicker {
  0%, 100% { opacity: 1; filter: brightness(1) drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
  6% { opacity: .82; filter: brightness(1.25) drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
  8% { opacity: 1; filter: brightness(.9) drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
  11% { opacity: .9; filter: brightness(1.18) drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
  13%, 52% { opacity: 1; filter: brightness(1) drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
  54% { opacity: .86; filter: brightness(1.22) drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
  56% { opacity: 1; filter: brightness(.94) drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
  58% { opacity: 1; filter: brightness(1) drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
}
@keyframes sp-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes sp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sp-twinkle { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes sp-band { from { background-position: 0 0; } to { background-position: 720px 0; } }

/* state rules — one class per style-hover/focus/active value in the design */
.nav-link:hover { color: #00F6ED !important; }
/* Pill buttons: every pill lifts 3px and glows in its own colour.
   --glow-shape is the shadow geometry (small pills vs hero/card), --glow the colour; the base state carries a fully transparent
   shadow of the same shape so the glow fades in rather than snapping on. */
.btn-cta, .btn-foot, .btn-outline { --glow-shape: 0 10px 20px; --glow: rgba(217,114,255,.38); }
.btn-hero, .contact-card { --glow-shape: 0 20px 44px; --glow: rgba(217,114,255,.42); }
.btn-outline { --glow: rgba(0,246,237,.38); border: 2px solid rgba(0,246,237,.5); box-shadow: 0 10px 20px rgba(0,246,237,0); transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; }
.btn-cta:hover, .btn-hero:hover, .btn-foot:hover, .btn-outline:hover, .contact-card:hover { transform: translateY(-3px) !important; box-shadow: var(--glow-shape) var(--glow) !important; }
.btn-cta:hover, .btn-hero:hover, .btn-foot:hover, .contact-card:hover { color: #0E3B42 !important; }
.btn-outline:hover { color: #F1F1F1 !important; border-color: #00F6ED !important; }
.ai-link:hover { background: #D972FF !important; border-color: #0E3B42 !important; color: #0E3B42 !important; transform: translateY(-2px) !important; }
.link-aqua:hover { color: #00F6ED !important; }
.card:hover { transform: translateY(-8px) !important; box-shadow: 0 26px 60px rgba(0,246,237,.22) !important; }
.work-title--aqua:hover { color: #00F6ED !important; }
.work-title--purple:hover { color: #D972FF !important; }
.work-title--pink:hover { color: #FFB2E6 !important; }
.field:focus { border-color: #0E3B42 !important; background: rgba(241,241,241,.5) !important; }
.chip:hover { transform: translateY(-2px) !important; }
.chip.is-on { background: #FFB2E6 !important; }
.btn-submit:hover { background: #F1F1F1 !important; transform: translateY(-2px) !important; }
.btn-submit:active { transform: translateY(0) !important; }
.btn-submit:disabled { opacity: .7; cursor: default; transform: none !important; }

/* helpers */
.pill-err {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: none;
  color: #0E3B42; background: #FFB2E6; padding: 4px 10px; border-radius: 999px; width: fit-content;
}
.pill-err a { color: #0E3B42; text-decoration: underline; }
.visually-hidden {
  position: absolute !important; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Turnstile runs in invisible mode (set in the Cloudflare dashboard): keep the container in the
   form so its hidden input is submitted, but give it no layout footprint. */
.cf-turnstile { position: absolute; width: 0; height: 0; overflow: hidden; }

/* phones: the header row must fit in ~360px, and hero decorations must stay off the text */
@media (max-width: 640px) {
  header { gap: 14px !important; padding-left: 14px !important; padding-right: 14px !important; }
  header > a > span { display: none !important; }            /* wordmark text; the mark stays */
  header nav { gap: 12px !important; }
  header .nav-link { font-size: 12px !important; letter-spacing: .08em !important; }
  header .btn-cta { padding: 10px 16px !important; font-size: 12px !important; letter-spacing: .06em !important; }
  .art-hide-sm { display: none !important; }
  /* hero: content starts just under the header instead of being centred in 88svh; diamond sits beside the logo */
  .hero { min-height: 0 !important; align-items: flex-start !important; padding-top: 104px !important; }
  .hero-diamond { top: 58px !important; right: 6% !important; }
}
@media (max-width: 339px) {
  header .nav-link { display: none !important; }
}

/* reduced motion: no animations, no transitions; site.js also skips parallax/AI bar */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}