/* =============================================================
   ATHANELEON — hero.css  (Αρχική · ενότητα 1: carousel μπουκαλιών)
   Προσαρμογή του demo στο ύφος μας:
   · Γραμματοσειρές: τίτλος → Ysabeau (display), κείμενα/κουμπιά → Commissioner
   · Το χρώμα έμφασης είναι «κλειδωμένο» στον Hero (--hero-accent),
     ΔΕΝ αλλάζει το global χρυσό του site.
   · Η κλάση .nav του demo μετονομάστηκε σε .hero-nav (σύγκρουση με το header).
   ============================================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;                 /* full viewport (σωστό και σε mobile) */
  overflow: hidden;
  background: var(--c-black);
  isolation: isolate;             /* δικό του stacking context (δεν μπλέκει με το header) */

  /* per-hero accent — default = brand gold (το JS το αλλάζει ανά προϊόν) */
  --hero-accent: var(--accent);
  --hero-glow: rgba(196, 162, 78, 0.30);
}

/* Λεπτός κόκκος (film grain) πάνω απ' όλα μέσα στον Hero */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 60;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* Λάμψη πίσω από το ενεργό μπουκάλι */
/* Λάμψη πίσω από το ενεργό μπουκάλι (Desktop - Αρχικό Design) */
.aura {
  position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  left: 50%; top: 44%; transform: translate(-50%, -50%);
  filter: blur(120px); opacity: 0; background: var(--hero-accent);
  transition: background 1.1s ease; z-index: 0;
  animation: auraIn 1.8s ease 0.1s forwards;
}
@keyframes auraIn { to { opacity: 0.2; } }
/* Εντόπισε το container των κειμένων/κουμπιών του Hero (π.χ. .hero-content ή παρόμοιο) */
.hero-text-wrapper {
  /* Αν χρησιμοποιεί bottom, αύξησέ το ελαφρώς για να ανέβει, π.χ. bottom: 12vh; αντί για 8vh */
  bottom: 12vh; 
}

/* Διασφάλιση ότι η λεζάντα δεν κόβεται και έχει σωστό spacing */
.hero-description {
  max-width: 45ch; /* Δίνει επαρκές πλάτος για να μην σπάει σε πολλές γραμμές */
  white-space: normal; /* Επιτρέπει την αλλαγή γραμμής */
  overflow: visible;
  margin-bottom: var(--space-sm); /* Μάζεμα του κενού πριν τα κουμπιά */
}
/* Τεράστιος αχνός τίτλος-υδατογράφημα */
.big-title {
  position: absolute; top: 45%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 11vw, 14rem); font-weight: 700;
  letter-spacing: 0.14em; white-space: nowrap; text-transform: uppercase;
  pointer-events: none; z-index: 1; opacity: 0;
  color: var(--text);
  animation: titleIn 1.6s ease 0.3s forwards;
}
@keyframes titleIn { to { opacity: 0.1; } }

/* Σκηνή που «κόβει» ό,τι βγαίνει εκτός */
.stage { position: absolute; inset: 0; overflow: hidden; z-index: 5; }

.bottle {
  position: absolute;
  bottom: 14vh;
  transform-origin: center bottom;
  transition: left .80s cubic-bezier(.4,0,.2,1),
              height .80s cubic-bezier(.4,0,.2,1),
              filter .80s ease, opacity .80s ease;
  will-change: left, height, filter;
  object-fit: contain;
  animation: floating 6s ease-in-out infinite;
  pointer-events: none; user-select: none;
}

