/* =========================================================
   ATY MERCEDES
   style.css

   Design Direction:
   - Mercedes-inspired luxury
   - Black / White / Silver
   - Minimal
   - Premium automotive
   - Fully responsive
========================================================= */

/* =========================================================
   01. ROOT / VARIABLES
========================================================= */

:root {
  --black: #050505;
  --black-soft: #0a0a0a;
  --graphite: #111111;

  --white: #ffffff;
  --off-white: #eeeeec;

  --silver: #b7b7b7;
  --silver-light: #dedede;

  --mercedes-blue: #00adef;

  --border-dark: rgba(255, 255, 255, 0.1);
  --border-light: rgba(0, 0, 0, 0.13);

  --text-dark-secondary: rgba(0, 0, 0, 0.55);
  --text-light-secondary: rgba(255, 255, 255, 0.55);

  --header-height: 76px;

  --transition-fast: 180ms ease;
  --transition-normal: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   02. RESET / BASE
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;

  background: var(--black);

  font-family: "Manrope", sans-serif;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;

  max-width: 100%;
}

a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;

  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   03. SELECTION
========================================================= */

::selection {
  background: #ffffff;
  color: #000000;
}

/* =========================================================
   04. SCROLLBAR
========================================================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #080808;
}

::-webkit-scrollbar-thumb {
  background: #373737;

  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Firefox */

html {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #080808;
}

/* =========================================================
   05. HEADER
========================================================= */

#site-header {
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal),
    margin-top var(--transition-normal),
    backdrop-filter var(--transition-normal);
}

#site-header.header-scrolled {
  margin-top: 0;

  background: rgba(5, 5, 5, 0.93);

  border-bottom-color: rgba(255, 255, 255, 0.12);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* =========================================================
   06. NAVIGATION LINKS
========================================================= */

#site-header nav a:not([class*="bg-white"]) {
  position: relative;
}

#site-header nav a:not([class*="bg-white"])::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 100%;
  height: 1px;

  background: #ffffff;

  transform: scaleX(0);
  transform-origin: right;

  transition: transform var(--transition-normal);
}

#site-header nav a:not([class*="bg-white"]):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* =========================================================
   07. MOBILE MENU
========================================================= */

#mobile-menu {
  max-height: calc(100vh - 110px);

  overflow-y: auto;
}

#mobile-menu.mobile-menu-active {
  display: block;

  animation: mobileMenuReveal 300ms ease forwards;
}

@keyframes mobileMenuReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav-link {
  transition:
    color var(--transition-fast),
    padding-left var(--transition-normal),
    background-color var(--transition-fast);
}

.mobile-nav-link:hover {
  padding-left: 8px;

  color: #ffffff;
}

/* =========================================================
   08. HERO
========================================================= */

#home {
  isolation: isolate;
}

#home img {
  transform: scale(1.015);

  animation: heroImageReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroImageReveal {
  from {
    opacity: 0;
    transform: scale(1.07);
  }

  to {
    opacity: 1;
    transform: scale(1.015);
  }
}

/* subtle cinematic grain */

#home::after {
  content: "";

  pointer-events: none;

  position: absolute;
  inset: 0;

  z-index: 3;

  opacity: 0.05;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='.5'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;
}

/* =========================================================
   09. HERO CONTENT ANIMATION
========================================================= */

#home h1,
#home p,
#home a,
#home .border-t {
  animation: fadeUp 850ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

#home h1 {
  animation-delay: 120ms;
}

#home h1 + p {
  animation-delay: 220ms;
}

#home h1 + p + div {
  animation-delay: 310ms;
}

#home .border-t {
  animation-delay: 430ms;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   10. TYPOGRAPHY POLISH
========================================================= */

.font-display {
  text-wrap: balance;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* =========================================================
   11. LINKS & BUTTONS
========================================================= */

a,
button {
  transition:
    color var(--transition-normal),
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    opacity var(--transition-normal),
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* white button */

a.bg-white:hover {
  box-shadow: 0 14px 35px rgba(255, 255, 255, 0.08);
}

/* black button */

a.bg-black:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.17);
}

/* button press */

a:active,
button:active {
  transform: scale(0.985);
}

/* =========================================================
   12. SERVICE CARDS
========================================================= */

