/* ============================================================
   UPTRAIL — Animations & Micro-interactions
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */

/* Pulse dot (hero badge) */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

/* Scroll indicator bounce */
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(10px); opacity: 0.3; }
}

/* Ripple button effect */
@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Marquee (testimonials) */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Float animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* Glow pulse */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(58,125,68,0.2); }
  50% { box-shadow: 0 0 40px rgba(58,125,68,0.4); }
}

/* Fog drift */
@keyframes fog-drift-1 {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-5%) translateY(-3%); }
  100% { transform: translateX(0) translateY(0); }
}

@keyframes fog-drift-2 {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(4%) translateY(-2%); }
  100% { transform: translateX(0) translateY(0); }
}

/* Shimmer loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Rotate (subtle) */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Text reveal line-by-line */
@keyframes text-reveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
}

/* Scale in */
@keyframes scale-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Slide up */
@keyframes slide-up {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Counter glow */
@keyframes counter-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(212,167,44,0.2); }
  50% { text-shadow: 0 0 30px rgba(212,167,44,0.5); }
}

/* ── Hero Animations ──────────────────────────────────────── */

.hero__fog-layer:nth-child(1) {
  animation: fog-drift-1 12s ease-in-out infinite;
  opacity: 0.6;
}

.hero__fog-layer:nth-child(2) {
  animation: fog-drift-2 16s ease-in-out infinite;
  animation-delay: -4s;
  opacity: 0.4;
  height: 30%;
}

.hero__fog-layer:nth-child(3) {
  animation: fog-drift-1 20s ease-in-out infinite;
  animation-delay: -8s;
  opacity: 0.3;
  height: 50%;
}

/* Hero content entrance */
.hero__badge {
  animation: slide-up 800ms var(--ease-premium) forwards;
  animation-delay: 300ms;
  opacity: 0;
}

.hero__title {
  animation: slide-up 800ms var(--ease-premium) forwards;
  animation-delay: 500ms;
  opacity: 0;
}

.hero__description {
  animation: slide-up 800ms var(--ease-premium) forwards;
  animation-delay: 700ms;
  opacity: 0;
}

.hero__actions {
  animation: slide-up 800ms var(--ease-premium) forwards;
  animation-delay: 900ms;
  opacity: 0;
}

.hero__stats {
  animation: slide-up 800ms var(--ease-premium) forwards;
  animation-delay: 1100ms;
  opacity: 0;
}

.hero__scroll-indicator {
  animation: slide-up 800ms var(--ease-premium) forwards;
  animation-delay: 1500ms;
  opacity: 0;
}

/* ── 3D Card Tilt ─────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform var(--duration-normal) var(--ease-premium);
}

.tilt-card__inner {
  transform: translateZ(20px);
}

/* ── Magnetic Button ──────────────────────────────────────── */
.btn-magnetic {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

/* ── Counter Animation ────────────────────────────────────── */
.counter-animated {
  display: inline-block;
}

.counter-animated.counting {
  animation: counter-glow 1.5s ease-in-out;
}

/* ── Scroll-driven Progress ───────────────────────────────── */
.timeline__line-progress {
  will-change: height;
}

/* ── Hover Glow Effect ────────────────────────────────────── */
.hover-glow {
  position: relative;
}

.hover-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-green), var(--color-gold));
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
  transition: opacity var(--duration-normal) var(--ease-premium);
}

.hover-glow:hover::after {
  opacity: 0.5;
}

/* ── Image Parallax Container ─────────────────────────────── */
.parallax-img {
  will-change: transform;
  transition: transform 100ms linear;
}

/* ── Floating Badge ───────────────────────────────────────── */
.float-badge {
  animation: float 4s ease-in-out infinite;
}

/* ── Shimmer Skeleton ─────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* ── Decorative Elements ──────────────────────────────────── */
.deco-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(58,125,68,0.1);
  pointer-events: none;
}

.deco-circle--1 {
  width: 400px;
  height: 400px;
  top: -200px;
  right: -100px;
  animation: rotate-slow 60s linear infinite;
}

.deco-circle--2 {
  width: 300px;
  height: 300px;
  bottom: -150px;
  left: -100px;
  animation: rotate-slow 80s linear infinite reverse;
}

/* ── Section Transition Shapes ────────────────────────────── */
.section-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.section-wave svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Loading Screen ───────────────────────────────────────── */
/* Camping scene adapted from Uiverse.io by Admin12121. */
.loading-screen {
  --loader-ink: #4d4454;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #00b6bb;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  animation: uptrail-stage-background 5s linear infinite;
  transition: opacity 300ms var(--ease-premium), visibility 300ms;
  will-change: opacity;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation-play-state: paused;
  will-change: auto;
}

.loading-screen.hidden *,
.loading-screen.hidden *::before,
.loading-screen.hidden *::after {
  animation-play-state: paused !important;
}

