/* ============================================================
   EIDIKÓS — MOTION LAYER
   Smooth scrolling, text reveals, scroll choreography.
   Loaded AFTER style.css so it can refine existing rules.
   ============================================================ */

:root{
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-smooth:cubic-bezier(0.22,1,0.36,1);
  --ease-back:cubic-bezier(0.34,1.4,0.64,1);
  --dur-fast:0.35s;
  --dur-base:0.7s;
  --dur-slow:1.1s;
}

/* When the JS momentum-scroll engine drives the page, native smooth
   scrolling must step aside or the two fight each other. */
html.smooth-on{scroll-behavior:auto;}

/* ============ 1. SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:100%;
  z-index:200;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--blue-600), var(--blue-400) 45%, var(--amber) 100%);
  pointer-events:none;
  will-change:transform;
}

/* ============ 2. PAGE ENTRY / EXIT ============ */
.page-veil{
  position:fixed;
  inset:0;
  z-index:300;
  background:var(--navy-950);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.34s ease;
}
html.page-leaving .page-veil{opacity:1;}

/* Pure-CSS entry fade: self-completing, so the page can never be
   left blank if a script fails to load. */
body{animation:pageIn 0.5s ease both;}
@keyframes pageIn{from{opacity:0;} to{opacity:1;}}

/* ============ 3. TEXT REVEAL ============ */
/* Word / character masks. The padding + negative margin pair keeps
   descenders (g, y, p) from being clipped by the mask. */
.sr-w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.16em;
  margin-bottom:-0.16em;
  padding-top:0.06em;
  margin-top:-0.06em;
}
.sr-wi{
  display:inline-block;
  transform:translate3d(0,115%,0) rotate(3deg);
  opacity:0;
  filter:blur(6px);
  transition:
    transform var(--dur-base) var(--ease-expo),
    opacity 0.5s ease,
    filter 0.5s ease;
  transition-delay:var(--d, 0s);
}
.sr-w.in .sr-wi{
  transform:translate3d(0,0,0) rotate(0);
  opacity:1;
  filter:blur(0);
}

/* Character variant — tighter, no rotation */
[data-reveal="chars"] .sr-wi{transform:translate3d(0,105%,0); filter:blur(3px);}

/* Soft variant — no mask, just a blurred rise. Better for body copy. */
[data-reveal="soft"] .sr-w{overflow:visible; padding:0; margin:0;}
[data-reveal="soft"] .sr-wi{
  transform:translate3d(0,14px,0);
  filter:blur(8px);
  transition:
    transform 0.9s var(--ease-expo),
    opacity 0.7s ease,
    filter 0.7s ease;
}

/* Legacy class kept so any hand-written markup still animates */
.split-line{overflow:hidden; display:inline-block; vertical-align:top;}

/* ============ 4. ELEMENT REVEAL ============ */
.reveal, .reveal-child, [data-anim]{
  opacity:0;
  transition:
    opacity 0.8s var(--ease-expo),
    transform 0.9s var(--ease-expo),
    filter 0.8s ease,
    clip-path 1s var(--ease-expo);
  transition-delay:var(--d, 0s);
}
.reveal{transform:translate3d(0,34px,0);}
.reveal-child{transform:translate3d(0,26px,0) scale(0.985);}
[data-anim="up"]{transform:translate3d(0,44px,0);}
[data-anim="down"]{transform:translate3d(0,-44px,0);}
[data-anim="left"]{transform:translate3d(-48px,0,0);}
[data-anim="right"]{transform:translate3d(48px,0,0);}
[data-anim="zoom"]{transform:scale(0.9);}
[data-anim="blur"]{filter:blur(14px); transform:translate3d(0,20px,0);}
[data-anim="clip"]{clip-path:inset(0 0 100% 0); transform:translate3d(0,24px,0);}

.reveal.in, .reveal-child.in, [data-anim].in{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 0 0 0);
}

/* When the two columns stack (tablet and phone), a sideways slide starts
   the element partly off-screen and widens the page, leaving a strip of
   empty space on the right. Slide up instead. */
@media (max-width:900px){
  [data-anim="left"], [data-anim="right"]{transform:translate3d(0,36px,0);}
}

/* Belt and braces: nothing may widen the page sideways. overflow-x:clip
   (unlike hidden) doesn't create a scroll container, so the sticky header
   keeps working, and iOS Safari honours it on the root element. */
@supports (overflow:clip){
  html, body{overflow-x:clip;}
}

/* ============ 5. IMAGE WIPE ============ */
.img-reveal{
  position:relative;
  overflow:hidden;
}
.img-reveal > img,
.img-reveal > .img-cover{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.12);
  transition:clip-path 1.15s var(--ease-expo), transform 1.6s var(--ease-expo);
  transition-delay:var(--d, 0s);
}
.img-reveal.in > img,
.img-reveal.in > .img-cover{
  clip-path:inset(0 0 0 0);
  transform:scale(1);
}

/* ============ 6. HERO ============ */
.hero{isolation:isolate;}

