/* ============================================================================
   skin-massage — Japanse Head Spa bij Skin Renew, Middelburg.
   Eén ontwerp, één document. Salie veld, pijnboomgroen accent, Darker
   Grotesque als kopletter. Radius, schaduw en tekstmaat lopen overal via
   var(), zodat er één radiustaal en één schaduwtaal geteld wordt.
   ========================================================================= */

@font-face{font-family:'Darker Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/darker-grotesque-700.woff2') format('woff2')}
@font-face{font-family:'Darker Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/darker-grotesque-800.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/public-sans-400.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/public-sans-600.woff2') format('woff2')}

:root{
  --veld:#DCE4D3;
  --veld-licht:#EFF3E9;
  --veld-diep:#0F3B33;
  --ink:#16211B;
  --accent:#0F3B33;
  --opDiep:#F4F7F0;
  --stil:#4F5A4D;
  --stil-diep: rgb(244 247 240 / .78);
  --lijn:#A8B79C;
  --lijn-licht:#CBD7BE;
  --lijn-diep: rgb(244 247 240 / .24);
  --doekveld:#B9C8AC;
  --verloop-hero: linear-gradient(174deg,#E5ECDD 0%,#DCE4D3 48%,#CBD7BE 100%);
  --verloop-diep: linear-gradient(160deg,#14483E 0%,#0F3B33 58%,#0B2C26 100%);

  --display:'Darker Grotesque',Impact,sans-serif;
  --brood:'Public Sans',system-ui,sans-serif;

  --r: 2px;
  --r-lg: 18px;
  --r-pill: 999px;
  --sh-1: 0 30px 70px -34px rgb(15 40 30 / .5);
  --sh-2: 0 14px 26px -14px rgb(15 40 30 / .5);
  --sh-ring: 0 0 0 5px var(--veld);
  --e: cubic-bezier(.16,1,.3,1);
  --d1: 200ms;
  --d2: 520ms;
  --d3: 900ms;
  --u: 8px;
  --maat: 1180px;
  --kop-h: 72px;

  --fs-mega: clamp(3.4rem, 9vw, 7rem);
  --fs-display: clamp(2.5rem, 6vw, 4.4rem);
  --fs-h2: clamp(1.7rem, 3.2vw, 2.6rem);
  --fs-h3: clamp(1.08rem, 1.5vw, 1.28rem);
  --fs-reg: clamp(1.4rem, 3vw, 2.2rem);
  --fs-lead: clamp(1rem, 1.25vw, 1.14rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .74rem;
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--veld);color:var(--ink);font-family:var(--brood);font-size:var(--fs-body);line-height:1.62;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,p,figure,blockquote{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:var(--sh-ring)}
main{display:block}

.skip-link{position:absolute;left:var(--u);top:var(--u);z-index:60;padding:10px 16px;border-radius:var(--r);background:var(--accent);color:var(--opDiep);font-weight:600;font-size:var(--fs-small);transform:translateY(-180%);text-decoration:none}
.skip-link:focus{transform:translateY(0)}

/* ------------------------------------------------------------- container */
.omhul{width:100%;max-width:var(--maat);margin:0 auto;padding-left:clamp(16px,3.4vw,40px);padding-right:clamp(16px,3.4vw,40px)}
/* Uitbreken met PADDING in plaats van met 100vw of een negatieve marge: dat
   kan per definitie geen horizontale overflow maken (bewezen patroon 11). */
.breed{padding-left:max(clamp(16px,3.4vw,40px),calc((100vw - 1500px) / 2));padding-right:max(clamp(16px,3.4vw,40px),calc((100vw - 1500px) / 2))}

/* ------------------------------------------------------------------- kop */
.kop{position:sticky;top:0;z-index:30;background:var(--veld);border-bottom:1px solid var(--lijn-licht)}
.kop-in{display:flex;align-items:center;justify-content:space-between;gap:var(--u);flex-wrap:nowrap;height:var(--kop-h)}
.merk{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.merk-naam{font-family:var(--display);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1;white-space:nowrap}
.merk-tak{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--stil);white-space:nowrap}
.kop-rechts{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);white-space:nowrap}
.kop-link{font-size:var(--fs-small);text-decoration:none;border-bottom:1px solid var(--lijn);padding-bottom:2px}
@media (max-width:600px){
  .kop-link{display:none}
  .kop .knop{padding:12px 14px}
}
@media (max-width:380px){.merk-tak{display:none}}

/* ------------------------------------------------------------------ knop */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;min-height:48px;border-radius:var(--r);background:var(--accent);color:var(--opDiep);font-weight:600;font-size:var(--fs-small);text-decoration:none;box-shadow:var(--sh-2);transition:transform var(--d1) var(--e),opacity var(--d1) var(--e)}
.knop:hover{transform:translateY(-2px)}
.knop-om{background:var(--opDiep);color:var(--accent)}
.knop-stil{display:inline-flex;align-items:center;min-height:48px;font-size:var(--fs-small);font-weight:600;text-decoration:none;border-bottom:1px solid var(--lijn);transition:opacity var(--d1) var(--e)}
.knop-stil:hover{opacity:.72}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,24px)}
/* Alleen op het donkere vlak zelf; de lichte kaart binnen .slot houdt de
   gewone lijnkleur, anders verdwijnt zijn onderstreping. */
