/* ─── gryffe-care · subtle ambient animation layer ─────────────────────────
   Loaded as a separate stylesheet so the brand prototype files stay untouched.
   Pairs with animations.js (which handles scroll-reveal observers).
   Respects prefers-reduced-motion. ───────────────────────────────────────── */

:root {
  --gc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes gc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gc-scale-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes gc-nav-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gc-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}
@keyframes gc-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-1.5%, 1.5%); }
}
@keyframes gc-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes gc-shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: .82; }
}

/* ─── Entrance animations (page load) ───────────────────────────────────── */
.nav                { animation: gc-nav-in 600ms var(--gc-ease) both; }

.hero .eyebrow      { animation: gc-rise 700ms var(--gc-ease) both; }
.hero h1            { animation: gc-rise 900ms var(--gc-ease) 80ms both; }
.hero .lede         { animation: gc-rise 900ms var(--gc-ease) 180ms both; }
.hero-ctas          { animation: gc-rise 900ms var(--gc-ease) 280ms both; }
.hero-seal          { animation: gc-scale-in 1200ms var(--gc-ease) 400ms both; }
.hero-meta          { animation: gc-rise 900ms var(--gc-ease) 500ms both; }

/* coming-soon sub-pages */
.cs-hero .eyebrow       { animation: gc-rise 700ms var(--gc-ease) both; }
.cs-hero h1,
.cs-hero .head h1,
.cs-hero .head h2       { animation: gc-rise 900ms var(--gc-ease) 80ms both; }
.cs-hero .lede,
.cs-hero .intro         { animation: gc-rise 900ms var(--gc-ease) 180ms both; }
.cs-hero-aside          { animation: gc-rise 900ms var(--gc-ease) 300ms both; }

/* ─── Ambient (always-on, very subtle) ──────────────────────────────────── */
.hero-seal svg                            { animation: gc-breath 9s ease-in-out infinite; }
.symbol-card .icon                        { animation: gc-float-y 7s ease-in-out infinite; }
.story-symbols .symbol-card:nth-of-type(2) .icon { animation-delay: -3.5s; }
.hero::before                             { animation: gc-drift 22s ease-in-out infinite alternate; }
.fleet-section::before                    { animation: gc-drift 26s ease-in-out infinite alternate; }
.cta-strip::before                        { animation: gc-shimmer 14s ease-in-out infinite; }

/* ─── Scroll-reveal (driven by animations.js) ───────────────────────────── */
.gc-reveal {
  transition:
    opacity .8s var(--gc-ease),
    transform .8s var(--gc-ease);
  will-change: opacity, transform;
}

/* ─── Interaction polish ────────────────────────────────────────────────── */
.service .icon                { transition: transform .35s var(--gc-ease); }
.service:hover .icon          { transform: rotate(-3deg) scale(1.04); }

.coming-card .icon            { transition: transform .35s var(--gc-ease); }
.coming-card:hover .icon      { transform: scale(1.06); }

.testimonial .quote-mark      { transition: transform .4s var(--gc-ease); }
.testimonial:hover .quote-mark{ transform: translateY(-2px); }

.symbol-card                  { transition: transform .4s var(--gc-ease), box-shadow .4s; }
.symbol-card:hover            {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -30px rgba(28,24,20,.3);
}

.btn .arrow                   { transition: transform .25s var(--gc-ease); }
/* (existing .btn:hover .arrow translateX rule keeps working) */

/* ─── Reduced motion: opt out of everything that moves ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .gc-reveal { transition: none !important; }
}