/* Ankoay Studio — animations et fonds decoratifs.
   Tout s'arrete automatiquement si le visiteur a demande moins d'animations (voir la fin du fichier). */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---- En-tete : se resserre au defilement */
.top { transition: background .25s, box-shadow .25s; }
.top-in { transition: height .25s; }
.top.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.top.scrolled .top-in { height: 58px; }

/* ---- Accueil : halos chauds qui derivent lentement + grille fine */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.b1 { width: 620px; height: 620px; left: -160px; top: -220px; background: #6B3514; animation: drift1 22s ease-in-out infinite alternate; }
.b2 { width: 520px; height: 520px; right: -120px; top: 60px; background: #4A2210; opacity: .5; animation: drift2 26s ease-in-out infinite alternate; }
.b3 { width: 380px; height: 380px; left: 38%; bottom: -220px; background: #8A3B10; opacity: .35; animation: drift3 30s ease-in-out infinite alternate; }
.grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(243, 237, 231, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(243, 237, 231, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 20%, transparent 75%);
}
@keyframes drift1 { to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-120px, 70px) scale(.9); } }
@keyframes drift3 { to { transform: translate(-160px, -60px) scale(1.2); } }

/* entree du texte, bloc par bloc */
.hero-text > * { opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-text > :nth-child(1) { animation-delay: .05s; }
.hero-text > :nth-child(2) { animation-delay: .15s; }
.hero-text > :nth-child(3) { animation-delay: .3s; }
.hero-text > :nth-child(4) { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero h1 .acc {
  background: linear-gradient(90deg, #E8892B, #FFB15E, #E8892B); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: -200% 0; } }

/* logos : apparition puis flottement doux */
.hero-logos { animation: rise 1s .2s cubic-bezier(.2, .7, .2, 1) both; }
.hl-main { animation: float 7s ease-in-out infinite; }
.hl-a { animation: float 6s ease-in-out .4s infinite; }
.hl-b { animation: float 6.5s ease-in-out 1.1s infinite; }
.hl-c { animation: float 5.8s ease-in-out .8s infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }
.hl-a, .hl-b, .hl-c { transition: border-color .2s; }
.hero-logos:hover .hl-a, .hero-logos:hover .hl-b, .hero-logos:hover .hl-c { border-color: var(--orange); }

/* ---- Fonds de section */
.section { position: relative; isolation: isolate; }
.section-dots::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(232, 137, 43, .16) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
}
.section-glow { overflow: hidden; }
.section-glow::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 900px; height: 900px; right: -300px; top: -300px;
  background: radial-gradient(circle, rgba(232, 137, 43, .16), transparent 62%);
  animation: drift2 24s ease-in-out infinite alternate;
}
.section-play { overflow: hidden; }
.vinyl-bg { position: absolute; z-index: -1; pointer-events: none; right: -300px; top: 120px; width: 760px; height: 760px; opacity: .32; }
.vinyl {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 40deg, rgba(255, 255, 255, .06) 60deg, transparent 80deg 220deg, rgba(255, 255, 255, .04) 240deg, transparent 260deg),
    radial-gradient(circle, #5A1A16 0 13%, #16110E 13.4% 15%, transparent 15.2%),
    repeating-radial-gradient(circle, #1E1915 0 3px, #15110E 3px 7px);
  -webkit-mask-image: radial-gradient(circle, #000 69.5%, transparent 70%);
          mask-image: radial-gradient(circle, #000 69.5%, transparent 70%);
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Apparition au defilement (classe ajoutee par main.js) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Cartes, captures, boutons : survol */
.service, .product-logo, .feature img, .gallery img { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.service:hover { transform: translateY(-4px); border-color: rgba(232, 137, 43, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.product:hover .product-logo { transform: scale(1.06) rotate(-2deg); }
.feature img:hover, .gallery img:hover { transform: scale(1.02); box-shadow: 0 22px 50px rgba(0, 0, 0, .45); }
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg);
}
.btn:hover::after { left: 130%; transition: left .6s ease; }
.btn-ghost::after { background: linear-gradient(120deg, transparent, rgba(232, 137, 43, .25), transparent); }

/* ---- Telechargement : bordure lumineuse animee */
.download { position: relative; isolation: isolate; border-color: transparent; }
.download::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--angle), #352D27 0deg, #E8892B 60deg, #FF5A4E 100deg, #352D27 160deg, #352D27 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: turn 6s linear infinite;
}
@keyframes turn { to { --angle: 360deg; } }
.dl { box-shadow: 0 10px 30px rgba(232, 137, 43, .18); }
.dl:hover { box-shadow: 0 16px 40px rgba(232, 137, 43, .32); }

/* ---- Etapes : trait orange qui se dessine */
.steps li::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--orange); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.steps li.in::after { width: 100%; }

@media (max-width: 900px) {
  .vinyl-bg { width: 460px; height: 460px; right: -220px; top: 20px; opacity: .4; }
  .b1 { width: 420px; height: 420px; }
  .b2, .b3 { width: 300px; height: 300px; }
}

/* ---- Accessibilite : aucun mouvement si le visiteur l'a demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-text > *, .hero-logos, .reveal { opacity: 1 !important; transform: none !important; }
  .steps li::after { width: 100%; }
}