.tarieven-acties .knop-stil{border-bottom-color:var(--lijn-diep)}

/* ------------------------------------------------------------------ chip */
.chip{position:absolute;z-index:8;padding:9px 14px;border-radius:var(--r-pill);background:var(--accent);color:var(--opDiep);font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--sh-1);white-space:nowrap}

/* ------------------------------------------------------------------ doek */
.doek{position:relative;overflow:hidden;background:var(--doekveld)}
.doek video{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================ 1. de hero ==
   Cold: geen eyebrow, meteen de compositie. Twee tarieven op displaymaat met
   de eigen opname in de kier ertussen; de lijnen van het register lopen er
   onderdoor en de strook zakt door de sectiegrens de band in.               */
.hero{position:relative;overflow:visible;background-image:var(--verloop-hero);padding-bottom:calc(var(--u)*5);min-height:calc(100svh - var(--kop-h));display:flex;align-items:center}
.hero-in{position:relative;padding-top:calc(var(--u)*5);width:100%}
.hero-h1{font-family:var(--display);font-weight:800;font-size:var(--fs-display);line-height:.88;letter-spacing:-.03em;max-width:18ch}
.hero-h1 em{display:block;font-style:normal;color:var(--accent)}
.hero-lede{margin-top:calc(var(--u)*2);max-width:36ch;color:var(--stil);font-size:var(--fs-lead)}
.hero-acties{margin-top:calc(var(--u)*3)}
.hero-reg{position:relative;margin-top:calc(var(--u)*4);border-top:1px solid var(--lijn)}
.reg-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--u);padding:calc(var(--u)*1.75) 0;border-bottom:1px solid var(--lijn)}
.reg-naam{font-family:var(--display);font-weight:700;font-size:var(--fs-reg);line-height:1;letter-spacing:-.02em;min-width:0}
.reg-duur{display:block;font-family:var(--brood);font-weight:400;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--stil);margin-top:6px}
.reg-prijs{font-family:var(--display);font-weight:800;font-size:var(--fs-reg);line-height:1;color:var(--accent);letter-spacing:-.02em}
.reg-prijs s{font-size:var(--fs-small);font-family:var(--brood);font-weight:400;color:var(--stil);margin-right:8px}
.hero-media{position:relative}
.hero-doek{aspect-ratio:480/848;border:2px solid var(--accent);border-radius:var(--r);filter:saturate(.78) contrast(1.02) drop-shadow(-18px 26px 34px rgb(22 33 27 / .3))}
.hero-doek::after{content:"";position:absolute;inset:0;background:var(--veld);opacity:.12;pointer-events:none}
.hero-chip{left:calc(var(--u)*-9);top:calc(var(--u)*3)}

@media (min-width:861px){
  /* De kop en de lead moeten links van de strook blijven; de strook staat
     midden in de kier tussen de twee tariefkolommen. */
  :root{--fs-display:clamp(2.5rem,5.2vw,4rem)}
  .hero-lede{max-width:31ch}
  .hero-reg{display:grid;grid-template-columns:1fr 1fr;column-gap:360px}
  .hero-media{position:absolute;left:50%;top:calc(var(--u)*14);width:300px;margin-left:-150px;z-index:6}
  .hero-doek{width:100%}
  .hero-chip{left:calc(var(--u)*-4)}
}
@media (max-width:860px){
  .hero-in{display:flex;flex-direction:column}
  .hero-tekst{order:1}
  .hero-reg{order:2;margin-top:calc(var(--u)*3)}
  .hero-media{order:3;margin-top:calc(var(--u)*4);max-width:290px;margin-bottom:calc(var(--u)*-9);z-index:6}
  .hero-doek{width:100%}
  .hero-chip{left:calc(var(--u)*1);top:calc(var(--u)*1.5)}
}

