/* ============================================================
   VIKSE BRUVIK TECHNOLOGY — site styles
   Self-contained: brand tokens + fonts + base + components.
   Plain CSS, no build step. Edit freely in VS Code.
   ============================================================ */

/* ---- Fonts (Sofia Pro) ----------------------------------- */
@font-face { font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-ExtraLight.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-SemiBold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; }

/* ---- Tokens ---------------------------------------------- */
:root {
  /* brand core */
  --lys: #faf0ca;
  --mork: #143b65;
  /* navy ramp */
  --navy-900:#0d2742; --navy-800:#102f51; --navy-700:#143b65; --navy-600:#1d4d80;
  --navy-500:#2c639d; --navy-400:#4d7fb3; --navy-300:#7da3c9; --navy-200:#aec5dd; --navy-100:#d7e2ee;
  /* cream ramp */
  --cream-50:#fdf8e6; --cream-100:#faf0ca; --cream-200:#f1e4b0; --cream-300:#e6d597; --cream-400:#d4c07e;

  --font-sans:"Sofia Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-extralight:200; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:900;

  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-sm:0 4px 12px -6px rgba(13,39,66,.28);
  --shadow-md:0 10px 30px -12px rgba(0,0,0,.45);
  --shadow-lg:0 18px 44px -14px rgba(0,0,0,.55);
  --shadow-xl:0 28px 70px -20px rgba(0,0,0,.6);

  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --container:1120px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --section-y:clamp(3.5rem, 8vw, 7rem);

  --tracking-tight:-0.02em;
  --tracking-wide:0.08em;
  --tracking-wider:0.18em;
  --tracking-brand:0.34em;
}

/* ---- Base ------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--font-sans); font-weight:var(--fw-regular); font-size:16px; line-height:1.5;
  color:var(--navy-800); background:var(--lys);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
img,svg,video { display:block; max-width:100%; }
a { color:var(--mork); text-decoration:none; }
button { font:inherit; color:inherit; }
::selection { background:var(--mork); color:var(--lys); }
:focus-visible { outline:2px solid var(--navy-500); outline-offset:3px; }

/* dark scheme inversion for navy sections */
[data-scheme="dark"] { color:var(--cream-100); }

/* ---- Layout helpers -------------------------------------- */
.container { max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section { padding-top:var(--section-y); padding-bottom:var(--section-y); }
.band-navy { background:var(--mork); color:var(--cream-100); }

/* ---- Type ------------------------------------------------ */
.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-weight:var(--fw-medium); font-size:12px; text-transform:uppercase;
  letter-spacing:var(--tracking-wider); color:var(--navy-300);
}
.eyebrow.rule::before { content:""; width:28px; height:1.5px; background:currentColor; opacity:.6; }
[data-scheme="dark"] .eyebrow { color:var(--navy-200); }

h1,h2,h3 { color:var(--mork); letter-spacing:var(--tracking-tight); line-height:1.06; }
[data-scheme="dark"] h1, [data-scheme="dark"] h2, [data-scheme="dark"] h3 { color:var(--lys); }
.display { font-weight:var(--fw-bold); font-size:clamp(2.5rem, 6vw, 4rem); }
.h2 { font-weight:var(--fw-bold); font-size:clamp(1.75rem, 4vw, 2.5rem); }

/* ---- Buttons --------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; font-size:14px; font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-wide); line-height:1; border-radius:var(--radius-md);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease-soft), color .18s var(--ease-soft),
             border-color .18s var(--ease-soft), transform .18s var(--ease-soft), box-shadow .18s var(--ease-soft);
}
.btn--lg { padding:16px 30px; font-size:16px; }
.btn--sm { padding:9px 16px; font-size:13px; }
.btn:active { transform:translateY(1px); }

.btn--primary { background:var(--mork); color:var(--lys); }
.btn--primary:hover { background:var(--navy-600); box-shadow:var(--shadow-sm); }
.btn--primary:active { background:var(--navy-800); }
.btn--secondary { background:transparent; color:var(--mork); border-color:var(--mork); }
.btn--secondary:hover { background:var(--cream-200); }
.btn--ghost { background:transparent; color:var(--mork); }
.btn--ghost:hover { background:var(--cream-200); }

/* on navy ground */
[data-scheme="dark"] .btn--primary { background:var(--lys); color:var(--mork); }
[data-scheme="dark"] .btn--primary:hover { background:var(--cream-50); }
[data-scheme="dark"] .btn--secondary { color:var(--lys); border-color:var(--lys); }
[data-scheme="dark"] .btn--secondary:hover { background:rgba(250,240,202,.1); }

/* ---- Card ------------------------------------------------ */
.card {
  background:var(--cream-50); border:1px solid var(--navy-100);
  border-radius:var(--radius-lg); padding:2rem;
}
[data-scheme="dark"] .card { background:var(--navy-800); border-color:rgba(250,240,202,.18); }
.card h3 { font-weight:var(--fw-bold); font-size:22px; }
.card p { font-size:14px; line-height:1.6; color:var(--navy-600); margin-top:10px; }
[data-scheme="dark"] .card p { color:var(--navy-200); }

/* ---- Tag ------------------------------------------------- */
.tag {
  display:inline-flex; align-items:center; padding:5px 14px; font-size:12px; font-weight:var(--fw-medium);
  line-height:1.2; border-radius:var(--radius-pill); background:var(--cream-200); color:var(--mork);
}