#services article {
  position: relative;

  isolation: isolate;

  transition:
    background-color var(--transition-normal),
    transform var(--transition-normal);
}

#services article::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );

  opacity: 0;

  transform: scaleX(0.2);

  transition:
    opacity var(--transition-normal),
    transform var(--transition-slow);
}

#services article:hover::before {
  opacity: 1;

  transform: scaleX(1);
}

#services article > div > div:first-child > div:first-child {
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
}

#services article:hover > div > div:first-child > div:first-child {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;

  transform: translateY(-3px);
}

#services article:hover h3 {
  transform: translateX(3px);
}

/* =========================================================
   13. IMAGE HOVER
========================================================= */

#brand-new img {
  transition:
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms ease;

  filter: saturate(0.88) contrast(1.02);
}

#brand-new:hover img {
  transform: scale(1.025);

  filter: saturate(1) contrast(1.03);
}

/* =========================================================
   14. BRAND NEW FEATURE ROWS
========================================================= */

#brand-new .border-b {
  transition:
    padding-left var(--transition-normal),
    background-color var(--transition-normal);
}

#brand-new .border-b:hover {
  padding-left: 7px;
}

/* =========================================================
   15. WHY CHOOSE ME CARDS
========================================================= */

#why-me article {
  transition:
    background-color var(--transition-normal),
    padding-left var(--transition-normal);
}

#why-me article:hover {
  background: rgba(255, 255, 255, 0.42);
}

#why-me article > span {
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
}

#why-me article:hover > span {
  color: #ffffff;

  background: #000000;

  border-color: #000000;

  transform: translateY(-4px);
}

/* =========================================================
   16. SIMPLE PROCESS
========================================================= */

section .fa-whatsapp,
section .fa-comments,
section .fa-file-signature,
section .fa-key {
  transition:
    transform var(--transition-normal),
    opacity var(--transition-normal);
}

section [class*="min-h-[230px]"]:hover i {
  transform: translateY(-5px);
}

/* =========================================================
   17. SOCIAL ICONS
========================================================= */

#contact a[aria-label] {
  transition:
    color var(--transition-normal),
    background-color var(--transition-normal),
    transform var(--transition-normal),
    border-color var(--transition-normal);
}

#contact a[aria-label]:hover {
  transform: translateY(-3px);
}

/* =========================================================
   18. FLOATING WHATSAPP
========================================================= */

a[aria-label="WhatsApp Aty Mercedes"] {
  isolation: isolate;
}

a[aria-label="WhatsApp Aty Mercedes"]:hover {
  transform: translateY(-2px) scale(1.04);
}

/* =========================================================
   19. BACK TO TOP
========================================================= */

#back-to-top {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#back-to-top.is-visible {
  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;
}

#back-to-top:hover {
  border-color: rgba(255, 255, 255, 0.4);

  background: #ffffff;

  color: #000000;
}

/* =========================================================
   20. SECTION IMAGE LOADING
========================================================= */

img {
  user-select: none;

  -webkit-user-drag: none;
}

/* =========================================================
   21. MODEL CARDS
========================================================= */

#models .model-card {
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);

  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

#models .model-card-image {
  background: #eeeeec;
}

#models .model-card-image img {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

#models .model-card.model-card-hidden {
  display: none;
}

#models .model-image-fallback {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;

  color: rgba(0, 0, 0, 0.4);

  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#models .model-card:hover {
  border-color: rgba(255, 255, 255, 0.3);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);

  transform: translateY(-4px);
}

#models .model-card:hover .model-card-image img {
  transform: scale(1.025);
}

#models .model-state {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: rgba(255, 255, 255, 0.45);

  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================
   22. CUSTOMER GALLERY
========================================================= */

#gallery .gallery-item {
  cursor: zoom-in;

  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

#gallery .gallery-item img {
  filter: saturate(0.9) contrast(1.02);

  transition:
    filter 700ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

#gallery .gallery-item:hover {
  border-color: rgba(0, 0, 0, 0.3);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);

  transform: translateY(-4px);
}

#gallery .gallery-item:hover img {
  filter: saturate(1) contrast(1.04);

  transform: scale(1.025);
}

/* =========================================================
   23. GALLERY LIGHTBOX
========================================================= */

body.gallery-lightbox-open {
  overflow: hidden;
}