.bottle{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bottle:nth-child(1) { animation-delay: 0s; }
.bottle:nth-child(2) { animation-delay: -2s; }
.bottle:nth-child(3) { animation-delay: -4s; }
@keyframes floating { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* Σκίαση στις άκρες */
.vig-l, .vig-r { position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 15; pointer-events: none; }
.vig-l { left: 0;  background: linear-gradient(to right, rgba(0,0,0,.92), transparent); }
.vig-r { right: 0; background: linear-gradient(to left,  rgba(0,0,0,.92), transparent); }

/* Αντανάκλαση κάτω από το μπουκάλι */
.reflection {
  position: absolute; left: 50%; bottom: 17%;
  width: 180px; height: 70px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.16), transparent 70%);
  filter: blur(18px); z-index: 6; pointer-events: none;
  opacity: 0; animation: fadeIn 1.2s ease 0.8s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* Tagline */
.hero .content {
  position: absolute; bottom: 92px; left: 0; right: 0;
  text-align: center; z-index: 20; pointer-events: none;
}
.tagline-wrap { overflow: hidden; height: 2.2em; display: flex; align-items: center; justify-content: center; }
.hero .content p {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 1.05rem; line-height: 1.7; letter-spacing: 0.04em;
  display: inline-block; opacity: 0; transform: translateY(20px);
  animation: fadeUp .9s cubic-bezier(.22,1,.36,1) .9s forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ----- Επιλογέας προϊόντων (πρώην .nav → .hero-nav) ----- */
.hero-nav {
  position: absolute; left: 0; right: 0; bottom: 42px;
  display: flex; gap: 10px; z-index: 30;
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 5px;
  width: fit-content; margin: 0 auto; opacity: 0;
}
.hero-nav button {
  border: 1.5px solid transparent; color: rgba(255,255,255,.5); background: transparent;
  padding: 10px 24px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .4s, background .4s, border-color .4s, box-shadow .4s, transform .2s;
  position: relative; overflow: hidden;
}
.hero-nav button::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.1), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.hero-nav button:hover { color: rgba(255,255,255,.8); transform: translateY(-1px); }
.hero-nav button:hover::before { opacity: 1; }
.hero-nav button.active-btn {
  color: #000; background: var(--hero-accent); border-color: var(--hero-accent);
  box-shadow: 0 0 18px var(--hero-glow), 0 0 40px var(--hero-glow); transform: none;
}
.hero-nav button.active-btn::before { display: none; }

/* Εναλλαγή tagline */
@keyframes tOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes tIn  { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
.tagline-exit  { animation: tOut .28s ease forwards; }
.tagline-enter { animation: tIn  .38s ease forwards; }

/* Entrance animations */
@keyframes bottleEntrance { 0% { opacity: 0; transform: translateY(80px) scale(.82); } 60% { opacity: 1; transform: translateY(-10px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sideEntrance   { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes textEntrance   { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes navEntrance    { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* ΔΙΟΡΘΩΣΗ MOBILE (alignment): στο κινητό το ενεργό μπουκάλι ήταν χαμηλά
   (κέντρο ~64% ύψους) ενώ το όνομα-υδατογράφημα και το φωτεινό aura ήταν
   ψηλά (~44%). Αποτέλεσμα: το προσκήνιο ΔΕΝ "φωτιζόταν" (το glow έπεφτε
   πάνω από το μπουκάλι) και τα μπουκάλια έδειχναν ξεκρέμαστα-χαμηλά σε
   σχέση με το όνομα. Εδώ: ανεβάζουμε το μπουκάλι και φέρνουμε όνομα+aura
   ΠΙΣΩ του, ώστε να ευθυγραμμίζονται όπως στον υπολογιστή. */
@media (max-width: 47.999em) {
  .bottle { bottom: 32vh !important; }
  /* item 1: tagline + κουμπιά πιο πάνω, ώστε να μειωθεί το κενό με τα μπουκάλια */
  .hero .content { bottom: 22vh; }
  .hero-nav { bottom: 13vh; }
  .big-title { top: 50%; font-size: clamp(4rem, 16vw, 7rem); }
  
  /* Mobile Fix: Καταργούμε το blur και βάζουμε τη μάσκα */
  .aura { 
    top: 50%; 
    width: 800px; 
    height: 800px; 
    filter: none; /* Σημαντικό: απενεργοποιεί το προβληματικό blur στο iOS */
    -webkit-mask-image: radial-gradient(circle, black 15%, transparent 60%);
    mask-image: radial-gradient(circle, black 15%, transparent 60%);
  }
  
  @keyframes auraIn { to { opacity: 0.35; } }
}

/* ΣΗΜΕΙΩΣΗ: οι παρακάτω είναι ΚΑΘΟΛΙΚΟΙ κανόνες (ισχύουν σε όλες τις οθόνες).
   Ήταν κατά λάθος εκτός του mobile media query, με ένα περιττό κλείσιμο στο
   τέλος (περιττό brace). Αφαιρέθηκε. Τους κρατάμε καθολικούς
   ώστε να ΜΗΝ αλλάξει η τρέχουσα εμφάνιση του hero. */
.big-title { top: 50%; font-size: clamp(4rem, 16vw, 7rem); }
.aura { top: 50%; width: 380px; height: 380px; }
@keyframes auraIn { to { opacity: 0.35; } }

/* ΔΙΟΡΘΩΣΗ MOBILE: τα 3 κουμπιά (ELLYSION/YELLINI/ZERION) με το κανονικό
   padding ξεπερνούν το πλάτος της οθόνης σε μικρά κινητά. Πιο σφιχτό
   padding/font-size κάτω από 480px πλάτος. */
@media (max-width: 30em) {
  .hero-nav { gap: 4px; padding: 4px; max-width: calc(100% - 24px); }
  .hero-nav button { padding: 8px 12px; font-size: .64rem; letter-spacing: .08em; }
}

/* Σεβασμός reduced-motion: σταθερά, χωρίς κίνηση */
@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero::after { animation: none !important; transition: none !important; }
  .aura { opacity: 0.2; }
  .big-title { opacity: 0.1; }
  .hero .content p, .hero-nav { opacity: 1; }
}