/* ==================================================== 2. praktische band ==
   Eén zin, geen kop. Het rustigste blok van de pagina, en het vlak waar de
   strook uit de hero op landt.                                             */
.band{position:relative;z-index:2;background:var(--veld-diep);color:var(--opDiep)}
.band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--u)*2);padding-top:calc(var(--u)*4);padding-bottom:calc(var(--u)*4);font-size:var(--fs-small)}
.band-in p{max-width:40ch;color:var(--stil-diep)}
.band-in a{color:var(--opDiep);text-decoration:none;border-bottom:1px solid var(--lijn-diep);font-weight:600}

/* ========================================================== 3. wat het is ==
   Opent met één zin op displaymaat die het werk van een kop doet. De foto
   steekt van boven de sectiegrens in de band, en het woord loopt eroverheen.  */
.wat{position:relative;background:var(--veld-licht);padding-top:calc(var(--u)*8);padding-bottom:calc(var(--u)*9)}
.wat-in{display:grid;gap:calc(var(--u)*5);align-items:start}
.wat-zin{font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:.98;letter-spacing:-.025em;max-width:17ch}
.wat-zin b{font-weight:800;color:var(--accent)}
.wat-body{margin-top:calc(var(--u)*3);max-width:56ch;color:var(--stil)}
.wat-body p + p{margin-top:calc(var(--u)*1.5)}
.wat-lijst{margin-top:calc(var(--u)*3);display:grid;gap:calc(var(--u)*1.25);max-width:46ch}
.wat-lijst li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:calc(var(--u)*2);align-items:baseline;font-size:var(--fs-small)}
.wat-lijst i{width:10px;height:10px;border-radius:var(--r-pill);background:var(--accent);display:block}
/* Het beeld is gemaskeerd in de vorm van de beugel uit de echte kamer, niet
   in een rechthoek gezet, en het steekt zijn eigen gridkolom uit. */
.wat-beeld{position:relative}
.wat-beeld img{width:100%;clip-path:inset(0 round 168px 168px var(--r) var(--r));filter:drop-shadow(0 26px 36px rgb(15 40 30 / .28))}
.wat-chip{left:calc(var(--u)*-3);bottom:calc(var(--u)*4)}

@media (min-width:861px){
  .wat-in{grid-template-columns:minmax(0,1.25fr) minmax(240px,.58fr)}
  .wat-beeld{max-width:300px;margin-left:calc(var(--u)*-6);margin-top:calc(var(--u)*-3)}
}
@media (max-width:860px){
  .wat-beeld{max-width:264px}
}

/* ======================================================= 4. de drie stappen ==
   Opent met een nummer dat de compositie IS. Genummerd omdat de bron ze zelf
   nummert en ze in die volgorde gebeuren, niet omdat pagina's nummers hebben. */
.stappen{background:var(--veld);padding-top:calc(var(--u)*9);padding-bottom:calc(var(--u)*9)}
.stappen-lijst{display:grid;gap:calc(var(--u)*4)}
.stap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u)*3);align-items:start;padding-top:calc(var(--u)*2.5);border-top:1px solid var(--lijn)}
.stap-nr{font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:.8;letter-spacing:-.04em;color:var(--accent);opacity:.42}
.stap h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);line-height:1;letter-spacing:-.025em}
.stap p{margin-top:var(--u);color:var(--stil);max-width:52ch}
.stappen-slot{margin-top:calc(var(--u)*5);font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:1;letter-spacing:-.025em;max-width:20ch}
@media (min-width:861px){
  .stappen-lijst{grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*4)}
  .stappen-slot{margin-left:auto;text-align:right}
}

/* ============================================================ 5. tarieven ==
   Volle veldwissel eerst, kop pas laat. Het luidste blok van de pagina.     */
