/* =========================================================
   AWOAD INDIA EST. — awoadindia.com
   Palette derived from the AWOAD wordmark.
   Motion curve measured from the reference build.
   ========================================================= */

:root{
  /* from the logo */
  --plum:#241733;
  --plum-2:#160E20;
  --plum-3:#33204A;
  --violet:#5B2C6F;
  --lavender:#B9A3D9;
  --butter:#EFEFC0;
  --butter-2:#F6F6D8;

  --bone:#FBF8F0;
  --bone-2:#F3EEE2;
  --ink:#1A1220;
  --grey:#6B6272;
  --grey-2:#A79FB0;

  --line:rgba(36,23,51,.14);
  --line-d:rgba(255,255,255,.16);

  --wrap:1240px;
  --gut:24px;
  --nav-h:70px;

  /* measured from the reference: cubic-bezier(0.44,0,0.56,1) @ .4s */
  --ez:cubic-bezier(.44,0,.56,1);
  --dur:.4s;
  --ez-out:cubic-bezier(.16,1,.3,1);

  /* Poppins across the whole site, display and body */
  --serif:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:16px;font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
/* <picture> exists only to offer the WebP; taking it out of the layout tree
   keeps every `.parent img` rule and every height:100% chain working as if the
   wrapper were not there */
picture{display:contents}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ol{margin:0}
ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--butter);outline-offset:3px}

/* Visually hidden by clipping, not by off-screen offset.
   `left:-9999px` blows the document width out in RTL and pushes the page
   off the visual viewport, so it must not be used here. */
.skip{
  position:absolute;z-index:200;
  width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  background:var(--plum);color:var(--butter);
}
.skip:focus{
  width:auto;height:auto;margin:0;padding:12px 18px;
  overflow:visible;clip:auto;clip-path:none;
  top:12px;inset-inline-start:12px;
}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
.d1{font-family:var(--serif);font-weight:200;font-size:clamp(42px,5.6vw,68px);line-height:1.04;letter-spacing:-.022em}
.d2{font-family:var(--serif);font-weight:200;font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.02em}
.muted{color:var(--grey-2)}
.lede{max-width:54ch;color:var(--grey);font-size:17px;margin-top:20px}
.arabic{font-family:"Noto Kufi Arabic",serif;font-size:34px;color:var(--lavender);margin-bottom:22px}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet);margin-bottom:26px;
}
.eyebrow--light{color:var(--lavender)}
.eyebrow__dot{width:20px;height:20px;border-radius:50%;background:var(--butter);flex:none}
.eyebrow--light .eyebrow__dot{background:var(--violet)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  transition:transform var(--dur) var(--ez),background var(--dur) var(--ez),color var(--dur) var(--ez);
}
.btn:hover{transform:translateY(-2px)}
.btn--butter{background:var(--butter);color:var(--plum)}
.btn--butter:hover{background:var(--butter-2)}
.btn--ghost{box-shadow:inset 0 0 0 1px currentColor}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.arw{transition:transform var(--dur) var(--ez)}
.btn:hover .arw{transform:translateX(4px)}
/* WhatsApp glyph, official mark in WhatsApp green, on every contact link */
.wa-ico{width:17px;height:17px;fill:#25D366;flex:none}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);color:var(--bone);
  background:rgba(22,14,32,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background var(--dur) var(--ez),color var(--dur) var(--ez),border-color var(--dur) var(--ez);
}
.nav.is-solid{background:rgba(251,248,240,.94);color:var(--ink);border-bottom-color:var(--line)}
.nav__inner{max-width:1400px;margin-inline:auto;height:100%;padding-inline:var(--gut);display:flex;align-items:center;gap:24px}

.brand{display:flex;align-items:center;gap:11px;flex:none}
/* the mark sits on its own: no chip, no plate, nothing behind it */
.brand__chip{
  width:38px;height:38px;
  display:grid;place-items:center;flex:none;
}
.brand__chip img{width:38px;height:38px;object-fit:contain}
/* Two marks, one shown at a time. The cream mark disappears on the light nav
   and the butter footer; the violet one disappears over the dark hero. */
.brand__chip{position:relative}
.brand__mk{transition:opacity var(--dur) var(--ez)}
.brand__mk--dark{position:absolute;inset:0;opacity:0}
.nav.is-solid .brand__mk--light{opacity:0}
.nav.is-solid .brand__mk--dark{opacity:1}
.brand__word{font-size:14px;font-weight:400;letter-spacing:.14em}

.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;
  font-size:14px;font-weight:400;letter-spacing:.02em;
  transition:opacity var(--dur) var(--ez);
}
.nav__link:hover{opacity:.62}
.nav__caret{width:11px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform var(--dur) var(--ez)}
.has-menu[aria-open="true"] .nav__caret{transform:rotate(180deg)}
.nav__actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:12px}

