/* SAHAB · Saudi private aviation. The colours of the sky: blue, cloud white, sunrise apricot, deep navy, and a warm
   ivory for the cabin. Alexandria for Arabic display, IBM Plex Sans Arabic for Arabic text, Instrument Serif for
   Latin display, Inter for the instruments and Latin text. */
:root {
  --sky: #5B8FD0; --cloud: #F7F9FC; --apricot: #F2A776; --warm: #FFD7B0; --navy: #0F1E40; --ink: #1d1a17; --ivory: #F3EDE3; --copper: #B4653A;
  --ar-d: 'Alexandria', sans-serif; --ar: 'IBM Plex Sans Arabic', sans-serif; --en-d: 'Instrument Serif', serif; --en: Inter, sans-serif;
  --gut: clamp(18px, 3.4vw, 56px); --ease: cubic-bezier(.2,.75,.2,1);
  /* A phone's browser hides its bars as the page scrolls, and the screen grows. A stage keeps the full height (--full),
     so no strip is left bare under it; what sits at its bottom stays above the bars while they show (--bar). */
  --full: 100vh; --bar: 0px;
}
@supports (height: 100dvh) { :root { --full: 100lvh; --bar: calc(100lvh - 100dvh); } }
* { box-sizing: border-box; margin: 0; }
html { background: #8fa7c6; color: var(--cloud); -webkit-text-size-adjust: 100%; }
body { font-family: var(--ar); line-height: 1.7; overflow-x: hidden; }
html[lang="en"] body { font-family: var(--en); }
a { color: inherit; }

.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 16px; background: linear-gradient(#7d98bd, #b9c6d6); transition: opacity 1.2s, visibility 1.2s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-name { font-family: var(--ar-d); font-size: 30px; font-weight: 500; }
.loader-line { width: 140px; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: run 1.2s linear infinite; }
@keyframes run { from { background-position: -100% 0; } to { background-position: 200% 0; } }

.bar { position: fixed; inset: 0 0 auto; z-index: 20; height: 76px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; text-shadow: 0 1px 14px rgba(19,36,74,.3); }
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.brand-ar { font-family: var(--ar-d); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.brand-en { font-family: var(--en); font-size: 11.5px; font-weight: 600; letter-spacing: .5em; opacity: .85; }
.bar-r { display: flex; align-items: center; gap: 10px; }
.bar { transition: color .4s; }
html.bar-dark .bar { color: var(--ink); text-shadow: none; }
html.bar-dark .lang { border-color: rgba(29,26,23,.35); }
html.bar-dark .bar-cta { background: var(--navy); color: var(--cloud); }
.bar-cta { font-size: 14px; font-weight: 600; text-decoration: none; padding: 9px 20px; border-radius: 24px; background: rgba(247,249,252,.92); color: var(--navy); text-shadow: none; backdrop-filter: blur(6px); }
.lang { font-family: var(--en); font-size: 13px; letter-spacing: .1em; text-decoration: none; padding: 8px 13px; border: 1px solid rgba(247,249,252,.55); border-radius: 20px; backdrop-filter: blur(6px); }
html[lang="en"] .lang { font-family: var(--ar); }
.kick { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--warm); }
html[lang="en"] .kick { font-family: var(--en); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; font-size: 11px; }
.warm { color: var(--warm); }

/* ============ the flight (hero.js, stage.js) */
.hero { position: relative; height: 520vh; }
.hero-stage { position: sticky; top: 0; height: var(--full); overflow: hidden; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(4,12,34,.32), transparent 30%, transparent 78%, rgba(4,12,34,.25)); }

/* captions: each line inside its own mask (.ln), set by hero.js */
.cap { position: absolute; z-index: 3; visibility: hidden; filter: drop-shadow(0 2px 16px rgba(5,14,40,.4)); }   /* a shadow on the whole caption: one on the text would be cut at each line's mask */
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: inline-block; will-change: transform; }
.cap-fade { will-change: transform, opacity; }
.cap1 { inset-inline-start: var(--gut); top: clamp(104px, 15vh, 150px); max-width: 820px; }
.cap1 h1 { font-family: var(--ar-d); font-weight: 600; font-size: clamp(54px, 8vw, 140px); line-height: 1.08; margin: 14px 0 0; letter-spacing: -.02em; }
html[lang="en"] .cap1 h1 { font-family: var(--en-d); font-weight: 400; font-size: clamp(60px, 9vw, 160px); line-height: .92; }
.cue { margin-top: 24px; font-size: 13px; opacity: .9; display: flex; align-items: center; gap: 12px; }
.cue::before { content: ''; width: 1px; height: 38px; background: linear-gradient(transparent, #fff); animation: drop 1.8s var(--ease) infinite; }
@keyframes drop { from { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } to { transform: scaleY(0); transform-origin: bottom; } }
.cap2 { inset-inline-start: var(--gut); top: clamp(110px, 17vh, 170px); max-width: 560px; }
.big { font-family: var(--ar-d); font-weight: 500; font-size: clamp(38px, 4.8vw, 80px); line-height: 1.15; letter-spacing: -.015em; }
html[lang="en"] .big { font-family: var(--en-d); font-weight: 400; }
.small { font-size: clamp(15px, 1.15vw, 18px); font-weight: 400; line-height: 1.9; margin-top: 14px; max-width: 440px; }
.cap3 { inset-inline-start: var(--gut); top: clamp(110px, 17vh, 170px); }
.huge { font-family: var(--ar-d); font-weight: 600; font-size: clamp(56px, 8.6vw, 156px); line-height: 1.08; letter-spacing: -.025em; }
html[lang="en"] .huge { font-family: var(--en-d); font-weight: 400; line-height: .9; }
.cap4 { left: 50%; translate: -50% 0; bottom: calc(var(--bar) + clamp(84px, 13vh, 130px)); width: min(92vw, 640px); text-align: center; }
.cap4 .small { margin: 0 auto; font-weight: 600; color: var(--navy); text-shadow: 0 1px 18px rgba(255,240,225,.9); max-width: none; }
.btn { display: inline-grid; place-items: center; margin-top: 18px; padding: 16px 34px; border-radius: 40px; background: var(--navy); color: var(--cloud); text-decoration: none; font-weight: 600; text-shadow: none; box-shadow: 0 18px 40px -14px rgba(19,36,74,.75); transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }

/* the instruments: an altimeter tape and the air speed, at the edge away from the words */
.hud { position: absolute; z-index: 3; left: var(--gut); bottom: calc(var(--bar) + clamp(18px, 3.4vh, 30px)); display: flex; align-items: flex-end; gap: 26px; font-family: var(--en); direction: ltr; text-shadow: 0 1px 10px rgba(19,36,74,.4); }
.hud-l { display: block; font-size: 10px; font-weight: 600; letter-spacing: .32em; opacity: .75; margin-bottom: 6px; }
.hud b { display: block; font-weight: 300; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hud b small { font-size: 11px; font-weight: 500; letter-spacing: .1em; margin-inline-start: 5px; opacity: .8; }
.hud-alt { display: flex; align-items: flex-end; gap: 10px; } .hud-alt .hud-l { position: absolute; }
.hud > div { position: relative; padding-top: 16px; } .hud-l { position: absolute; top: 0; }
.tape { position: relative; width: 30px; height: 46px; overflow: hidden; border-inline-start: 1px solid rgba(247,249,252,.6);
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.tape-in { position: absolute; inset: -40px 0; background: repeating-linear-gradient(transparent 0 39px, rgba(247,249,252,.85) 39px 40px), repeating-linear-gradient(transparent 0 9px, rgba(247,249,252,.45) 9px 10px); background-size: 22px 100%, 10px 100%; background-repeat: repeat-y; }
.tape::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--apricot); box-shadow: 0 0 8px var(--apricot); }

html[lang="en"] .hud { left: auto; right: var(--gut); }   /* the instruments read left to right, so the side is set here */

/* the route along the bottom: Riyadh → AlUla, the jet moving with the climb */
.route { position: absolute; z-index: 3; left: 50%; translate: -50% 0; bottom: calc(var(--bar) + clamp(22px, 4vh, 36px)); width: min(560px, 70vw); display: flex; align-items: center; gap: 14px; font-family: var(--en); font-size: 11px; font-weight: 600; letter-spacing: .24em; direction: ltr; }
.rt-line { position: relative; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(247,249,252,.9) calc(var(--p, 0) * 100%), rgba(247,249,252,.3) 0); }
.rt-jet { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); translate: -50% -55%; font-style: normal; font-size: 15px; }

