/**
 * RESPONSIVE ENHANCEMENT v2
 * ─────────────────────────────────────────────────────────────────────────
 * Enforces strict responsive design principles across ALL devices:
 * - 13" laptops (1280px) → 24" UltraWide (3440px)
 * - Mobile (320px) → Tablets (1024px) → Desktops (1920px+)
 * 
 * Uses modern CSS techniques:
 * • Fluid typography with clamp() for perfect scaling
 * • CSS Grid + Flexbox for flexible layouts
 * • Dynamic spacing with calc() and relative units
 * • Optimized breakpoints for natural transitions
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════
   HERO SECTION — GRID-BASED RESPONSIVE LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

#fre-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: clamp(600px, 100vh, 1000px);
  overflow: hidden;
  background: #0d1520;
  display: flex;
  align-items: center;
}

.fre-content-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(20px, 5vw, 80px);
  pointer-events: none;
}

.fre-content-layer .cl-container {
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
}

/* Hero inner content — Flexible grid layout for left (content) and right (image) */
.fre-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: clamp(280px, 50%, 620px);
  padding: clamp(30px, 6vw, 100px) clamp(20px, 4vw, 60px);
  position: relative;
  z-index: 11;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — FLUID SCALING WITH CLAMP()
   ══════════════════════════════════════════════════════════════════════════ */

.fre-badge {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(10px, 1.6vw, 12px);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(222, 23, 23, 0.95);
  border: 1px solid rgba(255, 90, 90, 0.4);
  backdrop-filter: blur(6px);
  padding: clamp(8px, 1.8vw, 12px) clamp(18px, 3.5vw, 28px);
  border-radius: 50px;
  margin-bottom: clamp(18px, 4vw, 30px);
  opacity: 0;
  transform: translateX(-30px);
  animation: freBadgeIn 0.8s 0.25s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  box-shadow: 0 4px 20px rgba(222, 23, 23, 0.5);
  align-self: flex-start;
  white-space: nowrap;
}

.fre-headline {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 14px);
  margin: 0 0 clamp(28px, 5.5vw, 42px);
  line-height: 1.1;
  word-wrap: break-word;
}

.fre-hl {
  display: block;
  opacity: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: 3px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  transform: perspective(700px) rotateX(38deg) translateY(26px) translateZ(-55px);
  animation: freLineIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  word-break: break-word;
  overflow-wrap: break-word;
}

.fre-hl-1 {
  font-size: clamp(16px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: clamp(2.5px, 0.4vw, 4px);
  text-transform: uppercase;
  color: #ffffff;
  animation-delay: 0.35s;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  line-height: 1.15;
}

.fre-hl-2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(36px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(
    175deg,
    #F5E4A8 0%,
    #E0BB5D 30%,
    #D4A84B 50%,
    #C49A45 70%,
    #A07830 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.4));
  animation-delay: 0.55s;
  line-height: 1.0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.fre-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(13px, 1.7vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.93);
  margin: 0 0 clamp(22px, 5vw, 36px);
  max-width: clamp(240px, 95%, 540px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(16px);
  animation: freUp 0.8s 1.05s ease forwards;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.fre-sub strong {
  color: #ffd56b;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH BAR — FLUID RESPONSIVE DESIGN
   ══════════════════════════════════════════════════════════════════════════ */

.fre-search-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(14px, 2.5vw, 50px);
  padding: clamp(6px, 1.2vw, 8px);
  margin-bottom: clamp(28px, 6vw, 40px);
  width: 100%;
  max-width: clamp(300px, 100%, 520px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  opacity: 0;
  animation: searchBarIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) 1.25s both;
}

.fre-search-bar:hover,
.fre-search-bar:focus-within {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(212, 168, 75, 0.6);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(212, 168, 75, 0.2);
}

.fre-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: clamp(10px, 2vw, 14px) clamp(10px, 2vw, 14px);
  color: rgba(255, 255, 255, 0.6);
}

.fre-search-icon svg {
  width: clamp(16px, 2.2vw, 20px);
  height: clamp(16px, 2.2vw, 20px);
  stroke: currentColor;
}

.fre-search-input {
  flex: 1;
  min-width: clamp(120px, 50vw, 280px);
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(12px, 1.8vw, 14px);
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #fff;
  padding: clamp(11px, 2.2vw, 14px) clamp(8px, 1.5vw, 12px);
}

.fre-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(11px, 1.6vw, 13px);
}

.fre-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 8px);
  flex-shrink: 0;
  background: #de1717;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-decoration: none;
  padding: clamp(11px, 2vw, 14px) clamp(16px, 3vw, 24px);
  border-radius: clamp(10px, 2vw, 44px);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 22px rgba(222, 23, 23, 0.5);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.fre-search-btn:hover {
  background: #c01212;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(222, 23, 23, 0.65);
}

.fre-search-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-18deg);
  animation: btnShimmer 3.5s ease-in-out 3.2s infinite;
}

