/* ═══════════════════════════════════════════════
   STUDIO TRIVIMA — animations.css  v2.0
   Premium Immersive Motion System
═══════════════════════════════════════════════ */

/* ── CSS VARIABLES (JS-driven) ── */
:root {
  --scroll-pct:    0;
  --cursor-x:      50%;
  --cursor-y:      50%;
  --ambient-hue:   12;
  --ambient-alpha: 0.04;
}

/* ── NAV LOGO ── */
.nav-logo-img {
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), filter 0.4s ease;
}
.nav-logo:hover .nav-logo-img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(91,157,184,0.35));
}
.footer-logo-img { height: clamp(110px, 12vw, 160px); width: auto; object-fit: contain; margin-bottom: 14px; }

/* ══════════════════════════════════════════════
   CINEMATIC PAGE LOADER
══════════════════════════════════════════════ */
.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #FAFAF8;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  transition: opacity 0.9s cubic-bezier(0.77,0,0.175,1),
              transform 0.9s cubic-bezier(0.77,0,0.175,1);
}
.page-loader.exit {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

.loader-logo {
  width: 110px;
  filter: drop-shadow(0 0 0px rgba(200,90,90,0));
  animation: loaderBreathe 2.2s ease-in-out infinite;
}
.loader-logo img { width: 100%; }

@keyframes loaderBreathe {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 0px  rgba(91,157,184,0)); }
  50%      { transform: scale(1.05); filter: drop-shadow(0 6px 20px rgba(91,157,184,0.3)); }
}

/* Glassmorphism progress bar */
.loader-bar {
  position: relative;
  width: 220px; height: 3px;
  background: rgba(200,90,90,0.12);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.loader-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #C85A5A 0%, #5B9DB8 55%, #C85A5A 100%);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: gradientShift 1.8s linear infinite;
  transition: width 0.06s linear;
  box-shadow: 0 0 10px rgba(200,90,90,0.5);
}
@keyframes gradientShift {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.loader-fill::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: loadShimmer 0.8s ease-in-out infinite;
}
@keyframes loadShimmer { 0%,100%{opacity:0} 50%{opacity:1} }

.loader-pct {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; letter-spacing: 0.18em;
  color: #AAAAAA;
  font-weight: 500;
}

/* ══════════════════════════════════════════════
   CUSTOM CURSOR — Dual Layer + Physics
══════════════════════════════════════════════ */
@media (pointer: fine) { * { cursor: none !important; } }

.cursor-dot {
  position: fixed; z-index: 9998;
  width: 5px; height: 5px;
  background: #C85A5A;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width 0.25s ease, height 0.25s ease,
              background 0.25s ease, opacity 0.25s ease;
  will-change: left, top;
}
.cursor-ring {
  position: fixed; z-index: 9997;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(200,90,90,0.35);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  will-change: left, top, width, height;
  transition: width 0.65s cubic-bezier(0.25,0.46,0.45,0.94),
              height 0.65s cubic-bezier(0.25,0.46,0.45,0.94),
              border-color 0.5s ease,
              background 0.5s ease,
              border-radius 0.5s ease,
              opacity 0.4s ease;
}

/* Context states */
.cursor-ring.on-link   { width:48px;  height:48px;  background:rgba(200,90,90,0.05);  border-color:rgba(200,90,90,0.6); }
.cursor-ring.on-btn    { width:64px;  height:26px;  background:rgba(200,90,90,0.08);  border-color:rgba(200,90,90,0.5); border-radius:50px; }
.cursor-ring.clicking  { width:26px;  height:26px;  background:rgba(200,90,90,0.15); }
.cursor-dot.on-btn     { opacity: 0; }

@media (pointer: coarse) { .cursor-dot,.cursor-ring { display:none!important; } * { cursor:auto!important; } }

/* ══════════════════════════════════════════════
   SCROLL PROGRESS
══════════════════════════════════════════════ */
.scroll-progress {
  position: fixed; top:0; left:0; z-index:1001;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, #C85A5A, #5B9DB8 60%, #C85A5A);
  background-size: 200% 100%;
  animation: gradientShift 3s linear infinite;
  box-shadow: 0 0 8px rgba(200,90,90,0.4);
  border-radius: 0 2px 2px 0;
  transition: width 0.12s linear;
}

/* ══════════════════════════════════════════════
   AMBIENT BACKGROUND
══════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(
    ellipse 80% 60% at var(--cursor-x) var(--cursor-y),
    rgba(200,90,90, var(--ambient-alpha)) 0%,
    transparent 70%
  );
  transition: opacity 1.2s ease;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   KINETIC TYPOGRAPHY
══════════════════════════════════════════════ */
.char-wrap { display:inline-block; overflow:hidden; vertical-align:bottom; }
.char {
  display: inline-block;
  will-change: transform, opacity, filter;
  transition:
    transform 0.9s cubic-bezier(0.16,1,0.3,1),
    opacity   0.6s ease,
    filter    0.7s ease;
}
.char.kinetic-hidden {
  opacity: 0;
  filter: blur(4px);
  /* Initial drift set by JS per-char */
}
.char.kinetic-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translate(0,0) rotate(0deg) !important;
}