.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,-8px);
  width:min(700px,92vw);background:var(--bone);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 60px rgba(36,23,51,.18);padding:12px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ez),transform var(--dur) var(--ez),visibility var(--dur);
}
.has-menu[aria-open="true"] .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.mega__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.mega__card{display:block;padding:14px;border-radius:10px;transition:background var(--dur) var(--ez)}
.mega__card:hover{background:var(--bone-2)}
.mega__t{display:block;font-family:var(--serif);font-size:19px;font-weight:300}
.mega__d{display:block;font-size:12.5px;color:var(--grey);margin-top:4px;line-height:1.45}

.burger{display:none;width:38px;height:38px;margin-left:auto;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ez),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

.drawer{
  position:absolute;top:var(--nav-h);left:0;right:0;
  /* fully opaque: at 97% the page behind showed through and the menu was
     unreadable over the hero */
  background:var(--plum-2);
  padding:8px var(--gut) 26px;display:none;flex-direction:column;
  box-shadow:0 24px 40px rgba(8,4,14,.4);
}
.nav.is-solid .drawer{background:var(--bone)}
.drawer.is-open{display:flex}
.drawer a{padding:15px 0;border-bottom:1px solid var(--line-d);font-size:16px}
.nav.is-solid .drawer a{border-bottom-color:var(--line)}
.drawer__actions{margin-top:20px}
.drawer__actions a{border:0;padding:12px 22px}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100vh;padding-top:var(--nav-h);overflow:hidden;color:var(--bone)}
/* the hero is a real <img> rather than a CSS background so the browser can
   discover and prioritise it as the LCP element */
.hero__media{position:absolute;inset:-6% 0 0;will-change:transform;overflow:hidden}
.hero__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
}
/* image is already dark and directional, so the veil stays light */
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(16,10,24,.72) 0%,rgba(16,10,24,.42) 44%,rgba(16,10,24,.06) 76%),
    linear-gradient(rgba(16,10,24,.44),rgba(16,10,24,0) 30%,rgba(16,10,24,.5));
}
.hero__inner{
  position:relative;z-index:2;max-width:1400px;margin-inline:auto;
  min-height:calc(100vh - var(--nav-h) - 120px);
  padding:clamp(56px,8vh,96px) var(--gut) 0;
  display:flex;align-items:center;
}
.hero__copy{max-width:700px}
.hero .d1{font-size:clamp(44px,6.6vw,84px)}
.hero__sub{margin:28px 0 34px;font-size:17px;line-height:1.7;color:rgba(251,248,240,.88);max-width:52ch}

/* marquee */
.marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.14);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;align-items:center;gap:38px;width:max-content;will-change:transform}
.marquee__track span{font-family:var(--serif);font-size:21px;font-weight:300;color:rgba(251,248,240,.9);white-space:nowrap}
.marquee__track i{color:var(--lavender);font-style:normal}

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{padding-block:clamp(76px,10vw,136px)}

.sec--house{background:var(--bone)}
.loop{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;margin-top:56px}
.loop__media{border-radius:14px;overflow:hidden;min-height:420px;background:var(--bone-2)}
.loop__media img{
  width:100%;height:100%;min-height:420px;object-fit:cover;
  transition:opacity .38s var(--ez);
}
.loop__media.is-swapping img{opacity:0}

.acc{display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line);padding-left:38px}
.acc__item{padding:22px 0}
/* the heading stays a heading; the control inside it is a real <button>, which
   is what ARIA allows and what gives Enter/Space handling for free */
.acc__item h3{margin:0}
.acc__btn{
  font-family:var(--serif);font-size:24px;font-weight:300;color:var(--grey-2);
  cursor:pointer;transition:color var(--dur) var(--ez);
  appearance:none;background:none;border:0;padding:0;margin:0;
  width:100%;text-align:inherit;display:block;line-height:inherit;
}
.acc__item:hover .acc__btn{color:var(--violet)}
.acc__item.is-open .acc__btn{color:var(--plum)}
.acc__btn:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:2px}
.acc__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ez),opacity .3s var(--ez)}
.acc__panel > div{overflow:hidden;min-height:0}
.acc__item.is-open .acc__panel{grid-template-rows:1fr;opacity:1}
.acc__panel p{max-width:46ch;color:var(--grey);font-size:15px;padding-top:14px;margin-bottom:20px}

/* statement — words light up as you scroll through */
.sec--statement{
  background:var(--butter);
  min-height:110vh;display:flex;align-items:center;
}
.statement{font-size:clamp(28px,4vw,48px);line-height:1.16}
/* each word starts out of focus and resolves as the scroll reaches it */
/* Default is fully readable. The blur is only applied once JS has armed the
   effect, so if the script fails or the scroll handler never fires the
   paragraph is still legible rather than permanently blurred. */
