:root{
  --container: 980px;
  --gutter: 1.25rem;

  --text: #111;
  --muted: #2d2d2d;

  --script: "La Belle Aurore", cursive;
  --body: "Spinnaker", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif: "Playfair Display SC", serif;

  --radius: 0;
  /*--shadow: 0 10px 26px rgba(0,0,0,0.08);*/
}

/* reset base */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:transparent;
}
img{ display:block; width:100%; height:auto; }

/* layout */
.page{
  padding: clamp(1.5rem, 4vw, 2.75rem) 0;
}

.container{
  width: min(100% - (2 * var(--gutter)), var(--container));
  margin-inline:auto;
}

.stack{
  display:grid;
  gap: clamp(0.9rem, 2.6vw, 1.4rem);
}

/* text */
.title-script{
  margin:1.5rem 0 1rem;
  text-align:center;
  font-family:var(--script);
  font-weight:400;
  font-size: clamp(2.6rem, 7vw, 4.1rem);
  line-height:1.05;
}

.names{
  margin-top:2.5rem;
  text-align:center;
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(2.5rem, 5.8vw, 3.6rem);
  line-height:1.1;
  white-space: nowrap;
}

.quote{
  margin: 3rem 0 3rem;
  text-align:center;
  font-family:var(--script);
  font-weight:400;
  font-size: clamp(1.7rem, 5.8vw, 3rem);
  line-height:1.2;
}

.section{ margin-top: 0.25rem; margin-bottom: 3rem;}

.body{
  margin:0 3rem 0;
  text-align:center;
  font-family:var(--body);
  font-size: clamp(1rem, 2.7vw, 1.15rem);
  line-height:1.6;
  color: var(--muted);
}

.subtitle-script{
  margin:0;
  text-align:center;
  font-family:var(--script);
  font-weight:400;
  font-size: clamp(2rem, 6.2vw, 3.2rem);
}

/* images (todas mismo ancho por el container) */
.frame{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background:transparent;
}

/* Ajusten este aspect-ratio según sus fotos reales (para que no corte caras) */
.frame img{
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Crop curvo arriba y recto abajo */
.frame--clip{
  border-radius: 0; /* el clip define la forma */
  overflow: visible; /* necesario porque clip recorta el img, no el contenedor */
  box-shadow: none;  /* sombra en el contenedor no respeta el clip; la damos al img */
  background: transparent;
  margin-top: 3rem;
}

.frame--clip img{
  width: 100%;
  height: auto;            /* importante para evitar comportamientos raros */
  display: block;

  box-shadow: var(--shadow);
  aspect-ratio: 2898/4889;
  object-fit: cover;

  /* fallback SIEMPRE visible */
  border-radius: 0;

  /* no aplicar clip por defecto */
  -webkit-clip-path: none;
          clip-path: none;
}

.rings-placeholder{
  display: grid;
  place-items: center;
  margin: 0;
}

.rings-placeholder img{
  width: min(40vw, 400px);
  aspect-ratio: 1792 / 1139;   /* 2000x2000 */
  height: auto;
  object-fit: contain;   /* no recorta, no aplasta */
}

/* Padres (sin bordes, solo texto) */
.parents{
  gap: 0rem;
  margin-top: 0rem;
}

.parents-names{
  margin: 0 0 0;
  text-align:center;
  font-family: var(--body);
  font-size: clamp(1rem, 2.7vw, 1.15rem);
  line-height: 1.6;
  color: var(--text);
}

.parents-title{
  margin: 1.75rem 0 0;
  text-align:center;
  font-family: var(--script);
  font-weight:400;
  font-size: clamp(1.5rem, 5.2vw, 2.2rem);
  color: var(--text);
}

/* Save the date final: mismo ancho que las imágenes por estar dentro del container */
.save-date{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: clamp(220px, 34vw, 340px);
  margin-top: 0rem;
}

.save-date__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url("../assets/images/SaveTheDate4.jpg");
  background-size: cover;
  background-position: center;
}

.save-date__content{
  position: relative;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  text-align:center;
  color:#fff;
}

/* Cada texto en una sola línea */
.save-date__title,
.save-date__date{
  margin: 0;
  white-space: nowrap;
}

/* Ajuste responsivo para que quepa en una sola línea */
.save-date__title{
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.7vw, 3.7rem);
  line-height: 1.05;
}

.save-date__date{
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(1.1rem, 2.2vw, 2.2rem);
  line-height: 1.1;
}

/* ============ Animaciones de entrada por viewport ============ */
.anim{
  will-change: transform, opacity, filter;
}

/* Estado inicial (antes de entrar) */
.anim:not(.is-inview){
  opacity: 0;
}

/* Estado visible */
.anim.is-inview{
  opacity: 1;
}

/* Respeta usuarios con reduced motion */
@media (prefers-reduced-motion: reduce){
  .anim,
  .anim:not(.is-inview),
  .anim.is-inview{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* A) Fade + slide desde izquierda (más lento) */
.anim--a{
  transition: opacity 2100ms ease, transform 2100ms cubic-bezier(.2,.8,.2,1);
}
.anim--a:not(.is-inview){
  transform: translateX(-106px);
}
.anim--a.is-inview{
  transform: translateX(0);
}

/* B) Zoom suave + fade (o slide desde derecha) más lento */
/* Si quieres que también sea desde derecha, usa translateX(26px) en vez de scale */
.anim--b{
  transition: opacity 2100ms ease, transform 2100ms cubic-bezier(.2,.8,.2,1);
}
.anim--b:not(.is-inview){
  transform: translateX(106px); /* <- derecha hacia centro */
  /* alternativa: transform: scale(0.975); */
}
.anim--b.is-inview{
  transform: translateX(0);
  /* alternativa: transform: scale(1); */
}

/* C) Blur + fade */
.anim--c{
  transition: opacity 2050ms ease, filter 2050ms ease, transform 2050ms cubic-bezier(.2,.8,.2,1);
}
.anim--c:not(.is-inview){
  filter: blur(10px);
  transform: translateY(10px);
}
.anim--c.is-inview{
  filter: blur(0);
  transform: translateY(0);
}

/* B) Zoom suave + fade */
.anim--d{
  transition: opacity 850ms ease, transform 850ms cubic-bezier(.2,.8,.2,1);
}
.anim--d:not(.is-inview){
  transform: scale(0.9);
}
.anim--d.is-inview{
  transform: scale(1);
}

/* A) Fade + slide */
.anim--e{
  transition: opacity 2050ms ease, transform 2050ms cubic-bezier(.2,.8,.2,1);
}
.anim--e:not(.is-inview){
  transform: translateY(30px);
}
.anim--e.is-inview{
  transform: translateY(0);
}

.anim--f{
  transition: opacity 2050ms ease, transform 2050ms cubic-bezier(.2,.8,.2,1);
}
.anim--f:not(.is-inview){
  transform: translateY(-50px);
}
.anim--f.is-inview{
  transform: translateY(0);
}