/* ============================================================
   BAYWATCH HOTEL — enhancements
   Gooey text morph · Welcome page · Gastronomy · Articles
   Richer reveal animations. Loaded after pages.css.
   ============================================================ */

/* ---------- Hero highlights (always-visible chips, travelling emphasis) ---------- */
.gooey{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem; line-height:1.25; }
.hero__hl{
  font-family:var(--serif); font-weight:500; font-style:italic;
  color:rgba(241,233,218,.62); white-space:nowrap;
  transition:color .6s var(--ease), text-shadow .6s var(--ease), transform .6s var(--ease);
}
.hero__hl.is-active{
  color:var(--bone); text-shadow:0 0 26px rgba(224,195,137,.55), 0 1px 2px rgba(0,0,0,.45);
  transform:translateY(-1px);
}
.hero__hl-sep{ color:var(--gold-2); opacity:.55; font-weight:400; }
@media (prefers-reduced-motion:reduce){ .hero__hl{ transition:none; } }

/* ---------- Welcome (language) landing ---------- */
.welcome{ position:relative; min-height:100svh; min-height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.welcome__media{ position:absolute; inset:0; z-index:0; }
.welcome__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity 2s ease-in-out, transform 7s ease-out; will-change:opacity, transform; }
.welcome__media video.is-active{ opacity:1; transform:scale(1.1); }
.welcome__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,16,15,.7), rgba(8,16,15,.45) 40%, rgba(8,16,15,.85)); }
.welcome__top{ position:relative; z-index:2; display:flex; justify-content:center; padding:clamp(2rem,5vh,3.5rem) var(--gutter) 0; }
.welcome__brand{ font-family:var(--display); font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:.2em; color:var(--bone); }
.welcome__brand em{ font-style:normal; color:var(--gold); }
.welcome__center{
  position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem var(--gutter); gap:1.6rem; animation:welcomeIn 1.1s var(--ease) both;
}
@keyframes welcomeIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.welcome__mark{ font-family:var(--display); font-weight:400; font-size:clamp(2.8rem,9vw,6rem); letter-spacing:.22em; color:var(--bone); line-height:1; text-shadow:0 2px 40px rgba(0,0,0,.45); }
.welcome__mark em{ font-style:normal; color:var(--gold); }
.welcome__rule{ display:block; width:72px; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.85; }
.welcome__langs{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; justify-content:center; margin-top:.6rem; width:min(940px, 94vw); }
.lang-card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1.7rem 1rem; border:1px solid rgba(241,233,218,.18); border-radius:2px;
  background:rgba(8,16,15,.32); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--bone);
  transition:transform .55s var(--ease), border-color .55s var(--ease), color .55s var(--ease);
}
.lang-card::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--gold); transform:translateY(101%); transition:transform .6s var(--ease); }
.lang-card:hover{ transform:translateY(-6px); border-color:var(--gold); color:var(--ink); }
.lang-card:hover::before{ transform:translateY(0); }
.lang-card:hover span{ color:rgba(11,20,19,.66); }
.lang-card b{ font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.75rem); font-weight:500; }
.lang-card span{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); transition:color .55s var(--ease); }
@media (max-width:640px){ .welcome__langs{ grid-template-columns:1fr 1fr; } }
.welcome__foot{ position:relative; z-index:2; text-align:center; padding:0 var(--gutter) clamp(2rem,5vh,3rem); color:var(--bone-3); font-size:.8rem; letter-spacing:.04em; }
.welcome__foot a{ color:var(--bone-2); }

/* ---------- Gastronomy / Activities ---------- */
.feat-list{ display:grid; gap:0; }
.feat-list li{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; padding:1.4rem 0; border-top:1px solid var(--line); align-items:baseline; }
.feat-list li:last-child{ border-bottom:1px solid var(--line); }
.feat-list .k{ font-family:var(--serif); font-size:1.4rem; color:var(--gold-2); min-width:9ch; }
.feat-list .v{ color:var(--bone-3); font-size:1.02rem; line-height:1.6; }
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.tags li{ font-size:.78rem; letter-spacing:.04em; color:var(--bone-2); border:1px solid var(--line); border-radius:999px; padding:.45rem .95rem; }
.pdo{ display:inline-block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--gold); border-radius:999px; padding:.18rem .5rem; margin-left:.5rem; vertical-align:middle; }

