/* ————— Krštenje Lucije ————— */

:root {
  color-scheme: only light;   /* bez automatskog tamnog načina (Android Chrome, Samsung) */
  --cream: #fdf9f7;
  --paper: #fffdfc;
  --blush: #f4dde3;
  --rose: #d99cb0;
  --rose-deep: #b86f84;
  --gold: #c9a455;
  --gold-rose: linear-gradient(135deg, #b48b3c 0%, #dcbd6c 40%, #c9a24c 60%, #e8cf86 80%, #b9933f 100%);
  --sage: #b4bea4;
  --ink: #5b4a50;
  --ink-soft: #8a7379;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  background:
    radial-gradient(70% 45% at 0% 0%, rgba(236, 190, 203, .55), transparent 70%),
    radial-gradient(55% 40% at 100% 100%, rgba(236, 190, 203, .5), transparent 70%),
    radial-gradient(40% 30% at 100% 10%, rgba(214, 222, 200, .45), transparent 70%),
    var(--cream);
  background-attachment: fixed;
  text-align: center;
}

.invite {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  overflow: hidden;
}

/* ————— Cvijeće ————— */

.florals {
  position: absolute;
  width: 250px;
  pointer-events: none;
}
/* rubovi buketa blijede umjesto da budu odrezani (rubom kartice ili uz tekst) */
.florals, .photo-flowers {
  --mx: 50%; --my: 50%;
  -webkit-mask-image: radial-gradient(ellipse 74% 74% at var(--mx) var(--my), #000 46%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 74% 74% at var(--mx) var(--my), #000 46%, rgba(0, 0, 0, 0) 100%);
}
.florals-tl { --mx: 42%; --my: 44%; }
.florals-tr { --mx: 60%; --my: 42%; }
.florals-b  { --mx: 50%; --my: 50%; }
.pf-1 { --mx: 44%; --my: 56%; }
.pf-2 { --mx: 58%; --my: 44%; }
.florals-tl { top: -26px; left: -64px; transform: rotate(-8deg); --sx: -60px; --sy: -50px; --sr: -14deg; --sd: .1s; }
.florals-tr { top: -14px; right: -46px; width: 215px; transform: rotate(6deg); --sx: 60px; --sy: -50px; --sr: 14deg; --sd: .3s; }
.florals-b  { bottom: -60px; right: -84px; width: 220px; transform: rotate(160deg); --sx: 50px; --sy: 60px; --sr: 12deg; --sd: 1.1s; }

/* ————— Intro: cvijeće se "slegne" na svoje mjesto ————— */

@keyframes settle {
  from {
    opacity: 0;
    translate: var(--sx, 0) var(--sy, -40px);
    rotate: var(--sr, -10deg);
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}
.florals, .photo-flowers {
  animation: settle 2s cubic-bezier(.3, 1.25, .4, 1) both;
  animation-delay: var(--sd, 0s);
}
/* nakon animacije maknemo je, da Chrome ponovno iscrta SVG oštro */
.florals.settled, .photo-flowers.settled { animation: none; }

/* ————— Naslov ————— */

.hero { position: relative; z-index: 1; }

.cross {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -72px 0 22px;
}
.cross-line {
  width: 1.5px;
  height: 86px;
  background: linear-gradient(to bottom, transparent, var(--gold));
}
.cross-icon {
  width: 18px;
  height: 24px;
  margin-top: 2px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08));
}

.eyebrow {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.script {
  font-family: 'Alex Brush', cursive;
  font-weight: 400;
  color: #c4a04e;
  background: var(--gold-rose);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1.script {
  margin: 4px 0 6px;
  font-size: clamp(52px, 16.5vw, 92px);
  line-height: 1.1;
  padding: 0 8px;
  white-space: nowrap;
}

.name {
  margin: 10px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-indent: .3em; /* poravnanje zbog letter-spacinga */
  color: #c4567f;
}

/* ————— Fotografija ————— */

.photo {
  position: relative;
  width: 228px;
  height: 228px;
  margin: 34px auto 0;
}
.photo::before {
  /* zlatni prsten oko fotografije */
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #b48b3c, #e8cf86 25%, #c9a24c 50%, #f0dc9a 70%, #b48b3c 100%);
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, .55),
    0 14px 34px rgba(184, 111, 132, .22),
    0 0 28px rgba(255, 226, 120, .7);
}
.photo .portrait {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
}
.photo-flowers {
  position: absolute;
  width: 150px;
  pointer-events: none;
}
.pf-1 { left: -56px; bottom: -36px; transform: rotate(-12deg); --sx: -40px; --sy: 40px; --sr: -16deg; --sd: .9s; }
.pf-2 { right: -62px; top: -30px; transform: rotate(-8deg); width: 140px; --sx: 40px; --sy: -36px; --sr: 16deg; --sd: .7s; }

/* ————— Aureola oko fotografije (jača pri skrolanju) ————— */

.photo::after {
  content: '';
  position: absolute;
  inset: -100px;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle,
    rgba(255, 246, 190, 1) 0%,
    rgba(255, 234, 140, .8) 28%,
    rgba(255, 226, 120, .38) 46%,
    rgba(255, 226, 120, .12) 60%,
    rgba(255, 226, 120, 0) 72%);
  opacity: 0;
  transform: scale(.82);
  transition: opacity 1.6s ease-out, transform 1.6s ease-out;   /* pojavljivanje pri otvaranju */
  pointer-events: none;
}
.photo.lit::after {
  opacity: calc(.35 + .6 * var(--halo, 0));                     /* jača pri skrolanju (script.js) */
  transform: scale(calc(.9 + .14 * var(--halo, 0)));
}
.photo.lit.settled::after { transition: opacity .15s linear, transform .15s linear; }

/* ————— Detalji ————— */

.details {
  position: relative;
  z-index: 1;
  margin-top: 46px;
}

.date {
  margin: 0;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--rose-deep);
}