.loading-screen__logo {
  position: relative;
  z-index: 5;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  animation: float 2s ease-in-out infinite;
}

.loading-screen__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(20, 55, 63, 0.24));
}

.loading-screen__scene-frame {
  position: relative;
  z-index: 1;
  flex: 0 0 300px;
  width: 400px;
  height: 300px;
}

.loading-screen .scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 400px;
  height: 300px;
  margin: 0;
  transform-origin: top left;
}

.loading-screen .forest {
  position: relative;
  z-index: 1;
  display: flex;
  width: 75%;
  height: 90%;
}

.loading-screen .tree {
  position: absolute;
  bottom: 0;
  display: block;
  width: 50%;
  opacity: 0.4;
}

.loading-screen .tree .branch {
  width: 80%;
  height: 0;
  margin: 0 auto;
  padding-bottom: 50%;
  padding-left: 40%;
  overflow: hidden;
}

.loading-screen .tree .branch::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -600px;
  border-right: 600px solid transparent;
  border-bottom: 950px solid #000;
  border-left: 600px solid transparent;
}

.loading-screen .tree .branch-top {
  transform-origin: 50% 100%;
  animation: uptrail-tree-shake 0.5s linear infinite;
}

.loading-screen .tree .branch-middle {
  width: 90%;
  margin-top: -25%;
  padding-bottom: 65%;
  padding-left: 45%;
}

.loading-screen .tree .branch-bottom {
  width: 100%;
  margin-top: -40%;
  padding-bottom: 80%;
  padding-left: 50%;
}

.loading-screen .tree1 { width: 31%; }
.loading-screen .tree2 { left: 9%; width: 39%; }
.loading-screen .tree3 { left: 24%; width: 32%; }
.loading-screen .tree4 { left: 34%; width: 37%; }
.loading-screen .tree5 { left: 44%; width: 44%; }
.loading-screen .tree6 { left: 61%; width: 34%; }
.loading-screen .tree7 { left: 76%; width: 24%; }

.loading-screen .tent {
  position: absolute;
  right: 15%;
  bottom: -0.5%;
  z-index: 2;
  width: 60%;
  height: 25%;
  text-align: right;
}

.loading-screen .roof {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 45%;
  height: 100%;
  margin-right: 10%;
  background: #f6d484;
  border: 4px solid var(--loader-ink);
  border-bottom: 0;
  border-top-right-radius: 6px;
  box-shadow: inset -3px 3px 0 #f7b563;
  transform: skew(30deg);
}

.loading-screen .roof::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  background: #e78c20;
  border-radius: 10%;
}

.loading-screen .roof::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 75%;
  background: linear-gradient(to bottom, rgba(231,140,32,.4) 0 64%, rgba(231,140,32,.8) 65% 100%);
}

.loading-screen .roof-border-left {
  position: absolute;
  top: 0;
  left: 35.7%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1%;
  height: 125%;
  transform: rotate(35deg);
  transform-origin: 50% 0;
}

.loading-screen .roof-border-left .roof-border {
  display: block;
  width: 100%;
  border: 2px solid var(--loader-ink);
  border-radius: 2px;
}

.loading-screen .roof-border1,
.loading-screen .roof-border3 { height: 40%; }
.loading-screen .roof-border2 { height: 10%; }

.loading-screen .door {
  position: absolute;
  bottom: 2%;
  z-index: 0;
  width: 55px;
  height: 92px;
  overflow: hidden;
  transform-origin: 0 105%;
}

.loading-screen .left-door {
  bottom: -3%;
  left: 13.5%;
  transform: rotate(35deg);
}

.loading-screen .left-door-inner,
.loading-screen .right-door-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.loading-screen .left-door-inner {
  top: 0;
  background: #edddc2;
  transform: rotate(-35deg);
  transform-origin: 0 105%;
}

.loading-screen .left-door-inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 15%;
  height: 100%;
  background: repeating-linear-gradient(#d4bc8b, #d4bc8b 4%, #e0d2a8 5%, #e0d2a8 10%);
}

.loading-screen .left-door-inner::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 10%;
  width: 50%;
  height: 100%;
  background: #fff;
  transform: rotate(25deg);
}

.loading-screen .right-door {
  right: 21%;
  bottom: -3%;
  height: 89px;
  transform: rotate(-30deg) scaleX(-1);
  transform-origin: 0 105%;
}

.loading-screen .right-door-inner {
  bottom: 0;
  background: #efe7cf;
  transform: rotate(-30deg);
  transform-origin: 0 120%;
}

.loading-screen .right-door-inner::before,
.loading-screen .right-door-inner::after {
  content: "";
  position: absolute;
  top: 15%;
  width: 50%;
  height: 100%;
}

