/* ============================================================
   AY Studios home page (app/page.js + app/HomeClient.js)
   Editorial paper-and-ink language borrowed from The Wedding
   Suite: Bodoni Moda display, Inter UI, warm paper ground, a
   champagne hairline, fixed grain overlay, one luxe easing
   curve. Every value here is scoped under .ay-home so the rest
   of the platform's app.css is untouched.
   ============================================================ */

.ay-home{
  --paper:#F7F1E7;
  --paper-2:#F1E7D9;
  --card:#FFFCF7;
  --ink:#191512;
  --ink-soft:#5C5349;
  --ink-faint:#96897A;
  --line:#E8DCCB;
  --line-soft:#F0E7DA;
  --champagne:#C4B79C;
  --champagne-deep:#A48E62;
  --accent:#20302B;          /* deep ink green, the one saturated note */
  --accent-deep:#16221E;
  --accent-tint:#E4EAE5;
  --clay:#B85C38;
  --shadow-soft:0 6px 20px rgba(60,40,18,.06), 0 1px 3px rgba(25,22,22,.04), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow:0 18px 44px rgba(60,40,18,.10), 0 3px 9px rgba(25,22,22,.05), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-lift:0 26px 56px rgba(60,40,18,.15), 0 8px 18px rgba(25,22,22,.07), inset 0 1px 0 rgba(255,255,255,.6);
  --ease-lux:cubic-bezier(.22,.72,.24,1);
  --font-display:'Bodoni Moda',Didot,Georgia,'Times New Roman',serif;
  --font-ui:'Inter','Avenir Next','Segoe UI',Helvetica,Arial,sans-serif;

  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.55;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.ay-home *,.ay-home *::before,.ay-home *::after{box-sizing:border-box}
.ay-home h1,.ay-home h2,.ay-home h3{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.ay-home p{margin:0}
/* :where() keeps this reset at zero weight, otherwise .ay-home a beats
   .ay-btn and .ay-link on specificity and every button label came out ink
   on dark green, which is invisible. */
.ay-home :where(a){color:inherit;text-decoration:none}
.ay-home img{display:block;max-width:100%}

/* Paper grain, the quiet stationery feel behind everything */
.ay-grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* ---------------- shared bits ---------------- */
.ay-wrap{width:min(1180px,100% - 48px);margin:0 auto}
.ay-eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne-deep);margin:0 0 14px}
.ay-lede{color:var(--ink-soft);font-size:17px;line-height:1.65}
.ay-fine{color:var(--ink-faint);font-size:13px}
.ay-rule{height:1px;background:linear-gradient(90deg,transparent,var(--champagne),transparent);border:0;margin:0}

.ay-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;
  min-height:48px;padding:13px 24px;border-radius:999px;border:1px solid var(--accent-deep);
  background:var(--accent);color:#FBF7F0;font-family:var(--font-ui);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:transform .3s var(--ease-lux),box-shadow .35s var(--ease-lux),background .3s var(--ease-lux);
  box-shadow:0 10px 24px rgba(32,48,43,.22)}
.ay-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,244,225,.30),transparent);transform:skewX(-18deg);
  transition:left .6s var(--ease-lux)}
.ay-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(32,48,43,.28)}
.ay-btn:hover::after{left:130%}
.ay-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.ay-btn.ghost:hover{border-color:var(--champagne);background:rgba(255,255,255,.5)}
.ay-btn.lg{min-height:56px;padding:16px 30px;font-size:15.5px}
.ay-btn.wide{width:100%}
.ay-btn:focus-visible,.ay-home a:focus-visible,.ay-home button:focus-visible{outline:2px solid var(--champagne-deep);outline-offset:3px}

/* reveal on scroll */
.ay-rev{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-lux),transform .8s var(--ease-lux)}
.ay-rev.in{opacity:1;transform:none}

/* ---------------- nav ---------------- */
.ay-nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(247,241,231,.82);border-bottom:1px solid transparent;transition:border-color .4s var(--ease-lux),background .4s var(--ease-lux)}
.ay-nav.stuck{border-bottom-color:var(--line);background:rgba(247,241,231,.94)}
.ay-nav-in{display:flex;align-items:center;gap:20px;min-height:68px}
.ay-brand{display:flex;align-items:center;min-height:44px;gap:11px;font-family:var(--font-display);font-size:17px;letter-spacing:.02em}
.ay-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#F7F1E7;
  font-family:var(--font-display);font-size:13px;letter-spacing:.06em;box-shadow:0 4px 12px rgba(32,48,43,.25)}