#gallery-lightbox {
  opacity: 0;
  visibility: hidden;

  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal);
}

#gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}

#gallery-lightbox-stage {
  touch-action: pan-y;
}

#gallery-lightbox-image {
  user-select: none;

  -webkit-user-drag: none;
}

#gallery-lightbox-image.gallery-image-refresh {
  animation: galleryImageReveal 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes galleryImageReveal {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   24. ACCESSIBILITY / FOCUS
========================================================= */

a:focus-visible,
button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

section.bg-white a:focus-visible,
section.bg-\[\#eeeeec\] a:focus-visible,
#contact a:focus-visible {
  outline-color: #000000;
}

/* =========================================================
   25. REVEAL ANIMATION SYSTEM

   script.js nanti boleh tambah class:
   .reveal
   .reveal-left
   .reveal-right

   kemudian JS add:
   .is-visible
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left {
  opacity: 0;

  transform: translateX(-35px);

  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
  opacity: 0;

  transform: translateX(35px);

  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;

  transform: translate(0);
}

/* stagger */

.reveal-delay-1 {
  transition-delay: 80ms;
}

.reveal-delay-2 {
  transition-delay: 160ms;
}

.reveal-delay-3 {
  transition-delay: 240ms;
}

.reveal-delay-4 {
  transition-delay: 320ms;
}

/* =========================================================
   26. LARGE DESKTOP
========================================================= */

@media (min-width: 1440px) {
  #home {
    min-height: 920px;
  }
}

/* =========================================================
   27. TABLET
========================================================= */

@media (max-width: 1023px) {
  html {
    scroll-padding-top: 95px;
  }

  #home {
    min-height: 850px;
  }

  #home > div:first-child img {
    object-position: 62% center;
  }
}

/* =========================================================
   28. MOBILE
========================================================= */

@media (max-width: 767px) {
  :root {
    --header-height: 68px;
  }

  /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

  #site-header {
    margin-top: 36px;
  }

  /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

  #home {
    min-height: 820px;
  }

  #home > div:first-child img {
    object-position: 64% center;
  }

  #home > div:first-child::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.65) 52%,
      rgba(0, 0, 0, 0.22) 100%
    );
  }

  /* -----------------------------------------------------
       FLOATING WHATSAPP
    ----------------------------------------------------- */

  a[aria-label="WhatsApp Aty Mercedes"] {
    width: 56px;
    height: 56px;
  }

  /* -----------------------------------------------------
       SOCIAL
    ----------------------------------------------------- */

  #contact a[aria-label] {
    width: 46px;
    height: 46px;
  }

  /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

  footer {
    padding-bottom: 75px;
  }
}

/* =========================================================
   29. SMALL MOBILE
========================================================= */

@media (max-width: 479px) {
  #home {
    min-height: 790px;
  }

  #home h1 {
    font-size: clamp(42px, 12vw, 50px);

    line-height: 0.98;
  }

  #home > div:first-child img {
    object-position: 66% center;
  }

  /* prevent huge section title overflow */

  h2 {
    overflow-wrap: break-word;
  }

  /* CTA full-width on smaller mobile */

  #home a,
  #contact > div > div > div > a {
    width: 100%;
  }
}

/* =========================================================
   30. EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 359px) {
  #home h1 {
    font-size: 39px;
  }

  #home p {
    font-size: 13px;
  }
}

/* =========================================================
   31. LANDSCAPE MOBILE
========================================================= */

@media (max-height: 650px) and (orientation: landscape) {
  #home {
    min-height: 700px;
  }
}

/* =========================================================
   32. TOUCH DEVICES
========================================================= */

@media (hover: none) {
  #services article:hover h3,
  #brand-new:hover img,
  #why-me article:hover > span,
  #models .model-card:hover,
  #models .model-card:hover .model-card-image img,
  #gallery .gallery-item:hover,
  #gallery .gallery-item:hover img {
    transform: none;
  }
}

/* =========================================================
   33. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;

    transform: none;
  }
}

/* =========================================================
   34. PRINT
========================================================= */

@media print {
  #site-header,
  #mobile-menu,
  #back-to-top,
  a[aria-label="WhatsApp Aty Mercedes"] {
    display: none !important;
  }

  body {
    background: #ffffff;

    color: #000000;
  }
}