/* =====================================================================
   HERO Αρχικής — «λευκό μεταλλικό» (MS Business Solutions)
   Αυτόνομο section: όλα τα χρώματα είναι CSS variables στο .msh
   Χρησιμοποιείται από index.html
   ===================================================================== */

.msh {
  /* ---- Παλέτα ---- */
  --msh-bg-1: #F4F6F8;          /* φόντο: ice white, πάνω */
  --msh-bg-2: #F4F6F8;          /* φόντο: ice white, κάτω (ίδιο με την επόμενη ενότητα) */
  --msh-ink: #2B2F36;           /* γραφίτης: τίτλος, κουμπί */
  --msh-ink-soft: #5A616B;      /* υπότιτλος */
  --msh-ink-mid: #6B727D;       /* μεταλλική διαβάθμιση τίτλου */
  --msh-accent: #4A7BFF;        /* μόνο για focus */
  --msh-metal-1: #6E737B;       /* μεταλλική διαβάθμιση logo: σκούρο ανθρακί */
  --msh-metal-2: #3A3E45;
  --msh-metal-3: #1C1F24;
  --msh-metal-4: #4E535B;

  /* ---- LOGO (placeholder) ----
     Για να βάλετε δικό σας SVG: αντικαταστήστε το url(...) με url("images/logo.svg")
     ή με το δικό σας data URI. Χρησιμοποιείται ως mask, άρα μετράει μόνο το σχήμα (όχι το χρώμα). */
  --msh-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='190 170 740 700'%3E%3Cg fill='%23000'%3E%3Cpolygon points='208,248 425,528 640,250 640,452 557,545 557,465 425,625 288,465 288,615 208,680'/%3E%3Cpolygon points='320,835 610,505 910,185 620,515'/%3E%3Cpolygon points='662,492 703,446 735,446 765,468 718,527'/%3E%3Cpath d='M580,568 L735,610 C780,625 805,660 800,710 C795,790 720,850 630,850 C560,850 490,815 443,770 L493,705 C530,745 580,775 640,775 C690,775 718,745 715,710 C712,680 690,665 650,655 L548,640 Z'/%3E%3C/g%3E%3C/svg%3E");
  --msh-logo-ratio: 740 / 700;

  /* Υφή βουρτσισμένου μετάλλου: οριζόντιος θόρυβος (SVG feTurbulence) */
  --msh-brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--msh-bg-1) 0%, var(--msh-bg-2) 100%);   /* ice white, χωρίς πλέγμα/υφή */
  color: var(--msh-ink);
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
}

/* ---------- Μπλε-γκρι «καπνός»: απαλή θολή σκιά που κάνει αντίθεση με το λευκό ---------- */
.msh {
  --msh-haze: 120 140 170;      /* RGB μπλε-γκρι σκιάς */
}
.msh::before {
  content: ''; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 16% 20% at 72% 50%, rgb(70 86 112 / .45) 0%, transparent 70%),
    radial-gradient(ellipse 30% 36% at 74% 50%, rgb(var(--msh-haze) / .5) 0%, rgb(var(--msh-haze) / .18) 48%, transparent 75%),
    radial-gradient(ellipse 20% 24% at 88% 28%, rgb(var(--msh-haze) / .3) 0%, transparent 70%),
    radial-gradient(ellipse 24% 18% at 58% 70%, rgb(var(--msh-haze) / .26) 0%, transparent 70%);
  filter: blur(44px);
  /* σβήνει πριν το πάνω & το κάτω όριο, ώστε το hero να ενώνεται ομαλά με το header και την επόμενη ενότητα */
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 26%, #000 70%, transparent 88%);
          mask-image: linear-gradient(180deg, transparent 8%, #000 26%, #000 70%, transparent 88%);
  /* «Αναπνοή»: ο καπνός μεγαλώνει & μικραίνει πολύ αργά */
  transform-origin: 74% 50%;
  animation: msh-breathe 9s ease-in-out infinite alternate;
  will-change: transform, opacity;   /* ο browser θολώνει μία φορά και απλώς το μετακινεί (λιγότερος φόρτος) */
}
@keyframes msh-breathe {
  from { transform: scale(1);    opacity: .85; }
  to   { transform: scale(1.07); opacity: 1; }
}

/* ---------- Διάταξη (συμπαγής) ---------- */
.msh-inner {
  max-width: 80rem; margin: 0 auto; padding: 3rem 16px 3.5rem;   /* ίδιο πλάτος με το header */
  display: grid; gap: 2rem; align-items: center;
}
@media (min-width: 640px) { .msh-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) {
  .msh-inner {
    grid-template-columns: 55fr 45fr; gap: 3rem;
    min-height: min(80vh, 46rem); padding: 4rem 2rem 9rem;   /* χώρος κάτω για την κορδέλα φωτός */
  }
}

