/* ==========================================================
   ANIMATIONS DE LETTRES — même famille que « PROJETS » qui ondule
   (les lettres sont découpées par animations.js)
   ========================================================== */

:root { --dd-ease: cubic-bezier(0.22, 1, 0.36, 1); }

.dd-w { display: inline-block; white-space: nowrap; }
.dd-ch { display: inline-block; }

/* 1. Ondulation continue (mots géants, titres) */
.dd-wave .dd-ch {
    animation: dd-wave var(--dd-dur, 4.2s) ease-in-out infinite;
    animation-delay: calc(var(--i) * var(--dd-step, -0.22s) + var(--dd-shift, 0s));
}

@keyframes dd-wave {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50%      { transform: translateY(calc(var(--dd-amp, 0.06) * -1em)) scaleY(var(--dd-squash, 0.9)); }
}

/* 2. Petit saut lettre par lettre au survol */
.dd-hop .dd-ch { transform-origin: 50% 100%; }

.pj-item:hover .pj-name .dd-ch,
.sv-row:hover .sv-title .dd-ch,
.sk-item:hover .dd-ch,
.sk-item.is-active.dd-just .dd-ch,
.ft-col:hover h3 .dd-ch {
    animation: dd-hop 0.62s var(--dd-ease) both;
    animation-delay: calc(var(--i) * 28ms);
}

@keyframes dd-hop {
    0%   { transform: translateY(0) rotate(0); }
    35%  { transform: translateY(-0.22em) rotate(-4deg); }
    65%  { transform: translateY(0.04em) rotate(2deg) scaleY(0.94); }
    100% { transform: translateY(0) rotate(0); }
}

/* 3. Lettres qui roulent dans les boutons et liens */
.dd-roll {
    display: inline-block;
    height: 1.35em;
    line-height: 1.35;
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap;
}

.dd-roll .dd-ch {
    text-shadow: 0 1.7em currentColor;
    transition: transform 0.5s var(--dd-ease);
    transition-delay: calc(var(--i) * 16ms);
}

a:hover > .dd-roll .dd-ch,
button:hover > .dd-roll .dd-ch,
a:focus-visible > .dd-roll .dd-ch,
button:focus-visible > .dd-roll .dd-ch { transform: translateY(-1.7em); }

/* 4. Intitulés qui s'écrivent à l'apparition */
.dd-in .dd-ch {
    opacity: 0;
    transform: translateY(0.7em);
    transition: opacity 0.5s ease, transform 0.6s var(--dd-ease);
    transition-delay: calc(var(--i) * 32ms);
}

.dd-in.is-in .dd-ch { opacity: 1; transform: none; }

/* 5. Cascades */
.sk-panel.is-active .sk-skill {
    animation: dd-rise 0.6s var(--dd-ease) both;
    animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}

@keyframes dd-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}





@keyframes dd-bob {
    0%, 100% { transform: rotate(0) scale(1); }
    50%      { transform: rotate(-4deg) scale(1.04); }
}

/* 6. Portrait du hero qui flotte légèrement */
.hx-portrait img {
    animation: hx-portrait-in 1.4s var(--hx-ease) 0.35s both,
               dd-float 7s ease-in-out 1.9s infinite;
}

@keyframes dd-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* 7. Pied de page : nom géant doublé d'un contour */
.ft-giant { display: grid; justify-items: center; }
.ft-giant > span { grid-area: 1 / 1; }
.ft-giant-outline {
    color: transparent;
    -webkit-text-stroke: 1px #a9a29d;
    transform: translateY(0.1em);
}

/* réglages par élément */
.hx-marquee-track { --dd-amp: 0.035; --dd-dur: 5s; }
.ab-ghost         { --dd-amp: 0.05;  --dd-dur: 5s; }
.ct-title         { --dd-amp: 0.05;  --dd-dur: 3.8s; --dd-squash: 0.92; }
.sv-cta-text      { --dd-amp: 0.08;  --dd-dur: 3.4s; }
.ft-giant         { --dd-amp: 0.06;  --dd-dur: 4.6s; }
.ft-giant-outline { --dd-shift: -2.3s; }