.fre-search-btn-full {
  display: none;
}

@media (min-width: 768px) {
  .fre-search-btn-full {
    display: inline;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CALL-TO-ACTION BUTTONS — FLEXIBLE STACK
   ══════════════════════════════════════════════════════════════════════════ */

.fre-cta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(14px, 3.5vw, 22px);
  margin-bottom: clamp(32px, 6vw, 48px);
  opacity: 0;
  transform: translateY(16px);
  animation: freUp 0.8s 1.18s ease forwards;
  width: 100%;
}

.fre-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 10px);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(11px, 1.7vw, 13px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: clamp(12px, 2.2vw, 16px) clamp(20px, 3.5vw, 32px);
  border-radius: clamp(10px, 2vw, 50px);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), 
    box-shadow 0.3s ease, background 0.3s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.fre-btn-primary {
  color: #fff;
  background: #de1717;
  box-shadow: 0 8px 30px rgba(222, 23, 23, 0.6);
}

.fre-btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -65%;
  width: 50%;
  height: 200%;
  background: rgba(255, 255, 255, 0.18);
  transform: skewX(-20deg);
  animation: freShine 3.8s ease-in-out 2s infinite;
}

.fre-btn-primary:hover {
  transform: perspective(400px) rotateY(-6deg) translateY(-3px) scale(1.05);
  box-shadow: 0 16px 40px rgba(222, 23, 23, 0.75);
  color: #fff;
}

.fre-btn-ghost {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.fre-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
  color: #fff;
}

.fre-btn-arrow {
  font-size: clamp(14px, 1.8vw, 18px);
  transition: transform 0.3s ease;
}

.fre-btn-primary:hover .fre-btn-arrow,
.fre-btn-ghost:hover .fre-btn-arrow {
  transform: translateX(5px);
}

/* ══════════════════════════════════════════════════════════════════════════
   STATS FOOTER — DYNAMIC FLEX-SPACING
   ══════════════════════════════════════════════════════════════════════════ */

.fre-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(16px, 4vw, 32px);
  justify-content: space-around;
  align-items: center;
  opacity: 0;
  transform: translateY(16px);
  animation: freUp 0.8s 1.35s ease forwards;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(10px, 2vw, 14px);
  padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 32px);
  width: 100%;
  max-width: clamp(300px, 100%, 580px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.fre-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 6px);
  flex: 1 1 auto;
  min-width: auto;
  text-align: center;
}

.fre-stat-n {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 3.5vw, 26px);
  font-weight: 700;
  color: #fff;
  line-height: 1.0;
  white-space: nowrap;
}

.fre-stat-l {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(9px, 1.4vw, 11px);
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  white-space: nowrap;
}

.fre-stat-div {
  width: 1px;
  height: clamp(24px, 5vw, 40px);
  background: rgba(255, 255, 255, 0.15);
  display: none;
}

