/* Dječji vrtić Fantazija – shared stylesheet (motion + bespoke bits).
   Layout/utility classes come from assets/tailwind.css (compiled by ./build-tailwind.sh).
   Motion rules ported verbatim from the SPA preview. Everything that hides
   content before a reveal is scoped under .motion (set inline in <head>), so
   pages render fully without JS (crawlers). */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sp: 0;
}
body { font-family: "Nunito", ui-sans-serif, system-ui, sans-serif; }
::selection { background: #38c0da; color: #0f172a; }
[id] { scroll-margin-top: 88px; }

/* Word mask for the hero headline (padding keeps č/ć/j/p un-clipped) */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.14em; margin: -0.06em -0.04em -0.14em; }
.wi { display: inline-block; }

/* Scroll progress "crayon" line under the header */
.scroll-line { transform: scaleX(var(--sp)); transform-origin: left; }
header[data-scrolled] { box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.18); }

/* Polaroid resting tilt (gallery) */
.polaroid { transform: rotate(var(--rest, 0deg)); transition: transform 450ms var(--ease-spring), box-shadow 300ms var(--ease-out); }
.polaroid:hover, .polaroid:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.03); }

/* FAQ disclosure (native <details>, works without JS) */
.faq > summary { list-style: none; cursor: pointer; }
.faq > summary::-webkit-details-marker { display: none; }
.faq[open] { border-color: #1a7b8e; background: #f3fbfd; }
.faq .faq-ico { transition: transform 200ms var(--ease-out), background-color 200ms, color 200ms; }
.faq[open] .faq-ico { background: #1a7b8e; color: #fff; transform: rotate(45deg); }

/* Footprint trail: one variant per breakpoint keeps the stride ~60px */
.trail--sm { display: block; }
.trail--md, .trail--lg { display: none; }
@media (min-width: 768px) {
  .trail--sm { display: none; }
  .trail--md { display: block; }
}
@media (min-width: 1280px) {
  .trail--md { display: none; }
  .trail--lg { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ── Scroll reveals (engine adds .motion on <html>, [data-in] when in view) ── */
  .motion [data-rv] { transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out), clip-path 1000ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .motion [data-rv="up"]:not([data-in]) { opacity: 0; transform: translateY(16px); }
  /* clip lives on the child: IntersectionObserver ignores a target clipped to nothing */
  .motion [data-rv="clip"] > * { clip-path: inset(0 0 0 0); transition: clip-path 1000ms var(--ease-out), transform 1400ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .motion [data-rv="clip"]:not([data-in]) > * { clip-path: inset(100% 0 0 0); transform: scale(1.18); }
  .motion [data-rv="pop"] { transition-timing-function: var(--ease-out), var(--ease-spring); transition-duration: 500ms, 900ms; }
  .motion [data-rv="pop"]:not([data-in]) { opacity: 0; transform: translateY(28px) rotate(var(--r, 0deg)) scale(0.9); }
  .motion [data-rv="eyebrow"] > span { transition: transform 600ms var(--ease-spring); transition-delay: calc(var(--d, 0ms) + 120ms); }
  .motion [data-rv="eyebrow"]:not([data-in]) { opacity: 0; transform: translateX(-10px); }
  .motion [data-rv="eyebrow"]:not([data-in]) > span { transform: scale(0); }

  /* ── Hero intro (plays once on load) ── */
  .motion .h-photo { animation: kenburns 2600ms var(--ease-out) both; }
  .motion .h-veil { animation: veil 1300ms var(--ease-out) both; }
  .motion .wi { animation: wordUp 900ms var(--ease-out) both; animation-delay: calc(260ms + var(--i) * 75ms); }
  .motion .hl { transform-origin: left center; animation: sweep 750ms var(--ease-out) both; animation-delay: 900ms; }
  .motion .star path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 900ms var(--ease-out) 1250ms forwards; }
  .motion .star { animation: twinkle 5s ease-in-out 2.2s infinite; transform-origin: center; }
  .motion .h-in { animation: fadeUp 750ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .motion .sun-rays { animation: spin 60s linear infinite; transform-origin: center; }
  .motion .drift { animation: drift 7s ease-in-out infinite; animation-delay: var(--d, 0ms); }
  .motion .wave-front { animation: waveX 26s linear infinite; }
  .motion .wave-back { animation: waveX 40s linear infinite reverse; }
  .par { transition: transform 900ms var(--ease-out); transform: translate3d(calc(var(--mx, 0) * var(--px, 0px)), calc(var(--my, 0) * var(--py, 0px)), 0); }

  /* ── Footprint trail: little feet walk in, one step at a time ── */
  .motion .trail[data-in] .foot { animation: step 650ms var(--ease-spring) both; animation-delay: calc(var(--i) * 115ms); }
  .motion .trail:not([data-in]) .foot { opacity: 0; }

  /* ── Micro-interactions ── */
  .group:hover .wiggle, .group:focus-visible .wiggle { animation: wiggle 650ms var(--ease-out); }
  .group:hover .nudge, .group:focus-visible .nudge { transform: translateX(4px); }
  .nudge { transition: transform 220ms var(--ease-out); }
  .lb-img { animation: lbIn 420ms var(--ease-out) both; }
  .lb-veil { animation: fadeIn 260ms ease-out both; }
  .plane { animation: plane 1200ms var(--ease-out) both; }
  .check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 600ms var(--ease-out) 650ms forwards; }
  .success-pop { animation: popIn 600ms var(--ease-spring) 550ms both; }
}

@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes veil { from { opacity: 1; } to { opacity: 0; } }
@keyframes wordUp { from { transform: translateY(115%) rotate(4deg); } to { transform: none; } }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes twinkle { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(14deg) scale(1.12); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes waveX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes step { 0% { opacity: 0; transform: var(--t) scale(0.4); } 60% { opacity: 1; transform: var(--t) scale(1.15); } 100% { opacity: 1; transform: var(--t) scale(1); } }
@keyframes wiggle { 0% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.08); } 55% { transform: rotate(7deg) scale(1.04); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
@keyframes lbIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes plane { 0% { transform: translate(-60px, 30px) rotate(-8deg) scale(.7); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(40px, -20px) rotate(6deg) scale(1); opacity: 1; } 100% { transform: translate(140px, -70px) rotate(12deg) scale(.8); opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .polaroid { transform: none; }
}

/* [hidden] must win over Tailwind display utilities (FAQ filter, menus) */
[hidden] { display: none !important; }