.ay-nav-links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--ink-soft)}
.ay-nav-links a{display:inline-flex;align-items:center;min-height:44px;position:relative;padding:4px 0;transition:color .25s var(--ease-lux)}
.ay-nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--champagne-deep);transition:right .35s var(--ease-lux)}
.ay-nav-links a:hover{color:var(--ink)}
.ay-nav-links a:hover::after{right:0}
.ay-nav-cta{display:flex;align-items:center;gap:10px}
.ay-nav-cta .ay-btn{min-height:44px;padding:11px 20px;font-size:13.5px}
.ay-nav-signin{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--ink-soft);padding:10px 4px}
.ay-nav-signin:hover{color:var(--ink)}

/* ---------------- notice ---------------- */
.ay-note{margin:18px auto 0;width:min(760px,100% - 48px);background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;font-size:14px;color:var(--ink-soft);box-shadow:var(--shadow-soft)}

/* ---------------- hero ---------------- */
.ay-hero{position:relative;padding:74px 0 10px}
.ay-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ay-hero h1{font-size:clamp(2.6rem,5.2vw,4.3rem);line-height:1.02;letter-spacing:-.02em}
.ay-hero h1 em{font-style:italic;color:var(--accent)}
.ay-hero .ay-lede{margin-top:22px;max-width:30em}
.ay-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ay-hero .ay-fine{margin-top:16px}
.ay-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line-soft)}
.ay-trust-item{display:flex;flex-direction:column;gap:2px}
.ay-trust-n{font-family:var(--font-display);font-size:22px;line-height:1}
.ay-trust-l{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.ay-stars{color:var(--champagne-deep);letter-spacing:.12em;font-size:13px}

/* hero collage: three real listing photos, head on, gently stacked */
.ay-collage{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.ay-shot{position:relative;margin:0;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .7s var(--ease-lux),box-shadow .7s var(--ease-lux)}
.ay-shot-frame{display:block;overflow:hidden;aspect-ratio:1/1;background:var(--paper-2)}
.ay-shot img{width:100%;height:100%;object-fit:contain;background:var(--paper-2);transform:scale(1.1) translateY(4.5%)}
.ay-shot .ay-card-mono{aspect-ratio:1/1}
/* Two even columns, the right one dropped half a tile, so the four photos
   read as a considered stack rather than four sizes of the same thing.
   Equal widths also keep every caption on one line. */
.ay-shot.a{grid-column:1;grid-row:1}
.ay-shot.b{grid-column:2;grid-row:1}
.ay-shot.c{grid-column:1;grid-row:2}
.ay-shot.d{grid-column:2;grid-row:2}
.ay-shot.b,.ay-shot.d{transform:translateY(38px)}
.ay-shot:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.ay-shot.b:hover,.ay-shot.d:hover{transform:translateY(30px)}
/* The name of the app sits on its own strip under the photo. It used to
   float on the artwork, where it landed on a headline or a chart and read
   like a sticker somebody forgot to peel off. */
.ay-shot-cap{padding:9px 12px;border-top:1px solid var(--line-soft);background:var(--card);
  color:var(--ink-soft);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* ---------------- marquee ---------------- */
.ay-marquee{margin-top:64px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:16px 0;overflow:hidden;background:linear-gradient(180deg,rgba(255,252,247,.7),rgba(255,252,247,0))}
.ay-marquee-track{display:flex;gap:40px;width:max-content;animation:ay-slide 46s linear infinite}
.ay-marquee:hover .ay-marquee-track{animation-play-state:paused}
.ay-marquee span{font-family:var(--font-display);font-size:15px;color:var(--ink-faint);white-space:nowrap;display:flex;align-items:center;gap:40px}
.ay-marquee span::after{content:"✦";color:var(--champagne);font-size:12px}
@keyframes ay-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- section frame ---------------- */
.ay-sec{padding:96px 0}
.ay-sec-head{max-width:680px}
.ay-sec-head.center{margin:0 auto;text-align:center}
.ay-sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.08}
.ay-sec-head .ay-lede{margin-top:16px}

/* ---------------- library ---------------- */
.ay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.ay-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease-lux),box-shadow .5s var(--ease-lux),border-color .45s var(--ease-lux)}
.ay-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--champagne)}
/* The listing photos are square and designed edge to edge, so the card
   frame matches them and nothing is cropped off the headline. */
.ay-card-media{position:relative;aspect-ratio:1/1;background:var(--paper-2);overflow:hidden}
.ay-card-media img{width:100%;height:100%;object-fit:contain;transform:scale(1.1) translateY(4.5%);transition:transform .9s var(--ease-lux)}
.ay-card:hover .ay-card-media img{transform:scale(1.14) translateY(4.4%)}
/* Every listing slide prints a sales strip along the bottom, and several of
   them say "One-time purchase, no subscription", which is the opposite of
   what this page sells. The default transform above crops that strip off.
   Clear Spend and MyGymPal additionally print their retired studio name in
   the top corner (Etsy sells them as ADHD Budget Planner and Workout
   Tracker), so those two are cropped at both ends. */
