/* ============================================================
   ADAMAR — ANIMATION LIBRARY
   ============================================================
   How to use: add one of these class names to any element's
   class="" attribute in your HTML. That's it — no JS needed
   for most of these. A few (marked "scroll-triggered") need
   the small script already wired up in main.js, which is
   already loaded on every page.

   Every animation respects prefers-reduced-motion automatically
   (see the bottom of this file) — you don't need to do anything
   extra for accessibility.
   ============================================================ */

/* ---------- 1. ON-LOAD REVEALS (play once, as soon as the page/section appears) ---------- */

@keyframes fx-fade-in{ from{opacity:0} to{opacity:1} }
.fx-fade-in{ animation:fx-fade-in .8s ease-out forwards; }

@keyframes fx-rise{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
.fx-rise{ opacity:0; animation:fx-rise .7s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-drop{ from{opacity:0; transform:translateY(-24px);} to{opacity:1; transform:translateY(0);} }
.fx-drop{ opacity:0; animation:fx-drop .7s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-slide-left{ from{opacity:0; transform:translateX(40px);} to{opacity:1; transform:translateX(0);} }
.fx-slide-left{ opacity:0; animation:fx-slide-left .7s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-slide-right{ from{opacity:0; transform:translateX(-40px);} to{opacity:1; transform:translateX(0);} }
.fx-slide-right{ opacity:0; animation:fx-slide-right .7s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-zoom-in{ from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);} }
.fx-zoom-in{ opacity:0; animation:fx-zoom-in .6s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-zoom-out{ from{opacity:0; transform:scale(1.15);} to{opacity:1; transform:scale(1);} }
.fx-zoom-out{ opacity:0; animation:fx-zoom-out .7s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-rotate-in{ from{opacity:0; transform:rotate(-8deg) scale(.9);} to{opacity:1; transform:rotate(0) scale(1);} }
.fx-rotate-in{ opacity:0; animation:fx-rotate-in .7s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-flip-up{ from{opacity:0; transform:rotateX(70deg); transform-origin:bottom;} to{opacity:1; transform:rotateX(0);} }
.fx-flip-up{ opacity:0; animation:fx-flip-up .7s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-mask-reveal{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
.fx-mask-reveal{ animation:fx-mask-reveal .9s cubic-bezier(.22,.9,.32,1) forwards; }

@keyframes fx-line-up{ from{transform:translateY(100%);} to{transform:translateY(0);} }
.fx-line-up-wrap{ display:block; overflow:hidden; }
.fx-line-up{ display:block; transform:translateY(100%); animation:fx-line-up .65s cubic-bezier(.22,.9,.32,1) forwards; }

/* Stagger helper — put fx-stagger on a parent, fx-rise (or similar) on each child.
   Children animate one after another instead of all at once. */
.fx-stagger > *:nth-child(1){ animation-delay: 0.00s; }
.fx-stagger > *:nth-child(2){ animation-delay: 0.10s; }
.fx-stagger > *:nth-child(3){ animation-delay: 0.20s; }
.fx-stagger > *:nth-child(4){ animation-delay: 0.30s; }
.fx-stagger > *:nth-child(5){ animation-delay: 0.40s; }
.fx-stagger > *:nth-child(6){ animation-delay: 0.50s; }
.fx-stagger > *:nth-child(7){ animation-delay: 0.60s; }

/* Delay helpers — stack with any fx- animation above, e.g. class="fx-rise fx-delay-2" */
.fx-delay-1{ animation-delay:.12s !important; }
.fx-delay-2{ animation-delay:.24s !important; }
.fx-delay-3{ animation-delay:.36s !important; }
.fx-delay-4{ animation-delay:.48s !important; }
.fx-delay-5{ animation-delay:.6s !important; }

/* ---------- 2. SCROLL-TRIGGERED REVEALS ---------- */
/* Add class "on-scroll" PLUS one fx- animation class, e.g.:
   class="on-scroll fx-rise"
   The element stays invisible until it scrolls into view, then
   plays the animation once. Powered by main.js (IntersectionObserver). */

.on-scroll{ opacity:0; }
.on-scroll.in-view.fx-fade-in{ animation:fx-fade-in .8s ease-out forwards; }
.on-scroll.in-view.fx-rise{ animation:fx-rise .7s cubic-bezier(.22,.9,.32,1) forwards; }
.on-scroll.in-view.fx-drop{ animation:fx-drop .7s cubic-bezier(.22,.9,.32,1) forwards; }
.on-scroll.in-view.fx-slide-left{ animation:fx-slide-left .7s cubic-bezier(.22,.9,.32,1) forwards; }
.on-scroll.in-view.fx-slide-right{ animation:fx-slide-right .7s cubic-bezier(.22,.9,.32,1) forwards; }
.on-scroll.in-view.fx-zoom-in{ animation:fx-zoom-in .6s cubic-bezier(.22,.9,.32,1) forwards; }
.on-scroll.in-view.fx-zoom-out{ animation:fx-zoom-out .7s cubic-bezier(.22,.9,.32,1) forwards; }
.on-scroll.in-view.fx-rotate-in{ animation:fx-rotate-in .7s cubic-bezier(.22,.9,.32,1) forwards; }
.on-scroll.in-view.fx-flip-up{ animation:fx-flip-up .7s cubic-bezier(.22,.9,.32,1) forwards; }
.on-scroll.in-view.fx-mask-reveal{ animation:fx-mask-reveal .9s cubic-bezier(.22,.9,.32,1) forwards; }

/* Count-up numbers — add class "count-up" and data-count="123" to a <span>.
   main.js animates 0 -> the number when it scrolls into view. */
.count-up{ display:inline-block; }

/* ---------- 3. HOVER EFFECTS (for cards, buttons, images, links) ---------- */

.hover-lift{ transition:transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,0.35); }

.hover-grow{ transition:transform .25s ease; }
.hover-grow:hover{ transform:scale(1.035); }

.hover-tilt{ transition:transform .3s ease; }
.hover-tilt:hover{ transform:perspective(600px) rotateX(3deg) rotateY(-3deg); }

.hover-glow{ transition:box-shadow .3s ease, border-color .3s ease; }
.hover-glow:hover{ box-shadow:0 0 0 1px var(--brass, #C9963D), 0 0 26px rgba(201,150,61,0.35); }

.hover-underline{ position:relative; text-decoration:none; }
.hover-underline::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--brass-bright, #E0AC55); transition:width .25s ease;
}
.hover-underline:hover::after{ width:100%; }

.hover-zoom-img{ overflow:hidden; display:block; }
.hover-zoom-img img, .hover-zoom-img video{ transition:transform .5s ease; }
.hover-zoom-img:hover img, .hover-zoom-img:hover video{ transform:scale(1.08); }

.hover-invert{ transition:filter .25s ease; }
.hover-invert:hover{ filter:brightness(1.15); }

.hover-shine{ position:relative; overflow:hidden; }
.hover-shine::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.18), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.hover-shine:hover::before{ left:120%; }

/* ---------- 4. CONTINUOUS / AMBIENT ANIMATIONS (loop forever, good for icons & accents) ---------- */

@keyframes fx-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.fx-float{ animation:fx-float 3.2s ease-in-out infinite; }

@keyframes fx-pulse{ 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.06); opacity:.85;} }
.fx-pulse{ animation:fx-pulse 2.4s ease-in-out infinite; }

@keyframes fx-spin-slow{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
.fx-spin-slow{ animation:fx-spin-slow 12s linear infinite; }

@keyframes fx-wheel-spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
.fx-wheel-spin{ animation:fx-wheel-spin 2.5s linear infinite; transform-origin:center; }

@keyframes fx-drift{ 0%{transform:translateX(0);} 50%{transform:translateX(14px);} 100%{transform:translateX(0);} }
.fx-drift{ animation:fx-drift 4s ease-in-out infinite; }

@keyframes fx-flicker{ 0%,100%{opacity:1;} 45%{opacity:1;} 47%{opacity:.4;} 49%{opacity:1;} 51%{opacity:.6;} 53%{opacity:1;} }
.fx-flicker{ animation:fx-flicker 5s linear infinite; }

@keyframes fx-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.fx-marquee-track{ display:flex; width:max-content; animation:fx-marquee 18s linear infinite; }

/* ---------- 5. PARALLAX (scroll-linked, needs main.js) ---------- */
/* Add class "parallax" plus data-speed="0.3" (0 = still, 1 = normal scroll speed). */
.parallax{ will-change:transform; }

/* ---------- 6. LIGHTBOX / ZOOM (click any photo to see it full-size) ---------- */
/* Add class "zoomable" to any <img>. Clicking it opens a full-screen,
   high-resolution overlay so people can actually see product detail.
   Powered by main.js — no setup needed beyond the class. */
.zoomable{ cursor:zoom-in; }
.gallery-tile, .color-display, .model-hero-visual{ position:relative; }
.gallery-tile::after, .color-display::after, .model-hero-visual::after{
  content:'⤢';
  position:absolute; top:10px; right:10px;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(0,0,0,0.5);
  color:#ECE8DF;
  font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.2s ease;
  pointer-events:none;
  z-index:2;
}
.gallery-tile:hover::after, .color-display:hover::after, .model-hero-visual:hover::after{ opacity:1; }

.lightbox-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,10,11,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  opacity:0; pointer-events:none;
  transition:opacity 0.8s cubic-bezier(.65,0,.35,1);
}
.lightbox-overlay.is-open{ opacity:1; pointer-events:auto; }
.lightbox-overlay img{
  max-width:92vw; max-height:88vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  cursor:zoom-out;
}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  color:#ECE8DF;
  font-size:1.4rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.16); }
.lightbox-hint{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  font-size:0.8rem; color:rgba(255,255,255,0.5);
}

/* ---------- Respect people who prefer less motion ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-fade-in,.fx-rise,.fx-drop,.fx-slide-left,.fx-slide-right,.fx-zoom-in,.fx-zoom-out,
  .fx-rotate-in,.fx-flip-up,.fx-mask-reveal,.fx-line-up,.fx-float,.fx-pulse,.fx-spin-slow,
  .fx-wheel-spin,.fx-drift,.fx-flicker,.fx-marquee-track,.on-scroll{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}