.statement .w{
  display:inline-block;          /* keeps the blur from clipping at the glyph edge */
  color:var(--plum);
  transition:color var(--dur) var(--ez),filter .55s var(--ez);
}
.statement.is-armed .w{
  color:rgba(36,23,51,.72);      /* .28 failed contrast at 1.79:1 */
  filter:blur(7px);
}
.statement.is-armed .w.is-lit{color:var(--plum);filter:blur(0)}

/* =========================================================
   PINNED COLLECTION — ratio 2.5, measured from reference
   ========================================================= */
.pin{height:250vh;background:var(--plum-2);color:var(--bone)}
.pin__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
/* the product photo fills the whole stage, as in the reference */
.pin__bg{position:absolute;inset:0;overflow:hidden}
.pin__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transition:opacity .45s var(--ez);
}
.pin.is-swapping .pin__bg img{opacity:0}
/* light enough that the product actually reads: these are portrait shots cropped
   to a wide stage, so heavy shading leaves nothing but black */
.pin__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(11,7,16,.74) 0%,
      rgba(11,7,16,.5) 26%,
      rgba(11,7,16,.16) 50%,
      rgba(11,7,16,.5) 76%,
      rgba(11,7,16,.74) 100%),
    linear-gradient(rgba(11,7,16,.42),rgba(11,7,16,0) 34%,rgba(11,7,16,.5));
}
/* list on the left, copy on the right */
.pin__inner{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(280px,1fr);gap:56px;align-items:center;width:100%}
.pin__list{order:-1}
.pin__left{max-width:34ch;justify-self:end;text-align:end}
.pin__left .d2{margin-bottom:20px;transition:opacity .35s var(--ez)}
.pin__desc{color:rgba(251,248,240,.7);font-size:17px;min-height:5.2em;transition:opacity .35s var(--ez)}
.pin__form{
  margin-top:18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lavender);
  transition:opacity .35s var(--ez);
}
.pin.is-swapping .d2,.pin.is-swapping .pin__desc,.pin.is-swapping .pin__form{opacity:0}

.pin__list{display:flex;flex-direction:column;gap:2px}
.pin__list li{
  display:flex;align-items:center;gap:18px;
  padding:16px 20px;border-radius:10px;
  font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:300;
  color:rgba(251,248,240,.32);
  transition:color var(--dur) var(--ez),background var(--dur) var(--ez);
}
.pin__list li.is-active{color:var(--butter);background:rgba(255,255,255,.05)}
.pin__n{font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:var(--lavender);opacity:.6}
.pin__list li.is-active .pin__n{opacity:1}

.pin__bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.07)}
.pin__bar span{
  display:block;height:100%;width:100%;background:rgba(239,239,192,.45);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .12s linear;
}
[dir="rtl"] .pin__bar span{transform-origin:right center}

/* people */
.sec--people{position:relative;min-height:640px;display:flex;align-items:center;color:var(--bone);padding-block:0;overflow:hidden}
.people__media{position:absolute;inset:0}
.people__media img{width:100%;height:100%;object-fit:cover}
/* the graded shopfront is already dark at the left, so the overlay stays light */
.sec--people::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,10,24,.8) 0%,rgba(16,10,24,.34) 42%,rgba(16,10,24,.12) 70%,rgba(16,10,24,.34) 100%);
}
.people__inner{position:relative;z-index:2}
.people__copy{max-width:520px;border-left:1px solid var(--butter);padding-left:30px}
.people__copy p{margin-top:22px;font-size:15.5px;color:rgba(251,248,240,.84);max-width:42ch}

/* stores */
.sec--stores{background:var(--bone-2)}
.stores{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.store{
  background:var(--bone);border:1px solid var(--line);border-radius:14px;
  padding:30px 28px 32px;display:flex;flex-direction:column;min-height:260px;
}
.store__n{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:16px}
.store h3{font-family:var(--serif);font-size:28px;font-weight:300;margin-bottom:12px}
.store p{color:var(--grey);font-size:15px}
.store__link{
  margin-top:auto;padding-top:20px;font-size:14px;color:var(--plum);
  display:inline-flex;align-items:center;gap:8px;
  transition:color var(--dur) var(--ez);
}
.store__link:hover{color:var(--violet)}
.store--img{padding:0;overflow:hidden;border:0;max-height:420px}
.store--img img{width:100%;height:100%;min-height:260px;object-fit:cover}

/* cta — copy left, shopfront right */
.sec--cta{background:var(--plum);color:var(--bone)}
.cta__inner{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
/* no max-width here: the <br> sets the line breaks, a ch cap fights it */
.cta__copy .d2{text-wrap:balance}
.cta__sub{margin-top:22px;color:rgba(251,248,240,.68);font-size:16px;max-width:38ch}
.cta__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
/* transparent PNG: no card, no border, no radius */
.cta__art{margin:0;position:relative;perspective:1200px}
.cta__art img{
  width:100%;display:block;position:relative;z-index:2;
  /* drop-shadow follows the alpha channel, so the shadow traces the building itself */
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));
}
/* soft contact shadow on the ground for the 3D sit */
.cta__art::after{
  content:"";position:absolute;z-index:1;
  left:16%;right:16%;bottom:4%;height:46px;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.62),rgba(0,0,0,0) 70%);
  filter:blur(14px);
}
/* Slides in as it enters. On narrow screens it rises instead of sliding
   sideways: a horizontal start offset pushes the page wider before the
   reveal fires, which shows up as a phantom horizontal scroll. */