.foot { padding: 56px var(--gut) 26px; background: var(--navy); color: rgba(247,249,252,.78); font-size: 14px; }
.f-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; max-width: 1400px; margin: 0 auto; padding-bottom: 30px; border-bottom: 1px solid rgba(247,249,252,.12); }
.f-brand .brand-ar { font-size: 34px; color: var(--cloud); }
.f-brand .brand-en { margin-inline-start: 10px; color: var(--warm); }
.f-brand p { margin-top: 8px; max-width: 320px; }
.f-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--warm); margin-bottom: 8px; }
html[lang="en"] .f-h { letter-spacing: .24em; text-transform: uppercase; font-size: 11px; }
.f-col a { color: var(--cloud); text-decoration: none; border-bottom: 1px solid rgba(255,215,176,.5); }
.f-col p { margin-top: 4px; line-height: 1.7; }
.f-note { max-width: 1400px; margin: 18px auto 0; font-size: 12px; color: rgba(247,249,252,.5); text-align: center; }
@media (max-width: 700px) { .f-in { grid-template-columns: 1fr; gap: 20px; } }

/* ============ from the window (views.js, window.js): the cabin wall and the place outside; its words beside it */
.views { position: relative; height: 330vh; background: #1b1a1c; }
.views-stage { position: sticky; top: 0; height: var(--full); overflow: hidden; --k: 0; }
#cabin { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.views-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, rgba(20,16,14,.45)); }
.v-copy { position: absolute; z-index: 2; inset-inline-start: var(--gut); top: 50%; translate: 0 -50%; width: min(36vw, 460px); color: var(--ink); }
.v-copy .kick { color: var(--copper); }
.v-line { opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 14px)); }
.v-no { font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .3em; margin-top: 18px; color: rgba(43,38,32,.6); }
.v-name { font-family: var(--ar-d); font-weight: 600; font-size: clamp(60px, 7.4vw, 124px); line-height: 1.12; margin: 6px 0 12px; letter-spacing: -.02em; }
.v-name .ln > span { transform: translateY(calc((1 - var(--k)) * 108%)); opacity: min(1, calc(var(--k) * 2)); }   /* Arabic dots and marks reach past the mask */
html[lang="en"] .v-name { font-family: var(--en-d); font-weight: 400; }
.v-time { font-size: 15px; font-weight: 600; color: var(--copper); }
.v-text { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.9; margin-top: 10px; color: rgba(43,38,32,.85); }
.v-at { font-family: var(--en); font-size: 11.5px; letter-spacing: .2em; margin-top: 18px; color: rgba(43,38,32,.55); direction: ltr; text-align: start; }
html[dir="rtl"] .v-at { text-align: right; }
@media (max-aspect-ratio: 1/1) {
  .v-copy { top: auto; bottom: calc(var(--bar) + 34px); translate: none; inset-inline: var(--gut); width: auto; padding: 18px 20px; border-radius: 22px; background: rgba(244,238,228,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .v-name { font-size: 54px; margin: 2px 0 8px; }
  .v-no { margin-top: 6px; }
}

/* ============ the cabin (cabin.js, cutaway.js): the cutaway up top, the room's photograph and words below */
.cabin { position: relative; height: 360vh; background: var(--ivory); color: var(--ink); }
.cabin-stage { position: sticky; top: 0; height: var(--full); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 88px var(--gut) calc(var(--bar) + 34px); gap: 10px; --k: 1;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, #fbf7f0, var(--ivory) 70%); }
.cabin-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.cabin-head .kick { color: var(--copper); }
.c-title { font-family: var(--ar-d); font-weight: 500; font-size: clamp(26px, 2.6vw, 42px); letter-spacing: -.015em; }
html[lang="en"] .c-title { font-family: var(--en-d); font-weight: 400; }
.cutaway { position: relative; min-height: 0; margin: 0 calc(-1 * var(--gut)); }
#cutaway { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.c-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.c-photos { position: relative; margin: 0; aspect-ratio: 16 / 9; max-height: 40vh; border-radius: 22px; overflow: hidden; background: #e8dfd0; box-shadow: 0 30px 60px -34px rgba(43,30,18,.55); }
.c-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease), transform 6s linear; transform: scale(1.04); }
.c-photos img.on { opacity: 1; transform: scale(1); }
.c-line { opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 12px)); }
.c-no { font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .3em; color: rgba(29,26,23,.5); }
.c-name { font-family: var(--ar-d); font-weight: 600; font-size: clamp(36px, 3.6vw, 60px); line-height: 1.15; letter-spacing: -.02em; margin: 4px 0 8px; }
html[lang="en"] .c-name { font-family: var(--en-d); font-weight: 400; }
.c-text { font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.85; color: rgba(29,26,23,.82); max-width: 520px; }
.c-specs { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; font-weight: 500; color: var(--copper); }
.c-specs li::before { content: '—'; margin-inline-end: 8px; opacity: .6; }
.c-l { margin-top: 18px; font-size: 12.5px; font-weight: 600; color: rgba(29,26,23,.55); }
.c-leathers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.c-leathers button { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 10px; border-radius: 30px; border: 1px solid rgba(29,26,23,.18); background: rgba(255,255,255,.6); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
html[dir="rtl"] .c-leathers button { padding: 8px 10px 8px 16px; }
.c-leathers [aria-checked="true"] { border-color: var(--ink); background: #fff; box-shadow: 0 6px 16px -10px rgba(29,26,23,.5); }
.sw { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.25); }
.sw.ivory { background: #e9dfcd; } .sw.cognac { background: #9a532c; } .sw.navy { background: #1e2a47; }
@media (max-aspect-ratio: 1/1) {
  /* the cutaway gives way first, then the photograph, so the leather choice is never pushed off a short screen */
  .cabin-stage { padding: 76px var(--gut) calc(var(--bar) + 20px); grid-template-rows: auto minmax(84px, 30vh) auto; }
  .c-body { grid-template-columns: 1fr; gap: 14px; align-content: start; }
  .c-photos { max-height: calc((var(--full) - var(--bar)) * .22); width: 100%; }
  .c-name { font-size: 34px; }
  .c-text { font-size: 14px; line-height: 1.7; }
  .c-specs { display: none; }
  .c-l { margin-top: 10px; }
}

/* ============ book your flight (book.js, mapview.js): the map and the request side by side */
.book { position: relative; min-height: 100vh; padding: 96px var(--gut) 48px; color: var(--ink);
  background: linear-gradient(180deg, var(--ivory), #eef3f8 60%, #e6eef7); }
.book-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: clamp(20px, 3vw, 44px); align-items: center; max-width: 1400px; margin: 0 auto; }
.b-map { position: relative; height: min(76vh, 720px); border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #cfe2f3, #a9cbe8); box-shadow: inset 0 0 0 1px rgba(15,30,64,.06), 0 40px 80px -50px rgba(15,30,64,.6); }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-labels { position: absolute; inset: 0; pointer-events: none; }
.m-city { position: absolute; left: 0; top: 0; pointer-events: auto; translate: -50% calc(-100% - 10px); padding: 3px 10px; border-radius: 12px; border: 0; background: rgba(255,255,255,.82); color: var(--navy); font: 500 12.5px var(--ar); white-space: nowrap; cursor: pointer; box-shadow: 0 4px 12px -6px rgba(15,30,64,.45); transition: background .2s, color .2s; }
html[lang="en"] .m-city { font-family: var(--en); }
.m-city:hover, .m-city.on { background: var(--navy); color: var(--cloud); }
.b-panel { padding: clamp(22px, 2.4vw, 34px); border-radius: 28px; background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 70px -40px rgba(15,30,64,.55), inset 0 0 0 1px rgba(15,30,64,.06); }
.b-panel .kick { color: var(--copper); }
.b-title { font-family: var(--ar-d); font-weight: 600; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.15; letter-spacing: -.02em; margin: 4px 0 18px; }
html[lang="en"] .b-title { font-family: var(--en-d); font-weight: 400; }
.b-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.b-panel label, .b-pax { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgba(29,26,23,.6); }
.b-panel select, .b-panel input { width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(15,30,64,.16); background: #fff; font: 500 15.5px var(--ar); color: var(--ink); }
html[lang="en"] .b-panel select, html[lang="en"] .b-panel input { font-family: var(--en); }
.b-swap { width: 44px; height: 48px; border-radius: 14px; border: 1px solid rgba(15,30,64,.16); background: #fff; font-size: 18px; cursor: pointer; color: var(--navy); }
.b-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; }
.b-pax > div { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 6px; border-radius: 14px; border: 1px solid rgba(15,30,64,.16); background: #fff; }
.b-pax button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: #f0ebe2; font-size: 18px; cursor: pointer; color: var(--ink); }
.b-pax b { min-width: 28px; text-align: center; font: 600 16px var(--en); color: var(--ink); }
.b-l { margin-top: 16px; font-size: 12.5px; font-weight: 600; color: rgba(29,26,23,.6); }
.b-jets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.b-jets button { display: grid; gap: 2px; text-align: start; padding: 12px; border-radius: 16px; border: 1px solid rgba(15,30,64,.14); background: #fff; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.b-jets b { font-family: var(--ar-d); font-weight: 600; font-size: 16px; }
html[lang="en"] .b-jets b { font-family: var(--en); }
.b-jets small { font-size: 11.5px; color: rgba(29,26,23,.6); line-height: 1.4; }
.b-jets span { font-size: 11.5px; font-weight: 600; color: var(--copper); margin-top: 4px; }
.b-jets [aria-checked="true"] { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), 0 10px 24px -14px rgba(15,30,64,.6); transform: translateY(-1px); }
.b-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0 0; border-radius: 16px; overflow: hidden; background: rgba(15,30,64,.1); }
.b-quote div { background: #fff; padding: 12px 14px; }
.b-quote dt { font-size: 11.5px; color: rgba(29,26,23,.55); }
.b-quote dd { margin: 0; font: 600 18px var(--en); color: var(--ink); }
html[lang="ar"] .b-quote dd { font-family: var(--ar); }
.b-price { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; }
.b-price dd { font-family: var(--ar-d) !important; font-size: 28px; color: var(--navy); }
html[lang="en"] .b-price dd { font-family: var(--en-d) !important; font-weight: 400; font-size: 32px; }
.b-warn { margin-top: 10px; font-size: 13px; color: #a23b2a; }
.b-warn[hidden] { display: none; }
.b-order { width: 100%; margin-top: 14px; }
.b-order[aria-disabled] { opacity: .45; pointer-events: none; }
.b-note { margin-top: 10px; font-size: 11.5px; color: rgba(29,26,23,.5); text-align: center; }
@media (max-width: 900px) {
  .book { padding: 84px 12px 28px; }
  .book-in { grid-template-columns: 1fr; }
  .b-map { height: 52vh; border-radius: 22px; }
  .b-jets { grid-template-columns: 1fr 1fr 1fr; }
  .b-jets button { padding: 10px 8px; }
}

@media (max-width: 700px) {
  .bar-cta { display: none; }
  .cap1, .cap2, .cap3 { top: 92px; inset-inline: var(--gut); }
  .cap4 { bottom: calc(var(--bar) + 86px); }
  .hud { gap: 14px; bottom: calc(var(--bar) + 54px); }
  .tape { display: none; }
  .hud b { font-size: 19px; }
  .route { width: 76vw; }
}
@media (max-aspect-ratio: 1/1) and (max-device-height: 700px) { .c-text { display: none; } }   /* a small phone: the room's name and its leathers */
@media (prefers-reduced-motion: reduce) { .cue::before, .loader-line { animation: none; } }