.fre-stat:nth-child(odd):not(:last-child) .fre-stat-div {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUILDING IMAGE LAYER — RESPONSIVE SIZING
   ══════════════════════════════════════════════════════════════════════════ */

.fre-building-layer img {
  position: absolute;
  bottom: -1%;
  right: 0%;
  width: clamp(300px, 50vw, 850px);
  height: auto;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(-40px 40px 90px rgba(0, 0, 0, 0.7));
  animation: freBuildingRise 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both,
    freBuildingFloat 8s ease-in-out 1.8s infinite;
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — OPTIMIZED FOR ALL DEVICES
   ══════════════════════════════════════════════════════════════════════════ */

/* ──────────────── TABLET (768px and below) ────────────── */
@media (max-width: 768px) {
  #fre-hero {
    height: auto;
    min-height: 80vh;
  }

  .fre-content-layer {
    align-items: center;
    justify-content: flex-start;
  }

  .fre-inner {
    max-width: 100%;
    padding: clamp(50px, 10vw, 90px) clamp(20px, 5vw, 40px);
  }

  .fre-building-layer img {
    width: clamp(220px, 55vw, 480px);
    opacity: 0.4;
    bottom: 0%;
    right: -5%;
  }

  .fre-cta-row {
    flex-wrap: wrap;
    gap: clamp(12px, 3vw, 18px);
    margin-bottom: clamp(24px, 5vw, 36px);
  }

  .fre-btn {
    width: auto;
    min-width: clamp(140px, 45%, auto);
  }

  .fre-search-bar {
    flex-wrap: wrap;
    max-width: 100%;
    margin-bottom: clamp(20px, 4vw, 32px);
  }

  .fre-search-input {
    min-width: clamp(100px, 70%, 280px);
  }

  .fre-search-btn {
    width: auto;
    padding: clamp(10px, 2vw, 12px) clamp(14px, 3vw, 20px);
    font-size: clamp(9px, 1.4vw, 11px);
  }

  .fre-stats {
    flex-wrap: wrap;
    gap: clamp(12px, 3vw, 20px);
    padding: clamp(14px, 2.5vw, 20px) clamp(18px, 3.5vw, 28px);
    max-width: 100%;
  }

  .fre-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 1vw, 6px);
    flex: 0 1 auto;
    min-width: auto;
  }

  .fre-stat-l {
    margin-left: 0;
  }

  .fre-stat-div {
    display: none !important;
  }
}

/* ──────────────── MOBILE LANDSCAPE (576px and below) ────────────── */
@media (max-width: 576px) {
  #fre-hero {
    min-height: 85vh;
    height: auto;
  }

  .fre-content-layer {
    align-items: center;
    justify-content: flex-start;
    padding: clamp(16px, 4vw, 24px);
  }

  .fre-inner {
    padding: clamp(60px, 12vw, 100px) clamp(16px, 4vw, 24px);
    max-width: 100%;
  }

  .fre-building-layer img {
    width: clamp(160px, 50vw, 320px);
    opacity: 0.32;
    right: -8%;
    bottom: -5%;
  }

  .fre-badge {
    font-size: clamp(9px, 1.5vw, 11px);
    margin-bottom: clamp(14px, 3vw, 20px);
  }

  .fre-headline {
    margin-bottom: clamp(18px, 4vw, 28px);
  }

  .fre-hl-1 {
    font-size: clamp(14px, 2.5vw, 18px);
    letter-spacing: clamp(1.8px, 0.3vw, 2.8px);
  }

  .fre-hl-2 {
    font-size: clamp(28px, 7.5vw, 48px);
    word-break: break-word;
  }

  .fre-sub {
    font-size: clamp(12px, 2vw, 14px);
    margin-bottom: clamp(16px, 3.5vw, 26px);
    max-width: 100%;
  }

  .fre-search-bar {
    max-width: 100%;
    margin-bottom: clamp(18px, 4vw, 30px);
    flex-wrap: wrap;
  }

  .fre-search-input {
    min-width: clamp(80px, 50%, 240px);
  }

  .fre-search-btn {
    font-size: clamp(10px, 1.6vw, 11px);
    padding: clamp(10px, 2vw, 12px) clamp(14px, 2.5vw, 18px);
  }

  .fre-cta-row {
    flex-wrap: wrap;
    gap: clamp(12px, 3vw, 16px);
    margin-bottom: clamp(20px, 4vw, 30px);
  }

  .fre-btn {
    font-size: clamp(10px, 1.6vw, 11px);
    padding: clamp(11px, 2vw, 13px) clamp(16px, 3vw, 22px);
    width: auto;
    min-width: auto;
  }

  .fre-stats {
    padding: clamp(12px, 2.5vw, 18px) clamp(16px, 3vw, 22px);
    gap: clamp(10px, 2.5vw, 16px);
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
  }

  .fre-stat {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.8vw, 6px);
    width: auto;
    flex: 1 1 auto;
    text-align: center;
  }

  .fre-stat-n {
    font-size: clamp(16px, 3.5vw, 22px);
  }

  .fre-stat-l {
    font-size: clamp(8px, 1.3vw, 9px);
  }
}

