@property --p { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

/* philosophy.css — Αρχική · ενότητα 2: Φιλοσοφία brand */
.philosophy { position: relative; height: 220vh; background: var(--bg); }

.philosophy-inner {
  position: sticky; top: 0; min-height: 100vh;
  display: grid; place-items: center;
  padding-inline: var(--gutter);
}

.philosophy-statement {
  max-width: 18ch; margin: 0 auto; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 4vw, 5rem);
  line-height: 1.15; letter-spacing: -0.01em;
}

/* Κάθε λέξη: λευκό βάση → χρυσό γέμισμα από αριστερά (οδηγείται από --p) */
.philo-word {
  display: inline-block;
  background-image: linear-gradient(90deg,
    var(--accent) 0%, var(--accent) var(--p, 0%),
    #ffffff var(--p, 0%), #ffffff 100%);
  -webkit-background-clip: text; 
  background-clip: text;
  -webkit-text-fill-color: transparent; 
  color: transparent;
  
  /* ΔΙΟΡΘΩΣΗ: Αλλάζουμε το opacity από 0 σε 1 για να φαίνεται λευκό εξαρχής */
  opacity: 1; 
  
  transform: translateY(0); /* Αν το εφέ scroll trigger αναλαμβάνει το transform, το αφήνεις, αλλιώς μηδένισέ το */
  transition: transform .4s var(--ease);
}

/* Entrance: εμφάνιση λέξη-λέξη όταν μπει το section */
.philosophy-inner.is-in .philo-word {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .philo-word { opacity: 1; transform: none; transition: none; }
}