/* animations.css — EHKC Website 3D & Parallax Enhancement */

/* ── HANDLEE FONT — applied to italic heading phrases only ── */
@font-face {
  font-family: "Handlee";
  src: url("Handlee-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Convenience variable (use --handlee anywhere you need it) */
:root {
  --handlee: "Handlee", cursive;
}

/* ── Apply Handlee to selected orange / teal coloured text elements ── */

/* Italic <em> inside headings — the shimmer-gradient orange phrases */
h1 em, h2 em, h3 em, h4 em,
h2.section-h em,
.sec-h em,
.section-h em,
.hero h1 em,
.pb-quote em,
.cta-band h2 em {
  font-family: var(--handlee) !important;
  font-style: italic;
}

/* Parallax-break quote orange span */
.pb-quote span {
  font-family: var(--handlee) !important;
}


/* ── MODERN GLASSMORPHISM ENHANCEMENTS ── */

/* Frosted-glass card base upgrade */
.svc-card,
.why-card,
.story-card,
.evt-card {
  backdrop-filter: blur(2px) saturate(140%);
  -webkit-backdrop-filter: blur(2px) saturate(140%);
}

/* Modern border-glow on hover via box-shadow ring */
.svc-card:hover,
.why-card:hover,
.story-card:hover,
.evt-card:hover {
  box-shadow:
    0 0 0 1px rgba(196,122,74,.25),
    0 20px 60px rgba(10,40,45,.14),
    0 8px 24px rgba(196,122,74,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* ── CURSOR GLOW (fine pointer / desktop only) ── */
@media (pointer: fine) {
  #cursor-glow {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9996;
    background: radial-gradient(
      circle at center,
      rgba(196,122,74,.07) 0%,
      rgba(218,165,32,.04) 35%,
      transparent 70%
    );
    transform: translate(-50%, -50%);
    transition: opacity .4s ease;
    opacity: 0;
  }
  body:hover #cursor-glow {
    opacity: 1;
  }
}

/* ── MODERN BUTTON PULSE ── */
@keyframes btnPulseOrange {
  0%,100% { box-shadow: 0 6px 18px rgba(196,122,74,.32), 0 0 0 0 rgba(196,122,74,.0); }
  50%      { box-shadow: 0 6px 18px rgba(196,122,74,.32), 0 0 0 8px rgba(196,122,74,.0); }
}

/* ── STAGGER CHILDREN in depth-section (first 6 direct children) ── */
.depth-section > *:nth-child(1) { transition-delay: .05s; }
.depth-section > *:nth-child(2) { transition-delay: .12s; }
.depth-section > *:nth-child(3) { transition-delay: .19s; }
.depth-section > *:nth-child(4) { transition-delay: .26s; }
.depth-section > *:nth-child(5) { transition-delay: .33s; }
.depth-section > *:nth-child(6) { transition-delay: .40s; }

/* ── MODERN SMOOTH SCROLL INDICATOR ── */
@keyframes scrollPulse {
  0%,100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ── FLOATING PARTICLE MODERN ── */
@keyframes particleDrift {
  0%,100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: .6; }
  33%      { transform: translateY(-22px) translateX(14px) rotate(6deg); opacity: .9; }
  66%      { transform: translateY(-10px) translateX(-10px) rotate(-4deg); opacity: .7; }
}

/* ── PAGE LOAD FADE-IN ── */
html {
  opacity: 0;
  animation: pageLoadIn 0.8s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes pageLoadIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── LOADING BAR ── */
#loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #c47a4a 0%, #daa520 50%, #c47a4a 100%);
  background-size: 200% 100%;
  width: 0%;
  z-index: 9999;
  box-shadow: 0 0 12px rgba(196,122,74,.6), 0 0 24px rgba(218,165,32,.3);
  animation: loadingGlow 1.2s ease-in-out infinite;
}
#loading-bar.complete {
  animation: loadingComplete .6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes loadingGlow {
  0%,100% { background-position: 0% 0%; opacity: 1; }
  50%      { background-position: 100% 0%; opacity: .9; }
}
@keyframes loadingComplete {
  0%   { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

/* ── SCROLL PROGRESS BAR ── */
#scroll-progress {
  position: fixed;
  top: 3px;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #c47a4a, #daa520, #c47a4a);
  z-index: 9998;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(196,122,74,.5);
  transition: width .15s ease-out, opacity .3s ease;
}

/* ── PAGE SHINE EFFECT ── */
#page-shine {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9997;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}

/* ── Perspective containers for 3D card tilt ── */
.svc-grid, .why-grid, .story-grid, .news-grid, .evt-grid {
  perspective: 1400px;
}

/* ── Floating orb keyframe (injected particles use this) ── */
@keyframes orbFloat {
  0%,100% { transform: translateY(0) translateX(0) scale(1); }
  20%      { transform: translateY(-32px) translateX(22px) scale(1.05); }
  50%      { transform: translateY(-16px) translateX(-14px) scale(0.96); }
  75%      { transform: translateY(-44px) translateX(10px) scale(1.03); }
}

/* ── Depth reveal — 3D rotateX flip as sections enter viewport ── */
.depth-section {
  opacity: 0.80;
  transform: perspective(2000px) rotateX(5deg) translateY(26px) scale(0.985);
  transform-origin: center 100%;
  transition: opacity 0.9s cubic-bezier(.2,.7,.3,1),
              transform 0.9s cubic-bezier(.2,.7,.3,1);
}
.depth-section.depth-in {
  opacity: 1;
  transform: none;
}

/* ── Hero card mouse-track tilt support ── */
.hero-card {
  transform-style: preserve-3d;
}

/* ── Shimmer sweep on hovered cards ── */
.svc-card, .why-card, .story-card {
  overflow: hidden;
}
.svc-card .card-shine,
.why-card .card-shine,
.story-card .card-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.08) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.svc-card:hover .card-shine,
.why-card:hover .card-shine,
.story-card:hover .card-shine {
  opacity: 1;
  animation: cardShimmer 0.6s ease forwards;
}
@keyframes cardShimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -100% 50%; }
}

