/* Zakros — homepage sections and scroll motion (driven by js/motion.js) */

/* ---------- Tones ----------
   Each section carries its own colours. With JS motion active, the swap
   sections turn transparent and follow the page colours, which motion.js
   tweens as sections scroll into view. */
:root {
  --page-bg: var(--zk-cream);
  --page-fg: var(--zk-navy);
  --page-muted: var(--zk-muted);
  --page-line: rgba(11, 31, 42, 0.16);
}
.zk-tone-light { --tone-bg: var(--zk-cream); --tone-fg: var(--zk-navy); --tone-muted: var(--zk-muted); --tone-line: rgba(11, 31, 42, 0.16); }
.zk-tone-sand  { --tone-bg: var(--zk-sand);  --tone-fg: var(--zk-navy); --tone-muted: #5a5248;        --tone-line: rgba(11, 31, 42, 0.18); }
.zk-tone-dark  { --tone-bg: var(--zk-navy);  --tone-fg: #ffffff;        --tone-muted: rgba(255, 255, 255, 0.72); --tone-line: rgba(255, 255, 255, 0.2); }

.zk-headline,
.zk-feature {
  background: var(--tone-bg);
  color: var(--tone-fg);
}
.zk-motion body { background-color: var(--page-bg); }
.zk-motion .zk-headline,
.zk-motion .zk-feature {
  --tone-bg: transparent;
  --tone-fg: var(--page-fg);
  --tone-muted: var(--page-muted);
  --tone-line: var(--page-line);
}

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

/* ---------- Progress bar & header ---------- */
.zk-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 1100;
  pointer-events: none;
  display: none;
}
.zk-motion .zk-progress { display: block; }
.zk-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--zk-gold), var(--zk-gold-soft));
  transform: scaleX(0);
  transform-origin: left center;
}
.zk-header { transition: height 0.35s var(--zk-ease), background 0.35s var(--zk-ease), box-shadow 0.35s var(--zk-ease), transform 0.6s var(--zk-ease); }
.zk-header.is-hidden { transform: translateY(-110%); }

/* ---------- Hero (centered variant) ---------- */
.zk-hero__media img { transform-origin: 50% 40%; }
.zk-hero--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Lighter veil so the turquoise of the pool video shows; the vignette keeps the title readable */
.zk-hero--center .zk-hero__overlay {
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(11, 31, 42, 0.38) 0%, rgba(11, 31, 42, 0) 70%),
    linear-gradient(180deg, rgba(11, 31, 42, 0.32) 0%, rgba(11, 31, 42, 0.12) 40%, rgba(11, 31, 42, 0.55) 100%);
}
.zk-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.zk-hero--center .zk-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--zk-header-h) 0 0;
}
.zk-hero--center .zk-hero-title {
  font-size: clamp(3.6rem, 14vw, 12.5rem);
  font-weight: 500;
  line-height: 0.88;
  white-space: nowrap;
  letter-spacing: 0.14em;
  margin: 0 0 0.35em;
  padding-left: 0.14em; /* optically re-centre the letter-spaced word */
}
.zk-hero--center .zk-hero__lead {
  max-width: 34rem;
  margin-inline: auto;
  font-family: var(--zk-font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  line-height: 1.35;
}
.zk-hero-title .zk-char { display: inline-block; will-change: transform; }
.zk-charword { display: inline-block; white-space: nowrap; }
.zk-hero__credit {
  position: absolute;
  z-index: 2;
  right: var(--zk-gutter);
  bottom: 1.25rem;
  margin: 0;
  max-width: 60%;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
}
.zk-hero__credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); }
.zk-hero__credit a:hover { color: var(--zk-white); }
@media (max-width: 767px) {
  .zk-hero__credit { left: var(--zk-gutter); right: var(--zk-gutter); bottom: 0.6rem; max-width: none; text-align: center; font-size: 0.6rem; }
  .zk-hero--center .zk-hero__scroll { bottom: 2.25rem; }
}
.zk-motion .zk-hero-title { overflow-x: visible; overflow-y: clip; padding-bottom: 0.06em; }

/* Lenis does the smoothing; native smooth scrolling would fight it */
html.lenis { scroll-behavior: auto; }

/* Hero intro states: hidden only while motion is active; a fallback timer in
   base.html.twig removes .zk-motion if motion.js never starts. */
.zk-motion [data-hero-title],
.zk-motion [data-hero-fade] { visibility: hidden; }

/* ---------- Headline sections ---------- */
.zk-headline {
  padding: clamp(5rem, 15vh, 10rem) 0;
  position: relative;
}
.zk-headline__kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--zk-gold);
}
.zk-headline__rule {
  display: inline-block;
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}
.zk-headline__text {
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  max-width: 24ch;
  margin: 0;
  color: var(--tone-fg);
}
.zk-headline__text .zk-word { display: inline-block; }