.tarieven{position:relative;background-image:var(--verloop-diep);color:var(--opDiep);padding-top:calc(var(--u)*9);padding-bottom:calc(var(--u)*14)}
.tarieven-label{font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--stil-diep)}
.tarieven h2{margin-top:calc(var(--u)*10);font-family:var(--display);font-weight:800;font-size:var(--fs-display);line-height:.88;letter-spacing:-.03em;max-width:14ch}
.tarieven-lede{margin-top:calc(var(--u)*2);max-width:44ch;color:var(--stil-diep)}
.pakketten{margin-top:calc(var(--u)*5);display:grid;gap:calc(var(--u)*3)}
.pakket{border:1px solid var(--lijn-diep);border-radius:var(--r-lg);padding:calc(var(--u)*4)}
.pakket-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--u);flex-wrap:wrap}
.pakket h3{font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:1;letter-spacing:-.03em}
.pakket-prijs{font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:1;letter-spacing:-.03em}
.pakket-prijs s{font-size:var(--fs-small);font-family:var(--brood);font-weight:400;color:var(--stil-diep);margin-right:8px}
.pakket-duur{margin-top:6px;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--stil-diep)}
.pakket ul{margin-top:calc(var(--u)*2.5);display:grid;gap:10px}
.pakket li{display:grid;grid-template-columns:9px minmax(0,1fr);gap:calc(var(--u)*2);align-items:baseline;font-size:var(--fs-small);color:var(--stil-diep)}
.pakket i{width:9px;height:9px;border-radius:var(--r-pill);background:var(--opDiep);opacity:.6;display:block}
.pakket-vol{background:rgb(244 247 240 / .07);border-color:rgb(244 247 240 / .38)}
.pakket-extra{margin-top:calc(var(--u)*2.5);font-size:var(--fs-small);color:var(--opDiep);font-weight:600}
.tarieven-acties{margin-top:calc(var(--u)*5)}
.tarieven-los{margin-top:calc(var(--u)*3);font-size:var(--fs-small);color:var(--stil-diep)}
@media (min-width:861px){
  .pakketten{grid-template-columns:1fr 1fr;gap:calc(var(--u)*3)}
  .tarieven-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--u)*5);align-items:end}
}

/* ============================================================== 6. de kamer ==
   Vier staande frames uit de eigen opname, van rand tot rand. Nooit boven de
   480 px die het bronbestand echt is: op 1920 is elke kolom precies 480.    */
/* flow-root breekt het samenklappen van marges: zonder dat verschuift de
   sectiegrens omhoog in plaats van dat de beeldband er echt overheen steekt. */
.kamer{position:relative;display:flow-root;background:var(--veld-diep);padding-bottom:calc(var(--u)*6)}
.kamer-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:calc(var(--u)*-10);position:relative;z-index:2}
.kamer-rij img{width:100%;aspect-ratio:480/848;object-fit:cover}
.kamer-bij{margin-top:calc(var(--u)*3);font-size:var(--fs-small);color:var(--stil-diep);max-width:56ch}
@media (max-width:720px){
  .kamer-rij{grid-template-columns:repeat(2,1fr)}
}

/* ========================================================== 7. waarom/bewijs ==
   De kop staat IN de compositie, links in het raster, niet erboven.        */
.waarom{background:var(--veld-licht);padding-top:calc(var(--u)*9);padding-bottom:calc(var(--u)*9)}
.waarom-in{display:grid;gap:calc(var(--u)*5);align-items:start}
.waarom h2{font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:.96;letter-spacing:-.025em;max-width:14ch}
.redenen{display:grid;gap:calc(var(--u)*3)}
.reden h3{font-family:var(--display);font-weight:700;font-size:var(--fs-h3);letter-spacing:0;line-height:1.2}
.reden p{margin-top:6px;font-size:var(--fs-small);color:var(--stil)}
.bewijs{margin-top:calc(var(--u)*6);display:grid;gap:calc(var(--u)*3);border-top:1px solid var(--lijn-licht);padding-top:calc(var(--u)*4)}
.bewijs div b{display:block;font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:1;letter-spacing:-.03em;color:var(--accent)}
.bewijs div span{display:block;margin-top:4px;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--stil)}
@media (min-width:861px){
  .waarom-in{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .redenen{grid-template-columns:1fr 1fr;gap:calc(var(--u)*4)}
  .bewijs{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:521px) and (max-width:860px){
  .bewijs{grid-template-columns:1fr 1fr}
}

/* =============================================================== 8. vragen ==
   Bijschrift vóór de kop.                                                   */
.vragen{background:var(--veld);padding-top:calc(var(--u)*9);padding-bottom:calc(var(--u)*9)}
.vragen-bij{font-size:var(--fs-small);color:var(--stil);max-width:44ch}
.vragen h2{margin-top:var(--u);font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:.98;letter-spacing:-.025em}
.vragen-lijst{margin-top:calc(var(--u)*4);border-top:1px solid var(--lijn);max-width:74ch}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u)*2);padding:calc(var(--u)*2.25) 0;font-family:var(--display);font-weight:700;font-size:var(--fs-h3);line-height:1.2}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";font-family:var(--brood);font-weight:400;color:var(--accent);font-size:var(--fs-h3)}
.vraag[open] summary::after{content:"\2013"}
.vraag p{padding-bottom:calc(var(--u)*2.5);max-width:60ch;color:var(--stil);font-size:var(--fs-small)}
.vraag p + p{margin-top:calc(var(--u)*-1)}