@media (prefers-reduced-motion: reduce) {
    .dd-wave .dd-ch,
    .hx-portrait img { animation: none !important; }
    .dd-in .dd-ch,
    .sk-panel.is-active .sk-skill { animation: none; }
    .dd-roll .dd-ch { transition: none; }
}

/* ==========================================================
   PROJETS — rideau de couleur au scroll
   (la classe .is-curtain est ajoutée par animations.js)
   ========================================================== */

.pj-item-soon { --pc: var(--c-violet, #7a5cc4); }
.pj-item-cta  { --pc: var(--c-orange, #e34f26); }

.pj-curtain {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: var(--pc);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.pj-item.is-curtain .pj-curtain {
    animation: pj-curtain 1.15s cubic-bezier(0.77, 0, 0.18, 1) both;
}

@keyframes pj-curtain {
    0%   { transform: scaleX(0); transform-origin: left center; }
    46%  { transform: scaleX(1); transform-origin: left center; }
    54%  { transform: scaleX(1); transform-origin: right center; }
    100% { transform: scaleX(0); transform-origin: right center; }
}

/* capture (et bloc de couleur décalé) cachés tant que le rideau n'est pas passé */
.pj-item.pj-wait .pj-thumb > :not(.pj-curtain) { opacity: 0; }
.pj-item.pj-wait .pj-thumb { background: transparent; box-shadow: none; border-color: transparent; }
.pj-item.pj-wait .pj-thumb::before { opacity: 0; }
.pj-item.is-curtain .pj-thumb { animation: pj-thumb-in 0.01s linear 0.5s backwards; }
@keyframes pj-thumb-in { from { background: transparent; box-shadow: none; } }

.pj-item.is-curtain .pj-thumb img,
.pj-item.is-curtain .pj-thumb .pj-soon-label,
.pj-item.is-curtain .pj-thumb .pj-cta-plus {
    animation: pj-unveil 0.9s var(--dd-ease) 0.55s backwards;
}

@keyframes pj-unveil {
    from { opacity: 0; transform: scale(1.12); }
    to   { opacity: 1; transform: none; }
}

.pj-item.is-curtain .pj-num {
    animation: pj-pop 0.5s var(--dd-ease) 0.9s backwards;
}

@keyframes pj-pop {
    from { opacity: 0; transform: translateY(-8px) scale(0.6); }
    to   { opacity: 1; transform: none; }
}

/* le nom s'écrit, puis le reste arrive en cascade */
.pj-name.dd-in .dd-ch { transition-delay: calc(var(--i) * 28ms + 0.6s); }

.pj-item.pj-wait .pj-desc,
.pj-item.pj-wait .pj-tags li,
.pj-item.pj-wait .pj-links,
.pj-item.pj-wait .pj-name::after { opacity: 0; }

.pj-item.is-curtain .pj-desc   { animation: dd-rise 0.6s var(--dd-ease) 0.95s backwards; }
.pj-item.is-curtain .pj-tags li { animation: dd-rise 0.5s var(--dd-ease) backwards; animation-delay: calc(1.1s + var(--t, 0) * 70ms); }
.pj-item.is-curtain .pj-links  { animation: dd-rise 0.6s var(--dd-ease) 1.35s backwards; }
.pj-item.is-curtain .pj-name::after { animation: pj-line 0.6s var(--dd-ease) 0.85s backwards; }

@keyframes pj-line {
    from { opacity: 1; width: 0; }
    to   { opacity: 1; width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .pj-curtain { display: none; }
    .pj-item.pj-wait .pj-thumb > *,
    .pj-item.pj-wait .pj-desc,
    .pj-item.pj-wait .pj-tags li,
    .pj-item.pj-wait .pj-links,
    .pj-item.pj-wait .pj-name::after { opacity: 1; }
    .pj-item.is-curtain .pj-thumb img,
    .pj-item.is-curtain .pj-num,
    .pj-item.is-curtain .pj-desc,
    .pj-item.is-curtain .pj-tags li,
    .pj-item.is-curtain .pj-links,
    .pj-item.is-curtain .pj-name::after { animation: none; }
}