/* ============================================================
   style.css — Away Digital Home
   Global base: design tokens, reset, utilities, animation
   BEM | CSS custom properties | No frameworks
============================================================ */

/* ----------------------------------------------------------
   FONTS
---------------------------------------------------------- */
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/Aeonik Pro Font Family/AeonikPro-Trial/AeonikProTRIAL-Light.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/Aeonik Pro Font Family/AeonikPro-Trial/AeonikProTRIAL-LightItalic.otf")
    format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/Aeonik Pro Font Family/AeonikPro-Trial/AeonikProTRIAL-Regular.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/Aeonik Pro Font Family/AeonikPro-Trial/AeonikProTRIAL-RegularItalic.otf")
    format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/Aeonik Pro Font Family/AeonikPro-Trial/AeonikPro-Medium.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/Aeonik Pro Font Family/AeonikPro-Trial/AeonikPro-MediumItalic.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/Aeonik Pro Font Family/AeonikPro-Trial/AeonikProTRIAL-Bold.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/Aeonik Pro Font Family/AeonikPro-Trial/AeonikProTRIAL-BoldItalic.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------
   DESIGN TOKENS
---------------------------------------------------------- */
:root {
  /* ---- Colors ---- */
  --color-primary: #1542ff;
  --color-text-dark: #262626;
  --color-text-light: #f3f4f6;
  --color-text-muted: #a8a8a8;
  --color-text-gray: #717171;
  --color-text-body-muted: #6b6b6b;
  --color-bg-gray: #f3f4f6;
  --color-bg-dark: #303030;
  --color-border: #787878;
  --color-border-light: #ccced0;
  --color-required: #fe2c55;
  --color-card-bg: rgba(0, 0, 0, 0.05);
  --color-white: #ffffff;

  /* ---- Typography ---- */
  --font-family: "Aeonik Pro", system-ui, -apple-system, sans-serif;

  /* Font sizes */
  --fs-xs: 14px;
  --fs-sm: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 60px;

  /* Line heights */
  --lh-xs: 20px;
  --lh-sm: 24px;
  --lh-md: 28px;
  --lh-lg: 30px;
  --lh-xl: 34px;
  --lh-2xl: 48px;
  --lh-3xl: 72px;

  /* ---- Layout ---- */
  --container-max: 1140px;
  --section-px: 10.4vw; /* ≈150px at 1440px viewport */
  --section-py: 80px;
  --card-gap: 24px;

  /* ---- Border radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---- Z-index layers ---- */
  --z-base: 0;
  --z-content: 1;
  --z-overlay: 10;
  --z-sticky: 100;
  --z-modal: 200;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);

  /* ---- Transitions ---- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s ease;
  --transition-slow: 1s ease;

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(
    270deg,
    var(--color-primary) 5%,
    #0d2899 97%
  );
  --gradient-overlay-bottom: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.63) 60%
  );
  --gradient-overlay-hero: linear-gradient(
    360deg,
    rgba(0, 0, 0, 0) 2.31%,
    rgba(0, 0, 0, 0.5) 63.98%
  );

  /* ---- Slideshow ---- */
  --slide-w: 918px;
  --slide-h: 441px;
  --slide-gap: 64px;
  --slide-step: calc(var(--slide-w) + var(--slide-gap));
  --slide-offset: calc(50% - var(--slide-w) / 2);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ----------------------------------------------------------
   UTILITIES
---------------------------------------------------------- */
.g0 {
  gap: 0 !important;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  border-radius: 0;
}
.btn:hover {
  opacity: 0.85;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  height: 42px;
  padding: 8px 16px;
}

/* Hero CTAs (home hero + feature_hero; shared so feature page need not load hero.css) */
.hero-buttons {
  display: flex;
  gap: 16px;
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  line-height: 1.125;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  padding: 14px 40px;
  border-radius: 0;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn-primary:hover,
.btn-secondary:hover {
  background: #3399ff;
  color: var(--color-white);
  border-color: #3399ff;
}

@media (max-width: 767.9px) {
  .hero-buttons {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    max-width: 340px;
  }
}

/* ----------------------------------------------------------
   ANIMATION — hover.to fadeInAndMoveUp
   Hidden until .is-visible (no dependency on html.js)
---------------------------------------------------------- */

.fade-in-motion,
.fade-in,
[data-animate] {
  transition:
    opacity 1.1s ease-out,
    transform 0.9s ease-out;
  transition-delay: var(--motion-delay, 0s);
  will-change: opacity, transform;
}

.fade-in-motion:not(.is-visible),
.fade-in:not(.is-visible),
[data-animate]:not(.is-visible) {
  opacity: 0;
  transform: translateY(35px);
}

.fade-in-motion.is-visible,
.fade-in.is-visible,
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

[data-motion-delay="0.3"],
[data-delay="3"] {
  --motion-delay: 0.3s;
}

/* ----------------------------------------------------------
   RESPONSIVE — TABLET (≤ 1024px)
---------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --section-px: 11.7vw; /* ≈120px at 1024px viewport */
    --section-py: 60px;
    --slide-w: 80vw;
    --slide-h: 320px;
    --slide-offset: 10vw;
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — MOBILE (≤ 767.9px)
---------------------------------------------------------- */
@media (max-width: 767.9px) {
  :root {
    --section-px: 20px;
    --section-py: 48px;
    --slide-w: 88vw;
    --slide-h: 240px;
    --slide-gap: 16px;
    --slide-offset: 6vw;
  }
}