/* ---- Work tiles ------------------------------------------ */
.work-grid { display:grid; gap:clamp(1.25rem, 3vw, 2.5rem); }
.work-grid.cols-3 { grid-template-columns:repeat(3, 1fr); }
.work-grid.cols-2 { grid-template-columns:repeat(2, 1fr); }
.tile {
  display:block; position:relative; overflow:hidden; border-radius:var(--radius-xs);
  box-shadow:var(--shadow-md); line-height:0; transition:box-shadow .4s var(--ease-soft);
  background:var(--navy-800);
}
.tile:hover { box-shadow:var(--shadow-lg); }
.tile video, .tile .tile-fallback {
  width:100%; aspect-ratio:16/10; object-fit:cover; opacity:.92;
  transition:opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.tile:hover video, .tile:hover .tile-fallback { opacity:1; transform:scale(1.03); }
.tile-fallback { display:flex; align-items:flex-end; padding:18px; }
.tile-cap {
  position:absolute; left:0; right:0; bottom:0; padding:44px 18px 16px;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; line-height:1.2;
  background:linear-gradient(to top, rgba(13,39,66,.82), rgba(13,39,66,0));
  opacity:0; transition:opacity .4s var(--ease-soft);
}
.tile:hover .tile-cap { opacity:1; }
.tile-cap .name { color:var(--lys); font-weight:var(--fw-bold); font-size:18px; letter-spacing:var(--tracking-tight); }
.tile-cap .url { color:var(--cream-300); font-size:12px; }

/* ---- Hero with mockup carousel --------------------------- */
.hero { position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; background:var(--lys); }
.hero-slide {
  position:absolute; inset:0; background-size:cover; background-position:68% center;
  opacity:0; will-change:opacity;
  animation:heroSlide 32s ease-in-out infinite;
}
.hero-slide:nth-child(1) { animation-delay:0s; }
.hero-slide:nth-child(2) { animation-delay:8s; }
.hero-slide:nth-child(3) { animation-delay:16s; }
.hero-slide:nth-child(4) { animation-delay:24s; }
/* the beige veil that keeps text legible over the imagery */
.hero-veil { position:absolute; inset:0; z-index:1; background:var(--lys); opacity:.78; }
.hero-content { position:relative; z-index:2; }

/* True crossfade: the incoming slide rises to full opacity ON TOP of the
   outgoing one (z-index handoff), so it blends image-to-image — never dipping
   through the beige ground between them. */
@keyframes heroSlide {
  0%     { opacity:0; z-index:3; }   /* fade in, on top */
  6%     { opacity:1; z-index:3; }
  25%    { opacity:1; z-index:3; }   /* hold on top */
  25.01% { opacity:1; z-index:2; }   /* next slide takes the top to fade in over us */
  31%    { opacity:1; z-index:2; }   /* it has fully covered us */
  31.01% { opacity:0; z-index:1; }   /* drop out invisibly, behind */
  100%   { opacity:0; z-index:1; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-slide { animation:none; }
  .hero-slide:nth-child(1) { opacity:1; }
}

/* ---- Header / nav ---------------------------------------- */
/* Fixed overlay nav: transparent at top, gains a ground on scroll */
header {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
header.scrolled { background:var(--lys); border-bottom-color:var(--navy-100); box-shadow:var(--shadow-sm); }
[data-scheme="dark"] header.scrolled { background:var(--mork); border-bottom-color:rgba(250,240,202,.18); box-shadow:var(--shadow-md); }
.site-nav {
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin:0 auto; padding:24px var(--gutter);
}
.site-nav .logo { height:34px; width:auto; }
.nav-links { display:flex; align-items:center; gap:32px; font-size:14px; font-weight:var(--fw-medium); }
.nav-links a:not(.btn) { color:inherit; }
.nav-links a:not(.btn):hover { color:var(--navy-500); }
[data-scheme="dark"] .nav-links a:not(.btn):hover { color:var(--cream-300); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }

/* ---- Footer ---------------------------------------------- */
.site-footer {
  border-top:1px solid rgba(250,240,202,.18);
  max-width:var(--container); margin:0 auto; padding:40px var(--gutter);
  display:flex; flex-wrap:wrap; gap:24px 48px; justify-content:space-between; align-items:flex-end;
}
.site-footer .logo { height:30px; width:auto; }
.footer-contact { display:flex; flex-direction:column; gap:4px; font-size:14px; text-align:right; }

/* light footer (on cream pages) */
.site-footer.on-cream { border-color:var(--navy-100); }
.site-footer.on-cream .footer-contact { color:var(--navy-600); }
.site-footer.on-cream .footer-contact a { color:var(--mork); }
/* dark footer (on navy pages) */
.site-footer.on-navy .footer-contact { color:var(--navy-200); }
.site-footer.on-navy .footer-contact a { color:var(--cream-300); }
.site-footer.on-navy .footer-contact a:hover { color:var(--lys); }

/* ---- Reveal-on-load (portfolio tiles) -------------------- */
.reveal { opacity:0; transform:translateY(16px) scale(.94); }
.reveal.in { opacity:1; transform:none; transition:opacity .62s var(--ease-pop), transform .62s var(--ease-pop); }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; } }

/* ---- Responsive ------------------------------------------ */
@media (max-width:860px) {
  .work-grid.cols-3 { grid-template-columns:repeat(2,1fr); }
  .nav-links { gap:20px; }
}
@media (max-width:620px) {
  .work-grid.cols-3, .work-grid.cols-2 { grid-template-columns:1fr; }
  .nav-toggle { display:inline-flex; }
  .nav-links {
    position:absolute; top:72px; right:var(--gutter); left:var(--gutter); z-index:40;
    flex-direction:column; align-items:stretch; gap:6px; padding:14px;
    background:var(--cream-50); border:1px solid var(--navy-100); border-radius:var(--radius-md);
    box-shadow:var(--shadow-md); display:none;
  }
  [data-scheme="dark"] .nav-links { background:var(--navy-800); border-color:rgba(250,240,202,.18); }
  .nav-links.open { display:flex; }
  .nav-links a:not(.btn) { padding:8px 6px; }
}