.loading-screen .right-door-inner::before {
  right: -28%;
  z-index: 1;
  background: #524a5a;
  transform: rotate(15deg);
}

.loading-screen .right-door-inner::after {
  right: -20%;
  background: #fff;
  transform: rotate(20deg);
}

.loading-screen .floor {
  position: absolute;
  right: 10%;
  bottom: 0;
  z-index: 3;
  width: 80%;
}

.loading-screen .floor .ground {
  position: absolute;
  border: 2px solid var(--loader-ink);
  border-radius: 2px;
}

.loading-screen .ground1 { left: 0; width: 65%; }
.loading-screen .ground2 { right: 0; width: 30%; }

.loading-screen .fireplace {
  position: absolute;
  bottom: 0;
  left: 5%;
  z-index: 4;
  display: block;
  width: 24%;
  height: 20%;
}

.loading-screen .fireplace::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 2%;
  display: block;
  width: 8%;
  background: var(--loader-ink);
  border: 2px solid var(--loader-ink);
  border-radius: 2px;
}

.loading-screen .fireplace .support {
  position: absolute;
  bottom: -5%;
  left: 10%;
  display: block;
  width: 2px;
  height: 105%;
  border: 2px solid var(--loader-ink);
}

.loading-screen .fireplace .support:first-child { left: 85%; }

.loading-screen .fireplace .support::before,
.loading-screen .fireplace .support::after {
  content: "";
  position: absolute;
  top: -18%;
  width: 100%;
  height: 15%;
  border: 2px solid var(--loader-ink);
  border-radius: 2px;
}

.loading-screen .fireplace .support::before { left: -4px; transform: rotate(45deg); transform-origin: 100% 100%; }
.loading-screen .fireplace .support::after { left: 0; transform: rotate(-45deg); transform-origin: 0 100%; }

.loading-screen .fireplace .bar {
  width: 100%;
  height: 2px;
  border: 2px solid var(--loader-ink);
  border-radius: 2px;
}

.loading-screen .fireplace .hanger {
  position: absolute;
  left: 50%;
  display: block;
  width: 2px;
  height: 25%;
  margin-left: -4px;
  border: 2px solid var(--loader-ink);
}

.loading-screen .fireplace .pan {
  position: absolute;
  top: 25%;
  left: 35%;
  display: block;
  width: 25%;
  height: 50%;
  overflow: hidden;
  border: 4px solid var(--loader-ink);
  border-radius: 50%;
  animation: uptrail-heat 5s linear infinite;
}

.loading-screen .fireplace .pan::before {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 53%;
  background: #74667e;
  border-top: 4px solid var(--loader-ink);
  animation: uptrail-hot-pan 5s linear infinite;
}

.loading-screen .fireplace .smoke {
  position: absolute;
  top: 25%;
  left: 37%;
  display: block;
  width: 20%;
  height: 25%;
  background: #fff;
  opacity: 0;
  filter: blur(5px);
  animation: uptrail-smoke 5s linear infinite;
}

.loading-screen .fireplace .fire {
  position: absolute;
  bottom: 0;
  left: 33%;
  z-index: 1;
  display: block;
  width: 25%;
  height: 120%;
  opacity: 0;
  animation: uptrail-fire 5s linear infinite;
}

.loading-screen .fireplace .fire::before {
  content: "";
  position: absolute;
  bottom: -4px;
  z-index: 1;
  display: block;
  width: 100%;
  height: 2px;
  background: #efb54a;
  border: 1px solid #efb54a;
  border-radius: 2px;
}

.loading-screen .fireplace .line {
  position: absolute;
  bottom: 0;
  display: block;
  width: 2px;
  height: 100%;
  animation: uptrail-fire-lines 1s linear infinite;
}

.loading-screen .fireplace .line2 { left: 50%; margin-left: -1px; animation-delay: .3s; }
.loading-screen .fireplace .line3 { right: 0; animation-delay: .5s; }

.loading-screen .fireplace .particle {
  position: absolute;
  top: 100%;
  z-index: 1;
  height: 10%;
  border: 2px solid #efb54a;
  border-radius: 2px;
  animation: uptrail-fire-particles .5s linear infinite;
}

.loading-screen .particle1 { animation-delay: .1s; }
.loading-screen .particle2 { animation-delay: .3s; }
.loading-screen .particle3 { animation-delay: .6s; }
.loading-screen .particle4 { animation-delay: .9s; }

.loading-screen .time-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.loading-screen .time {
  position: absolute;
  display: block;
  width: 100%;
  height: 200%;
  transform: rotate(270deg);
  transform-origin: 50% 50%;
  animation: uptrail-earth-rotation 5s linear infinite;
}

.loading-screen .time .day {
  position: absolute;
  top: 20%;
  left: 40%;
  display: block;
  width: 20px;
  height: 20px;
  background: #ef9431;
  border-radius: 50%;
  box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74,206,173,.6), 0 0 0 90px rgba(74,206,173,.3);
  animation: uptrail-sunrise 5s ease-in-out infinite;
}

