/* ============================================================
   Studio Mint · studiomintns.com
   Paleta (knjiga standarda v3.0): belo na menti.
   Oblici: dugmad pilula, površine i slike 18px. Jedna tema.
   ============================================================ */

@import url('../assets/fonts/fonts.css?v=2');

:root {
  --mint:        #5E7C74;  /* primarna podloga */
  --mint-deep:   #567069;  /* kartice, dublje površine */
  --mint-deeper: #4D645E;  /* nav, footer, senke */
  --mint-light:  #86A79F;  /* akcenti */
  --white:       #FFFFFF;
  --white-soft:  rgba(255, 255, 255, 0.82);
  --line:        rgba(255, 255, 255, 0.22);
  --ink-on-white:#425852;  /* tekst na belim dugmadima */

  --r: 18px;

  --font-sans: 'Poppins', 'Segoe UI', sans-serif;
  --font-script: 'Pinyon Script', cursive;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 11vw, 8.5rem);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--mint);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--white); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.1;
}

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--white);
  color: var(--ink-on-white);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Dugmad (pilula) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }

.btn--solid {
  background: var(--white);
  color: var(--ink-on-white);
  box-shadow: 0 10px 30px rgba(46, 62, 57, 0.28);
}
.btn--solid:hover { box-shadow: 0 14px 34px rgba(46, 62, 57, 0.34); }

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  background: transparent;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--white); }

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* ---------- Navigacija ---------- */

#nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.nav.is-scrolled {
  background: rgba(77, 100, 94, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__logo {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
}
.nav__logo-studio { height: 11px; width: auto; }
.nav__logo-mint   { height: 30px; width: auto; transform: translateY(6px); }

.nav__links {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}
.nav__links a {
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-soft);
  transition: color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--white); }

.nav__cta { padding: 0.65rem 1.5rem; font-size: 0.88rem; }

.nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  margin-left: auto;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  margin: 7px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu[hidden] { display: none; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--mint-deeper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}
.mobile-menu nav > a:not(.btn) {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
}
.mobile-menu .btn { margin-top: 1rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 72px;
  overflow: hidden;
}

/* Video pozadina: ivice se gradijentom stapaju u mint podlogu stranice */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 82% 74% at 50% 46%,
      #000 34%, transparent 76%);
  mask-image: radial-gradient(ellipse 82% 74% at 50% 46%,
      #000 34%, transparent 76%);
}
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim za čitljivost belog teksta, najtamniji iza samog sadržaja */
.hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 52% at 50% 46%,
      rgba(50, 70, 64, 0.55), rgba(62, 84, 78, 0.30) 78%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vh, 4rem) var(--gutter);
  text-align: center;
}

