/* Académie Chorale Salé — V224 visible motion + cache-safe UI polish
   Scope: readability, mobile navigation, motion, interaction, booking/contact separation.
   Desktop header layout is intentionally untouched. */

/* ---------- Motion layer: light, GPU-friendly, no video ---------- */
body.v14-home #home.v188-hero{isolation:isolate}
body.v14-home #home.v188-hero::before{
  content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 28%,rgba(226,177,71,.18),transparent 24%),
    radial-gradient(circle at 78% 20%,rgba(104,129,195,.10),transparent 23%),
    radial-gradient(circle at 55% 82%,rgba(226,177,71,.09),transparent 26%);
  opacity:.72;transform:translate3d(-1.2%,0,0) scale(1.02);
  animation:cs224-aurora 9s ease-in-out infinite alternate;
}
body.v14-home #home .v188-hero-copy,
body.v14-home #home .v188-hero-image{position:relative;z-index:1}
body.v14-home #home .v188-hero-copy::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background:linear-gradient(112deg,transparent 15%,rgba(230,185,86,.09) 43%,transparent 61%);
  background-size:240% 100%;animation:cs224-sheen 7.5s ease-in-out infinite;
}
body.v14-home #home .v14-btn.primary{position:relative;overflow:hidden}
body.v14-home #home .v14-btn.primary::after{
  content:"";position:absolute;top:-35%;bottom:-35%;width:38%;left:-60%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-20deg);animation:cs224-button-shine 5.3s ease-in-out infinite;
}
@keyframes cs224-aurora{0%{transform:translate3d(-7%,-2%,0) scale(1.04);opacity:.48}45%{transform:translate3d(5%,3%,0) scale(1.12);opacity:.9}100%{transform:translate3d(-1%,7%,0) scale(1.06);opacity:.6}}
@keyframes cs224-sheen{0%,18%{background-position:140% 0}58%,100%{background-position:-120% 0}}
@keyframes cs224-button-shine{0%,62%{left:-65%;opacity:0}70%{opacity:1}88%{left:135%;opacity:0}100%{left:135%;opacity:0}}

/* ---------- Dynamic controls and cards ---------- */
body.v14-home :is(.v14-btn,.v188-program-card,.v164-announcement-card,.v194-contact-card,.v170-partners-logos article,.v195-action-card,.v188-star-card,.v188-talents-card){
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,filter .24s ease!important;
}
@media(hover:hover) and (pointer:fine){
  body.v14-home :is(.v188-program-card,.v164-announcement-card,.v194-contact-card,.v170-partners-logos article,.v195-action-card):hover{
    transform:translateY(-5px)!important;filter:brightness(1.025);
  }
  body.v14-home .v14-btn:hover{transform:translateY(-2px)!important}
}
body.v14-home .cs-reveal{transition-duration:.55s!important;transition-timing-function:cubic-bezier(.2,.75,.2,1)!important}