.ay-card-media.trim img,.ay-shot.trim img{transform:scale(1.3) translateY(1%)}
.ay-card:hover .ay-card-media.trim img{transform:scale(1.34) translateY(1%)}
.ay-card-mono{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(140deg,var(--paper-2),var(--card));
  font-family:var(--font-display);font-size:44px;color:var(--champagne-deep)}
/* The category used to be a pill floating on the photo, where it landed on
   the headline printed in the listing art. It reads better as an eyebrow
   over the app name, and the photo stays whole. */
.ay-card-kicker{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne-deep)}
.ay-card-body{padding:20px 22px 20px;display:flex;flex-direction:column;flex:1;gap:9px}
.ay-card-body h3{font-size:21px;line-height:1.15}
.ay-card-tag{color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.ay-points{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ay-points li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.ay-points svg{flex:none;margin-top:2px;color:var(--champagne-deep)}
.ay-card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px}
.ay-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:14px;font-weight:600;color:var(--accent)}
.ay-link svg{transition:transform .3s var(--ease-lux)}
.ay-link:hover svg{transform:translateX(3px)}
.ay-chip{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne-deep);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}

/* A lone card on the last row looks like a mistake, so when the library
   count leaves one over (10 apps in three columns) the last card runs the
   full width instead, photo beside the copy. */
.ay-card.wide{grid-column:1 / -1;flex-direction:row}
/* Side by side the photo follows the text, not the other way round: a
   square frame here made the card taller than its own copy and left a
   field of empty paper under the points. */
.ay-card.wide .ay-card-media{flex:0 0 40%;aspect-ratio:auto;min-height:300px;align-self:stretch}
.ay-card.wide .ay-card-media img{height:100%;width:100%;object-fit:contain}
.ay-card.wide .ay-card-body{padding:32px 34px;justify-content:center;gap:12px}
.ay-card.wide .ay-card-body h3{font-size:25px}
.ay-card.wide .ay-card-tag{font-size:16px;max-width:52ch}
.ay-card.wide .ay-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px;margin-top:10px}
/* margin-top:auto on .ay-card-foot pinned the footer to the bottom of the
   tall media column and left a dead band under the points. */
.ay-card.wide .ay-card-foot{margin-top:26px}

/* ---------------- steps ---------------- */
.ay-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:46px;border-top:1px solid var(--line)}
.ay-step{padding:30px 28px 30px 0;border-right:1px solid var(--line)}
.ay-step:last-child{border-right:0;padding-right:0}
.ay-step:not(:first-child){padding-left:28px}
.ay-step-n{font-family:var(--font-display);font-size:13px;letter-spacing:.2em;color:var(--champagne-deep)}
.ay-step h3{margin-top:10px;font-size:22px}
.ay-step p{margin-top:8px;color:var(--ink-soft);font-size:14.5px}

/* ---------------- value band ---------------- */
.ay-band{background:var(--accent);color:#F3EFE6}
.ay-band h2,.ay-band h3{color:#FBF7F0}
.ay-band .ay-eyebrow{color:var(--champagne)}
.ay-band .ay-lede{color:rgba(243,239,230,.78)}
.ay-values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:46px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.ay-value{background:var(--accent);padding:30px 28px}
.ay-value h3{font-size:20px}
.ay-value p{margin-top:8px;font-size:14.5px;color:rgba(243,239,230,.76)}

/* ---------------- pricing ---------------- */
.ay-price-wrap{display:flex;justify-content:center;margin-top:46px}
.ay-price-card{position:relative;width:min(520px,100%);background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:40px 36px;text-align:center;box-shadow:var(--shadow)}
.ay-price-card::before{content:"";position:absolute;inset:8px;border-radius:16px;border:1px solid var(--line-soft);pointer-events:none}
.ay-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:18px 0 6px}
.ay-price-amt{font-family:var(--font-display);font-size:64px;line-height:1}
.ay-price-per{color:var(--ink-faint);font-size:14px}
.ay-price-list{list-style:none;margin:24px 0 28px;padding:0;text-align:left;display:flex;flex-direction:column;gap:11px}
.ay-price-list li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft)}
.ay-price-list svg{flex:none;margin-top:3px;color:var(--accent)}
.ay-compare{margin-top:28px;display:flex;justify-content:center;gap:34px;flex-wrap:wrap;color:var(--ink-faint);font-size:13.5px;text-align:center}
.ay-compare b{display:block;font-family:var(--font-display);font-size:19px;color:var(--ink);font-weight:500}

/* ---------------- etsy bridge ---------------- */
.ay-bridge{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:22px;padding:40px 38px;box-shadow:var(--shadow-soft)}
.ay-bridge h2{line-height:1.16}
/* the headline sat straight on top of its paragraph, with no gap at all */
.ay-bridge .ay-lede{margin-top:14px}
.ay-bridge-cta{display:flex;flex-direction:column;gap:12px}

