/* ============================================================
   Brands.haus — luxury branding studio business card
   Type: Schibsted Grotesk (all-grotesque, tight + confident)
   Palette: paper white + ink, one bold accent (Klein blue default)
   ============================================================ */

:root {
  --paper: #F1F0EC;
  --ink:   #0E0E10;
  --accent: #002FA7;            /* set live by Tweaks */
  --muted: color-mix(in oklab, var(--ink) 46%, var(--paper));
  --hair:  color-mix(in oklab, var(--ink) 14%, var(--paper));
  --ease:  cubic-bezier(.22,.61,.36,1);
  --pad: clamp(20px, 4.5vw, 64px);
}

[data-theme="dark"] {
  --paper: #0C0C0E;
  --ink:   #F1F0EC;
  --muted: color-mix(in oklab, var(--ink) 44%, var(--paper));
  --hair:  color-mix(in oklab, var(--ink) 16%, var(--paper));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 420;
  overflow-x: clip;
  cursor: default;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}

::selection { background: var(--accent); color: var(--paper); }

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

/* content sits above the fixed wave field */
main { position: relative; z-index: 1; }

/* ---------- micro label ---------- */
.kicker {
  font-size: clamp(10px, .82vw, 13px);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   FIXED CHROME
   ============================================================ */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px,2.4vw,26px) var(--pad);
  mix-blend-mode: difference;            /* always legible over content */
}
.topbar a, .topbar span { color: #fff; }
.topbar__mark {
  font-weight: 800; font-size: clamp(15px,1.2vw,18px);
  letter-spacing: -.02em; line-height: 1;
}
.topbar__mark .dot { color: var(--accent); }
.topbar__right { display: flex; gap: clamp(16px,2vw,30px); align-items: center; }
.topbar__right a { position: relative; }
.topbar__right a.email { font-weight: 600; }

/* language switch (EN / PL) — homepage only */
.langswitch {
  display: inline-flex; align-items: center; gap: .55ch;
  font-weight: 600; letter-spacing: .04em;
  font-size: clamp(13px, 1vw, 15px); line-height: 1;
}
.langswitch .lang {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; color: #fff; cursor: pointer;
  opacity: .42; transition: opacity .3s var(--ease);
}
.langswitch .lang:hover { opacity: .8; }
.langswitch .lang.is-active { opacity: 1; cursor: default; }
.langswitch .lang__sep { color: #fff; opacity: .32; font-weight: 500; }

/* scroll progress */
.progress {
  position: fixed; left: 0; bottom: 0; height: 2px; width: 0%;
  background: var(--accent); z-index: 60; will-change: width;
}

/* scene index */
.sceneidx {
  position: fixed; right: var(--pad); bottom: clamp(18px,2.4vw,30px);
  z-index: 50; display: flex; align-items: baseline; gap: .5ch;
  font-weight: 600; letter-spacing: .02em; mix-blend-mode: difference; color:#fff;
}
.sceneidx .cur { font-size: clamp(13px,1vw,15px); }
.sceneidx .sep, .sceneidx .tot { font-size: clamp(10px,.78vw,12px); opacity: .6; }

/* ============================================================
   HERO  (sticky 3D stage)
   ============================================================ */
.hero { position: relative; height: 178vh; }
.hero__sticky {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center;
  perspective: 1300px; perspective-origin: 50% 42%;
  overflow: hidden;
}

/* circular wave field — ripples emanate from the pinned blue dot */
.hero__field {
  position: fixed; inset: 0; z-index: 0;
  opacity: 0; pointer-events: none; will-change: opacity;
  overflow: hidden;
}
.wave-origin {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%) translateY(var(--dy, 0px)) scale(var(--g, 1));
  will-change: transform;
}
.wave-origin .ring {
  position: absolute; left: 0; top: 0;
  width: 30vmin; height: 30vmin; margin: -15vmin 0 0 -15vmin;
  border-radius: 50%;
  border: 1.6px solid var(--accent);
  transform: scale(0); opacity: 0;
  animation: ripple 4.6s var(--ease) infinite;
}
.wave-origin .ring:nth-child(even) { border-color: color-mix(in oklab, var(--ink) 44%, transparent); }
.wave-origin .ring:nth-child(1) { animation-delay: 0s; }
.wave-origin .ring:nth-child(2) { animation-delay: -.767s; }
.wave-origin .ring:nth-child(3) { animation-delay: -1.533s; }
.wave-origin .ring:nth-child(4) { animation-delay: -2.3s; }
.wave-origin .ring:nth-child(5) { animation-delay: -3.067s; }
.wave-origin .ring:nth-child(6) { animation-delay: -3.833s; }
/* the pinned source dot */
.wave-origin .dot {
  position: absolute; left: 0; top: 0;
  width: var(--dotsize, 20px); height: var(--dotsize, 20px);
  margin: calc(var(--dotsize, 20px) / -2) 0 0 calc(var(--dotsize, 20px) / -2);
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 34px 7px color-mix(in oklab, var(--accent) 55%, transparent);
  animation: dotpulse 2.1s ease-in-out infinite;
}
@keyframes ripple {
  0%   { transform: scale(0);   opacity: 0; }
  8%   { opacity: .8; }
  70%  { opacity: .22; }
  100% { transform: scale(5.2); opacity: 0; }
}
@keyframes dotpulse {
  0%, 100% { transform: scale(.8); }
  50%      { transform: scale(1.2); }
}

/* one-shot wave burst from the outro dot — fires once on reaching the bottom */
.outro__field {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.wave-burst {
  position: absolute; left: 0; top: 0;
  will-change: transform;
}
.wave-burst .ring {
  position: absolute; left: 0; top: 0;
  width: 30vmin; height: 30vmin; margin: -15vmin 0 0 -15vmin;
  border-radius: 50%;
  border: 1.6px solid var(--accent);
  transform: scale(0); opacity: 0;
}
.wave-burst .ring:nth-child(even) { border-color: color-mix(in oklab, var(--ink) 44%, transparent); }
/* play exactly once, only while armed */
.outro__field.is-burst .wave-burst .ring {
  animation: ripple-once 4.06s var(--ease) 1 both;
}
.outro__field.is-burst .wave-burst .ring:nth-child(1) { animation-delay: 0s; }
.outro__field.is-burst .wave-burst .ring:nth-child(2) { animation-delay: .22s; }
.outro__field.is-burst .wave-burst .ring:nth-child(3) { animation-delay: .45s; }
.outro__field.is-burst .wave-burst .ring:nth-child(4) { animation-delay: .67s; }
.outro__field.is-burst .wave-burst .ring:nth-child(5) { animation-delay: .90s; }
.outro__field.is-burst .wave-burst .ring:nth-child(6) { animation-delay: 1.12s; }
@keyframes ripple-once {
  0%   { transform: scale(0); opacity: 0; }
  6%   { opacity: .85; }
  92%  { opacity: 0; }
  100% { transform: scale(8.5); opacity: 0; }
}

.stage { position: relative; z-index: 2; transform-style: preserve-3d; will-change: transform; }

.wordmark {
  transform-style: preserve-3d; will-change: transform, opacity;
  text-align: center; line-height: .82; letter-spacing: -.045em;
  font-weight: 800;
  font-size: clamp(74px, 19vw, 320px);
}
.wordmark .line { display: block; white-space: nowrap; }
.wordmark .ch {
  display: inline-block; transform-style: preserve-3d;
  will-change: transform, opacity;
}
/* the dot is a true circle so its box center == visual center (exact wave origin) */
.wordmark .dot {
  display: inline-block;
  width: .17em; height: .17em; border-radius: 50%;
  background: var(--accent);
  vertical-align: baseline;
  margin-left: .06em;
  color: transparent; text-indent: -9999px; overflow: hidden;
}

/* hero tagline that breathes in then out */
.hero__tag {
  position: absolute; left: 50%; bottom: 12.5vh; transform: translateX(-50%);
  transform-origin: 50% 50%;
  text-align: center; text-wrap: balance; width: min(760px, 86vw);
  font-size: clamp(17px, 1.72vw, 25px); font-weight: 500; line-height: 1.46;
  letter-spacing: -.004em;
  color: color-mix(in oklab, var(--ink) 80%, var(--paper));
  opacity: 0; will-change: opacity, transform;
}

.scrollcue {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.scrollcue .kicker { color: var(--muted); font-size: clamp(16px, 1.31vw, 20.8px); }
.scrollcue .bar { width: 1px; height: 61px; background: var(--hair); position: relative; overflow: hidden; }
.scrollcue .bar::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  animation: cue 2.1s var(--ease) infinite;
}
@keyframes cue { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ============================================================
   STATEMENT
   ============================================================ */
.statement {
  min-height: 70vh; display: grid; align-content: start;
  padding: 15vh var(--pad) 8.75vh;
  max-width: 1500px; margin: -15vh auto 0;
  position: relative; z-index: 1;
}
.statement .kicker { color: var(--accent); margin-bottom: clamp(28px,4vw,52px); opacity: 0; }
.statement h2 {
  font-weight: 700; letter-spacing: -.03em; line-height: .98;
  font-size: clamp(34px, 5.4vw, 92px); max-width: 16ch;
  text-wrap: balance;
}
.statement h2 .reveal-w { display: inline-block; overflow: hidden; vertical-align: top; }
.statement h2 .reveal-w > span { display: inline-block; will-change: transform; transform: translateY(110%); }
.statement h2 em { font-style: normal; color: var(--accent); }

/* ============================================================
   SERVICES  (kinetic Z-depth rows)
   ============================================================ */
.services { padding: 5vh var(--pad) 6.25vh; }
.services__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--hair); padding-bottom: 22px; margin-bottom: clamp(10px,2vw,26px);
  gap: 24px; flex-wrap: wrap;
}
.services__head .kicker { color: var(--muted); }
.services__head p { color: var(--muted); max-width: 30ch; font-size: clamp(14px,1.05vw,17px); }

.svc-list { perspective: 1100px; }
.svc {
  position: relative; display: grid;
  grid-template-columns: clamp(46px,5vw,86px) 1fr auto;
  align-items: center; gap: clamp(14px,2.4vw,40px);
  padding: clamp(26px,4.2vw,56px) 0;
  border-bottom: 1px solid var(--hair);
  transform-style: preserve-3d; will-change: transform, opacity;
  cursor: pointer;
}
.svc__num { font-size: clamp(12px,1vw,15px); font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.svc__title {
  font-weight: 760; letter-spacing: -.035em; line-height: .92;
  font-size: clamp(34px, 6.6vw, 118px);
  transition: color .45s var(--ease), transform .55s var(--ease);
}
.svc__meta { text-align: right; max-width: 40ch; }
.svc__meta p { color: color-mix(in oklab, var(--ink) 72%, var(--paper)); font-size: clamp(15px,1.32vw,21px); line-height: 1.45; }
.svc__meta .tags { margin-top: 14px; display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
.svc__meta .tag {
  font-size: clamp(12px,.95vw,14px); letter-spacing: .03em; color: color-mix(in oklab, var(--ink) 60%, var(--paper));
  border: 1px solid var(--hair); border-radius: 100px; padding: 6px 14px; white-space: nowrap;
}
/* hover: accent wash */
.svc::before {
  content: ""; position: absolute; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1);
  top: 0; bottom: 0; background: var(--accent);
  transform: scaleY(0); transform-origin: bottom; z-index: -1;
  transition: transform .5s var(--ease);
}
/* JS-driven active state (mobile: tracks viewport centre) — works on any device */
.svc.is-active::before { transform: scaleY(1); }
.svc.is-active .svc__title { color: var(--paper); transform: translateX(clamp(10px,1.6vw,28px)); }
.svc.is-active .svc__num,
.svc.is-active .svc__meta p { color: color-mix(in oklab, var(--paper) 80%, var(--accent)); }
.svc.is-active .svc__meta .tag { border-color: color-mix(in oklab, var(--paper) 50%, transparent); color: var(--paper); }
/* desktop pointer hover — unchanged, but excluded from touch so taps don't stick */
@media (hover: hover) and (pointer: fine) {
  .svc:hover::before { transform: scaleY(1); }
  .svc:hover .svc__title { color: var(--paper); transform: translateX(clamp(10px,1.6vw,28px)); }
  .svc:hover .svc__num,
  .svc:hover .svc__meta p { color: color-mix(in oklab, var(--paper) 80%, var(--accent)); }
  .svc:hover .svc__meta .tag { border-color: color-mix(in oklab, var(--paper) 50%, transparent); color: var(--paper); }
}

/* ============================================================
   CONTACT / OUTRO
   ============================================================ */
.outro {
  min-height: 80vh; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 10vh var(--pad) clamp(34px,7vh,72px);
  perspective: 1100px;
  position: relative;
}
.outro .kicker { color: var(--accent); margin-bottom: clamp(24px,3vw,40px); }
.outro__big {
  font-weight: 800; letter-spacing: -.05em; line-height: .84;
  font-size: clamp(52px, 12.5vw, 210px); transform-style: preserve-3d; will-change: transform;
  max-width: 100%;
}
.outro__big .dot { color: var(--accent); }
.outro__cta {
  position: absolute; left: var(--pad); bottom: clamp(34px,7vh,72px);
  display: flex; align-items: center; gap: clamp(20px,3vw,48px); flex-wrap: wrap;
}
.mailbtn {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: clamp(20px,2.4vw,40px); font-weight: 700; letter-spacing: -.025em;
  padding-bottom: 8px; border-bottom: 2px solid var(--ink);
  transition: gap .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.mailbtn .arw { transition: transform .45s var(--ease); display: inline-block; }
.mailbtn:hover { color: var(--accent); border-color: var(--accent); gap: 26px; }
.mailbtn:hover .arw { transform: translate(6px,-6px); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: clamp(28px,4vw,52px) var(--pad);
  border-top: 1px solid var(--hair); gap: 24px; flex-wrap: wrap;
  font-size: clamp(12px,.95vw,15px); color: var(--muted);
}
.foot__links { display: flex; gap: clamp(14px,2vw,28px); }
.foot__links a { position: relative; }
.foot__links a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background: var(--ink); transition: right .35s var(--ease);
}
.foot__links a:hover::after { right: 0; }
.foot__copy .dot { color: var(--accent); font-weight: 800; }

/* ============================================================
   reduced motion / responsive
   ============================================================ */
@media (max-width: 760px) {
  .svc { grid-template-columns: 1fr; gap: 14px; }
  .svc__meta { text-align: left; }
  .svc__meta .tags { justify-content: flex-start; }
  /* don't shove the title sideways on touch — it caused horizontal overflow */
  .svc:hover .svc__title,
  .svc.is-active .svc__title { transform: none; }
  .services__head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .scrollcue .bar::after { animation: none; }
}