/* ---------- Feature (hotel) sections ---------- */
.zk-feature {
  position: relative;
  padding: clamp(4rem, 11vh, 8rem) 0;
  overflow: hidden;
}
.zk-feature__marquee {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.zk-feature__track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-left: 2.5rem;
  font-family: var(--zk-font-display);
  font-size: clamp(4.5rem, 13vw, 12rem);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--tone-line);
  will-change: transform;
}
.zk-feature__track i {
  font-style: normal;
  font-size: 0.16em;
  -webkit-text-stroke: 0;
  color: var(--zk-gold);
  opacity: 0.35;
}
.zk-feature__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .zk-feature__inner { grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 7vw, 7rem); }
  .zk-feature--reverse .zk-feature__inner { grid-template-columns: 0.9fr 1.1fr; }
  .zk-feature--reverse .zk-feature__visual { order: 2; }
}
.zk-feature__visual { position: relative; }
.zk-feature__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(11, 31, 42, 0.12);
}
.zk-feature__img {
  position: absolute;
  inset: -8% 0;
}
.zk-feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zk-feature__index {
  position: absolute;
  z-index: 2;
  right: -0.08em;
  bottom: -0.42em;
  font-family: var(--zk-font-display);
  font-size: clamp(5.5rem, 11vw, 10rem);
  line-height: 1;
  font-variant-numeric: lining-nums; /* Cormorant defaults to old-style figures whose 3 drops below the line */
  color: transparent;
  -webkit-text-stroke: 1px var(--zk-gold);
  pointer-events: none;
}
.zk-feature--reverse .zk-feature__index { right: auto; left: -0.08em; }
.zk-feature__title {
  font-size: clamp(2.2rem, 4.2vw, 3.7rem);
  font-weight: 500;
  line-height: 1.06;
  margin: 0 0 1.4rem;
  color: var(--tone-fg);
}
.zk-feature__text {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  color: var(--tone-muted);
  max-width: 30rem;
  margin: 0 0 2.25rem;
}
.zk-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tone-muted);
}
.zk-feature__tags li + li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 1.25rem 0.18em 0;
  border-radius: 50%;
  background: var(--zk-gold);
  vertical-align: middle;
}

/* Line button */
.zk-btn--line {
  padding: 0.6rem 0;
  gap: 1rem;
  color: var(--tone-fg, var(--zk-navy));
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  letter-spacing: 0.2em;
}
.zk-btn--line svg { transition: transform 0.45s var(--zk-ease); }
.zk-btn--line:hover { color: var(--zk-gold); transform: none; }
.zk-btn--line:hover svg { transform: translateX(6px); }

/* Split text helpers (SplitText adds these wrappers) */
.zk-line-mask { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* ---------- Contact form section ---------- */
.zk-contactform {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: clamp(6rem, 14vh, 10rem) 0;
  overflow: hidden;
  color: var(--zk-white);
  background: var(--zk-navy);
}
.zk-contactform__bg {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
}
.zk-contactform__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zk-contactform__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11, 31, 42, 0.75) 0%, rgba(11, 31, 42, 0.35) 45%, rgba(11, 31, 42, 0.8) 100%);
}
.zk-contactform__inner { position: relative; z-index: 2; }
.zk-contactform__card {
  max-width: 38rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: rgba(11, 31, 42, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}
.zk-contactform form { display: grid; gap: 1.6rem; }
.zk-contactform .form-field { margin: 0; }
.zk-contactform .form-label,
.zk-contactform label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zk-gold-soft);
}
.zk-contactform .required { color: var(--zk-gold); }
.zk-contactform input[type="text"],
.zk-contactform input[type="email"],
.zk-contactform textarea {
  width: 100%;
  padding: 0.8rem 0;
  font: inherit;
  font-size: 1.1rem;
  color: var(--zk-white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  transition: border-color 0.35s var(--zk-ease);
}
.zk-contactform textarea { min-height: 7.5rem; resize: vertical; }
.zk-contactform input::placeholder,
.zk-contactform textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.zk-contactform input:focus,
.zk-contactform textarea:focus { outline: none; border-bottom-color: var(--zk-gold); }
.zk-contactform .buttons { margin-top: 0.5rem; }
.zk-contactform button[type="submit"],
.zk-contactform .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.4rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zk-navy);
  background: var(--zk-gold);
  border: 1px solid var(--zk-gold);
  cursor: pointer;
  transition: background 0.35s var(--zk-ease);
}
.zk-contactform button[type="submit"]:hover,
.zk-contactform .button:hover { background: var(--zk-gold-soft); }
.zk-contactform .notices {
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-left: 2px solid var(--zk-gold);
  background: rgba(255, 255, 255, 0.08);
}
.zk-contactform .notices p { margin: 0; }

/* ---------- Footer ---------- */
.zk-footer { padding-bottom: 0; overflow: hidden; }
@media (min-width: 900px) {
  .zk-footer__grid { grid-template-columns: 1.1fr 1.5fr 1fr 0.9fr; }
}
.zk-footer__logo {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 0 1px rgba(196, 163, 90, 0.4);
}
.zk-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zk-footer__list a[href^="mailto:"] { text-transform: none; }
.zk-footer__mega {
  font-family: var(--zk-font-display);
  font-size: clamp(5rem, 23vw, 22rem);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: 0.08em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196, 163, 90, 0.4);
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  margin: 1rem 0 -0.06em;
}
.zk-footer__mega .zk-char { display: inline-block; }
.zk-footer__copy { position: relative; padding-bottom: 2rem; }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  .zk-feature__index { font-size: 5rem; }
  .zk-headline__text { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}