/* ---------- Article (attraction detail) ---------- */
.article-hero{ position:relative; min-height:clamp(60vh,72vh,720px); display:flex; align-items:flex-end; overflow:hidden; }
.article-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.06); }
.article-hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,16,15,.5), rgba(8,16,15,.1) 45%, rgba(8,16,15,.94)); }
.article-hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter) clamp(2.5rem,6vh,4.5rem); }
.article-hero__cat{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-2); margin-bottom:1rem; }
.article-hero__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,7vw,5.4rem); line-height:1.06; color:var(--bone); padding-bottom:.04em; }
.article-body{ display:grid; grid-template-columns:1fr; gap:0; max-width:760px; margin-inline:auto; }
.article-meta{ display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; padding:1.6rem 0; border-block:1px solid var(--line); margin-bottom:2.6rem; }
.article-meta div b{ display:block; font-family:var(--serif); font-size:1.4rem; color:var(--gold); }
.article-meta div span{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-2); }
.article-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:2.6rem 0; }
.article-gallery figure{ overflow:hidden; border-radius:var(--radius); }
.article-gallery img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .9s var(--ease); }
.article-gallery figure:hover img{ transform:scale(1.05); }
.article-gallery .wide{ grid-column:1 / -1; aspect-ratio:auto; }
.article-nav{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:2.4rem; border-top:1px solid var(--line); margin-top:2rem; }

/* ---------- Richer reveal animations ---------- */
/* clip-path image reveal */
.js .reveal-clip{ clip-path:inset(0 0 100% 0); }
.js .reveal-clip.is-in{ clip-path:inset(0 0 0% 0); transition:clip-path 1.1s var(--ease); }
/* line-by-line text */
.js .reveal-mask{ overflow:hidden; }
.js .reveal-mask > *{ transform:translateY(110%); }
/* float-up cards already use reveal-fade */

/* ---------- Hover link preview ---------- */
.lp{ color:var(--gold-2); text-decoration:none; cursor:help; white-space:nowrap;
  background-image:linear-gradient(var(--gold),var(--gold)); background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:color .3s var(--ease); }
.lp:hover{ color:var(--gold); }
.lp__pop{
  position:fixed; z-index:120; width:240px; aspect-ratio:4/3; pointer-events:none;
  transform:translate(-50%, -100%) translateY(-12px) scale(.86) rotate(-3deg); transform-origin:bottom center;
  opacity:0; border-radius:8px; overflow:hidden; border:1px solid rgba(241,233,218,.18);
  box-shadow:0 30px 70px rgba(0,0,0,.55); transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.lp__pop.is-on{ opacity:1; transform:translate(-50%, -100%) translateY(-12px) scale(1) rotate(0deg); }
.lp__pop img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:760px){ .lp__pop{ display:none; } }

/* ---------- Scroll portrait wall (home gallery) ---------- */
.pwall{ background:var(--ink-1); overflow:hidden; }
.pwall__head{ padding-bottom:clamp(2.5rem,5vw,4rem); }
.pwall__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.4vw,1.2rem); padding-inline:var(--gutter); }
.pwall__col{ display:flex; flex-direction:column; gap:clamp(.8rem,1.4vw,1.2rem); will-change:transform; }
.pwall__col--lead{ margin-top:clamp(2rem,5vw,4.5rem); }
.pwall__item{ position:relative; overflow:hidden; border-radius:3px; }
.pwall__item img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; cursor:zoom-in; filter:saturate(.96); transition:transform 1s var(--ease), filter .5s var(--ease); }
.pwall__item:hover img{ transform:scale(1.05); filter:saturate(1.06); }
@media (max-width:760px){ .pwall__grid{ grid-template-columns:1fr 1fr; gap:.7rem; } .pwall__col{ gap:.7rem; } .pwall__col--lead{ margin-top:1.4rem; } }

/* ---------- Mouse-responsive background (content sections under the hero) ----------
   A soft burnished-gold light that follows the cursor behind the text. */
.mrb{ position:relative; isolation:isolate; }
.mrb::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38rem 38rem at var(--mrb-x,50%) var(--mrb-y,28%), rgba(198,162,90,.13), transparent 62%),
    radial-gradient(26rem 26rem at calc(100% - var(--mrb-x,50%)) calc(100% - var(--mrb-y,28%)), rgba(24,48,43,.45), transparent 60%);
  opacity:0; transition:opacity 1s var(--ease);
}
.mrb.is-live::before{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .mrb::before{ display:none; } }