/* ── Parallax hero shapes enhanced ── */
.hero-shape {
  transition: none;
}

/* ── Animated gradient shimmer for italic section highlights ── */
@keyframes textGradientShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

h2.section-h em, .sec-h em {
  color: #c47a4a !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  animation: none !important;
  text-shadow: none !important;
  font-style: italic;
  display: inline-block;
  overflow: visible;
  padding-bottom: .12em;
  line-height: 1.35;
}

/* ── Eyebrow decorative line: draw in when scrolled into view ── */
.eyebrow.aos::before {
  width: 0;
  transition: width 0.55s cubic-bezier(.2,.7,.3,1) 0.45s;
}
.eyebrow.aos.in::before {
  width: 24px;
}

/* ── Pic-photo 3D perspective hover ── */
.pic-photo {
  transition: transform 0.65s cubic-bezier(.2,.7,.3,1), box-shadow 0.65s ease;
}
.pic-photo:hover {
  transform: perspective(900px) rotateY(-6deg) translateZ(14px) scale(1.02);
  box-shadow: 24px 24px 64px rgba(6,47,49,.32), -6px -6px 24px rgba(196,122,74,.12);
}

/* ── Gallery slideshow: subtle 3D entrance via depth override ── */
.gal-track-wrap.aos {
  transform: perspective(1100px) translateY(28px) rotateX(4deg);
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(.2,.7,.3,1), transform 0.85s cubic-bezier(.2,.7,.3,1);
}
.gal-track-wrap.aos.in {
  opacity: 1;
  transform: none;
}


/* ── Pic-band inner element reveal: override default aos Y-shift for horizontal ── */
.pic-photo.aos-l {
  transition: opacity 0.85s cubic-bezier(.2,.7,.3,1), transform 0.85s cubic-bezier(.2,.7,.3,1);
}

/* ── 3D preserve-3d for pic-card & hero-card (no overflow:hidden conflict) ── */
.pic-card, .about-card {
  transform-style: preserve-3d;
}

/* ── Enhanced 3D hover shadow depth — JS overrides per-card, CSS is fallback ── */
@media (prefers-reduced-motion: no-preference) {
  .svc-card:hover {
    box-shadow:
      0 22px 56px rgba(10,40,45,.12),
      0 8px 20px rgba(0,0,0,.06),
      0 2px 6px rgba(10,40,45,.04),
      inset 0 1px 0 rgba(255,255,255,.7);
  }
  .why-card:hover {
    box-shadow:
      0 18px 44px rgba(10,40,45,.14),
      0 6px 16px rgba(196,122,74,.12),
      inset 0 1px 0 rgba(255,255,255,.7);
  }
  .story-card:hover {
    box-shadow:
      0 20px 52px rgba(10,40,45,.15),
      0 7px 18px rgba(196,122,74,.11),
      inset 0 1px 0 rgba(255,255,255,.7);
  }
}


/* ── 3D stat icon on hover ── */
@media (prefers-reduced-motion: no-preference) {
  .stat:hover .stat-ic {
    transform: scale(1.15) rotateY(20deg) rotateX(-8deg);
    transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
  }
}


/* ── Reduced-motion guard ── */
@media (prefers-reduced-motion: reduce) {
  .depth-section,
  .depth-section.depth-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  @keyframes orbFloat   { 0%,100% { transform: none; } }
  @keyframes cardShimmer{ 0%,100% { background-position: 0 50%; } }
  #cursor-glow { display: none !important; }
}