/* ══════════════════════════════════════════════
   HERO CANVAS
══════════════════════════════════════════════ */
#heroCanvas {
  position: absolute; top:0; left:0;
  width:100%; height:100%;
  pointer-events: none; z-index: 0;
}
.hero { position: relative; overflow: hidden; }
.hero-content,.hero-image-wrap { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════
   PROJECT CARDS — Physical 3D Objects
══════════════════════════════════════════════ */
.projects-grid { perspective: 1200px; }
.project-card {
  opacity: 1;
  transform: none;
  transform-style: preserve-3d;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s ease;
  will-change: transform;
}
.project-card.visible { opacity: 1; transform: translateY(0); }
.project-card.inactive { filter: brightness(0.85) saturate(0.7); transform: scale(0.97); }
.project-card .project-img-wrap img {
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              filter 0.4s ease;
}
.project-card:hover .project-img-wrap img {
  transform: scale(1.07);
  filter: brightness(1.05) saturate(1.1);
}

/* ══════════════════════════════════════════════
   ELASTIC BUTTONS
══════════════════════════════════════════════ */
.btn-primary, .btn-quote {
  will-change: transform, box-shadow;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
  position: relative; overflow: hidden;
}
/* Ripple on click */
.btn-primary .btn-ripple, .btn-quote .btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  pointer-events: none;
  animation: rippleOut 0.55s ease-out forwards;
}
@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}
/* Light sweep */
.btn-primary::before {
  content: '';
  position: absolute; top:0; left:-100%; bottom:0;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn-primary:hover::before { left: 140%; }

/* ══════════════════════════════════════════════
   MARQUEE — Wave + Speed Variation
══════════════════════════════════════════════ */
.marquee-track {
  overflow: hidden;
  background: #1C1C1C;
  padding: 14px 0;
  white-space: nowrap;
  position: relative;
}
.marquee-track::before,.marquee-track::after {
  content: '';
  position: absolute; top:0; bottom:0; z-index:2;
  width: 80px;
  pointer-events: none;
}
.marquee-track::before { left:0;  background:linear-gradient(to right, #1C1C1C, transparent); }
.marquee-track::after  { right:0; background:linear-gradient(to left,  #1C1C1C, transparent); }

.marquee-inner { display: inline-flex; gap: 0; }
.marquee-content {
  display: inline-flex; align-items: center; gap: 44px;
  animation: marqueeRun 28s linear infinite;
  will-change: transform;
}
.marquee-track:hover .marquee-content { animation-play-state: paused; }

@keyframes marqueeRun {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  font-family: 'Playfair Display', serif;
  font-size: 13px; font-style: italic;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em; flex-shrink: 0;
  transition: color 0.3s ease;
}
.marquee-item:hover { color: rgba(255,255,255,0.85); }
.marquee-dot { color: #C85A5A; font-size: 18px; flex-shrink: 0; line-height: 1; }

/* ══════════════════════════════════════════════
   STAGGER REVEAL SYSTEM — Blur + Position + Opacity
══════════════════════════════════════════════ */
.reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity  0.8s cubic-bezier(0.16,1,0.3,1),
    transform 0.8s cubic-bezier(0.16,1,0.3,1),
    filter   0.7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); filter:blur(0); }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* ══════════════════════════════════════════════
   STEP CARDS
══════════════════════════════════════════════ */
.step-card {
  position: relative; overflow: hidden;
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.step-card.visible { opacity:1; transform:translateY(0); }
.step-card::after {
  content: '';
  position: absolute; bottom:0; left:0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #C85A5A, #5B9DB8);
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.step-card:hover::after { width:100%; }

/* ══════════════════════════════════════════════
   ASSET CARDS
══════════════════════════════════════════════ */
.asset-cat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 22px 14px 18px;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(30px) scale(0.96);
  transition: opacity 0.7s ease,
              transform 0.7s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease;
  cursor: pointer; position: relative; overflow: hidden;
}
.asset-cat-card.visible { opacity:1; transform:translateY(0) scale(1); }
.asset-cat-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-md); }
.asset-cat-card::before {
  content: '';
  position: absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(200,90,90,0.06), transparent 65%);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.asset-cat-card:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════
   SECTION LABEL UNDERLINE
══════════════════════════════════════════════ */
.section-label { position:relative; display:inline-flex; }
.section-label::after {
  content:'';
  position:absolute; bottom:-4px; left:18px;
  width:0; height:1px;
  background: linear-gradient(90deg, #5B9DB8, transparent);
  transition: width 0.7s cubic-bezier(0.16,1,0.3,1);
}
.section-label.line-visible::after { width: calc(100% - 18px); }

/* ══════════════════════════════════════════════
   STAT NUMBERS — gradient text
══════════════════════════════════════════════ */
.stat-num {
  background: linear-gradient(135deg, #1C1C1C 50%, #C85A5A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════
   SECTION SCROLL TRANSITIONS — blur depth
══════════════════════════════════════════════ */
.section-entering {
  animation: sectionIn 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes sectionIn {
  from { opacity:1; filter:blur(0); transform:none; }
  to   { opacity:1; filter:blur(0); transform:none; }
}

/* ══════════════════════════════════════════════
   TEXT LINK HOVER — underline from cursor
══════════════════════════════════════════════ */
.nav-link, .project-link, .view-all-link, .footer-links a {
  position: relative;
}
.nav-link::after, .project-link::after, .view-all-link::after, .footer-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
  transform-origin: left;
}
.nav-link:hover::after,
.project-link:hover::after,
.view-all-link:hover::after,
.footer-links a:hover::after { width: 100%; }