/*
Theme Name: Aislagreen Theme
Theme URI: http://aislagreen.cl
Author: Atelier Busco / Daniel Fuentes
Author URI: https://atelierbusco.com
Description: Theme personalizado de WordPress para Aislagreen (Cerámica Santiago & DVP) con WooCommerce en modo cotización, Tailwind CSS CDN y cubicador de superficie automatizado.
Version: 1.0.0
Text Domain: aislagreen
*/

/* -------------------------------------------------------------------------- */
/* Fuentes Locales del Cliente (@font-face)                                  */
/* -------------------------------------------------------------------------- */

/* Mulish (Headings) */
@font-face {
  font-family: 'Mulish-Local';
  src: url('assets/fonts/Mulish-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish-Local';
  src: url('assets/fonts/Mulish-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Google Sans */
@font-face {
  font-family: 'GoogleSans-Local';
  src: url('assets/fonts/GoogleSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter (Body / UI) */
@font-face {
  font-family: 'Inter-Local';
  src: url('assets/fonts/Inter-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Local';
  src: url('assets/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Local';
  src: url('assets/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Local';
  src: url('assets/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------- */
/* Smooth Scroll Reveal & Luxury Micro-Animations                             */
/* -------------------------------------------------------------------------- */

/* Base state for scroll reveal: smooth translation + soft blur + zero opacity */
.reveal-on-scroll {
  opacity: 0 !important;
  transform: translateY(48px) !important;
  filter: blur(6px) !important;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform, filter;
}

/* Revealed state: full focus, upright position, total opacity */
.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0px) !important;
}

/* Hero Load Choreography */
@keyframes heroGlideUp {
  0% {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

.hero-anim-badge {
  animation: heroGlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-anim-title {
  animation: heroGlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero-anim-desc {
  animation: heroGlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.hero-anim-cta {
  animation: heroGlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.hero-anim-bar {
  animation: heroGlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

/* Luxury card hover depth & lift */
.card-depth-interactive {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-depth-interactive:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
}

/* Fallback for users preferring reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .hero-anim-badge,
  .hero-anim-title,
  .hero-anim-desc,
  .hero-anim-cta,
  .hero-anim-bar {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}