.loading-screen .time .night {
  opacity: 0;
  animation: uptrail-night-time 5s ease-in-out infinite;
}

.loading-screen .time .star {
  position: absolute;
  bottom: 10%;
  display: block;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}

.loading-screen .time .star-big { width: 6px; height: 6px; }
.loading-screen .time .star1 { right: 23%; bottom: 25%; }
.loading-screen .time .star2 { right: 35%; bottom: 18%; }
.loading-screen .time .star3 { right: 47%; bottom: 25%; }
.loading-screen .time .star4 { right: 22%; bottom: 20%; }
.loading-screen .time .star5 { right: 18%; bottom: 30%; }
.loading-screen .time .star6 { right: 60%; bottom: 20%; }
.loading-screen .time .star7 { right: 70%; bottom: 23%; }

.loading-screen .time .moon {
  position: absolute;
  right: 33%;
  bottom: 22%;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  box-shadow: 9px 9px 3px #fff;
  filter: blur(1px);
  transform: rotate(-60deg);
  animation: uptrail-moon-orbit 5s ease-in-out infinite;
}

.loading-screen .time .moon::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 9px;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255,255,255,.05), 0 0 0 15px rgba(255,255,255,.05), 0 0 0 25px rgba(255,255,255,.05), 0 0 0 35px rgba(255,255,255,.05);
}

.loading-screen__bar {
  position: relative;
  z-index: 5;
  width: 120px;
  height: 3px;
  margin-top: 16px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.loading-screen__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-green), var(--color-gold));
  border-radius: 2px;
  width: 0%;
  transition: width 300ms var(--ease-premium);
}

@keyframes uptrail-stage-background {
  0%, 10%, 90%, 100% { background-color: #00b6bb; }
  25%, 75% { background-color: #0094bd; }
}

@keyframes uptrail-loader-dismiss {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes uptrail-earth-rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes uptrail-sunrise {
  0%, 10%, 90%, 100% { box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74,206,173,.6), 0 0 0 90px rgba(74,206,173,.3); }
  25%, 75% { box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74,206,173,.6), 0 0 0 0 rgba(74,206,173,.3); }
}

@keyframes uptrail-moon-orbit {
  0%, 100% { transform: rotate(-180deg); }
  25%, 50% { transform: rotate(-60deg); }
  75% { transform: rotate(-120deg); }
}

@keyframes uptrail-night-time { 0%, 90% { opacity: 0; } 50%, 75% { opacity: 1; } }
@keyframes uptrail-hot-pan { 0%, 90% { background-color: #74667e; } 50%, 75% { background-color: #b2241c; } }
@keyframes uptrail-heat { 0%, 90% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.3); } 50%, 75% { box-shadow: inset 0 -2px 0 #fff; } }
@keyframes uptrail-smoke { 0%, 50%, 90%, 100% { opacity: 0; } 50%, 75% { opacity: .7; } }
@keyframes uptrail-fire { 0%, 90%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } }

@keyframes uptrail-tree-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  40% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
  60% { transform: rotate(6deg); }
  75% { transform: rotate(-6deg); }
}

@keyframes uptrail-fire-particles {
  0% { top: 75%; height: 30%; opacity: 1; }
  25% { top: 40%; height: 25%; opacity: .8; }
  50% { top: 20%; height: 15%; opacity: .6; }
  75% { top: 0; height: 10%; opacity: .3; }
  100% { opacity: 0; }
}

@keyframes uptrail-fire-lines { 0%, 25%, 75%, 100% { bottom: 0; } 50% { bottom: 5%; } }

@media (max-width: 480px) {
  .loading-screen__logo { width: 64px; height: 64px; }
  .loading-screen__scene-frame { flex-basis: 246px; width: 328px; height: 246px; }
  .loading-screen .scene { transform: scale(.82); }
}

@media (max-width: 360px) {
  .loading-screen__scene-frame { flex-basis: 216px; width: 288px; height: 216px; }
  .loading-screen .scene { transform: scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen {
    animation: none;
    transition: none;
  }
}

/* ── Particle canvas ──────────────────────────────────────── */
.particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
/* ── Skip Loading Button ──────────────────────────────────── */
.loading-screen__skip {
  position: absolute; bottom: 32px; right: 32px; z-index: 100;
  pointer-events: auto;
  padding: 10px 20px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; color: #fff; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(10px); transition: background 0.2s;
  animation: skipFadeIn 0.5s ease 1.5s forwards; opacity: 0;
}
.loading-screen__skip:hover { background: rgba(255, 255, 255, 0.25); }
@keyframes skipFadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loading-screen__skip { opacity: 1; animation: none; } }