/* mouse-responsive light that follows the cursor across imagery */
.imgfx{ position:relative; }
.imgfx__glow{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease); mix-blend-mode:soft-light; border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(241,233,218,.22), rgba(198,162,90,.08) 38%, transparent 64%);
}

/* spotlight hover for cards */
.card{ --mx:50%; --my:0%; }
.card::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(198,162,90,.14), transparent 60%); }
.card:hover::after{ opacity:1; }

@media (max-width:700px){ .article-gallery{ grid-template-columns:1fr; } .feat-list li{ grid-template-columns:1fr; gap:.4rem; } }

/* ============================================================
   BESPOKE LOCATION MAP (replaces the generic Google iframe)
   ============================================================ */
.locmap{
  position:relative; width:100%; margin:0; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line);
  background:var(--ink-1); box-shadow:0 30px 70px -40px rgba(0,0,0,.8);
}
.locmap__canvas{ position:relative; width:100%; aspect-ratio:4/3; }
.locmap__svg{ display:block; width:100%; height:100%; }
.locmap__svg text{ font-family:var(--sans); }

/* base cartography */
.lm-grid line{ stroke:var(--bone); stroke-opacity:.045; stroke-width:1; }
.lm-shimmer path{ fill:none; stroke:var(--bone-2); stroke-opacity:.10; stroke-width:1.2; }
.lm-contour path{ fill:none; stroke:var(--gold); stroke-opacity:.13; stroke-width:1.2; }
.lm-coast{ fill:none; stroke:var(--bone); stroke-opacity:.45; stroke-width:1.6; stroke-linecap:round; }
.lm-parallax{ transition:transform .5s cubic-bezier(.16,1,.3,1); }

/* routes */
.lm-route{ fill:none; stroke:var(--gold-2); stroke-opacity:.55; stroke-width:1.4; stroke-dasharray:2 7; stroke-linecap:round; }

/* towns */
.lm-dot{ fill:var(--bone); }
.lm-dot-ring{ fill:none; stroke:var(--bone-2); stroke-opacity:.5; stroke-width:1; }
.lm-town{ fill:var(--bone-2); font-size:15px; letter-spacing:.16em; font-weight:500; }
.lm-dist{ fill:var(--gold-2); font-size:11px; letter-spacing:.14em; opacity:.85; }
.lm-sea{ fill:var(--bone-3); font-family:var(--serif)!important; font-style:italic; font-size:30px; letter-spacing:.04em; opacity:.7; }

/* the hotel */
.lm-hotel-pin{ fill:var(--gold-2); }
.lm-hotel-core{ fill:var(--ink); }
.lm-hotel-pulse{ fill:none; stroke:var(--gold-2); stroke-width:1.4; transform-origin:center; transform-box:fill-box; animation:lmPulse 3.2s ease-out infinite; }
.lm-hotel-name{ fill:var(--bone); font-size:17px; letter-spacing:.2em; font-weight:600; }
.lm-hotel-sub{ fill:var(--gold-2); font-size:10.5px; letter-spacing:.18em; opacity:.9; }
@keyframes lmPulse{ 0%{ transform:scale(.5); opacity:.9; } 70%{ opacity:0; } 100%{ transform:scale(3.6); opacity:0; } }

/* compass + scale + frame */
.lm-compass-ring{ fill:none; stroke:var(--bone); stroke-opacity:.25; stroke-width:1; }
.lm-compass-needle{ fill:var(--gold-2); }
.lm-compass-needle--s{ fill:var(--bone-2); opacity:.5; }
.lm-compass-n{ fill:var(--bone-2); font-size:12px; letter-spacing:.1em; }
.lm-coords{ fill:var(--bone-3); font-size:12px; letter-spacing:.32em; }
.lm-scale line{ stroke:var(--bone-2); stroke-opacity:.55; stroke-width:1; }
.lm-scale text{ fill:var(--bone-3); font-size:11px; letter-spacing:.18em; }
.lm-frame{ fill:none; stroke:var(--bone); stroke-opacity:.14; }

/* directions link */
.locmap__bar{
  position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between;
  align-items:center; gap:1rem; padding:1.1rem 1.4rem;
  background:linear-gradient(0deg, rgba(8,16,15,.85), transparent);
}
.locmap__place{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3); }
.locmap__cta{
  display:inline-flex; align-items:center; gap:.5em; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone); border:1px solid var(--bone-2);
  padding:.7em 1.3em; border-radius:2px; background:transparent;
  transition:color .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.locmap__cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.locmap__cta .lm-arrow{ transition:transform .4s var(--ease); }