/* ---------- Light mode readability: no white on cream ---------- */
html[data-theme="light"] body.v14-home #contact .v194-contact-head h2{color:#2b2116!important;text-shadow:none!important}
html[data-theme="light"] body.v14-home #contact .v194-contact-head h2 span{color:#b67a22!important}
html[data-theme="light"] body.v14-home #contact .v194-contact-head>div>p{color:#5b5348!important;opacity:1!important;font-weight:600!important}
html[data-theme="light"] body.v14-home #contact .v165-kicker{color:#9a681e!important}
html[data-theme="light"] body.v14-home #contact .v194-contact-card small{color:#70675b!important;opacity:1!important}
html[data-theme="light"] body.v14-home #contact .v194-contact-card strong{color:#241d14!important}
html[data-theme="light"] body.v14-home #contact .v194-contact-card em{color:#9b6b25!important;opacity:1!important}
html[data-theme="light"] body.v14-home #booking .v214-booking-path article h3{color:#2b2116!important}
html[data-theme="light"] body.v14-home #booking .v214-booking-path article p{color:#62594d!important;opacity:1!important}
html[data-theme="light"] body.v14-home #booking .v194-toggle-copy b{color:#2a2116!important}
html[data-theme="light"] body.v14-home #booking .v194-toggle-copy small{color:#675d50!important;opacity:1!important}
html[data-theme="light"] body.v14-home #partners .v165-page-heading p{color:#5f574b!important;opacity:1!important}
html[data-theme="light"] body.v14-home .v14-footer{color:#5e5549!important}

/* Dark mode readable hierarchy */
html[data-theme="dark"] body.v14-home #contact .v194-contact-head h2{color:#f6f0e5!important}
html[data-theme="dark"] body.v14-home #contact .v194-contact-head h2 span{color:#e6b54c!important}
html[data-theme="dark"] body.v14-home #contact .v194-contact-head>div>p{color:#cfc6b7!important;opacity:1!important}

/* Contact cards are fully tappable and stable on narrow phones */
body.v14-home #contact .v194-contact-card{cursor:pointer}
body.v14-home #contact .v194-contact-card strong{overflow-wrap:anywhere}

/* ---------- MOBILE ONLY: header/menu polish. Desktop >=761 untouched ---------- */
@media(max-width:760px){
  body.v14-home.v188-menu-open{overflow:hidden!important}
  body.v14-home.v188-menu-open::after{
    content:"";position:fixed;inset:0;z-index:94;background:rgba(0,0,0,.44);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  }
  body.v14-home .v188-header{z-index:100!important}
  body.v14-home.v188-menu-open .v188-nav{
    display:flex!important;flex-direction:column!important;grid-template-columns:none!important;
    top:calc(100% + 8px)!important;right:12px!important;left:auto!important;
    width:min(84vw,350px)!important;max-width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 150px)!important;padding:10px!important;gap:7px!important;
    border-radius:20px!important;overflow:auto!important;z-index:121!important;
    transform-origin:top right;animation:cs224-menu-in .18s ease-out both;
  }
  body.v14-home .v188-nav>a,
  body.v14-home .v188-nav-more>summary{
    min-height:48px!important;width:100%!important;justify-content:flex-start!important;
    text-align:right!important;padding:10px 14px!important;font-size:13px!important;border-radius:12px!important;
  }
  body.v14-home .v188-nav-more{width:100%!important}
  body.v14-home .v188-nav-menu.v201-nav-menu{
    position:static!important;width:100%!important;display:grid!important;grid-template-columns:1fr!important;
    gap:6px!important;padding:7px!important;margin-top:5px!important;border-radius:12px!important;
  }
  body.v14-home .v188-nav-menu.v201-nav-menu a{
    min-height:43px!important;justify-content:flex-start!important;text-align:right!important;padding:9px 12px!important;font-size:12px!important;
  }
  body.v14-home .v188-header-inner{position:relative!important;z-index:122!important}
  body.v14-home .v188-portals{position:relative!important;z-index:123!important}
  body.v14-home #home.v188-hero::before{inset:-28%;opacity:.58;animation-duration:10s}
  body.v14-home #home .v188-hero-copy::before{opacity:.32}
  html[data-theme="light"] body.v14-home #contact .v194-contact-head{align-items:center!important}
  html[data-theme="light"] body.v14-home #contact .v194-contact-head h2{font-size:clamp(38px,11vw,54px)!important;line-height:1.15!important}
  html[data-theme="light"] body.v14-home #contact .v194-contact-head>div>p{font-size:13px!important;line-height:1.9!important}
  body.v14-home #contact .v194-contact-card{min-height:112px!important}
  body.v14-home #contact .v194-contact-card strong{font-size:16px!important;line-height:1.5!important}
}
@keyframes cs224-menu-in{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}

/* Very narrow phones: keep the three portals in one row as requested */
@media(max-width:430px){
  body.v14-home .v188-portals{gap:5px!important}
  body.v14-home .v188-portal{padding-inline:5px!important;font-size:10px!important}
  body.v14-home .v188-portal span{display:none!important}
}

