/* ==========================================================================
   Appfly - Static Site Styles
   ========================================================================== */

:root {
  --color-dark-blue: #001843;
  --color-sky-top: #001742;
  --color-sky-bottom: #0db2cb;
  --color-cyan: #0db2cb;
  --color-text-muted: #98BECC;
  --color-nav-bg: #222222;
  --color-dirt: #422d17;
}

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img { border: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  font-family: helvetica, sans-serif;
  font-size: 12px;
  height: 100%;
}

body {
  height: 100%;
  overflow-x: hidden;
}

a, a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

/* ==========================================================================
   Earth (root container)
   ========================================================================== */

#earth {
  background-color: var(--color-dark-blue);
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Contact Button
   ========================================================================== */

.contact-btn {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 8000;
  background-color: var(--color-nav-bg);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 11px 22px 8px;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: translateX(200px);
  animation: contact-btn-in 0.3s ease 0.3s forwards;
}

.contact-btn:hover {
  background-color: var(--color-cyan);
}

@keyframes contact-btn-in {
  to {
    opacity: 0.9;
    transform: translateX(0);
  }
}

/* ==========================================================================
   Contact Modal — pixel-art slide-in panel
   ========================================================================== */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  visibility: hidden;
}

/* backdrop */
.contact-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 12, 35, 0);
  transition: background 0.25s ease;
}

.contact-modal.active {
  pointer-events: auto;
  visibility: visible;
}

.contact-modal.active::before {
  background: rgba(0, 12, 35, 0.7);
}

/* panel */
.contact-modal-inner {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: min(520px, 100vw);
  background: var(--color-dark-blue);
  border-left: 3px solid var(--color-cyan);
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  box-shadow: -8px 0 0 0 rgba(13, 178, 203, 0.15),
              -16px 0 0 0 rgba(13, 178, 203, 0.05);
  image-rendering: pixelated;
}

.contact-modal.active .contact-modal-inner {
  transform: translateX(0);
}

/* pixel corner decoration — top-left of panel */
.contact-modal-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-bottom: 3px solid rgba(13, 178, 203, 0.3);
  border-right: 3px solid rgba(13, 178, 203, 0.3);
}

/* pixel corner decoration — bottom-right */
.contact-modal-inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-top: 3px solid rgba(13, 178, 203, 0.3);
  border-left: 3px solid rgba(13, 178, 203, 0.3);
}

/* close button — pixel square */
.contact-modal-close {
  position: absolute;
  top: 20px;
  right: 50px;
  width: 32px;
  height: 32px;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  z-index: 10;
}

.contact-modal-close:hover {
  border-color: var(--color-cyan);
  background: rgba(13, 178, 203, 0.1);
}

.contact-modal-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  display: block;
}

.contact-modal-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-modal-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* header */
.contact-header {
  margin-bottom: 36px;
  padding-top: 24px;
}

.contact-greeting {
  color: var(--color-cyan);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s;
}

.contact-modal.active .contact-greeting {
  opacity: 1;
  transform: translateX(0);
}

/* pixel accent bar under greeting */
.contact-greeting::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-cyan);
  margin-top: 8px;
  box-shadow: 0 0 6px rgba(13, 178, 203, 0.5);
}

.contact-modal-inner h2 {
  color: #fff;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.25s ease 0.2s, transform 0.25s ease 0.2s;
}

.contact-modal.active .contact-modal-inner h2 {
  opacity: 1;
  transform: translateX(0);
}

.contact-modal-inner h2 .highlight {
  color: var(--color-cyan);
  text-shadow: 0 0 12px rgba(13, 178, 203, 0.4);
  -webkit-text-fill-color: unset;
}

/* form fields — pixel-style with glowing underlines */
#enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-field {
  position: relative;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: calc(0.2s + var(--i) * 0.06s);
}

.contact-modal.active .form-field {
  opacity: 1;
  transform: translateX(0);
}

.form-field label {
  position: absolute;
  left: 10px;
  top: 14px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
  pointer-events: none;
  transition: transform 0.2s ease, font-size 0.2s ease, color 0.2s ease;
  transform-origin: left top;
}