.locmap__cta:hover .lm-arrow{ transform:translate(2px,-2px); }

@media (prefers-reduced-motion: reduce){ .lm-hotel-pulse{ animation:none; opacity:0; } }
@media (max-width:560px){
  .lm-town{ font-size:18px; } .lm-sea{ font-size:34px; } .lm-hotel-name{ font-size:20px; }
  .locmap__bar{ flex-direction:column; align-items:flex-start; gap:.7rem; }
}

/* ============================================================
   EXPANDING ACCORDION GALLERY (Το Baywatch σε εικόνες)
   ============================================================ */
.acc-gallery{ display:flex; gap:.7rem; height:clamp(420px,66vh,640px); }
.acc-item{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; border-radius:3px;
  cursor:pointer; border:1px solid var(--line-soft);
  transition:flex .8s cubic-bezier(.16,1,.3,1);
}
.acc-item img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.66) saturate(1.04);
  transition:transform 1.4s var(--ease), filter .7s var(--ease);
}
.acc-item.is-active{ flex:4.6 1 0; }
.acc-item.is-active img{ filter:brightness(1) saturate(1.12); transform:scale(1.05); }
.acc-item__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.5rem 1.6rem;
  display:flex; flex-direction:column; gap:.3rem; white-space:nowrap; overflow:hidden;
  background:linear-gradient(0deg, rgba(8,16,15,.85), rgba(8,16,15,.1) 70%, transparent);
  opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease) .12s, transform .55s var(--ease) .12s;
}
.acc-item.is-active .acc-item__cap{ opacity:1; transform:none; }
.acc-item__cap b{ font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,2vw,1.7rem); color:var(--bone); line-height:1.1; }
.acc-item__cap span{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2); }
@media (max-width:760px){
  .acc-gallery{ flex-direction:column; height:auto; gap:.5rem; }
  .acc-item{ flex:none; height:54vw; min-height:230px; }
  .acc-item img{ filter:brightness(.9) saturate(1.05); }
  .acc-item.is-active{ flex:none; }
  .acc-item__cap{ opacity:1; transform:none; }
}

/* ============================================================
   SCROLL-REEL TESTIMONIALS (Με δικά τους λόγια)
   ============================================================ */
.reel{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
  height:clamp(480px,76vh,760px); overflow:hidden; margin-top:clamp(2rem,4vw,3rem);
}
.reel__col{ overflow:hidden; }
.reel__track{ display:flex; flex-direction:column; gap:1.4rem; will-change:transform; }
.rcard{
  border:1px solid var(--line); border-radius:7px; padding:1.5rem 1.6rem 1.7rem;
  background:linear-gradient(180deg, rgba(241,233,218,.04), rgba(241,233,218,.015));
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.rcard:hover{ border-color:rgba(198,162,90,.5); transform:translateY(-2px); }
.rcard__head{ display:flex; align-items:center; gap:.85rem; margin-bottom:.95rem; }
.rcard__avatar{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; border:1px solid rgba(198,162,90,.6); box-shadow:0 4px 14px -6px rgba(0,0,0,.6); }
.rcard__id{ display:flex; flex-direction:column; gap:.15rem; }
.rcard__id cite{ font-style:normal; font-family:var(--serif); font-weight:500; font-size:1.05rem; color:var(--bone); }
.rcard__id span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3); }
.rcard__stars{ color:var(--gold); font-size:.8rem; letter-spacing:.22em; margin-bottom:.7rem; }
.rcard p{ font-family:var(--serif); font-size:1.1rem; line-height:1.5; color:var(--bone-2); }
.reel__mask{ position:absolute; left:0; right:0; height:16%; pointer-events:none; z-index:3; }
.reel__mask--top{ top:0; background:linear-gradient(180deg, var(--ink) 10%, transparent); }
.reel__mask--bottom{ bottom:0; background:linear-gradient(0deg, var(--ink) 10%, transparent); }
@media (max-width:860px){ .reel{ grid-template-columns:repeat(2,1fr); } .reel__col--third{ display:none; } }
/* phones: one auto-scrolling column of the same cards (compact, still dynamic) */
@media (max-width:560px){
  .reel{ grid-template-columns:1fr; height:clamp(440px,76vh,600px); }
  .reel__col--down, .reel__col--third{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .reel{ height:auto; overflow:visible; } .reel__track{ transform:none !important; } .reel__mask{ display:none; } }