/*
Theme Name: AeroTransfer Luxury
Theme URI: https://aerotransfer.com
Author: AeroTransfer
Author URI: https://aerotransfer.com
Description: A custom, high-end luxury theme for AeroTransfer.
Version: 1.0.0
Text Domain: aerotransfer
*/

/* 
 * All core styles are loaded from css/style.css and css/pages.css
 * This file is only required by WordPress to declare the theme.
 */
/* ==========================================================================
   3D CINEMATIC HERO (MIGRATED)
   ========================================================================== */
.hero--3d {
  width: 100%;
  height: 100vh;
  min-height: 800px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: var(--color-black);
}
.hero--3d .hero__layer-bg,
.hero--3d .hero__layer-type,
.hero--3d .hero__layer-fg,
.hero--3d .hero__layer-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through layers except UI */
}
/* Layer 0: Background */
.hero--3d .hero__layer-bg {
  z-index: 0;
}
.hero--3d .hero__layer-bg img,
.hero--3d .hero__layer-bg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero--3d .hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero--3d .hero__overlay--top {
  background: linear-gradient(to bottom, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0) 35%);
  z-index: 1;
}
.hero--3d .hero__overlay--left {
  background: linear-gradient(to right, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0) 35%);
  z-index: 1;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}
.hero--3d .hero__overlay--bottom {
  background: linear-gradient(to top, rgba(10,10,12,1) 0%, rgba(10,10,12,0.8) 15%, rgba(10,10,12,0) 50%);
  z-index: 1;
}
/* Layer 1: Massive Typography */
.hero--3d .hero__layer-type {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero--3d .hero__type-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-24vh);
}
.hero--3d .hero__type-text {
  font-family: var(--font-sans);
  font-size: clamp(8rem, 23vw, 40rem);
  font-weight: 900;
  line-height: 0.8;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Layer 2: Foreground Vehicle */
.hero--3d .hero__layer-fg {
  z-index: 2;
}
.hero--3d .hero__layer-fg img,
.hero--3d .hero__layer-fg picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Layer 3: UI */
.hero--3d .hero__layer-ui {
  z-index: 3;
  pointer-events: auto; /* Re-enable clicks for UI */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--nav-height) var(--container-pad) clamp(130px, 10vh, 160px);
  max-width: var(--container-wide);
  margin: 0 auto;
}
.hero--3d .hero__title-small {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: 0.8em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.95;
  margin-bottom: -3vh;
  z-index: 2;
}
.hero--3d .hero__content-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}
.hero--3d .hero__content-bottom .hero__subtitle {
  max-width: 600px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 auto;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
  .hero--3d {
    min-height: 100svh; /* Allow the hero section to resize down to the phone's actual screen height */
    height: 100svh;
  }
  .hero--3d .hero__type-group {
    transform: translateY(-18vh); /* Shifted text down */
  }
  .hero--3d .hero__title-small {
    font-size: clamp(1.3rem, 5.5vw, 2.2rem);
    letter-spacing: 0.5em;
    margin-bottom: 1vh;
  }
  .hero--3d .hero__type-text {
    font-size: clamp(4.5rem, 24vw, 11rem); /* Perfect middle ground to fill screen without overflowing */
    transform: none;
  }
  
  .hero--3d .hero__layer-ui {
    padding: var(--nav-height) var(--container-pad) 5px;
  }
  /* Not enough vertical room at this breakpoint for both the stats
     row and the scroll cue without overlapping (css/style.css already
     hides it below 640px; this extends that up to 768px). */
  .hero__scroll {
    display: none;
  }
  .hero--3d .hero__content-bottom {
    gap: 8px;
    transform: none; /* Let the container sit naturally to fully prevent clipping */
  }
  .hero--3d .hero__content-bottom .hero__subtitle {
    font-size: 0.85rem;
    max-width: 90%;
    margin-bottom: 0;
    line-height: 1.4;
  }
  .hero--3d .hero__actions {
    gap: 8px;
    width: 100%;
    max-width: 300px;
  }
  .hero--3d .hero__actions .btn {
    padding: 12px 15px; /* Shrink button height */
    font-size: 0.85rem;
  }
  .hero--3d .hero__stats {
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5px; /* Extremely tight margin */
    padding-top: 5px; /* Extremely tight padding */
  }
  .hero--3d .hero__stat-item {
    padding: 0 3px;
  }
  .hero--3d .hero__stat-value {
    font-size: 1.2rem;
  }
  .hero--3d .hero__stat-label {
    font-size: 0.6rem;
  }
}