.block { margin: 0 auto; max-width: 380px; }

.label {
  margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
}
.place {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}
.address {
  margin: 2px 0 0;
  font-size: 18px;
  color: var(--ink-soft);
}
.hint {
  margin: 6px 0 0;
  font-size: 18px;
  font-style: italic;
  color: var(--ink-soft);
}

.btn {
  display: inline-block;
  margin-top: 16px;
  padding: 11px 24px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 3px rgba(201, 164, 85, .12);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: #9a5f6e;
  transition: background .2s, transform .2s;
}
.btn:hover, .btn:focus-visible { background: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 34px auto;
  width: 200px;
}
.ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.date + .ornament { margin: 18px auto 26px; }
.ornament-plain { width: 140px; }

/* ————— Završetak ————— */

.closing {
  position: relative;
  z-index: 1;
  margin-top: 46px;
}
.rsvp {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
}
.thanks {
  margin: 26px 0 0;
  font-size: 22px;
  font-style: italic;
}
.signature {
  margin: 4px 0 0;
  font-size: clamp(38px, 12vw, 54px);
  line-height: .95;
  white-space: nowrap;
}

/* ————— Animacija ————— */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .florals, .photo-flowers { animation: none; }
  .photo::after, .photo.lit::after { transition: none; opacity: .95; transform: none; }
}

/* ————— Veći ekrani: pozivnica kao kartica ————— */

@media (min-width: 640px) {
  body { padding: 48px 24px; }
  .invite {
    padding: 88px 48px 72px;
    background: var(--paper);
    border-radius: 6px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .8) inset,
      0 24px 60px rgba(184, 111, 132, .16);
  }
  .cross { margin-top: -88px; }
  .cross-line { height: 100px; }
  .florals { width: 300px; }
  .florals-tl { top: -20px; left: -48px; }
  .florals-tr { top: -10px; right: -36px; width: 250px; }
  .florals-b { width: 260px; }
  .photo { width: 250px; height: 250px; }
  h1.script { font-size: 86px; }
}