/* ============================================================
   ORTEM Hellas — Motion Layer v2
   «Πρώτα το φως, μετά η ύλη» / light first, matter follows.
   Περιέχει ΜΟΝΟ keyframes + μηχανισμούς κίνησης.
   Δουλεύει πάνω στο υπάρχον markup του θέματος (χωρίς αλλαγές HTML).
   ============================================================ */

:root{
  --oa-cyan:#62d2c8;
  --oa-lite:#9af5ea;
  --oa-white:#eafffb;
  --oa-ease:cubic-bezier(.16,.84,.44,1);
  --oa-out:cubic-bezier(.22,1,.36,1);
  --oa-glow:1;            /* έντασης πολλαπλασιαστής (JS) */
}

/* ---------- 1. ΜΠΑΡΕΣ: οι σκούρες μπάρες μπαίνουν ΜΑΖΙ με το τιρκουάζ φως ---------- */
.oa-bar{position:relative; overflow:hidden;}
.oa-bar.oa-armed{
  background-color:transparent !important; background-image:none !important;
  border-top-color:transparent !important; border-bottom-color:transparent !important;
}
.oa-door{
  position:absolute; top:0; bottom:0; width:50.5%; z-index:0;
  will-change:transform; backface-visibility:hidden;
  background-color:var(--oa-bar-bg,#1b282c);
  background-image:var(--oa-bar-bgi,none);
  border-top:1px solid var(--oa-bar-line,transparent);
  border-bottom:1px solid var(--oa-bar-line,transparent);
}
.oa-door-l{left:0;  transform:translate3d(-101%,0,0);}
.oa-door-r{right:0; transform:translate3d(101%,0,0);}
.oa-bar.oa-run .oa-door{transform:translate3d(0,0,0); transition:transform var(--oa-dur,1s) var(--oa-out);}
/* το φωτεινό «μέτωπο» κάθε πόρτας */
.oa-door > i{
  position:absolute; top:-2px; bottom:-2px; width:3px; opacity:0;
  background:var(--oa-lite);
  box-shadow:0 0 16px 4px rgba(98,210,200,calc(.95 * var(--oa-glow))),
             0 0 46px 15px rgba(98,210,200,calc(.45 * var(--oa-glow)));
  transition:opacity .28s linear;
}
.oa-door-l > i{right:-1px;}
.oa-door-r > i{left:-1px;}
.oa-bar.oa-run .oa-door > i{opacity:1;}
.oa-bar.oa-met .oa-door > i{opacity:0; transition:opacity .5s linear;}

/* ραφή στο κέντρο: το «κλείδωμα» των δύο μισών */
.oa-seam{position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:2; background:var(--oa-white); opacity:0; pointer-events:none;}
.oa-bar.oa-met .oa-seam{animation:oaSeam .8s var(--oa-ease) forwards;}
@keyframes oaSeam{
  0%{opacity:0; transform:scaleY(.15);}
  16%{opacity:1; transform:scaleY(1);
      box-shadow:0 0 26px 9px rgba(154,245,234,calc(.9 * var(--oa-glow))), 0 0 90px 34px rgba(98,210,200,calc(.5 * var(--oa-glow)));}
  100%{opacity:0; transform:scaleY(1.04); box-shadow:0 0 0 0 rgba(98,210,200,0);}
}
/* το κρουστικό κύμα όταν συναντιούνται */
.oa-bar.oa-met{animation:oaLand 1s var(--oa-ease);}
@keyframes oaLand{
  0%{filter:drop-shadow(0 0 0 rgba(98,210,200,0));}
  20%{filter:drop-shadow(0 0 36px rgba(98,210,200,calc(.55 * var(--oa-glow))));}
  100%{filter:drop-shadow(0 0 0 rgba(98,210,200,0));}
}
/* περιεχόμενο μπάρας: κρατιέται μέχρι να κλείσουν οι πόρτες */
.oa-hold{opacity:0; transform:translateY(14px);}
.oa-bar.oa-met .oa-hold{opacity:1; transform:none; transition:opacity .6s var(--oa-ease) .04s, transform .75s var(--oa-out) .04s;}

/* παραλλαγή «sweep»: ένα φως διασχίζει τη μπάρα και η ύλη γεμίζει πίσω του */
.oa-bar.oa-sweep .oa-door-l{width:100%; transform:translate3d(-101%,0,0);}
.oa-bar.oa-sweep .oa-door-r{display:none;}
.oa-bar.oa-sweep .oa-seam{left:auto; right:0; width:3px;}

/* ---------- 2. ΜΠΛΟΚ / ΕΙΚΟΝΕΣ: φωτεινή γραμμή αποκαλύπτει το περιεχόμενο ---------- */
.oa-wipe{position:relative;}
.oa-wipe.oa-armed{clip-path:inset(0 100% 0 0);}
.oa-wipe.oa-run{clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--oa-out);}
.oa-wipe > .oa-edge{
  position:absolute; top:-3%; bottom:-3%; left:0; width:3px; margin-left:-3px; z-index:9; opacity:0; pointer-events:none;
  background:var(--oa-lite);
  box-shadow:0 0 20px 6px rgba(98,210,200,calc(.85 * var(--oa-glow)));
}
.oa-wipe.oa-run > .oa-edge{animation:oaEdge 1.05s var(--oa-out) forwards;}
@keyframes oaEdge{0%{left:0; opacity:0;} 12%{opacity:1;} 80%{opacity:1;} 100%{left:100%; opacity:0;}}