/* ──────────────── ULTRA-SMALL (320px and below) ────────────── */
@media (max-width: 380px) {
  .fre-inner {
    padding: clamp(100px, 20vw, 160px) clamp(12px, 3vw, 18px);
  }

  .fre-hl-2 {
    font-size: clamp(20px, 6vw, 32px);
  }

  .fre-sub {
    font-size: clamp(10px, 1.6vw, 12px);
  }

  .fre-btn {
    font-size: clamp(8px, 1.2vw, 9px);
    padding: clamp(10px, 1.5vw, 11px) clamp(10px, 2vw, 14px);
  }

  .fre-search-bar {
    padding: 3px;
  }

  .fre-stats {
    padding: clamp(8px, 1.5vw, 10px) clamp(10px, 1.8vw, 14px);
    gap: clamp(6px, 1vw, 10px);
  }
}

/* ──────────────── ULTRA-WIDE (1920px and above) ────────────── */
@media (min-width: 1920px) {
  #fre-hero {
    height: 100vh;
    min-height: 700px;
    max-height: 1200px;
  }

  .fre-inner {
    max-width: 620px;
    padding: 80px 80px;
  }

  .fre-hl-2 {
    font-size: 84px;
  }

  .fre-headline {
    margin-bottom: 36px;
  }

  .fre-search-bar {
    max-width: 550px;
    margin-bottom: 40px;
  }

  .fre-building-layer img {
    width: clamp(700px, 52vw, 950px);
    opacity: 1;
  }

  .fre-stats {
    max-width: 550px;
    padding: 24px 32px;
  }

  .fre-stat {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ──────────────── LANDSCAPE ORIENTATION (Mobile) ────────────── */
@media (max-height: 600px) and (orientation: landscape) {
  #fre-hero {
    min-height: 100vh;
    height: auto;
  }

  .fre-inner {
    padding-top: clamp(20px, 5vh, 40px);
    padding-bottom: clamp(20px, 5vh, 40px);
  }

  .fre-headline {
    margin-bottom: clamp(10px, 2vh, 16px);
  }

  .fre-hl-1 {
    font-size: clamp(12px, 2vh, 18px);
  }

  .fre-hl-2 {
    font-size: clamp(20px, 5vh, 40px);
  }

  .fre-sub {
    font-size: clamp(10px, 1.5vh, 13px);
    margin-bottom: clamp(10px, 2vh, 18px);
  }

  .fre-search-bar {
    margin-bottom: clamp(10px, 1.5vh, 20px);
  }

  .fre-cta-row {
    margin-bottom: clamp(10px, 1.5vh, 16px);
  }

  .fre-building-layer img {
    width: clamp(120px, 35vh, 280px);
  }
}

/* ──────────────── SPLIT-SCREEN / HALF-WIDTH VIEWPORT ────────────── */
@media (max-width: 900px) and (max-height: 1000px) {
  .fre-inner {
    max-width: 100%;
  }

  .fre-building-layer img {
    width: clamp(180px, 40vw, 380px);
    opacity: 0.38;
  }

  .fre-search-bar {
    max-width: 100%;
  }

  .fre-stats {
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes freUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes searchBarIn {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes searchPulse {
  0%,
  100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 0 0px rgba(212, 168, 75, 0);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 0 18px rgba(212, 168, 75, 0.18);
  }
}

@keyframes iconPing {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes btnShimmer {
  0% {
    left: -75%;
    opacity: 1;
  }
  45% {
    left: 130%;
    opacity: 1;
  }
  100% {
    left: 130%;
    opacity: 0;
  }
}

@keyframes freBadgeIn {
  0% {
    opacity: 0;
    transform: translateX(-32px) scale(0.92);
  }
  70% {
    opacity: 1;
    transform: translateX(4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes freLineIn {
  0% {
    opacity: 0;
    transform: perspective(700px) rotateX(42deg) translateY(30px) translateZ(-60px);
  }
  60% {
    opacity: 1;
    transform: perspective(700px) rotateX(-4deg) translateY(-4px) translateZ(4px);
  }
  100% {
    opacity: 1;
    transform: perspective(700px) rotateX(0) translateY(0) translateZ(0);
  }
}

@keyframes freBuildingRise {
  from {
    transform: translateY(12%) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes freBuildingFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes freShine {
  0% {
    left: -65%;
  }
  40% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}