.hero__title {
  font-size: clamp(2.4rem, 4.6vw, 4.1rem);
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.hero__script {
  display: block;
  font-size: clamp(2.9rem, 5.4vw, 4.9rem);
  margin-top: 0.35rem;
  padding-bottom: 0.28em; /* rezerva za donje petlje skripta (j, p) */
  color: #D9E7E2;
}

.hero__sub {
  margin-top: 1.4rem;
  margin-inline: auto;
  max-width: 42ch;
  font-size: 1.08rem;
  color: var(--white-soft);
}

.hero__actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ---------- Studio story (skrol animacija kadar-po-kadar) ---------- */

.story {
  position: relative;
  height: 380vh; /* dužina skrola koja pokreće sekvencu */
}

.story__pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

.story__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* ivice kadra se stapaju u mint podlogu, kao i hero */
  -webkit-mask-image: radial-gradient(ellipse 82% 74% at 50% 50%,
      #000 36%, transparent 78%);
  mask-image: radial-gradient(ellipse 82% 74% at 50% 50%,
      #000 36%, transparent 78%);
}

/* Statični prikaz: bez JS-a ili uz reduced-motion */
.story__fallback { display: none; }

.story__caption {
  position: absolute;
  z-index: 1;
  max-width: 24rem;
  padding: 1.5rem 1.7rem;
  border-radius: var(--r);
  background: rgba(56, 76, 70, 0.68);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.story__caption.is-active {
  opacity: 1;
  transform: none;
}

.story__caption h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin-bottom: 0.5rem;
}
.story__caption p {
  color: var(--white-soft);
  font-size: 0.98rem;
}

.story__caption--1 { left: clamp(1.5rem, 8vw, 7rem); top: 24%; }
.story__caption--2 { right: clamp(1.5rem, 8vw, 7rem); top: 34%; }
.story__caption--3 {
  left: 50%;
  bottom: 14%;
  transform: translate(-50%, 22px);
  text-align: center;
}
.story__caption--3.is-active { transform: translate(-50%, 0); }

/* Fallback raspored: sekcija u normalnom toku, sve vidljivo */
.story--static { height: auto; }
.story--static .story__pin {
  position: static;
  height: auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  gap: 1.6rem;
  justify-items: center;
}
.story--static .story__canvas { display: none; }
.story--static .story__fallback {
  display: block;
  width: min(100%, 56rem);
  border-radius: var(--r);
}
.story--static .story__caption {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .story { height: auto; }
  .story .story__pin {
    position: static;
    height: auto;
    padding: var(--section-y) var(--gutter);
    display: grid;
    gap: 1.6rem;
    justify-items: center;
  }
  .story .story__canvas { display: none; }
  .story .story__fallback {
    display: block;
    width: min(100%, 56rem);
    border-radius: var(--r);
  }
  .story .story__caption {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 900px) {
  .story__caption {
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
  }
  .story__caption--1 { top: auto; bottom: 16%; }
  .story__caption--2 { top: auto; bottom: 16%; }
  .story__caption--3 { left: var(--gutter); bottom: 16%; transform: translateY(22px); text-align: left; }
  .story__caption--3.is-active { transform: none; }
}

/* ---------- Mantra ---------- */

.mantra {
  padding-block: var(--section-y);
  text-align: center;
}
.mantra__line {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 1.4rem;
}
.mantra__body {
  max-width: 58ch;
  margin-inline: auto;
  color: var(--white-soft);
  font-size: 1.05rem;
}

/* ---------- Tretmani ---------- */

.tretmani { padding-block: 0 var(--section-y); }

.tretmani__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.card {
  background: var(--mint-deep);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(42, 57, 52, 0.35);
}

.card--tall { grid-row: 1 / span 2; }

.card__media { margin: 0; overflow: hidden; }
.card__media img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.card--tall .card__media img { height: 460px; }

.card__body { padding: 1.6rem 1.8rem 1.9rem; }
.card__body h3 { font-size: 1.3rem; margin-bottom: 0.55rem; }
.card__body p { color: var(--white-soft); font-size: 0.98rem; }

/* ---------- Prenatalna masaža (istaknuta usluga) ---------- */

.prenatal {
  padding-block: 0 var(--section-y);
}

.prenatal__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  background: var(--mint-deep);
  border-radius: var(--r);
  padding: clamp(1.8rem, 4.5vw, 4rem);
}

.prenatal__copy .section-title { margin-bottom: 1.4rem; }
.prenatal__copy p {
  color: var(--white-soft);
  max-width: 52ch;
}

.prenatal__actions { margin-top: 1.8rem; }

.prenatal__media {
  margin: 0;
  border-radius: calc(var(--r) - 6px);
  overflow: hidden;
}
.prenatal__media img {
  width: 100%;
  height: min(56vh, 480px);
  object-fit: cover;
}

/* ---------- O nama ---------- */

.onama { padding-block: 0 var(--section-y); }

.onama__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.onama__media {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
}
.onama__media img {
  width: 100%;
  height: min(64vh, 560px);
  object-fit: cover;
}

.onama__copy p { color: var(--white-soft); max-width: 56ch; }

.onama__quote {
  margin: 2.2rem 0 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--mint-light);
}
.onama__quote p {
  font-size: 1.12rem;
  color: var(--white);
  font-style: italic;
  margin-bottom: 0.6rem;
}
.onama__quote cite {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-soft);
}

/* ---------- Vrednosti (marquee) ---------- */

.vrednosti {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.marquee { overflow: hidden; }

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: baseline;
  gap: clamp(3rem, 7vw, 6rem);
  padding-right: clamp(3rem, 7vw, 6rem);
  white-space: nowrap;
}

.m-sans {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.34);
}
.m-script {
  font-size: clamp(2.8rem, 6vw, 5rem);
  color: var(--white);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Vaša poseta ---------- */

.poseta { padding-block: var(--section-y); }

.poseta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 5vw, 3.2rem);
}

.poseta__step { max-width: 46ch; }
.poseta__step:nth-child(2) { margin-left: clamp(0rem, 10vw, 9rem); }
.poseta__step:nth-child(3) { margin-left: clamp(0rem, 20vw, 18rem); }
.poseta__step:nth-child(4) { margin-left: clamp(0rem, 30vw, 27rem); }