/* ---------- 3. ΚΑΡΤΕΣ & ΜΠΛΟΚ: άνοδος με ξεθόλωμα + λάμψη ----------
   Διπλή class στον selector = νικά το παλιό .reveal του style.css, ανεξάρτητα από τη σειρά. */
.oa-blk.oa-blk{opacity:0; transform:translateY(40px) scale(.985); filter:blur(5px);}
.oa-blk.oa-blk.oa-in{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .75s var(--oa-out) var(--oa-d,0ms),
             transform .95s var(--oa-out) var(--oa-d,0ms),
             filter .7s linear var(--oa-d,0ms);
}
.oa-sheen{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; border-radius:inherit;
  background:linear-gradient(100deg, transparent 34%, rgba(154,245,234,.20) 50%, transparent 66%);
  background-size:260% 100%; background-position:130% 0;
}
.oa-blk.oa-in .oa-sheen{animation:oaSheen 1.15s var(--oa-ease) var(--oa-d,0ms) forwards;}@keyframes oaSheen{0%{opacity:0; background-position:130% 0;} 18%{opacity:1;} 100%{opacity:0; background-position:-40% 0;}}

/* «μαγνητικό» hover: αντανάκλαση που ακολουθεί το ποντίκι */
.oa-glare{
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; border-radius:inherit;
  transition:opacity .3s linear;
  background:radial-gradient(200px circle at var(--gx,50%) var(--gy,50%), rgba(154,245,234,.16), transparent 68%);
}

/* ---------- 4. ΤΙΤΛΟΙ: λέξη-λέξη / γράμμα-γράμμα από μάσκα ---------- */
.oa-w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em;}
.oa-w > b{display:inline-block; font-weight:inherit; transform:translateY(118%); opacity:0;}
.oa-w.oa-in > b{transform:none; opacity:1; transition:transform .6s var(--oa-out) var(--oa-d,0ms), opacity .34s linear var(--oa-d,0ms);}

/* ---------- 5. ΑΡΙΘΜΟΙ ---------- */
@keyframes oaNumFlash{
  0%{text-shadow:0 0 0 rgba(98,210,200,0);}
  28%{text-shadow:0 0 24px rgba(154,245,234,calc(.95 * var(--oa-glow)));}
  100%{text-shadow:0 0 0 rgba(98,210,200,0);}
}
.oa-numflash{animation:oaNumFlash 1s var(--oa-ease);}

/* ---------- 6. HERO: σάρωση φωτός στην είσοδο ---------- */
.oa-scan{
  position:absolute; left:0; right:0; height:30vh; top:-30vh; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(98,210,200,.09) 55%, rgba(154,245,234,.42) 96%, rgba(234,255,251,.9) 100%);
  mix-blend-mode:screen;
  animation:oaScan 2.4s cubic-bezier(.45,0,.25,1) .3s both;
}
@keyframes oaScan{to{top:100%;}}

/* ---------- 7. ΚΟΥΜΠΙΑ: κυματισμός στο κλικ ---------- */
.oa-ripple{
  position:absolute; width:220px; height:220px; border-radius:50%; z-index:3; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.5), rgba(154,245,234,.28) 55%, transparent 72%);
  transform:translate(-50%,-50%) scale(0); animation:oaRipple .65s var(--oa-out) forwards;
}
@keyframes oaRipple{to{transform:translate(-50%,-50%) scale(1.6); opacity:0;}}

