/* jacquot.dev — styles spécifiques : animations, faux terminal, carrousels */

/* ── HERO TOP ACCENT LINE (shimmer) ───────────── */
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;z-index:4;
  background:linear-gradient(90deg,var(--teal),var(--brand-light),var(--teal));
  background-size:300% 100%;
  animation:shimmerLine 4s linear infinite;
}
@keyframes shimmerLine{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ── DECORATIVE CODE TERMINAL ──────────────────── */
.hero-terminal{
  position:absolute;right:-55px;top:50%;
  transform:translateY(-50%) rotate(-4deg);
  width:400px;z-index:1;opacity:0.9;
  pointer-events:none;border-radius:12px;overflow:hidden;
  box-shadow:0 32px 80px rgba(15,23,42,0.22),0 4px 16px rgba(15,23,42,0.1);
  background:var(--code-bg);
  animation:terminalFloat 14s ease-in-out infinite alternate;
}
@keyframes terminalFloat{
  from{transform:translateY(-50%) rotate(-4deg)}
  to{transform:translateY(-48%) rotate(-3.2deg) translateX(-10px)}
}
.ht-bar{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.08);
  font-family:var(--font-mono);font-size:10px;color:var(--code-text);
}
.ht-dots{display:flex;gap:5px}
.ht-dots span{width:9px;height:9px;border-radius:50%;opacity:0.85}
.ht-code{
  margin:0;padding:16px 18px;font-family:var(--font-mono);font-size:11.5px;
  line-height:1.7;color:var(--code-text);
}
.ht-key{color:var(--code-accent)}
.ht-str{color:#FACC15}
.ht-com{color:#64748B}
@media(max-width:768px){
  .hero-terminal{display:none}
}

/* ── EYEBROW PULSE DOT ────────────────────────── */
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,0.5)}
  55%{box-shadow:0 0 0 8px rgba(250,204,21,0)}
}

/* ── WORD CAROUSEL ────────────────────────────── */
.hero-words-slot{
  position:relative;overflow:hidden;
  height:1.5em;min-width:260px;
}
@media(max-width:768px){
  .hero-words-slot{min-width:200px}
}
.hero-word-item{
  position:absolute;top:0;left:0;
  opacity:0;transform:translateY(80%);
  color:var(--teal);font-style:italic;white-space:nowrap;
  animation:wordCycle 8s cubic-bezier(0.4,0,0.2,1) infinite;
}
.hero-word-item:nth-child(1){animation-delay:0s}
.hero-word-item:nth-child(2){animation-delay:4s}
@keyframes wordCycle{
  0%  {opacity:0;transform:translateY(80%)}
  7%  {opacity:1;transform:translateY(0)}
  22% {opacity:1;transform:translateY(0)}
  28% {opacity:0;transform:translateY(-80%)}
  100%{opacity:0;transform:translateY(-80%)}
}

/* ── HERO CTA SHIMMER ─────────────────────────── */
.hero-cta::after{
  content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
  animation:shimmerBtn 4s ease-in-out infinite 2.5s;
}
@keyframes shimmerBtn{0%{left:-100%}50%,100%{left:160%}}

/* ── HERO ENTRANCE ────────────────────────────── */
@keyframes fadeUpHero{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── SCROLL PROGRESS ─────────────────────────────── */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--teal),var(--accent),var(--teal));
  background-size:200% 100%;
  transform-origin:left center;transform:scaleX(0);
  z-index:300;pointer-events:none;
}

/* ── SCROLL-TO-TOP ────────────────────────────────── */
#scroll-top{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:150;
  width:44px;height:44px;border-radius:12px;
  background:var(--brand);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;cursor:pointer;
  box-shadow:0 4px 16px rgba(30,58,138,0.3);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity 0.3s,transform 0.3s,background 0.2s;
  border:none;
}
#scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
#scroll-top:hover{background:var(--teal);box-shadow:0 8px 24px rgba(37,99,235,0.4)}
#scroll-top:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── SCROLL ANIMATIONS ───────────────────────── */
/* Spring easing — feel natural, not mechanical */
[data-animate]{
  opacity:0;transform:translateY(36px) scale(0.97);
  transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),
             transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
[data-animate].in-view{opacity:1;transform:translateY(0) scale(1)}

/* Slide from left — section titles & eyebrows */
[data-animate="left"]{
  opacity:0;transform:translateX(-32px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),
             transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
[data-animate="left"].in-view{opacity:1;transform:translateX(0)}

/* Slide from right */
[data-animate="right"]{
  opacity:0;transform:translateX(32px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),
             transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
[data-animate="right"].in-view{opacity:1;transform:translateX(0)}

/* Scale up — stat cards, callouts */
[data-animate="scale"]{
  opacity:0;transform:scale(0.93);
  transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1),
             transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
[data-animate="scale"].in-view{opacity:1;transform:scale(1)}

/* ── TECH STACK INFINITE CAROUSEL ─────────────── */
.tech-strip-label{
  font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gray);margin:1.75rem 0 0.6rem;display:block;
}
.tech-strip{overflow:hidden;border-top:1px solid rgba(37,99,235,0.08);border-bottom:1px solid rgba(37,99,235,0.08);padding:0.6rem 0}
.tech-strip-track{
  display:flex;gap:0.75rem;width:max-content;
  animation:techMarquee 30s linear infinite;
}
.tech-strip-track:hover{animation-play-state:paused}
@keyframes techMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tech-pill{
  display:inline-flex;align-items:center;
  padding:0.3rem 0.9rem;
  background:rgba(37,99,235,0.06);border:1px solid rgba(37,99,235,0.12);
  border-radius:20px;font-size:0.79rem;font-weight:600;color:var(--teal-mid);
  white-space:nowrap;
}

/* ── REDUCED MOTION ───────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero-excel,.eyebrow-dot,.cta-avail-dot,.hero-cta::after{animation:none}
  .hero-eyebrow,.hero-brand,.hero-tagline,.hero-sub,
  .hero-actions,.hero-stats{animation:none;opacity:1;transform:none}
  .hero-word-item{animation:none}
  .hero-word-item:first-child{opacity:1;transform:none}
  [data-animate],[data-animate="left"],[data-animate="right"],[data-animate="scale"]{
    opacity:1;transform:none;transition:none;
  }
  .tech-strip-track{animation:none}
}