.poseta__step h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 0.4rem;
}
.poseta__step p { color: var(--white-soft); }

.poseta__note {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  color: var(--white-soft);
  max-width: 60ch;
}
.poseta__note strong { color: var(--white); font-weight: 500; }

/* ---------- Kontakt ---------- */

.kontakt {
  position: relative;
  padding-block: calc(var(--section-y) * 1.15);
  background: var(--mint-deep);
  overflow: hidden;
}

/* Duoton tekstura kapljica, utopljena u podlogu */
.kontakt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/photo-hero.jpg') center 38% / cover no-repeat;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(ellipse 78% 90% at 50% 50%,
      #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 78% 90% at 50% 50%,
      #000 30%, transparent 82%);
  pointer-events: none;
}

.kontakt__inner {
  position: relative;
  text-align: center;
}

.kontakt__title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin-bottom: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15em 0.45em;
}
/* Pravi „Mint" logotip u ravni sa tekstom naslova */
.kontakt__title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}
.kontakt__logo {
  height: 1.75em;
  width: auto;
  transform: translateY(0.12em);
}

.kontakt__phone {
  display: inline-block;
  font-size: clamp(2.6rem, 7.5vw, 5.5rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  line-height: 1.1;
  color: var(--white);
  transition: opacity 0.25s var(--ease), letter-spacing 0.35s var(--ease);
}
.kontakt__phone:hover {
  opacity: 0.92;
  letter-spacing: 0.045em;
}

.kontakt__alt {
  margin-top: 1.1rem;
  color: var(--white-soft);
  font-size: 1rem;
}

.kontakt__links {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ---------- Footer ---------- */

.footer {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 3rem;
}

.footer__logo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
}
.footer__logo-studio { height: 9px; width: auto; }
.footer__logo-mint   { height: 26px; width: auto; transform: translateY(5px); }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  margin: 0 0 0 auto;
  font-size: 0.88rem;
  color: var(--white-soft);
}
.footer__meta a {
  color: var(--white-soft);
  text-decoration: none;
}
.footer__meta a:hover { color: var(--white); }

.footer__copy {
  width: 100%;
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Gradijent otkrivanje slika ---------- */

/* Meka gradijent ivica prelazi dijagonalno preko slike i otkriva je,
   uz blago sleganje skale. Bez mask podrške ostaje običan fade. */
.media-fade img {
  opacity: 0;
  transform: scale(1.04);
  -webkit-mask-image: linear-gradient(105deg, #000 42%, rgba(0, 0, 0, 0) 58%);
  mask-image: linear-gradient(105deg, #000 42%, rgba(0, 0, 0, 0) 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 98% 0;
  mask-position: 98% 0;
  transition:
    opacity 0.5s var(--ease),
    transform 1.7s var(--ease),
    -webkit-mask-position 1.5s var(--ease),
    mask-position 1.5s var(--ease);
  will-change: transform, opacity;
}
.media-fade.in img {
  opacity: 1;
  transform: scale(1);
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}

/* Poređenje: ?efekat=meki vraća običan mekani fade bez gradijenta */
body.efekat-meki .media-fade img {
  -webkit-mask-image: none;
  mask-image: none;
  transition: opacity 1.1s var(--ease), transform 1.5s var(--ease);
  transform: scale(1.06);
}
body.efekat-meki .media-fade.in img { transform: scale(1); }

/* Hover uvećanje kartica važi tek posle pojavljivanja */
.card:hover .media-fade.in img { transform: scale(1.03); }

/* Hero video i canvas sekvenca ulaze mekim fejdom */
.hero__video video {
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero__video.is-ready video { opacity: 1; }

.story__canvas {
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.story__canvas.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .media-fade img,
  .hero__video video,
  .story__canvas {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Reveal animacije ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease) var(--d, 0s),
              transform 0.8s var(--ease) var(--d, 0s);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Mobilni raspored ---------- */

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }

  .hero__inner {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }

  .tretmani__grid { grid-template-columns: 1fr; }
  .card--tall { grid-row: auto; }
  .card--tall .card__media img { height: 260px; }

  .onama__inner { grid-template-columns: 1fr; }
  .onama__media img { height: 46vh; }

  .prenatal__inner { grid-template-columns: 1fr; }
  .prenatal__media { order: -1; }
  .prenatal__media img { height: 40vh; }

  .poseta__step:nth-child(n) { margin-left: 0; }

  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__meta { margin-left: 0; }
}