/* Lanetli Kasaba — static, dependency-free visual system.*/
:root  {
  --bg:#080a0b;
  --panel:#101315;
  --panel-2:#15191b;
  --line:rgba(219,226,223,.15);
  --ink:#ecece7;
  --muted:#a8aaa7;
  --dim:#707773;
  --red:#bb282c;
  --red-hot:#e13d3d;
  --heading:Impact,"Arial Narrow","Bahnschrift Condensed",sans-serif;
  --body:"Segoe UI",Arial,sans-serif;
  --max:1440px
}
*,*::before,*::after  {
  box-sizing:border-box
}
html  {
  scroll-behavior:smooth;
  scroll-padding-top:76px
}
body  {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 var(--body);
  overflow-x:hidden
}
button,a  {
  font:inherit
}
button  {
  cursor:pointer
}
a  {
  color:inherit;
  text-decoration:none
}
img  {
  max-width:100%;
  display:block
}
::selection  {
  background:var(--red);
  color:#fff
}
:focus-visible  {
  outline:2px solid var(--red-hot);
  outline-offset:4px
}
.wrap  {
  width:min(calc(100% - 96px),var(--max));
  margin-inline:auto
}
.skip-link  {
  position:fixed;
  z-index:200;
  left:12px;
  top:-80px;
  background:var(--red);
  padding:10px 16px
}
.skip-link:focus  {
  top:12px
}
/* Navigation*/
.site-header  {
  position:fixed;
  z-index:100;
  inset:0 0 auto;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:42px;
  padding:0 clamp(28px,4.2vw,72px);
  border-bottom:1px solid rgba(255,255,255,.15);
  transition:background .3s,border-color .3s;
  background:rgba(8,10,11,.23)
}
.site-header.scrolled,.site-header.menu-open  {
  background:rgba(8,10,11,.94);
  border-color:var(--line)
}
.brand  {
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font:700 20px/1 var(--heading);
  letter-spacing:.055em
}
.brand img  {
  width:32px;
  height:32px
}
.brand b  {
  color:var(--red-hot);
  font-weight:700
}
.primary-nav  {
  display:flex;
  gap:clamp(18px,2.3vw,36px);
  align-items:center;
  margin:auto
}
.primary-nav a,.nav-cta,.menu-toggle  {
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em
}
.primary-nav a  {
  color:#c3c8c4;
  transition:color .2s
}
.primary-nav a:hover,.primary-nav a:focus-visible  {
  color:#fff
}
.nav-cta  {
  border:1px solid rgba(222,66,66,.75);
  background:rgba(124,18,21,.18);
  color:#fff;
  padding:12px 18px;
  white-space:nowrap;
  transition:background .2s,border-color .2s
}
.nav-cta:hover  {
  background:var(--red);
  border-color:var(--red)
}
.nav-cta span  {
  margin-left:20px
}
.menu-toggle  {
  display:none
}
/* Shared editorial typography*/
.section-pad  {
  padding:clamp(92px,10vw,160px) 0
}
.section-kicker  {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:16px;
  color:#9da49e;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.2em
}
.section-kicker span:first-child  {
  color:var(--red-hot)
}
.display-title  {
  margin:0;
  font:700 clamp(64px,8.1vw,132px)/.86 var(--heading);
  letter-spacing:.018em;
  text-transform:uppercase
}
.display-title span  {
  color:#77807a
}
.display-title em  {
  font-style:normal;
  color:var(--red-hot)
}
.section-heading  {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin:56px 0 54px
}
.section-heading p  {
  width:min(100%,320px);
  margin:0 0 8px;
  color:#abb0aa;
  font-size:17px;
  line-height:1.7
}
.eyebrow,.mini-label  {
  font-size:12px;
  font-weight:700;
  letter-spacing:.21em;
  line-height:1.5
}
.red-rule  {
  display:inline-block;
  width:25px;
  height:2px;
  background:var(--red-hot);
  vertical-align:middle;
  margin-right:12px
}
.text-link  {
  display:inline-flex;
  gap:34px;
  align-items:center;
  border-bottom:1px solid var(--red);
  padding-bottom:9px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  transition:gap .2s
}
.text-link:hover  {
  gap:44px
}
.text-link span  {
  color:var(--red-hot)
}
/* Hero*/
.hero  {
  position:relative;
  min-height:760px;
  height:100svh;
  max-height:1200px;
  overflow:hidden;
  isolation:isolate;
  background:#111
}
.hero-image,.hero-image img,.hero-vignette,.hero-fog,.hero-rain  {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.hero-image  {
  z-index:-4;
  transform:scale(1.035);
  will-change:transform
}
.hero-image img  {
  object-fit:cover;
  object-position:center 52%
}
.hero-vignette  {
  z-index:-3;
  background:linear-gradient(90deg,rgba(3,5,6,.78) 0%,rgba(5,7,8,.52) 46%,rgba(5,7,8,.25) 100%),linear-gradient(0deg,#080a0b 0%,transparent 26%,transparent 70%,rgba(3,5,6,.45) 100%)
}
.hero-fog  {
  z-index:-2;
  opacity:.21;
  background:radial-gradient(ellipse 55% 18% at 38% 61%,rgba(196,206,202,.5),transparent 78%),radial-gradient(ellipse 52% 14% at 82% 67%,rgba(185,197,195,.5),transparent 80%);
  animation:fog-drift 22s ease-in-out infinite alternate;
  pointer-events:none
}
.hero-rain  {
  z-index:-1;
  opacity:.13;
  background-image:repeating-linear-gradient(108deg,transparent 0 12px,rgba(224,232,229,.45) 13px,transparent 14px 34px);
  background-size:240px 240px;
  animation:rain-fall 1.5s linear infinite;
  pointer-events:none;
  mask-image:linear-gradient(0deg,transparent,#000 35%,#000 85%,transparent)
}
.hero-lamp  {
  position:absolute;
  left:25%;
  top:21%;
  width:130px;
  height:130px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,202,119,.3),rgba(255,185,86,.08) 34%,transparent 70%);
  mix-blend-mode:screen;
  animation:lamp-flicker 9s linear infinite
}
.hero-content  {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
  padding-top:100px;
  padding-bottom:105px
}
.hero-eyebrow  {
  display:flex;
  align-items:center;
  gap:2px;
  margin:0 0 30px;
  color:#deded8
}
.hero-player  {
  margin-left:25px;
  color:#9da49e
}
.hero-title  {
  margin:0;
  font:700 clamp(100px,15.5vw,250px)/.75 var(--heading);
  letter-spacing:.005em;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
  text-transform:uppercase
}
.hero-title em  {
  font-style:normal;
  color:#e3e3dd
}
.hero-tagline  {
  margin:40px 0 30px;
  font-size:clamp(18px,1.5vw,23px);
  color:#d3d5d1
}
.hero-tagline strong  {
  color:#fff;
  font-weight:700
}
.hero-actions  {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap
}
.button  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  min-height:54px;
  padding:0 23px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.2;
  border:1px solid transparent;
  transition:background .22s,border-color .22s,transform .22s,color .22s
}
.button:hover  {
  transform:translateY(-2px)
}
.button-primary  {
  background:var(--red);
  color:#fff;
  border-color:var(--red)
}
.button-primary:hover  {
  background:#d23539;
  border-color:#d23539
}
.button-outline  {
  background:rgba(9,10,11,.2);
  color:#fff;
  border-color:rgba(255,255,255,.58)
}
.button-outline:hover  {
  background:rgba(255,255,255,.11)
}
.button-text  {
  background:transparent;
  color:#d7d9d6;
  padding-inline:15px
}
.button-text:hover  {
  color:#fff
}
.play-glyph  {
  font-size:13px
}
.hero-side  {
  position:absolute;
  right:28px;
  top:50%;
  writing-mode:vertical-rl;
  display:flex;
  align-items:center;
  gap:16px;
  color:#c2c8c4;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em
}
.hero-side span  {
  width:1px;
  height:50px;
  background:var(--red-hot)
}
.hero-bottom  {
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#b8bdb8;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em
}
.hero-bottom a  {
  display:flex;
  align-items:center;
  gap:15px
}
.hero-bottom b  {
  color:var(--red-hot);
  font-size:19px;
  font-weight:400
}
.live-dot  {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red-hot);
  box-shadow:0 0 12px var(--red-hot);
  vertical-align:middle;
  margin-right:10px;
  animation:signal-flicker 6s linear infinite
}
/* About and feature ledger*/
.intro  {
  background:#0a0c0d
}
.intro-grid  {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(290px,.6fr);
  gap:10vw;
  align-items:end;
  margin:60px 0 118px
}
.intro-grid .display-title span  {
  color:var(--red-hot)
}
.intro-copy  {
  max-width:430px
}
.intro-copy p:first-child  {
  font-size:22px;
  line-height:1.5;
  color:#e2e4df
}
.intro-copy p  {
  margin:0 0 22px;
  color:#aab0aa
}
.intro-copy .text-link  {
  margin-top:14px
}
.feature-grid  {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.feature  {
  position:relative;
  min-height:245px;
  padding:26px 29px 30px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0e1112;
  transition:background .25s
}
.feature:hover  {
  background:#171a1b
}
.feature::before  {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:2px;
  background:var(--red-hot);
  transition:width .3s
}
.feature:hover::before  {
  width:100%
}
.feature-number  {
  font-size:12px;
  font-weight:700;
  color:#777e79;
  letter-spacing:.15em
}
.feature-symbol  {
  display:block;
  margin:12px 0 4px;
  font-size:36px;
  line-height:1;
  color:var(--red-hot)
}
.feature h3  {
  margin:14px 0 8px;
  font:700 28px/1 var(--heading);
  letter-spacing:.06em
}
.feature p  {
  max-width:270px;
  margin:0;
  color:#a2a8a2;
  font-size:14px;
  line-height:1.55
}
/* Gameplay stills*/
.gameplay  {
  background:#101314
}
.gameplay-lead,.story-image  {
  position:relative;
  overflow:hidden;
  margin:0;
  background:#15191a
}
.gameplay-lead  {
  height:min(58vw,690px)
}
.gameplay-lead img,.story-image img  {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s ease
}
.gameplay-lead:hover img,.story-image:hover img  {
  transform:scale(1.025)
}
.gameplay-lead::after,.story-image::after  {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 46%);
  pointer-events:none
}
.image-caption  {
  position:absolute;
  z-index:1;
  left:46px;
  bottom:36px;
  max-width:440px
}
.image-caption span,.story-image figcaption span  {
  display:block;
  color:var(--red-hot);
  font-size:12px;
  font-weight:800;
  letter-spacing:.2em;
  margin-bottom:8px
}
.image-caption strong,.story-image figcaption strong  {
  font:700 clamp(36px,4vw,58px)/1 var(--heading);
  letter-spacing:.04em
}
.image-caption p  {
  margin:9px 0 0;
  color:#d5d8d3
}
.gameplay-pair  {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px
}
.story-image  {
  height:clamp(280px,28vw,430px)
}
.story-image figcaption  {
  position:absolute;
  z-index:1;
  bottom:27px;
  left:32px
}
.loop  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  overflow-x:auto;
  margin-top:55px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:25px 4px;
  white-space:nowrap;
  font:700 clamp(22px,2.5vw,38px)/1 var(--heading);
  letter-spacing:.04em
}
.loop b  {
  font:400 22px/1 var(--body);
  color:var(--red-hot)
}
/* Full-bleed multiplayer chapter*/
.multiplayer  {
  position:relative;
  min-height:720px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#15191a
}
.multiplayer-image,.multiplayer-shade  {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.multiplayer-image  {
  object-fit:cover;
  object-position:center
}
.multiplayer-shade  {
  background:linear-gradient(90deg,rgba(4,6,7,.9) 0%,rgba(4,6,7,.72) 43%,rgba(4,6,7,.1) 100%),linear-gradient(0deg,#080a0b,transparent 25%)
}
.multiplayer-content  {
  position:relative;
  padding-block:100px
}
.multiplayer .section-kicker  {
  max-width:640px;
  margin-bottom:54px
}
.multiplayer .display-title  {
  font-size:clamp(58px,6.3vw,100px)
}
.multiplayer .display-title span  {
  color:#c9cbc5
}
.multiplayer-content>p  {
  max-width:410px;
  margin:35px 0 0;
  color:#c5cbc5;
  font-size:17px
}
.multi-stat  {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:45px
}
.multi-stat strong  {
  font:700 72px/1 var(--heading);
  color:var(--red-hot)
}
.multi-stat span  {
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
  line-height:1.5
}
/* Inventory interface*/
.arsenal  {
  background:#101314
}
.inventory  {
  border:1px solid #38403c;
  background:repeating-linear-gradient(135deg,transparent 0 17px,rgba(255,255,255,.007) 18px 19px),#151a19;
  box-shadow:0 25px 80px rgba(0,0,0,.23)
}
.inventory-top,.inventory-bottom  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:50px;
  padding:0 24px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color:#b9c0b8
}
.inventory-top  {
  border-bottom:1px solid #39413b
}
.inventory-bottom  {
  border-top:1px solid #39413b
}
.inventory-grid  {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#38403b
}
.inventory-slot  {
  display:flex;
  flex-direction:column;
  min-height:205px;
  padding:20px 23px;
  background:#151a19;
  transition:background .22s
}
.inventory-slot:hover  {
  background:#202824
}
.inventory-slot.weapon  {
  background:#1b211f
}
.inventory-slot.weapon:hover  {
  background:#262e2a
}
.slot-index  {
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:#8d9a8d
}
.slot-symbol  {
  display:flex;
  align-items:center;
  justify-content:center;
  height:80px;
  font:400 53px/1 var(--body);
  color:#b4bcb4;
  text-shadow:0 3px 15px rgba(0,0,0,.55)
}
.inventory-slot.weapon .slot-symbol  {
  color:#d2d6cd
}
.inventory-slot strong  {
  font:700 26px/1 var(--heading);
  letter-spacing:.05em
}
.inventory-slot small  {
  margin-top:5px;
  color:#89958b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em
}
.capacity-bar  {
  display:block;
  width:min(28%,250px);
  height:4px;
  margin-left:auto;
  background:#38423b
}
.capacity-bar i  {
  display:block;
  width:78%;
  height:100%;
  background:var(--red)
}
/* Weather chapter*/
.atmosphere  {
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#111
}
.atmosphere-image,.atmosphere-shade  {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.atmosphere-image  {
  object-fit:cover
}
.atmosphere-shade  {
  background:linear-gradient(90deg,rgba(5,7,8,.92),rgba(5,7,8,.7) 55%,rgba(5,7,8,.25)),linear-gradient(0deg,#080a0b,transparent 30%)
}
.atmosphere-content  {
  position:relative;
  padding-block:95px
}
.atmosphere .section-kicker  {
  margin-bottom:60px
}
.atmosphere .display-title  {
  font-size:clamp(70px,8vw,126px)
}
.atmosphere-content>p  {
  max-width:450px;
  color:#d0d5cd;
  font-size:18px
}
.weather-grid  {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:770px;
  margin-top:38px
}
.weather-grid span  {
  border:1px solid rgba(224,229,222,.34);
  padding:10px 14px;
  color:#e4e6e0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  background:rgba(10,12,13,.38);
  transition:border-color .2s,background .2s
}
.weather-grid span:hover  {
  border-color:var(--red-hot);
  background:rgba(151,31,35,.22)
}
/* Image gallery*/
.gallery  {
  background:#0b0d0e
}
.gallery-grid  {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
.gallery-item  {
  position:relative;
  display:block;
  width:100%;
  min-height:245px;
  aspect-ratio:1.4/1;
  overflow:hidden;
  border:1px solid var(--line);
  background:#1c2221;
  padding:0;
  text-align:left
}
.gallery-wide  {
  grid-column:span 2;
  aspect-ratio:2.85/1
}
.gallery-item img  {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease,filter .45s
}
.gallery-item:hover img,.gallery-item:focus-visible img  {
  transform:scale(1.04);
  filter:brightness(1.13)
}
.gallery-item::after  {
  content:"";
  position:absolute;
  inset:50% 0 0;
  background:linear-gradient(0deg,rgba(0,0,0,.77),transparent);
  pointer-events:none
}
.gallery-item>span  {
  position:absolute;
  z-index:1;
  left:23px;
  right:23px;
  bottom:17px;
  display:flex;
  justify-content:space-between;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em
}
.gallery-item b  {
  color:var(--red-hot);
  font-size:20px;
  line-height:.7;
  font-weight:400
}
/* Roadmap*/
.roadmap  {
  background:#101314
}
.roadmap-layout  {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:9vw;
  margin-top:65px
}
.roadmap-layout>div>p  {
  max-width:280px;
  margin-top:30px;
  color:#b0b7af
}
.roadmap-list  {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line)
}
.roadmap-list li  {
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:18px;
  align-items:center;
  min-height:77px;
  border-bottom:1px solid var(--line);
  color:#7e8880
}
.roadmap-list li span  {
  font-size:12px;
  font-weight:800
}
.roadmap-list li strong  {
  font:700 clamp(19px,2vw,27px)/1 var(--heading);
  letter-spacing:.05em
}
.roadmap-list li em  {
  font-size:11px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.12em
}
.roadmap-list li.done  {
  color:#d7ded5
}
.roadmap-list li.current  {
  color:#fff
}
.roadmap-list li.current span,.roadmap-list li.current em  {
  color:var(--red-hot)
}
/* Footer and dialogs*/
.footer  {
  padding:82px 0 24px;
  background:#060708;
  border-top:1px solid rgba(255,255,255,.1)
}
.footer-top  {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  padding-bottom:75px
}
.footer-top .eyebrow  {
  color:#b0b8af
}
.footer-logo  {
  font:700 clamp(80px,11vw,160px)/.77 var(--heading);
  letter-spacing:.01em
}
.footer-logo span  {
  color:var(--red-hot)
}
.back-top  {
  align-self:flex-end;
  border-bottom:1px solid var(--red-hot);
  padding-bottom:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
  white-space:nowrap
}
.footer-bottom  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-top:23px;
  border-top:1px solid var(--line);
  color:#8c958c;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em
}
.footer-bottom nav  {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center
}
.footer-bottom a:hover  {
  color:#fff
}
.dialog-open  {
  overflow:hidden
}
.lightbox,.notice-dialog  {
  color:#fff;
  background:#0b0d0e;
  border:1px solid #444b45;
  box-shadow:0 30px 100px rgba(0,0,0,.8)
}
dialog::backdrop  {
  background:rgba(0,0,0,.88)
}
.lightbox  {
  max-width:min(94vw,1400px);
  max-height:94vh;
  padding:12px 12px 0
}
.lightbox img  {
  display:block;
  max-width:100%;
  max-height:calc(94vh - 75px);
  object-fit:contain
}
.lightbox p  {
  margin:0;
  padding:13px 4px 15px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase
}
.dialog-close  {
  position:absolute;
  z-index:2;
  right:16px;
  top:16px;
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:1px solid rgba(255,255,255,.5);
  background:#0b0d0d;
  color:#fff;
  font-size:27px;
  line-height:1
}
.dialog-close:hover  {
  background:var(--red)
}
.notice-dialog  {
  width:min(90vw,480px);
  padding:55px 36px 35px
}
.notice-dialog .mini-label  {
  color:var(--red-hot)
}
.notice-dialog h2  {
  font:700 72px/1 var(--heading);
  margin:18px 0 12px
}
.notice-dialog p  {
  color:#c0c7bf;
  margin-bottom:32px
}
/* Animation work is limited to transform and opacity;
optional for reduced motion.*/
.js-motion .reveal  {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease,transform .65s ease
}
.js-motion .reveal.is-visible  {
  opacity:1;
  transform:translateY(0)
}
@keyframes fog-drift  {
  from  {
    transform:translateX(-2%)
  }
  to  {
    transform:translateX(3%)
  }
}
@keyframes rain-fall  {
  from  {
    transform:translateY(-20px)
  }
  to  {
    transform:translateY(20px)
  }
}
@keyframes signal-flicker  {
  0%,91%,94%,100%  {
    opacity:1
  }
  92%,95%  {
    opacity:.25
  }
}
@keyframes lamp-flicker  {
  0%,86%,89%,91%,100%  {
    opacity:.4
  }
  87%,90%  {
    opacity:.12
  }
}
@media(prefers-reduced-motion:reduce)  {
  html  {
    scroll-behavior:auto
  }
  .hero-fog,.hero-rain,.hero-lamp,.live-dot  {
    animation:none
  }
  .hero-image  {
    transform:none!important
  }
  .js-motion .reveal  {
    opacity:1;
    transform:none;
    transition:none
  }
  *,*::before,*::after  {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important
  }
}