.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-24px);
  font-size: 10px;
  color: var(--color-cyan);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  padding: 12px 10px;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s,
              box-shadow 0.15s;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-cyan);
  background: rgba(13, 178, 203, 0.04);
  box-shadow: 0 0 10px rgba(13, 178, 203, 0.15),
              inset 0 0 10px rgba(13, 178, 203, 0.03);
}

.form-field textarea {
  resize: none;
  line-height: 1.5;
}

/* field-line becomes a stepped pixel bar */
.field-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s steps(8);
  box-shadow: 0 0 8px rgba(13, 178, 203, 0.5),
              0 2px 4px rgba(13, 178, 203, 0.3);
}

.form-field input:focus ~ .field-line,
.form-field textarea:focus ~ .field-line {
  transform: scaleX(1);
}

/* submit button — pixel block style */
.submit-btn {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 2px solid var(--color-cyan);
  border-radius: 0;
  padding: 14px 28px;
  cursor: pointer;
  overflow: hidden;
  margin-top: 8px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.2s ease 0.4s, transform 0.2s ease 0.4s,
              background-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.contact-modal.active .submit-btn {
  opacity: 1;
  transform: translateX(0);
}

.submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-cyan);
  transform: translateX(-101%);
  transition: transform 0.2s steps(6);
}

.submit-btn:hover {
  box-shadow: 0 0 16px rgba(13, 178, 203, 0.35),
              0 0 30px rgba(13, 178, 203, 0.15);
}

.submit-btn:hover::before {
  transform: translateX(0);
}

.submit-btn:hover .btn-text {
  color: var(--color-dark-blue);
}

.submit-btn:hover .btn-arrow {
  color: var(--color-dark-blue);
}

.btn-text,
.btn-arrow {
  position: relative;
  z-index: 1;
  transition: color 0.15s;
}

.btn-arrow {
  transition: transform 0.2s ease, color 0.15s;
  font-size: 16px;
}

.submit-btn:hover .btn-arrow {
  transform: translateX(3px);
}

.submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.submit-btn:disabled:hover::before {
  transform: translateX(-101%);
}

/* scanline overlay on the panel for retro CRT vibe */
.contact-modal-inner > * {
  position: relative;
  z-index: 1;
}

/* error message — pixel style */
.enquiry-error {
  color: #ff6b6b;
  font-size: 13px;
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(255, 80, 80, 0.08);
  border: 2px solid rgba(255, 80, 80, 0.25);
  border-radius: 0;
}

/* success state */
#enquiry-done {
  text-align: center;
  padding: 40px 0;
}

.done-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
}

.done-check svg {
  width: 100%;
  height: 100%;
}

.done-check circle {
  stroke: var(--color-cyan);
  stroke-width: 2;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: draw-circle 0.5s steps(12) forwards;
}

.done-check path {
  stroke: var(--color-cyan);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw-check 0.3s steps(8) 0.4s forwards;
}

@keyframes draw-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

.done-heading {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.done-sub {
  color: var(--color-text-muted);
  font-size: 14px;
}

/* address */
.contact-address {
  color: rgba(255, 255, 255, 0.3);
  font-style: normal;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  margin-top: 16px;
  letter-spacing: 0.5px;
}

.contact-address a {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.15s, border-color 0.15s;
}

.contact-address a:hover {
  color: var(--color-cyan);
  border-bottom-color: rgba(13, 178, 203, 0.3);
}

/* or divider + email link */
.contact-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 20px;
}

.contact-or-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.contact-or-text {
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.contact-email {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  text-align: center;
}

.contact-email a {
  color: var(--color-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 178, 203, 0.3);
  padding-bottom: 1px;
  transition: border-color 0.15s, text-shadow 0.15s;
}

.contact-email a:hover {
  border-bottom-color: var(--color-cyan);
  text-shadow: 0 0 8px rgba(13, 178, 203, 0.4);
}

/* responsive — contact modal */
@media (max-width: 599px) {
  .contact-modal-inner {
    padding: 50px 24px;
    width: 100vw;
  }

  .contact-modal-close {
    top: 14px;
    right: 24px;
  }
}

/* ==========================================================================
   Main Content Area (#stuff)
   ========================================================================== */

section#stuff {
  position: relative;
  width: 100%;
  background-color: var(--color-dark-blue);
  overflow: hidden;
  flex: 1 0 auto;
}

