@font-face {
  font-family: "Blacker";
  src: url("../fonts/Blacker-Display-Heavy-trial.ttf") format("truetype");
  font-display: swap;
  font-weight: 900;
}

@font-face {
  font-family: "Newake";
  src: url("../fonts/NewakeFont-Demo.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "InterK";
  src: url("../fonts/Inter_18pt-Bold.ttf") format("truetype");
  font-display: swap;
  font-weight: 700;
}

:root {
  --kraken: #DC1F74;
  --ink: #080808;
  --deep: #070708;
  --paper: #ffffff;
  --soft-paper: #f6f3f5;
  --line-contrast: #dc1f74;
  --page-pad: clamp(18px, 4.2vw, 72px);
}


/* =========================================================
   GLOBAL TEXT SELECTION — KREATIVE STUDIO
   Replaces the browser default blue selection.
   ========================================================= */

::selection {
  background: #DC1F74 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

::-moz-selection {
  background: #DC1F74 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.theme-dark ::selection,
.theme-dark::selection,
.theme-light ::selection,
.theme-light::selection {
  background: #DC1F74 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.theme-dark ::-moz-selection,
.theme-dark::-moz-selection,
.theme-light ::-moz-selection,
.theme-light::-moz-selection {
  background: #DC1F74 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

input::selection,
textarea::selection {
  background: var(--kraken);
  color: #ffffff;
}

input::-moz-selection,
textarea::-moz-selection {
  background: var(--kraken);
  color: #ffffff;
}


/* =========================================================
   GLOBAL INTERACTIVE BUTTONS — KREATIVE STUDIO
   OUTLINE SYSTEM:
   - No filled background in the resting state.
   - Border/text contrast depends on the section.
   - Hover/focus fills with Kraken Magenta.
   - Text keeps the subtle zoom interaction.
   ========================================================= */
.brand-button {
  --button-border: var(--kraken);
  --button-fg: var(--kraken);
  --button-hover-bg: var(--kraken);
  --button-hover-fg: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  background: transparent;
  color: var(--button-fg);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: none;
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s ease,
    background-color .28s ease,
    border-color .28s ease,
    color .28s ease;
}

.brand-button__label,
.brand-button__icon {
  display: inline-block;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}

.brand-button:hover,
.brand-button:focus-visible {
  border-color: var(--kraken);
  background: var(--button-hover-bg);
  color: var(--button-hover-fg);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(220,31,116,.22);
}

.brand-button:hover .brand-button__label,
.brand-button:focus-visible .brand-button__label {
  transform: scale(1.11);
}

.brand-button:hover .brand-button__icon,
.brand-button:focus-visible .brand-button__icon {
  transform: translateX(3px) scale(1.08);
}

.brand-button:active {
  transform: translateY(0) scale(.985);
}

/* Dark backgrounds: white outline for maximum contrast. */
.brand-button--dark {
  --button-border: rgba(255,255,255,.92);
  --button-fg: #ffffff;
}

/* Light backgrounds: black outline option for strong neutral contrast. */
.brand-button--ink {
  --button-border: rgba(8,8,8,.78);
  --button-fg: #080808;
}

/* Explicit magenta outline option for light backgrounds. */
.brand-button--magenta {
  --button-border: var(--kraken);
  --button-fg: var(--kraken);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Lenis recommended base styles. Native smooth scroll remains the fallback. */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

body {
  margin: 0;
  background: var(--deep);
  color: #fff;
  overflow-x: clip;
  font-family: InterK, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--kraken);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 999;
  left: 12px;
  top: 12px;
  transform: translateY(-140%);
  padding: 12px 16px;
  background: #fff;
  color: #111;
  border-radius: 999px;
}

.skip-link:focus {
  transform: translateY(0);
}

.motion-lines-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.site {
  position: relative;
  z-index: 1;
}

.theme-dark {
  --line-contrast: #dc1f74;
}

.theme-light {
  --line-contrast: #5d183c;
  color: var(--ink);
}


/* =========================================================
   NON-LINK SERVICE CHIPS — SAME MOTION LANGUAGE AS BUTTONS
   These elements describe services and do not navigate anywhere.
   They remain semantically non-interactive, but visually respond
   to hover/touch with the same outline -> Kraken Magenta system.
   ========================================================= */
.chip-label {
  display: inline-block;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}

.project-tags li,
.case-tags li,
.archive-grid span {
  background: transparent;
  color: #080808;
  cursor: default;
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    background-color .28s ease,
    border-color .28s ease,
    color .28s ease,
    box-shadow .28s ease;
}

.project-tags li:hover,
.project-tags li:active,
.case-tags li:hover,
.case-tags li:active,
.archive-grid span:hover,
.archive-grid span:active {
  border-color: var(--kraken);
  background: var(--kraken);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(220,31,116,.18);
}

.project-tags li:hover .chip-label,
.project-tags li:active .chip-label,
.case-tags li:hover .chip-label,
.case-tags li:active .chip-label {
  transform: scale(1.10);
}