/* ============================================================================
   scrollcraft.css — Hermark izdanje
   ----------------------------------------------------------------------------
   Trimovana verzija engine stylesheet-a za život UNUTAR postojećeg Tailwind
   SPA-a: zadržani su tokeni (prebrendirani na Hermark) i DEVICE sloj koji
   engine pokreće. Globalni reset, body/html i tipografske pravila su izbačeni
   — njih već nosi index.html + Tailwind. Ne restajluj [data-sc-*] selektore;
   oni su mehanizam, ne ukras.
   ========================================================================== */

:root {
  /* Hermark brend: tamna pozadina, teal akcenat, violet sekundar */
  --sc-canvas:      #080810;
  --sc-surface:     #0f0f1a;
  --sc-ink:         #f0f0f8;
  --sc-ink-soft:    #a0a0c0;
  --sc-accent:      #00e0b0;
  --sc-accent-ink:  #041210;

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  --sc-font-display: "Space Grotesk", "Syne", system-ui, sans-serif;
  --sc-font-text:    "DM Sans", system-ui, sans-serif;
  --sc-font-mono:    "DM Mono", ui-monospace, monospace;

  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(2.9rem, 1.7rem + 4.6vw, 5.4rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.98;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;

  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);

  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  --sc-shadow-color: 244 33% 3%;
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* =============================================================== DEVICES == */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
video[data-sc-scrub].sc-has-clip { opacity: 1; }
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

[data-sc-pan] { display: flex; will-change: transform; }
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ------------------------------------------------ Hermark flight (autorski) --
   Autorski sloj OVOG sajta, ne engine mehanizam: prompt traka koja "generiše"
   scenu, honest-tag i čipovi. */

.flight-prompt {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 var(--sc-5);
  padding: 0.65rem 1.1rem;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink);
  background: rgba(15, 15, 26, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--sc-r-pill);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sc-e2), var(--sc-edge);
  max-width: 100%;
}
.flight-prompt__mark { color: var(--sc-accent); flex: none; }
.flight-prompt::after {
  content: "";
  flex: none;
  align-self: center;
  width: 2px; height: 1.05em;
  margin-left: 0.1em;
  background: var(--sc-accent);
  animation: sc-caret 1s step-end infinite;
}
@keyframes sc-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flight-prompt::after { animation: none; } }

.flight-gen {
  margin: var(--sc-4) 0 0;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent);
}
.flight-gen b { color: var(--sc-accent); font-weight: 500; }

.flight-h {
  font-family: var(--sc-font-display);
  font-weight: 700;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  color: var(--sc-ink);
  margin: 0 0 var(--sc-4);
  text-shadow: 0 1px 3px rgba(8, 8, 16, 0.55), 0 6px 30px rgba(8, 8, 16, 0.55);
}
.flight-h--xl { font-size: var(--sc-t-4xl); }
.flight-h--lg { font-size: var(--sc-t-3xl); }

.flight-p {
  margin: 0;
  max-width: 36rem;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(8, 8, 16, 0.6), 0 4px 22px rgba(8, 8, 16, 0.6);
}
.sc-copy--trail .flight-p { margin-left: auto; }
.sc-copy--center .flight-p { margin-inline: auto; }

.flight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-3);
  margin: var(--sc-5) 0 0;
  padding: 0;
  list-style: none;
}
.sc-copy--trail .flight-chips { justify-content: flex-end; }
.flight-chips li {
  padding: 0.45rem 0.95rem;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.04em;
  color: var(--sc-ink);
  background: rgba(15, 15, 26, 0.6);
  border: 1px solid rgba(0, 224, 176, 0.22);
  border-radius: var(--sc-r-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.flight-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-4);
  margin-top: var(--sc-6);
}
.sc-copy--center .flight-ctas { justify-content: center; }

/* Stakleni panel za copy preko svetlih scena (jutro): garantovan kontrast. */
.flight-panel {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: rgba(8, 8, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--sc-r-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--sc-e3), var(--sc-edge);
}

@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  .sc-scrim--trail, .sc-scrim--lead {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
  .flight-prompt { font-size: 0.72rem; padding: 0.5rem 0.85rem; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  [data-sc-reveal] { clip-path: none !important; }
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
}