#page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: 200;
}

/* ==========================================================================
   Sky / Night / Sun
   ========================================================================== */

#sky {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-sky-top) 0%, var(--color-sky-bottom) 100%);
}

#night {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9;
  pointer-events: none;
  background: url(../assets/stars.png) repeat scroll 0 0 #000;
}

#sun {
  height: 288px;
  position: absolute;
  z-index: 170;
  width: 374px;
  opacity: 0.1;
  top: 800px;
  /* Centered horizontally with percentage-based offset */
  left: 50%;
  margin-left: 100px;
}

#sun-1 {
  background: url(../assets/intro_sun-01.png) no-repeat scroll 0 0 transparent;
  width: 374px;
  height: 288px;
  position: absolute;
  left: -20px;
  top: 20px;
}

#sun-2 {
  background: url(../assets/intro_sun-02.png) no-repeat scroll 0 0 transparent;
  width: 374px;
  height: 288px;
  position: absolute;
  left: 10px;
  top: -10px;
}

#sun-3 {
  background: url(../assets/intro_sun-03.png) no-repeat scroll 0 0 transparent;
  width: 374px;
  height: 288px;
  position: absolute;
  left: 20px;
  top: 10px;
}

/* Sun rise animation */
#sun.rising {
  transition: opacity 2s linear, top 2s ease-out;
  opacity: 0.8;
  top: 60px;
}

#sun.rising #sun-1 {
  transition: left 2s ease-out, top 2s ease-out;
  left: 0;
  top: 0;
}

#sun.rising #sun-2 {
  transition: left 2s ease-out, top 2s ease-out;
  left: 0;
  top: 0;
}

#sun.rising #sun-3 {
  transition: left 2s ease-out, top 2s ease-out;
  left: 0;
  top: 0;
}

/* Sun shimmer — each disc drifts on its own loop */
#sun.shimmer #sun-1 {
  animation: shimmer-1 18s ease-in-out infinite;
}

#sun.shimmer #sun-2 {
  animation: shimmer-2 24s ease-in-out infinite;
}

#sun.shimmer #sun-3 {
  animation: shimmer-3 21s ease-in-out infinite;
}

@keyframes shimmer-1 {
  0%, 100% { transform: translate(0, 0); }
  25%  { transform: translate(-8px, 4px); }
  50%  { transform: translate(5px, -5px); }
  75%  { transform: translate(-4px, -3px); }
}

@keyframes shimmer-2 {
  0%, 100% { transform: translate(0, 0); }
  25%  { transform: translate(7px, -3px); }
  50%  { transform: translate(-5px, 7px); }
  75%  { transform: translate(4px, 3px); }
}

@keyframes shimmer-3 {
  0%, 100% { transform: translate(0, 0); }
  25%  { transform: translate(-5px, -5px); }
  50%  { transform: translate(8px, 3px); }
  75%  { transform: translate(-3px, 5px); }
}

/* ==========================================================================
   Fly
   ========================================================================== */

#fly {
  background: url(../assets/fly_sprite_v5.png) no-repeat scroll transparent;
  height: 85px;
  width: 85px;
  top: 0;
  left: 800px;
  position: absolute;
  z-index: 500;
  transform: scaleX(1);
  background-position: 0 0;
  cursor: pointer;
}

#fly span {
  visibility: hidden;
}

#fly.still {
  background-position-y: 0;
}

#fly.flying {
  background-position-y: -85px;
}

#fly.sideways {
  background-position-y: -170px;
}

#fly.reflect-x {
  transform: scaleX(-1);
}

#fly.reflect-y {
  transform: scaleY(-1);
}

#fly.reflect-x.reflect-y {
  transform: scaleX(-1) scaleY(-1);
}

/* ==========================================================================
   Home Section
   ========================================================================== */

