/* =========================================================================
   Mas Sitjar — placeholder hero
   -------------------------------------------------------------------------
   Three things happen on load, all pure CSS (no JS):
     1. .hero__img  slowly scales 0.9 -> 1.1 over 10s  (subtle Ken Burns)
     2. .reveal     white overlay fades out over 5s    (the cinematic reveal)
     3. .hero__title fades + drifts in as the white clears
   The timing/feel "knobs" are grouped in :root below.
   ========================================================================= */

:root {
  /* Reveal */
  --reveal-duration: 5s;     /* white overlay fade-out */
  --reveal-ease: cubic-bezier(0.33, 0, 0.2, 1);

  /* Hero image zoom */
  --zoom-duration: 10s;
  --zoom-from: 0.9;
  --zoom-to: 1.1;
  /* Base upscale so the image still covers the viewport at the smallest
     zoom: it must be >= 1 / --zoom-from (1/0.9 ≈ 1.112). 115% adds margin. */
  --hero-overscan: 115%;

  /* Title entrance */
  --title-delay: 1.8s;
  --title-duration: 3.4s;
  --title-color: #f4eee2;    /* warm off-white */
  /* Single source of truth for the title face. To move to a licensed
     self-hosted face later (e.g. Pradell), add an @font-face and change
     only this line. */
  --title-font: "Alegreya", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #0f1116;       /* deep neutral; shows behind nothing, just a safety net */
  overflow: hidden;          /* single-screen placeholder, no scroll */
  font-family: var(--title-font);
}

/* ---- Stage ------------------------------------------------------------- */
/* Fixed + inset:0 fills the viewport exactly on every browser (no vh/svh/dvh
   quirks), which is ideal for a single, non-scrolling screen. */
.hero {
  position: fixed;
  inset: 0;
  overflow: hidden;          /* clip the oversized / zooming image */
}

/* ---- Hero image (layer 1) --------------------------------------------- */
.hero__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--hero-overscan);
  height: var(--hero-overscan);
  object-fit: cover;
  object-position: center 42%;   /* bias toward the horizon / sky */
  transform: translate(-50%, -50%) scale(var(--zoom-from));
  transform-origin: center;
  will-change: transform;
  /* longhand, not shorthand: Safari/iOS drops an `animation:` shorthand that
     contains var(), which would freeze the hero on those devices. */
  animation-name: heroZoom;
  animation-duration: var(--zoom-duration);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes heroZoom {
  from { transform: translate(-50%, -50%) scale(var(--zoom-from)); }
  to   { transform: translate(-50%, -50%) scale(var(--zoom-to)); }
}

/* ---- Title (layer 2) --------------------------------------------------- */
.hero__content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6vmin;
  z-index: 2;
  pointer-events: none;      /* nothing interactive yet */
}

.hero__title {
  margin: 0;
  font-family: var(--title-font);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;        /* Alegreya's italic is a touch wider than Playfair's */
  font-size: clamp(3rem, 13vw, 10rem);
  color: var(--title-color);
  text-align: center;

  /* soft shadow halo so it reads over the bright sky */
  filter:
    drop-shadow(0 1px 10px rgba(0, 0, 0, 0.45))
    drop-shadow(0 6px 35px rgba(0, 0, 0, 0.5));

  opacity: 0;
  transform: translateY(14px);
  animation-name: titleIn;
  animation-duration: var(--title-duration);
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: var(--title-delay);
  animation-fill-mode: forwards;
}

@keyframes titleIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Film grain (layer 3) --------------------------------------------- */
/* Tiny tiled SVG noise; very subtle, just adds cinematic texture. */
.grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- The reveal (top layer) ------------------------------------------- */
.reveal {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: #ffffff;
  /* brief hold (image keeps loading + gives a beat) then clear.
     longhand so iOS Safari doesn't drop a var() inside the shorthand. */
  animation-name: revealFade;
  animation-duration: var(--reveal-duration);
  animation-timing-function: var(--reveal-ease);
  animation-fill-mode: forwards;
}

@keyframes revealFade {
  0%   { opacity: 1; }
  12%  { opacity: 1; }   /* ~0.6s hold before it starts to clear */
  100% { opacity: 0; }
}

/* ---- Reduced motion ---------------------------------------------------- */
/* Keep the content; drop the heavy motion. The scene appears with a short,
   gentle fade and no zoom or drift. */
@media (prefers-reduced-motion: reduce) {
  .hero__img {
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }
  .hero__title {
    transform: none;
    animation: titleIn 0.8s ease forwards;
  }
  .reveal {
    animation: revealFade 0.8s ease forwards;
  }
  @keyframes revealFade {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
}

/* =========================================================================
   Directions CTA + password modal + map
   ========================================================================= */

/* ---- CTA button (above the scene, below the reveal + modal) ------------ */
.hero__cta {
  position: absolute;
  left: 50%;
  /* + safe-area so viewport-fit=cover doesn't tuck it under the home indicator */
  bottom: calc(clamp(2rem, 6vh, 4.5rem) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 4;

  font-family: var(--title-font);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: var(--title-color);
  letter-spacing: 0.02em;

  padding: 0.55em 1.6em;
  background: rgba(15, 17, 22, 0.28);
  border: 1px solid rgba(244, 238, 226, 0.45);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

  opacity: 0;
  animation: ctaIn 1.8s ease 3.4s forwards;   /* arrives after the reveal */
}
.hero__cta:hover,
.hero__cta:focus-visible {
  background: rgba(244, 238, 226, 0.92);
  color: #1a1c22;
  border-color: rgba(244, 238, 226, 0.92);
}
.hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes ctaIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Modal ------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 5vmin;
}
.modal[hidden] { display: none; }   /* beat the class selector's display:grid */

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: modalFade 0.35s ease;
}
.modal__card {
  position: relative;
  width: min(460px, 100%);
  background: rgba(22, 24, 30, 0.92);
  border: 1px solid rgba(244, 238, 226, 0.14);
  border-radius: 14px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--title-color);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: modalCard 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: rgba(244, 238, 226, 0.6);
  font-size: 1.7rem;
  line-height: 1;
  padding: 0.1em 0.35em;
  cursor: pointer;
}
.modal__close:hover { color: var(--title-color); }

.modal__title {
  margin: 0 0 0.5rem;
  font-family: var(--title-font);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
}
.modal__hint,
.modal__address {
  margin: 0 0 1.1rem;
  font-family: var(--title-font);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(244, 238, 226, 0.75);
}

.modal__input {
  width: 100%;
  padding: 0.8em 1em;
  font-size: 1rem;
  color: var(--title-color);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(244, 238, 226, 0.22);
  border-radius: 8px;
  margin-bottom: 0.8rem;
}
.modal__input:focus {
  outline: none;
  border-color: rgba(244, 238, 226, 0.6);
  background: rgba(255, 255, 255, 0.1);
}
.modal__submit {
  width: 100%;
  padding: 0.8em 1em;
  font-size: 1.05rem;
  font-family: var(--title-font);
  font-style: italic;
  color: #1a1c22;
  background: var(--title-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.modal__submit:hover { opacity: 0.9; }
.modal__submit:disabled { opacity: 0.5; cursor: default; }
.modal__error {
  margin: 0.85rem 0 0;
  color: #ffb4a8;
  font-size: 0.92rem;
}

.modal__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 1rem;
}
.modal__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.modal__maps-link {
  font-family: var(--title-font);
  color: var(--title-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalCard {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta { animation: none; opacity: 1; }
  .modal__backdrop,
  .modal__card { animation: none; }
}