/* ============================================================
   TRUNG NGHIA - PREMIUM MOTION & INTERACTION LAYER
   ------------------------------------------------------------
   Site-wide animation system. Loaded after css/style.css so it
   can refine, but never break, the existing design.

   Principles:
   - Animate only transform and opacity (GPU-friendly).
   - Hidden initial states are added by JavaScript (js/effects.js)
     through the .fx-init class, so content is never lost when
     scripts fail or are disabled (progressive enhancement).
   - All effects respect prefers-reduced-motion.
   - Touch devices get lighter, non-hover-dependent motion.
   ============================================================ */

:root{
  --fx-ease: cubic-bezier(.22,.61,.36,1);
  --fx-ease-out: cubic-bezier(.16,1,.3,1);
  --fx-dur: .8s;
  --fx-dist: 26px;
  --fx-gold: #c9a96a;
}

/* ------------------------------------------------------------
   1. SCROLL REVEAL (fade-in + upward)
   js/effects.js adds .fx-init (hidden state) then .fx-in
   (visible state) via IntersectionObserver.
   ------------------------------------------------------------ */
.fx-init{
  opacity:0;
  transform:translate3d(0,var(--fx-dist),0);
  will-change:opacity,transform;
}
.fx-init.fx-in{
  opacity:1;
  transform:translate3d(0,0,0);
  transition:
    opacity var(--fx-dur) var(--fx-ease-out) var(--fx-delay,0ms),
    transform var(--fx-dur) var(--fx-ease-out) var(--fx-delay,0ms);
  will-change:auto;
}
/* Horizontal variant used by alternating editorial rows */
.fx-init.fx-left{ transform:translate3d(calc(-1 * var(--fx-dist)),0,0); }
.fx-init.fx-right{ transform:translate3d(var(--fx-dist),0,0); }
.fx-init.fx-left.fx-in,
.fx-init.fx-right.fx-in{
  transform:translate3d(0,0,0);
}
/* Soft variant: no translation, opacity only */
.fx-init.fx-fade{ transform:none; }
/* Scale-in variant for badges / compact blocks */
.fx-init.fx-pop{ transform:scale(.94); }
.fx-init.fx-pop.fx-in{ transform:scale(1); }

/* ------------------------------------------------------------
   2. IMAGE REVEAL
   The .fx-media wrapper fades in while the image inside settles
   from a slight scale. Elegant, never blurry or distorted.
   ------------------------------------------------------------ */
.fx-media{ overflow:hidden; }
.fx-media.fx-init{ opacity:0; }
.fx-media.fx-init img{
  transform:scale(1.07);
  will-change:transform,opacity;
}
.fx-media.fx-init.fx-in{
  opacity:1;
  transition:opacity 1s var(--fx-ease-out) var(--fx-delay,0ms);
}
.fx-media.fx-init.fx-in img{
  transform:scale(1);
  transition:transform 1.4s var(--fx-ease-out) var(--fx-delay,0ms);
  will-change:auto;
}

/* ------------------------------------------------------------
   3. HEADER SCROLL BEHAVIOR
   .is-scrolled is toggled by js/effects.js after 12px of scroll.
   ------------------------------------------------------------ */
.header{
  transition:box-shadow .45s var(--fx-ease),background-color .45s var(--fx-ease);
}
.header.is-scrolled{
  background:rgba(9,10,12,.96);
  box-shadow:0 4px 26px rgba(0,0,0,.5);
}
/* Brand + hotline settle smoothly with the header */
.header .brand,
.header .hotline{
  transition:color .3s var(--fx-ease),opacity .3s var(--fx-ease);
}

/* ------------------------------------------------------------
   4. NAVIGATION
   - Subtle underline sweep on top-level items.
   - Animated dropdown entrance (transform + opacity only).
   ------------------------------------------------------------ */
.menu > li > a{ position:relative; }
.menu > li > a::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:18px;
  height:2px;
  background:var(--fx-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--fx-ease);
}
.menu > li > a:hover::after{ transform:scaleX(1); }