#home {
  position: relative;
  width: 100%;
}

#home .main-logo {
  z-index: 200;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  max-width: min(825px, 90vw);
  margin: 0 auto;
  height: auto;
}

#home .main-logo span {
  visibility: hidden;
}

#home .main-logo .letter {
  position: relative;
  z-index: 201;
  background-size: contain;
  background-repeat: no-repeat;
  /* Start off-screen left for entrance animation */
  transform: translateX(-2000px);
  opacity: 0;
}

#home .main-logo .letter.letter-visible {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

#letter-0 {
  background-image: url(../assets/appfly_a_02.png);
  height: clamp(100px, 20vw, 198px);
  width: clamp(94px, 19vw, 186px);
}

#letter-1 {
  background-image: url(../assets/appfly_p_02.png);
  height: clamp(101px, 20vw, 201px);
  width: clamp(80px, 16vw, 159px);
  margin-left: clamp(5px, 1vw, 10px);
}

#letter-2 {
  background-image: url(../assets/appfly_p_02.png);
  height: clamp(101px, 20vw, 201px);
  width: clamp(80px, 16vw, 159px);
  margin-left: clamp(5px, 1vw, 10px);
}

#letter-3 {
  background-image: url(../assets/appfly_f_02.png);
  height: clamp(100px, 20vw, 200px);
  width: clamp(40px, 8vw, 78px);
  margin-left: clamp(3px, 0.5vw, 5px);
}

#letter-4 {
  background-image: url(../assets/appfly_l_02.png);
  height: clamp(100px, 20vw, 198px);
  width: clamp(18px, 3.6vw, 36px);
  margin-left: clamp(2px, 0.3vw, 5px);
}

#letter-5 {
  background-image: url(../assets/appfly_y_02.png);
  height: clamp(100px, 20vw, 198px);
  width: clamp(76px, 15vw, 151px);
}

/* ==========================================================================
   Home Intro Text
   ========================================================================== */

#home .home_intro {
  position: relative;
  z-index: 200;
  max-width: min(600px, 85vw);
  margin: 10px auto 0;
  text-align: center;
}

#home .home_intro h2,
#home .home_intro h3,
#home .home_intro h4 {
  position: relative;
  color: var(--color-text-muted);
  margin: 0;
  padding: 0;
  line-height: 1.4;
  opacity: 0;
}

#home .home_intro h2 {
  font-size: clamp(16px, 2vw, 20px);
  transform: translateX(2000px);
}

#home .home_intro h3 {
  font-size: clamp(14px, 1.8vw, 18px);
  transform: translateX(-2000px);
}

#home .home_intro h4 {
  font-size: clamp(14px, 1.8vw, 18px);
  transform: translateX(2000px);
}

.intro-contact-btn {
  display: inline-block;
  margin-top: 18px;
  background: transparent;
  color: var(--color-cyan);
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 700;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 2px solid var(--color-cyan);
  padding: 10px 24px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s,
              transform 0.5s ease, opacity 0.5s ease;
  position: relative;
  z-index: 200;
}

.intro-contact-btn.text-visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-contact-btn:hover {
  background: var(--color-cyan);
  color: var(--color-dark-blue);
  box-shadow: 0 0 16px rgba(13, 178, 203, 0.35);
}

#home .home_intro h2.text-visible,
#home .home_intro h3.text-visible,
#home .home_intro h4.text-visible {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* ==========================================================================
   Hills
   ========================================================================== */

#hills {
  z-index: 401;
  width: 100%;
  position: fixed;
  bottom: 80px;
  height: 170px;
  overflow: hidden;
}

.hills-track {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  will-change: transform;
}

.hills-track-1 {
  z-index: 13;
  height: 87px;
  /* unit = 800px hill + 1200px gap = 2000px */
  animation: scroll-hills-1 90s linear infinite;
}

.hills-track-2 {
  z-index: 12;
  height: 165px;
  /* unit = 1411px hill + 1800px gap = 3211px */
  animation: scroll-hills-2 150s linear infinite;
}

