/* ============================================================
   Studio Nikolaus — motion & polish enhancement layer
   Additive only. Does not change logo, fonts, or colors.
   Reuses existing palette: accent #4A90FF, base #0d0d0d.
   Safe by design: hidden states are applied by JS (class
   .sn-reveal). If the script never runs, nothing is hidden.
   ============================================================ */

:root {
  --sn-accent: #4A90FF;
  --sn-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint — calm, expensive */
  --sn-ease-soft: cubic-bezier(0.33, 0, 0.2, 1);
  --sn-reveal-dur: 0.9s;
}

/* --- App entrance: the whole page settles in gently on load --- */
@keyframes sn-app-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.sn-js #root {
  animation: sn-app-in 0.7s var(--sn-ease-soft) both;
}

/* --- Scroll reveal: base + revealed states -------------------- */
/* Only elements the script has tagged get a hidden start state. */
.sn-reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
  transition:
    opacity var(--sn-reveal-dur) var(--sn-ease),
    transform var(--sn-reveal-dur) var(--sn-ease),
    filter var(--sn-reveal-dur) var(--sn-ease);
  transition-delay: var(--sn-delay, 0ms);
}
.sn-reveal.sn-in {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Media reveals from a touch deeper + a whisper of scale */
img.sn-reveal, video.sn-reveal, figure.sn-reveal, picture.sn-reveal {
  transform: translateY(34px) scale(1.015);
}
img.sn-reveal.sn-in, video.sn-reveal.sn-in,
figure.sn-reveal.sn-in, picture.sn-reveal.sn-in {
  transform: none;
}

/* --- Refined hover / interaction polish ---------------------- */
/* Nav links: quieter at rest, fully present on hover — no color change */
html.sn-js nav a {
  transition: opacity 0.45s var(--sn-ease-soft),
              letter-spacing 0.45s var(--sn-ease-soft);
}
html.sn-js nav a:hover {
  opacity: 1 !important;
  letter-spacing: 0.06em;
}

/* Buttons & CTAs: a soft, weighted lift */
html.sn-js main button,
html.sn-js footer button,
html.sn-js main a[class*="border"] {
  transition: transform 0.5s var(--sn-ease),
              box-shadow 0.5s var(--sn-ease),
              background-color 0.5s var(--sn-ease-soft),
              color 0.5s var(--sn-ease-soft),
              border-color 0.5s var(--sn-ease-soft);
}
html.sn-js main button:hover,
html.sn-js footer button:hover,
html.sn-js main a[class*="border"]:hover {
  transform: translateY(-3px);
}

/* Imagery inside links (products, galleries): slow, cinematic zoom.
   Parent gets clipped so the scale reads as intentional, not sloppy. */
html.sn-js a:has(> img),
html.sn-js a:has(> video),
html.sn-js a:has(> picture) {
  overflow: hidden;
}
html.sn-js a > img,
html.sn-js a > video,
html.sn-js a > picture {
  transition: transform 1.1s var(--sn-ease), filter 1.1s var(--sn-ease);
}
html.sn-js a:hover > img,
html.sn-js a:hover > video,
html.sn-js a:hover > picture {
  transform: scale(1.045);
  filter: brightness(1.06);
}

/* --- Neutral, on-brand system touches ------------------------ */
/* Text selection uses the existing accent, softly */
::selection {
  background: rgba(74, 144, 255, 0.28);
  color: #fff;
}

/* Keyboard focus — accessibility, matched to the accent */
html.sn-js :focus-visible {
  outline: 2px solid var(--sn-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Slim, dark scrollbar that fits the editorial mood */
html.sn-js {
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}
html.sn-js ::-webkit-scrollbar { width: 9px; height: 9px; }
html.sn-js ::-webkit-scrollbar-track { background: transparent; }
html.sn-js ::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 10px;
  border: 2px solid #0d0d0d;
  transition: background 0.3s;
}
html.sn-js ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* --- Respect the user's motion preference -------------------- */
@media (prefers-reduced-motion: reduce) {
  html.sn-js #root { animation: none; }
  .sn-reveal,
  .sn-reveal.sn-in,
  img.sn-reveal, video.sn-reveal, figure.sn-reveal, picture.sn-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  html.sn-js main button:hover,
  html.sn-js footer button:hover,
  html.sn-js a:hover > img,
  html.sn-js a:hover > video {
    transform: none;
  }
}