/* ---------------- faq ---------------- */
.ay-faq{max-width:820px;margin:44px auto 0;border-top:1px solid var(--line)}
.ay-faq-item{border-bottom:1px solid var(--line)}
.ay-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:18px 0;
  background:none;border:0;cursor:pointer;font-family:var(--font-display);font-size:19px;color:var(--ink);text-align:left}
.ay-faq-mark{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--champagne-deep);font-family:var(--font-ui);font-size:15px;transition:transform .4s var(--ease-lux),border-color .3s}
.ay-faq-item.open .ay-faq-mark{transform:rotate(180deg);border-color:var(--champagne)}
.ay-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-lux)}
.ay-faq-item.open .ay-faq-a{grid-template-rows:1fr}
.ay-faq-a>div{overflow:hidden}
.ay-faq-a p{padding:0 0 20px;color:var(--ink-soft);font-size:15px;max-width:64ch}

/* ---------------- final + footer ---------------- */
.ay-final{text-align:center;padding:104px 0}
.ay-final h2{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.ay-final h2 em{font-style:italic;color:var(--accent)}
.ay-final .ay-lede{margin:16px auto 30px;max-width:44ch}
.ay-footer{border-top:1px solid var(--line);padding:46px 0 60px;color:var(--ink-faint);font-size:13.5px}
.ay-foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}
.ay-foot-col h4{margin:0 0 12px;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.ay-foot-col a{display:flex;align-items:center;min-height:44px;padding:5px 0;color:var(--ink-faint);transition:color .25s var(--ease-lux)}
.ay-foot-col a:hover{color:var(--ink)}
.ay-foot-note{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------------- tablet ---------------- */
@media (max-width:1000px){
  .ay-hero-in{grid-template-columns:1fr;gap:40px}
  .ay-grid{grid-template-columns:repeat(2,1fr)}
  .ay-card.wide{grid-column:auto;flex-direction:column}
  .ay-card.wide .ay-card-media{flex:none;aspect-ratio:1/1;min-height:0}
  .ay-card.wide .ay-card-body{padding:22px 22px 20px;gap:10px}
  .ay-card.wide .ay-card-body h3{font-size:21px}
  .ay-card.wide .ay-card-tag{font-size:14.5px}
  .ay-card.wide .ay-points{display:flex;gap:7px}
  .ay-steps{grid-template-columns:1fr}
  .ay-step{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .ay-step:not(:first-child){padding-left:0}
  .ay-bridge{grid-template-columns:1fr}
  .ay-foot-grid{grid-template-columns:1fr 1fr}
}

/* ---------------- phone ---------------- */
@media (max-width:640px){
  .ay-home{font-size:15.5px}
  .ay-wrap{width:min(1180px,100% - 34px)}
  .ay-nav-links{display:none}
  .ay-nav-in{min-height:62px;gap:12px}
  .ay-nav-cta{margin-left:auto}
  .ay-nav-cta .ay-btn{min-height:44px;padding:11px 16px;font-size:13px}
  .ay-nav-signin{padding:10px 6px;min-height:44px;display:flex;align-items:center}
  .ay-hero{padding:46px 0 4px}
  .ay-hero h1{font-size:clamp(2.2rem,10vw,2.9rem)}
  .ay-hero .ay-lede{font-size:16px}
  .ay-hero-cta{flex-direction:column;align-items:stretch}
  .ay-hero-cta .ay-btn{width:100%}
  .ay-trust{display:grid;grid-template-columns:1fr;gap:16px;text-align:left}
  .ay-trust-item{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .ay-trust-l{font-size:12px}
  .ay-collage{gap:10px}
  .ay-shot.b,.ay-shot.d{transform:translateY(18px)}
  .ay-shot-cap{padding:8px 10px;font-size:12px;letter-spacing:.01em}
  .ay-sec{padding:64px 0}
  .ay-grid{grid-template-columns:1fr;gap:20px}
  .ay-values{grid-template-columns:1fr}
  .ay-price-card{padding:32px 22px}
  /* stacked, the two halves read as two unrelated statements instead of a
     comparison, so on a phone they sit side by side with a rule between. */
  .ay-compare{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
  .ay-compare>div{padding:0 12px}
  .ay-compare>div+div{border-left:1px solid var(--line-soft)}
  .ay-compare b{font-size:17px;margin-bottom:4px}
  .ay-price-amt{font-size:54px}
  .ay-bridge{padding:30px 22px}
  .ay-faq-q{font-size:17px}
  .ay-final{padding:72px 0}
  .ay-foot-grid{grid-template-columns:1fr}
  .ay-marquee{margin-top:46px}
}

@media (prefers-reduced-motion:reduce){
  .ay-home *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .ay-rev{opacity:1;transform:none}
}