.hill-1 {
  background: url(../assets/home_hills_2.png) no-repeat 0 0;
  width: 800px;
  min-width: 800px;
  height: 87px;
}

.hill-spacer-1 {
  width: 1200px;
  min-width: 1200px;
}

.hill-2 {
  background: url(../assets/home_hills_1.png) no-repeat 0 0;
  width: 1411px;
  min-width: 1411px;
  height: 165px;
}

.hill-spacer-2 {
  width: 1800px;
  min-width: 1800px;
}

@keyframes scroll-hills-1 {
  from { transform: translateX(0); }
  to { transform: translateX(-2000px); }
}

@keyframes scroll-hills-2 {
  from { transform: translateX(0); }
  to { transform: translateX(-3211px); }
}

/* ==========================================================================
   Footer (Ground / Dirt)
   ========================================================================== */

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 400;
  width: 100%;
  overflow: hidden;
}

#ground {
  height: 20px;
  background: url(../assets/grass.png) repeat-x transparent;
  position: relative;
  z-index: 50;
  animation: scroll-ground 14s linear infinite;
}

#dirt {
  height: 80px;
  background: url(../assets/dirt.gif) repeat-x transparent;
  margin-top: -10px;
  position: relative;
  z-index: 40;
  animation: scroll-dirt 20s linear infinite;
}

@keyframes scroll-ground {
  from { background-position-x: 0; }
  to { background-position-x: -388px; }
}

@keyframes scroll-dirt {
  from { background-position-x: 0; }
  to { background-position-x: -709px; }
}

/* ==========================================================================
   Cookie Banner
   ========================================================================== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9500;
  padding: 0 16px 16px;
  animation: cookie-in 0.3s ease forwards;
}

@keyframes cookie-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.cookie-inner {
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-dark-blue);
  border: 2px solid rgba(13, 178, 203, 0.3);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4),
              0 0 12px rgba(13, 178, 203, 0.1);
}

.cookie-inner p {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
  flex: 1;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 9px 16px;
  border: 2px solid;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.cookie-btn-decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.15);
}

.cookie-btn-decline:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.cookie-btn-accept {
  background: transparent;
  color: var(--color-cyan);
  border-color: var(--color-cyan);
}

.cookie-btn-accept:hover {
  background: var(--color-cyan);
  color: var(--color-dark-blue);
  box-shadow: 0 0 12px rgba(13, 178, 203, 0.35);
}

@media (max-width: 599px) {
  .cookie-inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1023px) {
  #sun {
    margin-left: 0;
  }
}

/* Mobile */
@media (max-width: 599px) {
  #fly {
    transform: scale(1);
    transform-origin: top left;
  }

  #fly.reflect-x {
    transform: scaleX(-1);
  }

  #fly.reflect-y {
    transform: scaleY(-1);
  }

  #fly.reflect-x.reflect-y {
    transform: scaleX(-1) scaleY(-1);
  }

  #sun {
    width: 160px;
    height: 123px;
    margin-left: 0;
  }

  #sun-1, #sun-2, #sun-3 {
    width: 160px;
    height: 123px;
    background-size: contain;
  }

  /* Logo — scale down so all 6 letters fit on one line */
  #home .main-logo {
    max-width: 95vw;
  }

  #letter-0 {
    height: 80px;
    width: 75px;
  }

  #letter-1,
  #letter-2 {
    height: 81px;
    width: 64px;
    margin-left: 3px;
  }

  #letter-3 {
    height: 80px;
    width: 31px;
    margin-left: 2px;
  }

  #letter-4 {
    height: 80px;
    width: 14px;
    margin-left: 1px;
  }

  #letter-5 {
    height: 80px;
    width: 61px;
  }

  #home .home_intro {
    padding: 0 15px;
  }

  /* Hills — smaller on mobile */
  #hills {
    bottom: 60px;
    height: 100px;
  }

  .hill-1 {
    background-size: contain;
    height: 50px;
  }

  .hill-2 {
    background-size: contain;
    height: 95px;
  }

  footer {
    z-index: 400;
  }

  #dirt {
    height: 50px;
  }
}