/* Accessibility / battery */
@media(prefers-reduced-motion:reduce){
  body.v14-home #home.v188-hero::before,
  body.v14-home #home .v188-hero-copy::before,
  body.v14-home #home .v14-btn.primary::after{animation:none!important}
}
html.cs-page-hidden body.v14-home #home.v188-hero::before,
html.cs-page-hidden body.v14-home #home .v188-hero-copy::before,
html.cs-page-hidden body.v14-home #home .v188-hero-image>img,
html.cs-page-hidden body.v14-home .v191-latest-news,
html.cs-page-hidden body.v14-home .v167-hero-prestige i,
html.cs-page-hidden body.v14-home #home .v14-btn.primary::after{animation-play-state:paused!important}
@media(max-width:760px){
  body.v14-home #contact .v194-contact-card strong[dir="ltr"]{font-size:clamp(12px,3.7vw,15px)!important;white-space:nowrap!important;letter-spacing:-.02em!important}
}


/* ---------- V224: clearly visible premium motion ---------- */
body.v14-home #home.v188-hero{--cs224-parallax:0px}
body.v14-home #home.v188-hero::before{
  background-size:125% 125%,135% 135%,130% 130%!important;
  animation:cs224-aurora 9s ease-in-out infinite alternate!important;
  will-change:transform,opacity;
}
body.v14-home #home .v188-hero-image{overflow:hidden!important}
body.v14-home #home .v188-hero-image>img{
  will-change:transform!important;
  animation:cs224-photo-drift 10s ease-in-out infinite alternate!important;
}
body.v14-home #home .v188-hero-image::after{
  content:"";position:absolute;inset:-30% -45%;pointer-events:none;z-index:3;
  background:linear-gradient(112deg,transparent 39%,rgba(244,199,96,.14) 48%,rgba(255,255,255,.10) 50%,rgba(244,199,96,.08) 53%,transparent 62%);
  transform:translateX(-52%) rotate(-5deg);
  animation:cs224-light-sweep 8.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
body.v14-home .v191-latest-news{animation:cs224-news-float 3.8s ease-in-out infinite!important;will-change:transform}
body.v14-home .v167-hero-prestige i{animation:cs224-star-pulse 2.2s ease-in-out infinite!important}
body.v14-home #home .v14-btn.primary{animation:cs224-cta-breathe 4.2s ease-in-out infinite}
body.v14-home main>section:not(#home).cs-reveal{transform:translateY(26px) scale(.985);opacity:0}
body.v14-home main>section:not(#home).cs-reveal.cs-revealed{transform:none;opacity:1}

@keyframes cs224-photo-drift{
  0%{transform:translate3d(0,var(--cs224-parallax),0) scale(1.015)}
  50%{transform:translate3d(-1.2%,calc(var(--cs224-parallax) - 4px),0) scale(1.055)}
  100%{transform:translate3d(1.1%,calc(var(--cs224-parallax) + 3px),0) scale(1.035)}
}
@keyframes cs224-light-sweep{
  0%,20%{transform:translateX(-58%) rotate(-5deg);opacity:0}
  35%{opacity:.72}
  58%{transform:translateX(58%) rotate(-5deg);opacity:.42}
  68%,100%{transform:translateX(58%) rotate(-5deg);opacity:0}
}
@keyframes cs224-news-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-.25deg)}}
@keyframes cs224-star-pulse{0%,100%{opacity:.42;transform:scale(.82) rotate(0)}50%{opacity:1;transform:scale(1.22) rotate(22deg)}}
@keyframes cs224-cta-breathe{0%,100%{box-shadow:0 12px 28px rgba(206,151,40,.15)}50%{box-shadow:0 16px 38px rgba(232,181,72,.34)}}

@media(max-width:760px){
  body.v14-home #home .v188-hero-image>img{animation-duration:8.5s!important}
  body.v14-home #home .v188-hero-image::after{animation-duration:7.2s!important}
}

/* Keep motion accessible only when the OS explicitly requests less motion. */
@media(prefers-reduced-motion:reduce){
  body.v14-home #home .v188-hero-image::after,
  body.v14-home #home .v14-btn.primary{animation:none!important}
}