/* Drifting aurora blobs behind the hero content */
.hero-aurora{
  position:absolute;
  inset:-20% -10%;
  z-index:0;
  pointer-events:none;
  filter:blur(70px);
  opacity:0.55;
}
.hero-aurora span{
  position:absolute;
  display:block;
  border-radius:50%;
  mix-blend-mode:screen;
}
.hero-aurora span:nth-child(1){
  width:46vw; height:46vw; left:-6%; top:-10%;
  background:radial-gradient(circle, rgba(43,132,207,0.55), transparent 68%);
  animation:drift1 22s ease-in-out infinite alternate;
}
.hero-aurora span:nth-child(2){
  width:38vw; height:38vw; right:-4%; top:6%;
  background:radial-gradient(circle, rgba(90,163,222,0.42), transparent 68%);
  animation:drift2 27s ease-in-out infinite alternate;
}
.hero-aurora span:nth-child(3){
  width:34vw; height:34vw; left:36%; bottom:-22%;
  background:radial-gradient(circle, rgba(200,135,58,0.30), transparent 70%);
  animation:drift3 31s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate3d(14%, 12%, 0) scale(1.18);}}
@keyframes drift2{to{transform:translate3d(-16%, 16%, 0) scale(0.86);}}
@keyframes drift3{to{transform:translate3d(10%, -18%, 0) scale(1.22);}}

.hero::after{z-index:0;}
.hero-inner{z-index:2;}

/* Richer staggered entrance for direct hero children */
.hero-inner > *{
  opacity:0;
  transform:translate3d(0,34px,0);
  filter:blur(10px);
  animation:heroRise 1.1s var(--ease-expo) forwards;
}
.hero-inner > *:nth-child(1){animation-delay:0.12s;}
.hero-inner > *:nth-child(2){animation-delay:0.34s;}
@keyframes heroRise{
  to{opacity:1; transform:translate3d(0,0,0); filter:blur(0);}
}

/* Stat rows cascade in after the panel lands */
.hero-panel .stat-row{
  opacity:0;
  transform:translate3d(0,14px,0);
  animation:heroRise 0.7s var(--ease-expo) forwards;
}
.hero-panel .stat-row:nth-child(3){animation-delay:0.62s;}
.hero-panel .stat-row:nth-child(4){animation-delay:0.72s;}
.hero-panel .stat-row:nth-child(5){animation-delay:0.82s;}
.hero-panel .stat-row:nth-child(6){animation-delay:0.92s;}

.hero-panel{
  transition:transform 0.6s var(--ease-expo), box-shadow 0.6s ease, border-color 0.4s ease;
}
.hero-panel:hover{
  transform:translateY(-4px);
  border-color:rgba(90,163,222,0.4);
  box-shadow:0 26px 60px -20px rgba(0,0,0,0.6);
}

/* Scroll cue at the foot of the hero */
.scroll-cue{
  position:absolute;
  left:50%; bottom:22px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.42);
  opacity:0;
  animation:heroRise 0.9s 1.1s var(--ease-expo) forwards;
  transition:color 0.3s ease, opacity 0.3s ease;
}
.scroll-cue i{
  display:block;
  width:1px; height:34px;
  background:linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-cue i::after{
  content:"";
  position:absolute; left:0; top:-34px;
  width:1px; height:34px;
  background:linear-gradient(180deg, transparent, var(--blue-400));
  animation:cueRun 2.1s ease-in-out infinite;
}
@keyframes cueRun{
  0%{transform:translateY(0);}
  60%,100%{transform:translateY(68px);}
}
@media (max-width:900px){.scroll-cue{display:none;}}

/* ============ 7. CARDS ============ */
.has-spot{position:relative; overflow:hidden;}
.has-spot > *:not(.spot-layer){position:relative; z-index:1;}
.spot-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.4s ease;
  background:radial-gradient(
    340px circle at var(--mx,50%) var(--my,50%),
    rgba(43,132,207,0.13),
    transparent 62%);
}
.has-spot:hover .spot-layer{opacity:1;}
/* On dark panels the highlight needs to be lighter to read */
.theme-navy .spot-layer,
.theme-amber-band .spot-layer{
  background:radial-gradient(
    340px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.16),
    transparent 62%);
}

.why-card, .solution-card, .testi-card, .case-card, .leader-card, .expertise-card{
  transition:
    transform 0.5s var(--ease-expo),
    box-shadow 0.5s ease,
    border-color 0.4s ease;
}
.why-card:hover{transform:translateY(-6px);}
.testi-card:hover{
  transform:translateY(-6px);
  border-color:var(--blue-400);
  box-shadow:0 18px 40px -18px rgba(20,40,70,0.28);
}
.solution-card:hover{box-shadow:0 20px 44px -20px rgba(20,40,70,0.3);}
.case-card:hover{box-shadow:0 22px 46px -18px rgba(0,0,0,0.32);}

