/* =========================
   Summer 26 — video-in-letters morph (standalone hero)
   -------------------------------------
   LOCKED τιμές (tuned):
   - crossfade: ταχύτατο (βλ. @keyframes summerMorph)
   - goo blur: base 1.2 / spike 4.5  (στο index.html, SMIL)
   - goo threshold: 26 -11           (στο index.html, feColorMatrix)

   4 λέξεις (summer, sommer, verano, estate) -> cycle 16s,
   delays 0 / -4 / -8 / -12s.
   ========================= */

html,
body {
  margin: 0;
}

/* Ύψος του header (whb-header) που αφαιρείται ώστε το hero να πιάνει
   ΑΚΡΙΒΩΣ το υπόλοιπο της οθόνης. Αν αλλάξει ο header, ρύθμισε εδώ
   (ή δες το JS snippet που μετράει αυτόματα το .whb-header). */
:root {
  --monk-header-h: 155px;
  --monk-header-h-mobile: 136px;
}

.featured_wrapper {
  min-height: calc(100vh - var(--monk-header-h));
  height: calc(100vh - var(--monk-header-h));
  display: flex;
  flex-direction: column;
  background: #02979c;
}

@supports (height: 100dvh) {
  .featured_wrapper {
    min-height: calc(100dvh - var(--monk-header-h));
    height: calc(100dvh - var(--monk-header-h));
  }
}

@media (max-width: 768px) {
  .featured_wrapper {
    min-height: calc(100vh - var(--monk-header-h-mobile));
    height: calc(100vh - var(--monk-header-h-mobile));
  }

  @supports (height: 100dvh) {
    .featured_wrapper {
      min-height: calc(100dvh - var(--monk-header-h-mobile));
      height: calc(100dvh - var(--monk-header-h-mobile));
    }
  }
  
}

#monk_slider {
  position: relative;
  isolation: isolate;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ===== morph stage ===== */
.summer-morph {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #02979c;            /* ίδιο teal με τα SVG -> άκρες του box αόρατες */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Κάθετο stack: κείμενο πάνω, μορφούμενη λέξη κάτω — κεντραρισμένα μαζί */
.summer-morph__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.5vw, 32px);
  width: min(1318px, 92vw);
}

/* Κείμενο πάνω από τη λέξη (αλλάζει πλάτος εδώ αν θες πιο μικρό/μεγάλο) */
/* Κείμενο πάνω από τη λέξη (αλλάζει πλάτος εδώ αν θες πιο μικρό/μεγάλο) */

.summer-morph__text {

  width: 258px;

  height: auto;

  display: block;

  position: relative;

  bottom: -88px;

  z-index: 9999;

}

.summer-morph__2026 {
  width: 330px;
  height: auto;
  display: block;
  position: relative;
  bottom: 238px;
  z-index: 9999;
  left: 206px;
  transform: rotate(-6deg);
  transform-origin: center center;
}

@media (max-width: 768px) {

  .summer-morph__text {
    bottom: -30px;
  }

  .summer-morph__2026 {
  width: 130px;
  height: auto;
  display: block;
  position: relative;
  bottom: 104px;
  z-index: 9999;
  left: 42px;
  transform: rotate(-6deg);
  transform-origin: center center;
}

}

/* Box: κρατά το φυσικό aspect ratio του artwork, responsive (πλάτος από το stack) */
.summer-morph__box {
  position: relative;
  width: 100%;
  aspect-ratio: 1318 / 369;
}

/* Video: γεμίζει το box (cover) -> φαίνεται μόνο μέσα στα γράμματα */
.summer-morph__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Teal panel (γράμματα = τρύπες μέσω mask) πάνω από το video */
.summer-morph__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Κάθε λέξη ξεκινά κρυμμένη· τα keyframes την εναλλάσσουν */
.summer-morph__word {
  opacity: 0;
  animation: summerMorph 16s infinite;
  will-change: opacity;
}

/* 4 λέξεις × 4s, staggered */
.summer-morph .w1 { animation-delay:   0s; }
.summer-morph .w2 { animation-delay:  -4s; }
.summer-morph .w3 { animation-delay:  -8s; }
.summer-morph .w4 { animation-delay: -12s; }

/* στιγμιαίο crossfade (2% του 16s ≈ 0.32s) */
@keyframes summerMorph {
  0%   { opacity: 1; }
  2%   { opacity: 0; }
  73%  { opacity: 0; }
  75%  { opacity: 1; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .summer-morph__word { animation: none; }
  .summer-morph .w1 { opacity: 1; }   /* στατικά μία λέξη */
}