/* ---------- Κείμενα ---------- */
.msh-title {
  margin: 0; font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
  font-size: clamp(2.4rem, 1.5rem + 2.9vw, 4.1rem);
  color: var(--msh-ink);
}
.msh-line { display: block; text-wrap: balance; }   /* αν σπάσει μια γραμμή, χωρίζεται ισόρροπα */
/* Διακριτική μεταλλική διαβάθμιση στις λέξεις «Ψηφιακές Λύσεις» */
.msh-metal-text {
  background: linear-gradient(100deg, var(--msh-ink) 0%, var(--msh-ink-mid) 42%, var(--msh-ink) 68%, #454B55 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.msh-sub {
  margin: 1.5rem 0 0; max-width: 560px;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6;
  color: var(--msh-ink-soft);
}

/* ---------- CTA: κάψουλα γραφίτη ---------- */
.msh-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .75rem;
  margin-top: 2.25rem; padding: .95rem 1.8rem; border-radius: 999px;
  background: linear-gradient(180deg, #353A42 0%, var(--msh-ink) 100%);
  color: #FFFFFF; font-weight: 700; font-size: 1rem; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -8px rgba(43,47,54,.55);
  transition: transform .3s ease, box-shadow .3s ease;
}
.msh-cta-arrow { transition: transform .3s ease; }
/* Ανταύγεια που περνά πάνω από το κουμπί στο hover */
.msh-cta::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  transform: skewX(-20deg); transition: left .6s ease;
}
.msh-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 28px -12px rgba(43,47,54,.6); }
.msh-cta:hover .msh-cta-arrow { transform: translateX(4px); }
.msh-cta:hover::after { left: 120%; }
.msh-cta:focus-visible { outline: 3px solid var(--msh-accent); outline-offset: 3px; border-radius: 999px; }

/* ---------- Logo: σκούρο ανθρακί, κατεργασμένο μέταλλο ---------- */
.msh-visual { display: flex; justify-content: center; order: -1; }
/* Κινητό: το MS πάνω αριστερά (στοιχισμένο με τον τίτλο), πιο κοντά στο header */
@media (max-width: 639px) {
  .msh .msh-visual, .msh .msh-logo-in { justify-content: flex-start; }
  .msh-inner { padding-top: 1.25rem; }
}
@media (min-width: 1024px) { .msh-visual { order: 0; } }
.msh-logo { position: relative; width: min(40vw, 10rem); }
.msh-logo-shade { position: relative; z-index: 1; }

/* ---------- 3D «κορδέλα φωτός» στο κάτω μέρος (σχεδιάζεται από assets/hero.js) ---------- */
.msh {
  --msh-ribbon-1: 74 123 255;   /* μπλε    #4A7BFF */
  --msh-ribbon-2: 34 190 230;   /* κυανό   #22BEE6 */
  --msh-ribbon-3: 112 108 240;  /* λουλακί #706CF0 */
}
.msh-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: -1; pointer-events: none;
  /* σβήνει προς τα πάνω, στο κάτω όριο και στα πλάγια */
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
          mask-image: linear-gradient(0deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
.msh-ribbon {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
}


@media (min-width: 1024px) { .msh-logo { width: min(100%, 27rem); } }
/* Ανταύγεια στις ακμές + απαλή σκιά (το filter δουλεύει πάνω στο σχήμα της mask) */
.msh-logo-shade {
  filter:
    drop-shadow(0 -1px 0 rgba(255,255,255,.9))
    drop-shadow(0 1px 1px rgba(0,0,0,.35))
    drop-shadow(0 18px 26px rgba(20,22,26,.22));
}
.msh-logo-metal {
  position: relative; overflow: hidden; aspect-ratio: var(--msh-logo-ratio);
  background:
    var(--msh-brushed),
    linear-gradient(135deg, var(--msh-metal-1) 0%, var(--msh-metal-2) 34%, var(--msh-metal-3) 62%, var(--msh-metal-4) 100%);
  background-size: 320px 320px, 100% 100%;
  background-blend-mode: overlay, normal;
  -webkit-mask: var(--msh-logo) center / contain no-repeat;
          mask: var(--msh-logo) center / contain no-repeat;
}
/* Φωτεινή λωρίδα που σαρώνει το logo κάθε ~6s */
.msh-logo-sweep {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 30%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  transform: translateX(-150%) skewX(-18deg);
  animation: msh-sweep 6s ease-in-out 1.5s infinite;
}
@keyframes msh-sweep {
  0%        { transform: translateX(-150%) skewX(-18deg); }
  28%, 100% { transform: translateX(420%) skewX(-18deg); }
}

/* ---------- Animation εισόδου ---------- */
/* Γρήγορη είσοδος: όλα φαίνονται μέσα σε ~0,5 δευτ. (πιο «άμεση» αίσθηση) */
.msh-line, .msh-sub, .msh-cta { opacity: 0; animation: msh-rise .45s cubic-bezier(.2,.7,.2,1) forwards; }
.msh-line:nth-child(1) { animation-delay: 0s; }
.msh-line:nth-child(2) { animation-delay: .04s; }
.msh-line:nth-child(3) { animation-delay: .08s; }
.msh-sub   { animation-delay: .12s; }
.msh-cta   { animation-delay: .16s; }
.msh-logo-in { width: 100%; display: flex; justify-content: center; }
.msh-logo-in { opacity: 0; animation: msh-logo-in .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes msh-rise    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes msh-logo-in { from { opacity: 0; transform: scale(.96); }      to { opacity: 1; transform: none; } }
/* Το κουμπί κρατά το hover transform μετά την είσοδο */
.msh-cta { animation-fill-mode: backwards; opacity: 1; }

/* ---------- Μειωμένη κίνηση ---------- */
@media (prefers-reduced-motion: reduce) {
  .msh-logo-sweep { animation: none; display: none; }
  .msh::before { animation: none; }
  .msh-line, .msh-sub, .msh-cta, .msh-logo-in { animation: none; opacity: 1; }
  .msh-cta, .msh-cta-arrow, .msh-cta::after { transition: none; }
}