/* ============ 8. BUTTONS ============ */
.btn, .nav-cta, .submit-btn{
  position:relative;
  overflow:hidden;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.45s var(--ease-expo),
    box-shadow 0.45s ease;
}
.btn::after, .nav-cta::after, .submit-btn::after{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.btn:hover::after, .nav-cta:hover::after, .submit-btn:hover::after{
  animation:sheen 0.75s var(--ease-smooth) 1;
}
@keyframes sheen{to{left:140%;}}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(43,132,207,0.7);
}
.btn-ghost:hover{transform:translateY(-2px);}
.btn-amber:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(200,135,58,0.65);
}
.btn:active, .nav-cta:active, .submit-btn:active{transform:scale(0.97);}

/* ============ 9. HEADER ============ */
header{
  transition:
    transform 0.45s var(--ease-expo),
    background 0.35s ease,
    box-shadow 0.35s ease;
}
header.scrolled{
  box-shadow:0 10px 30px -14px rgba(20,32,50,0.3);
}
header.hide-up{transform:translateY(-104%);}
/* A transform, will-change or backdrop-filter on the header makes it the
   containing block for the fixed mobile menu, which then gets positioned
   against the header instead of the screen. Drop them while it is open. */
body.nav-open header{
  transform:none;
  will-change:auto;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:var(--paper);
}

/* ============ 10. EYEBROW RULE DRAW ============ */
.eyebrow::before{
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.6s 0.15s var(--ease-expo);
}
.eyebrow.in::before,
.in .eyebrow::before{transform:scaleX(1);}

/* ============ 11. FAQ ============ */
.faq-a{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:
    max-height 0.5s var(--ease-expo),
    padding-top 0.5s var(--ease-expo),
    opacity 0.35s ease;
}
.faq-item.open .faq-a{max-height:var(--h, 400px); padding-top:14px; opacity:1;}
.faq-item{transition:border-color 0.3s ease;}
.faq-q{transition:color 0.25s ease;}
.faq-q:hover{color:var(--blue-600);}
.faq-q .plus{transition:transform 0.4s var(--ease-back), color 0.25s ease;}
.faq-item.open .faq-q .plus{transform:rotate(135deg);}

/* ============ 12. BACK TO TOP ============ */
.to-top{
  position:fixed;
  right:26px; bottom:26px;
  z-index:120;
  width:46px; height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:50%;
  background:var(--navy-950);
  color:#fff;
  font-size:17px;
  line-height:1;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(0.85);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ease-back),
    visibility 0.4s,
    background 0.25s ease;
}
.to-top.show{opacity:1; visibility:visible; transform:none;}
.to-top:hover{background:var(--blue-600);}
@media (max-width:600px){.to-top{right:16px; bottom:16px; width:42px; height:42px;}}

/* ============ 13. MEDIA / MISC POLISH ============ */
[data-parallax]{will-change:transform;}
.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(43,132,207,0.22), transparent 55%);
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
}
.media-frame:hover::after{opacity:1;}

.stat-num{transition:color 0.3s ease;}
.stat-row:hover .stat-num{color:var(--blue-400);}

.industry-chip, .role-chip{
  transition:transform 0.35s var(--ease-expo), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.industry-chip:hover, .role-chip:hover{transform:translateY(-3px);}

.footer-col ul li a{
  position:relative;
  display:inline-block;
  transition:color 0.25s ease, transform 0.35s var(--ease-expo);
}
.footer-col ul li a:hover{transform:translateX(4px);}

.service-col ul li{transition:color 0.25s ease, padding-left 0.35s var(--ease-expo);}
.service-col ul li:hover{color:var(--blue-600); padding-left:8px;}

.perks li, .diff-item{transition:transform 0.35s var(--ease-expo), background 0.3s ease;}
.diff-item:hover{background:rgba(43,132,207,0.05);}

input, textarea{transition:border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;}
input:focus, textarea:focus{box-shadow:0 0 0 3px rgba(43,132,207,0.14);}

/* ============ 14. DARK BAND TEXTURE ============ */
/* The flat navy blocks read as dead space next to the hero, so they pick up
   the same faint grid and a slow drifting glow. */
.cta-band, section.theme-navy{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.cta-band > *, section.theme-navy > *{position:relative; z-index:1;}
.cta-band::before, section.theme-navy::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
}
.cta-band::after, section.theme-navy::after{
  content:"";
  position:absolute;
  z-index:0;
  width:70vw; height:70vw;
  left:50%; top:-30%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(43,132,207,0.22), transparent 62%);
  filter:blur(60px);
  animation:bandGlow 26s ease-in-out infinite alternate;
}
@keyframes bandGlow{
  from{transform:translate(-70%, -10%) scale(1);}
  to{transform:translate(-30%, 10%) scale(1.25);}
}

/* ============ 14. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .sr-wi, .reveal, .reveal-child, [data-anim],
  .img-reveal > img, .img-reveal > .img-cover,
  .hero-inner > *, .hero-panel .stat-row, .scroll-cue{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
  }
  .hero-aurora, .scroll-progress, .page-veil{display:none;}
  .cta-band::after, section.theme-navy::after{animation:none;}
  body{opacity:1 !important;}
}