/* ---------- 8. CIRCUIT: παλμοί δεδομένων πάνω στις γραμμές ---------- */
.oa-pulse{
  fill:none; stroke:var(--oa-white); stroke-width:2.4; stroke-linecap:round;
  filter:drop-shadow(0 0 7px var(--oa-cyan));
  stroke-dasharray:.055 .945; animation:oaTrace 4.6s linear infinite;
}
@keyframes oaTrace{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}

/* ---------- 9. SIDE RAIL: σπίθα που τρέχει στη ρωγμή με το scroll ---------- */
.oa-railspark{fill:var(--oa-white); filter:drop-shadow(0 0 6px var(--oa-cyan)) drop-shadow(0 0 16px rgba(98,210,200,.8)); opacity:0; transition:opacity .3s linear;}
.oa-railspark.on{opacity:1;}

/* ---------- 10. ΠΑΛΙΑ ΣΥΜΠΕΡΙΦΟΡΑ (για σύγκριση: mode = old) ---------- */
.oa-old .reveal{opacity:0; transform:perspective(1300px) rotateX(-36deg) translateY(60px); transform-origin:50% 100%; transition:opacity 1.15s var(--oa-ease), transform 1.15s var(--oa-ease);}
.oa-old .reveal.in{opacity:1; transform:perspective(1300px) rotateX(0) translateY(0);}
.oa-old .oa-bar.oa-armed{background-color:var(--oa-bar-bg,#1b282c) !important; border-top-color:var(--oa-bar-line,#5f7d87) !important; border-bottom-color:var(--oa-bar-line,#5f7d87) !important; opacity:0; transform:scaleY(.94); transition:opacity .9s var(--oa-ease), transform .9s var(--oa-ease);}
.oa-old .oa-bar.oa-run{opacity:1; transform:none;}
.oa-old .oa-door{background:none; border:none; width:4px;}
.oa-old .oa-door > i{box-shadow:0 0 20px 6px rgba(98,210,200,.9), 0 0 46px 16px rgba(98,210,200,.5);}
.oa-old .oa-bar.oa-run .oa-door-l{transform:translate3d(calc(50vw - 2px),0,0); transition:transform 1s var(--oa-ease);}
.oa-old .oa-bar.oa-run .oa-door-r{transform:translate3d(calc(-50vw + 2px),0,0); transition:transform 1s var(--oa-ease);}
.oa-old .oa-hold{opacity:1; transform:none;}
.oa-old .oa-seam{display:none;}

/* ---------- 11. ΟΨΗ ΤΩΝ JS-ΠΑΡΑΓΟΜΕΝΩΝ ΣΤΟΙΧΕΙΩΝ ----------
   Ίδιες τιμές με το style.css του θέματος — ασφαλές να συνυπάρχουν. */
.circuit-svg{position:relative; z-index:1; width:100%; height:100%; display:block;}
.circuit-line{fill:none; stroke:rgba(98,210,200,.5); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;}
.circuit-line.bright{stroke:#8af0e6; stroke-width:1.9; opacity:.9;}
.circuit-dot{fill:#c2fff5;}
.circuit-dot.blink{animation:cbBlink 3s ease-in-out infinite;}
@keyframes cbBlink{0%,100%{opacity:.45;} 50%{opacity:1;}}
.circuit-beam-layer{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none;
  opacity:.5; will-change:opacity; animation:beamPulse 5.5s ease-in-out infinite;}
.circuit-beam{fill:none; stroke:var(--oa-cyan); stroke-linecap:round; filter:blur(6px); opacity:1;}
@keyframes beamPulse{0%,100%{opacity:.26;} 50%{opacity:.6;}}
.cursor-ring.hover{width:66px !important; height:66px !important; background:rgba(98,210,200,.14);}

/* ---------- ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ ---------- */
@media (prefers-reduced-motion: reduce){
  .oa-bar.oa-armed{background-color:var(--oa-bar-bg) !important; border-top-color:var(--oa-bar-line) !important; border-bottom-color:var(--oa-bar-line) !important;}
  .oa-door,.oa-seam,.oa-scan,.oa-sheen,.oa-glare,.oa-pulse{display:none !important;}
  .oa-hold,.oa-blk,.oa-blk.oa-blk,.oa-w > b{opacity:1 !important; transform:none !important; filter:none !important;}
  .oa-wipe.oa-armed{clip-path:none !important;}
}