/* =========================================================================
   Les Crèches ISAE — motion. Layer 3 of 3: animations only.
   Rules: transform / opacity / clip-path, nothing that moves the layout;
   loops run only while visible (.is-inview); "reduce motion" stops all.
   States: .isae-motion (set in <head>), .is-drawn (seen once, by script),
   .is-visible (reveal, isae-front.js), .is-inview (on screen right now).
   ========================================================================= */

/* ------------------------------------------------------------- keyframes */

@keyframes isae-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes isae-pop { 0% { opacity: 0; scale: .3; rotate: -24deg; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes isae-photo-in { from { opacity: 0; translate: 0 44px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes isae-draw { to { stroke-dashoffset: 0; } }
@keyframes isae-write { to { clip-path: inset(-20% -12% -20% 0); } }
@keyframes isae-sway { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes isae-beat { 0%, 46%, 100% { scale: 1; } 12% { scale: 1.14; } 24% { scale: .96; } 34% { scale: 1.07; } }
@keyframes isae-twinkle { 0%, 100% { scale: .86; opacity: .75; rotate: 0deg; } 50% { scale: 1.08; opacity: 1; rotate: 10deg; } }
@keyframes isae-turn { to { rotate: 360deg; } }
@keyframes isae-drift { 0%, 100% { translate: -5px 0; } 50% { translate: 5px 0; } }
@keyframes isae-crawl { from { translate: -3px 0; } to { translate: 5px 0; } }
@keyframes isae-morph {
	0% { border-radius: 52% 48% 41% 59% / 46% 52% 48% 54%; }
	50% { border-radius: 44% 56% 55% 45% / 55% 44% 56% 45%; }
	100% { border-radius: 58% 42% 46% 54% / 42% 58% 44% 56%; }
}
@keyframes isae-breathe { 0%, 100% { box-shadow: 3px 4px 0 var(--isae-navy), 0 0 0 0 rgba(255, 132, 171, .55); } 50% { box-shadow: 3px 4px 0 var(--isae-navy), 0 0 0 9px rgba(255, 132, 171, 0); } }
@keyframes isae-drop { from { opacity: 0; translate: 0 10px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes isae-ocm-in { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes isae-check { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes isae-open { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes isae-settle { from { scale: 1.16; } to { scale: 1; } }
@keyframes isae-behind { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------- scroll reveal */

.isae-js .isae-reveal { transition: opacity .9s var(--isae-ease), transform .9s var(--isae-ease); }

/* Eyebrow pencil stroke grows when its block appears. */
.isae-motion .isae-eyebrow::before { transition: clip-path .8s .25s var(--isae-ease); clip-path: inset(0 0 0 0); }
.isae-motion .isae-reveal:not(.is-visible) .isae-eyebrow::before { clip-path: inset(0 100% 0 0); }

/* Hand-drawn strokes trace themselves: underlines and arrows. */
.isae-motion .isae-scribble path,
.isae-motion .isae-hand-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.isae-motion .is-drawn .isae-scribble path,
.isae-motion .isae-hand.is-drawn .isae-hand-arrow path { transition: stroke-dashoffset 1s .35s var(--isae-ease); stroke-dashoffset: 0; }
.isae-motion .is-drawn .isae-scribble path + path,
.isae-motion .isae-hand.is-drawn .isae-hand-arrow path + path { transition-delay: .9s; transition-duration: .5s; }
/* Handwritten words appear as if written. */
.isae-motion .isae-hand__text { clip-path: inset(-20% 100% -20% 0); }
.isae-motion .isae-hand.is-drawn .isae-hand__text { transition: clip-path 1.1s .1s cubic-bezier(.6, 0, .3, 1); clip-path: inset(-20% -12% -20% 0); }

/* Stickers are stuck on with a little bounce. */
.isae-motion .isae-doodle { opacity: 0; scale: .3; rotate: -24deg; }
.isae-motion .isae-doodle.is-drawn { opacity: 1; scale: 1; rotate: 0deg; transition: opacity .4s ease, scale .8s var(--isae-ease-pop), rotate .8s var(--isae-ease-pop); }

/* Photographs open from the bottom, settling in their frame. */
.isae-motion .isae-photo .isae-media { clip-path: inset(100% 0 0 0); }
.isae-motion .isae-photo .isae-media .isae-media__img { scale: 1.16; }
.isae-motion .isae-photo.is-drawn .isae-media { clip-path: inset(0 0 0 0); transition: clip-path 1.25s .1s cubic-bezier(.6, 0, .2, 1); }
.isae-motion .isae-photo.is-drawn .isae-media .isae-media__img { scale: 1; transition: scale 1.8s .1s var(--isae-ease); }
.isae-motion .isae-photo::before { opacity: 0; translate: 0 18px; }
.isae-motion .isae-photo.is-drawn::before { opacity: 1; translate: 0 0; transition: opacity .8s .6s ease, translate 1s .6s var(--isae-ease); }

/* Inside the stickers: rays, petals and rainbows appear one after the other. */
.isae-motion .d-ray { opacity: 0; }
.isae-motion .is-drawn .d-ray { opacity: 1; transition: opacity .3s calc(.35s + var(--i) * .07s) ease; }
.isae-motion .d-petal { scale: 0; transform-origin: 32px 24px; transform-box: view-box; }
.isae-motion .is-drawn .d-petal { scale: 1; transition: scale .5s calc(.3s + var(--i) * .09s) var(--isae-ease-pop); }
.isae-motion .d-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.isae-motion .is-drawn .d-draw { stroke-dashoffset: 0; transition: stroke-dashoffset .9s calc(.3s + var(--i, 0) * .2s) var(--isae-ease); }

/* ------------------------------------------------- gentle loops, in view only */

.isae-motion .d-sway { transform-origin: 20% 88%; animation: isae-sway 4.6s ease-in-out infinite alternate; }
.isae-motion .d-beat { transform-origin: 50% 55%; animation: isae-beat 2.8s ease-in-out infinite; }
.isae-motion .d-twinkle { transform-origin: center; animation: isae-twinkle 3.2s ease-in-out infinite; }
.isae-motion .d-rays { transform-origin: center; animation: isae-turn 40s linear infinite; }
.isae-motion .d-drift { animation: isae-drift 7s ease-in-out infinite; }
.isae-motion .isae-doodle--snail svg { animation: isae-crawl 5s ease-in-out infinite alternate; }
.isae-motion .isae-doodle:not(.is-inview) *,
.isae-motion .isae-doodle:not(.is-inview) svg,
.isae-lite .isae-doodle *, .isae-lite .isae-doodle svg { animation-play-state: paused !important; }

/* ------------------------------------------------------- hero: first paint */

.isae-motion .isae-hero-ed__eyebrow { animation: isae-rise .8s .05s var(--isae-ease) both; }
.isae-motion .isae-hero-ed__title { animation: isae-rise 1s .15s var(--isae-ease) both; }
.isae-motion .isae-hero-ed__lead { animation: isae-rise .9s .45s var(--isae-ease) both; }
.isae-motion .isae-hero-ed__actions { animation: isae-rise .9s .6s var(--isae-ease) both; }
.isae-motion .isae-hero-ed__label { animation: isae-pop .8s 1.1s var(--isae-ease-pop) both; }
.isae-motion .isae-hero-ed__photo { animation: isae-photo-in 1.2s .25s var(--isae-ease) both; }
.isae-motion .isae-hero-ed__blob { animation: isae-rise 1.2s .1s var(--isae-ease) both, isae-morph 16s 1.3s ease-in-out infinite alternate; }
.isae-motion .isae-hero-ed:not(.is-inview) .isae-hero-ed__blob,
.isae-lite .isae-hero-ed__blob { animation-play-state: paused; }
/* In the hero the stickers and the note come in at load, without waiting for the scroll. */
.isae-motion .isae-hero-ed .isae-doodle { animation: isae-pop .8s var(--isae-ease-pop) both; opacity: 1; scale: 1; rotate: 0deg; }
.isae-motion .isae-hero-ed__sparkle { animation-delay: .8s !important; }
.isae-motion .isae-hero-ed__sun { animation-delay: .95s !important; }
.isae-motion .isae-hero-ed__heart { animation-delay: 1.1s !important; }
.isae-motion .isae-hero-ed__leaf { animation-delay: 1.25s !important; }
.isae-motion .isae-hero-ed .d-ray { opacity: 1; }
.isae-motion .isae-hero-ed .isae-scribble path { animation: isae-draw 1s 1s var(--isae-ease) forwards; }
.isae-motion .isae-hero-ed .isae-scribble path + path { animation: isae-draw .5s 1.6s var(--isae-ease) forwards; }
.isae-motion .isae-hero-ed .isae-hand__text { animation: isae-write 1.1s 1.4s cubic-bezier(.6, 0, .3, 1) forwards; }
.isae-motion .isae-hero-ed .isae-hand-arrow path { animation: isae-draw .8s 2.1s var(--isae-ease) forwards; }
.isae-motion .isae-hero-ed .isae-hand-arrow path + path { animation-delay: 2.6s; animation-duration: .4s; }
/* Inner page and crèche headers: the first screen never waits for a script. */
.isae-js .isae-page-header .isae-reveal,
.isae-js .isae-creche-hero-ed .isae-reveal { opacity: 1; transform: none; }
.isae-motion .isae-page-header__text,
.isae-motion .isae-creche-hero-ed__text { animation: isae-rise .9s .05s var(--isae-ease) both; }
.isae-motion .isae-page-header .isae-photo .isae-media,
.isae-motion .isae-creche-hero-ed .isae-photo .isae-media { clip-path: none; animation: isae-open 1.2s .25s cubic-bezier(.6, 0, .2, 1) both; }
.isae-motion .isae-page-header .isae-photo .isae-media__img,
.isae-motion .isae-creche-hero-ed .isae-photo .isae-media__img { scale: 1; animation: isae-settle 1.8s .25s var(--isae-ease) both; }
.isae-motion .isae-page-header .isae-photo::before,
.isae-motion .isae-creche-hero-ed .isae-photo::before { opacity: 1; translate: 0 0; animation: isae-behind .9s .8s var(--isae-ease) both; }
.isae-motion .isae-page-header .isae-doodle,
.isae-motion .isae-creche-hero-ed .isae-doodle { opacity: 1; scale: 1; rotate: 0deg; animation: isae-pop .8s 1s var(--isae-ease-pop) both; }
.isae-motion .isae-page-header .d-ray, .isae-motion .isae-creche-hero-ed .d-ray { opacity: 1; }
.isae-motion .isae-page-header .d-petal, .isae-motion .isae-creche-hero-ed .d-petal { scale: 1; }
.isae-motion .isae-page-header .d-draw, .isae-motion .isae-creche-hero-ed .d-draw { stroke-dashoffset: 0; }
.isae-motion .isae-page-header .isae-scribble path { animation: isae-draw 1s .8s var(--isae-ease) forwards; }
.isae-motion .isae-page-header .isae-scribble path + path { animation: isae-draw .5s 1.4s var(--isae-ease) forwards; }
.isae-motion .isae-page-header .isae-hand__text { animation: isae-write 1.1s 1.2s cubic-bezier(.6, 0, .3, 1) forwards; }
.isae-motion .isae-page-header .isae-hand-arrow path { animation: isae-draw .8s 1.9s var(--isae-ease) forwards; }
.isae-motion .isae-page-header .isae-eyebrow::before { clip-path: inset(0 0 0 0); }

/* Parallax and pointer: set by the script as CSS variables. */
.isae-hero-ed .isae-doodle, .isae-photo__sticker { translate: var(--mx, 0px) calc(var(--my, 0px) + var(--sy, 0px)); }

/* --------------------------------------------------------- micro-moments */

/* The pre-registration button breathes gently. */
html body.isae-site #top nav > ul > li[class*="button_solid_color"] > a:before { animation: isae-breathe 3.4s ease-in-out infinite; }
html body.isae-site #header-outer #top .sf-menu li:hover > ul,
html body.isae-site #header-outer #top .sf-menu li.sfHover > ul { animation: isae-drop .35s var(--isae-ease) both; }

/* FAQ: the answer unfolds (height animated by the script). */
.isae-faq__answer { overflow: hidden; }

/* Form sent: the tick draws itself in its round sticker. */
.isae-motion .isae-form-done__icon { animation: isae-pop .8s .1s var(--isae-ease-pop) both; }
.isae-motion .isae-form-done__icon::after { animation: isae-check .5s .7s ease-out both; }

/* Mobile menu: items arrive one after the other. */
body.material-ocm-open #slide-out-widget-area .isae-ocm-brand,
body.material-ocm-open #slide-out-widget-area .off-canvas-menu-container > ul > li,
body.material-ocm-open #slide-out-widget-area .isae-ocm-foot,
#slide-out-widget-area.open .isae-ocm-brand,
#slide-out-widget-area.open .off-canvas-menu-container > ul > li,
#slide-out-widget-area.open .isae-ocm-foot { animation: isae-ocm-in .6s var(--isae-ease) both; }
#slide-out-widget-area .off-canvas-menu-container > ul > li:nth-child(1) { animation-delay: .1s; }
#slide-out-widget-area .off-canvas-menu-container > ul > li:nth-child(2) { animation-delay: .15s; }
#slide-out-widget-area .off-canvas-menu-container > ul > li:nth-child(3) { animation-delay: .2s; }
#slide-out-widget-area .off-canvas-menu-container > ul > li:nth-child(4) { animation-delay: .25s; }
#slide-out-widget-area .off-canvas-menu-container > ul > li:nth-child(5) { animation-delay: .3s; }
#slide-out-widget-area .off-canvas-menu-container > ul > li:nth-child(6) { animation-delay: .35s; }
#slide-out-widget-area .off-canvas-menu-container > ul > li:nth-child(7) { animation-delay: .4s; }
#slide-out-widget-area .off-canvas-menu-container > ul > li:nth-child(n+8) { animation-delay: .45s; }
#slide-out-widget-area .isae-ocm-foot { animation-delay: .5s !important; }
.isae-ocm-deco--1 { animation: isae-drift 6s ease-in-out infinite; }
.isae-ocm-deco--2 { animation: isae-sway 4s ease-in-out infinite alternate; }
.isae-ocm-deco--3 { animation: isae-twinkle 2.6s ease-in-out infinite; }

/* ------------------------------------------------------- no motion wanted */

@media (prefers-reduced-motion: reduce) {
	:where([class*="isae-"], [class*="isae-"] *, [class*="isae-"]::before, [class*="isae-"]::after, [class*="isae-"] *::before, [class*="isae-"] *::after),
	html body.isae-site #top nav > ul > li[class*="button_solid_color"] > a:before,
	html body.isae-site #header-outer #top .sf-menu li ul,
	#slide-out-widget-area .off-canvas-menu-container > ul > li { animation: none !important; transition-duration: .01ms !important; }
	.isae-doodle, .isae-photo .isae-media, .isae-hand__text, .isae-photo::before { opacity: 1 !important; scale: 1 !important; rotate: 0deg !important; translate: none !important; clip-path: none !important; }
	.isae-scribble path, .isae-hand-arrow path, .d-draw { stroke-dashoffset: 0 !important; }
	.d-ray { opacity: 1 !important; }
	.d-petal, .isae-photo .isae-media__img { scale: 1 !important; }
	.isae-card, .isae-value, .isae-btn, .isae-activity, .isae-step, .isae-feature { transition: none !important; }
}