/* ================================================================= 9. slot ==
   Een kaart die de sectiegrens overschrijdt en de vorige sectie onderbreekt,
   daarna pas de kop.                                                        */
.slot{position:relative;background-image:var(--verloop-diep);color:var(--opDiep);padding-top:calc(var(--u)*4);padding-bottom:calc(var(--u)*8)}
.slot-kaart{position:relative;z-index:3;margin-top:calc(var(--u)*-11);background:var(--opDiep);color:var(--ink);border-radius:var(--r-lg);padding:calc(var(--u)*4);box-shadow:var(--sh-1);max-width:560px}
.slot-kaart p{font-family:var(--display);font-weight:800;font-size:var(--fs-h2);line-height:.98;letter-spacing:-.025em}
.slot-acties{margin-top:calc(var(--u)*3)}
.slot-in{margin-top:calc(var(--u)*6);display:grid;gap:calc(var(--u)*4)}
.slot-groep h2{font-family:var(--display);font-weight:800;font-size:var(--fs-h3);letter-spacing:0;line-height:1.2}
.slot-groep ul{margin-top:calc(var(--u)*1.5);display:grid;gap:8px;font-size:var(--fs-small);color:var(--stil-diep)}
.slot-groep a{color:var(--opDiep);text-decoration:none;border-bottom:1px solid var(--lijn-diep)}
@media (min-width:861px){
  .slot-in{grid-template-columns:repeat(3,1fr)}
}

/* ---------------------------------------------------------------- voettekst */
.voet{background:var(--veld-diep);color:var(--stil-diep);padding-top:calc(var(--u)*3);padding-bottom:calc(var(--u)*4);border-top:1px solid var(--lijn-diep)}
.voet-in{display:flex;flex-wrap:wrap;gap:var(--u) clamp(16px,3vw,32px);align-items:baseline;justify-content:space-between;font-size:var(--fs-micro)}
.credit a{color:var(--opDiep);border-bottom:1px solid var(--lijn-diep);text-decoration:none}

/* ============================================================== beweging ==
   De hero beweegt puur met CSS binnen prefers-reduced-motion. Alles onder de
   vouw hangt aan de klasse .bm-anim, die het script ALLEEN zet wanneer
   beweging is toegestaan; zonder script of met beweging uit bestaat die
   klasse niet, gelden de regels niet, en staat er niets op nul dekking.     */
@media (prefers-reduced-motion: no-preference){
  @keyframes rijzen{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes zetten{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

  .hero-h1{animation:rijzen var(--d3) var(--e) backwards}
  .hero-lede{animation:rijzen var(--d2) var(--e) 120ms backwards}
  .hero-acties{animation:rijzen var(--d2) var(--e) 200ms backwards}
  .reg-rij{animation:rijzen var(--d2) var(--e) backwards;animation-delay:calc(280ms + var(--i,0)*100ms)}
  .hero-media{animation:zetten var(--d3) var(--e) 160ms backwards}
  .hero-chip{animation:zetten var(--d2) var(--e) 760ms backwards}

  .bm-anim .onthul{animation:rijzen var(--d3) var(--e) both;animation-play-state:paused;animation-delay:calc(var(--i,0)*90ms)}
  .bm-anim .onthul.aan{animation-play-state:running}
}