.dropdown{
  /* Overrides the abrupt display:none -> display:block switch
     with an entrance animation (display switch itself is kept
     for maximum compatibility). */
  transform:translate3d(0,-8px,0);
  opacity:0;
  border-top:2px solid var(--fx-gold);
}
.menu li:hover > .dropdown{
  transform:translate3d(0,0,0);
  opacity:1;
  animation:fx-drop-in .32s var(--fx-ease);
}
@keyframes fx-drop-in{
  from{ transform:translate3d(0,-8px,0); opacity:0; }
  to{ transform:translate3d(0,0,0); opacity:1; }
}
.dropdown a{
  transition:background-color .25s var(--fx-ease),color .25s var(--fx-ease),padding-left .25s var(--fx-ease);
}
.dropdown a:hover{
  background:#181a1d;
  color:var(--fx-gold);
  padding-left:22px;
}

/* ------------------------------------------------------------
   5. MOBILE MENU
   Entrance animation kept purely in CSS, triggered by .open,
   so it works identically even if scripts are slow.
   ------------------------------------------------------------ */
.mobile-menu.open{ animation:fx-menu-in .38s var(--fx-ease) both; }
@keyframes fx-menu-in{
  from{ transform:translate3d(0,-12px,0); opacity:0; }
  to{ transform:translate3d(0,0,0); opacity:1; }
}
.mobile-menu a{
  transition:background-color .25s var(--fx-ease),padding-left .25s var(--fx-ease);
}
.mobile-menu a:active{
  background:#1c1e21;
}
.mobile-submenu{
  overflow:hidden;
}
.mobile-menu-group .mobile-submenu{
  max-height:0;
  opacity:0;
  transition:max-height .4s var(--fx-ease),opacity .3s var(--fx-ease);
}
.mobile-menu-group.open .mobile-submenu{
  max-height:240px;
  opacity:1;
}
.mobile-arrow{
  display:inline-block;
  transition:transform .35s var(--fx-ease);
}
.mobile-menu-group.open .mobile-arrow{
  transform:rotate(180deg);
}

/* ------------------------------------------------------------
   6. BUTTONS - consistent premium feedback everywhere
   ------------------------------------------------------------ */
.btn,
.hotline,
.filter,
.quote-filter,
.tn-cta-links a,
.design-page-nav a,
.back-hub-link{
  transition:
    background-color .3s var(--fx-ease),
    color .3s var(--fx-ease),
    border-color .3s var(--fx-ease),
    box-shadow .3s var(--fx-ease),
    transform .3s var(--fx-ease);
}
.btn:hover,
.tn-cta-links a:hover{
  box-shadow:0 10px 24px rgba(201,169,106,.28);
}
/* Subtle press feedback - never aggressive */
.btn:active,
.hotline:active,
.filter:active,
.quote-filter:active,
.tn-cta-links a:active,
.mobile-bar a:active{
  transform:scale(.97);
}

/* ------------------------------------------------------------
   7. IMAGE HOVER - gentle depth, unified timing
   ------------------------------------------------------------ */
.project img,
.card-bg,
.product-img,
.ed-media img,
.ed-photo img{
  transition:transform .9s var(--fx-ease),filter .5s var(--fx-ease);
  will-change:auto;
}
.project:hover img,
.ed-photo:hover img{
  transform:scale(1.04);
  filter:brightness(1.06);
}
.card:hover .card-bg{
  transform:scale(1.05);
  filter:brightness(1.03);
}
/* Soft darkening on gallery tiles so captions stay readable */
.project::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 55%,rgba(0,0,0,.55));
  opacity:.6;
  transition:opacity .5s var(--fx-ease);
  pointer-events:none;
}
.project:hover::after{ opacity:.85; }

/* ------------------------------------------------------------
   8. TOUCH / MOBILE OPTIMIZATION
   - Shorter distances and durations, no hover-only effects.
   ------------------------------------------------------------ */
@media (hover:none) and (pointer:coarse){
  :root{
    --fx-dur:.6s;
    --fx-dist:16px;
  }
  /* Never rely on hover for information on touch screens */
  .menu > li > a::after{ display:none; }
  .project::after{ opacity:.7; }
}

@media (max-width:760px){
  .fx-init{ transform:translate3d(0,var(--fx-dist),0); }
}

/* ------------------------------------------------------------
   9. REDUCED MOTION - complete opt-out
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .fx-init{
    opacity:1 !important;
    transform:none !important;
  }
  .fx-media.fx-init img{ transform:none !important; }
}