.sec--cta{overflow-x:clip}
.cta__art{opacity:0;transform:translateY(28px)}
@media (min-width:1081px){
  .cta__art{transform:translateX(64px)}
}
.cta__art.is-in{
  opacity:1;transform:none;
  transition:opacity 1s var(--ez-out) .1s,transform 1.1s var(--ez-out) .1s;
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--butter);color:var(--plum);padding-top:76px}
.foot__inner{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;padding-bottom:64px}
.brand--foot .brand__chip{background:transparent}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot__h{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px;color:var(--violet)}
.foot__cols a{display:block;padding:6px 0;font-size:14.5px;transition:opacity var(--dur) var(--ez)}
.foot__cols a:hover{opacity:.6}
.foot__legal{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(36,23,51,.18);padding-block:24px;font-size:12.5px;color:var(--violet);
}

/* =========================================================
   WHATSAPP — persistent contact
   ========================================================= */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:120;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px 13px 16px;border-radius:999px;
  background:var(--butter);color:var(--plum);
  font-size:14px;font-weight:500;
  box-shadow:0 12px 34px rgba(12,7,20,.34);
  transition:transform var(--dur) var(--ez),background var(--dur) var(--ez),box-shadow var(--dur) var(--ez);
}
.wa:hover{transform:translateY(-2px);background:var(--butter-2);box-shadow:0 16px 42px rgba(12,7,20,.42)}
.wa__icon{width:22px;height:22px;fill:#25D366;flex:none}

@media (max-width:560px){
  .wa{right:16px;bottom:16px;padding:14px;gap:0}
  .wa__label{display:none}
}

/* =========================================================
   REVEAL — blur + rise, staggered
   ========================================================= */
.rv{opacity:0;transform:translateY(20px);filter:blur(6px)}
.rv.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .8s var(--ez-out),transform .8s var(--ez-out),filter .8s var(--ez-out);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero{min-height:auto;padding-bottom:120px}
  .hero__inner{min-height:auto;padding-top:64px}
  .loop{grid-template-columns:1fr;gap:34px}
  .acc{border-left:0;padding-left:0}
  .pin{height:auto}
  /* must stay positioned: .pin__bg is absolute inset:0, and with a static
     parent it anchors to the page and covers every section behind it */
  .pin__stage{position:relative;height:auto;padding-block:96px}
  .pin__inner{grid-template-columns:1fr;gap:36px}
  /* single column: drop the desktop right-alignment from the side-by-side layout */
  .pin__left{justify-self:stretch;text-align:start}
  .pin__bg img{object-position:50% 50%}
  .pin__scrim{background:linear-gradient(rgba(11,7,16,.72),rgba(11,7,16,.88))}
  .cta__inner{grid-template-columns:1fr;gap:40px}
  .cta__copy{max-width:none}
  .cta__art{max-width:460px}
  .pin__left .d2,.pin__desc,.pin__form{opacity:1 !important}
  .pin__bar{display:none}
  .stores{grid-template-columns:1fr}
  .store--img img{min-height:220px}
  .foot__inner{grid-template-columns:1fr}
}

@media (max-width:820px){
  .nav__links,.nav__actions{display:none}
  .burger{display:flex}
  .marquee{position:static;margin-top:60px}
  .sec--people{min-height:520px;padding-block:96px}
  /* the 110vh is scroll room for the word reveal; on a tall phone it just
     leaves a screen of empty colour, and the reveal still reads without it */
  .sec--statement{min-height:auto;padding-block:clamp(72px,14vw,110px)}
  /* tappable on mobile, since the scroll-driven swap only runs when pinned */
  .pin__list li{cursor:pointer}
  .pin__list li.is-active{background:rgba(255,255,255,.08)}
}

@media (max-width:560px){
  :root{--gut:18px}
  .brand__word{font-size:12px;letter-spacing:.1em}
  .loop__media,.loop__media img{min-height:300px}
  .foot__cols{grid-template-columns:1fr}
  .cta__row{flex-direction:column;width:100%}
  .cta__row .btn{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none;filter:none}
  .panel{opacity:1;transform:none}
}