/* =========================================================
   ANIMATIONS.CSS
   New site-wide animation effects, layered on top of the existing
   reveal/hover system in base.css — nothing here replaces that.
   Loaded on every page (light + dark). Dark pages get teal/blue
   variants via the [data-theme="dark"] body attribute; light pages
   use the default brand teal/navy.
========================================================= */

/* ---------- 1. Floating background shapes ----------
   Purely decorative, low-opacity blurred orbs that drift slowly.
   Container needs position:relative + overflow:hidden (already true
   for most hero/section wrappers); shapes sit behind content. */
.blob-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.16;
    background: radial-gradient(circle at 30% 30%, var(--primary), transparent 70%);
    animation: blobFloat 22s ease-in-out infinite;
}

body[data-theme="dark"] .blob {
    background: radial-gradient(circle at 30% 30%, var(--teal, #6fc4d1), transparent 70%);
    opacity: 0.12;
}

.blob-1 { width: 420px; height: 420px; top: -10%; left: -8%; animation-duration: 24s; }
.blob-2 { width: 320px; height: 320px; top: 40%; right: -6%; animation-duration: 19s; animation-delay: -6s; background-image: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%); }
.blob-3 { width: 260px; height: 260px; bottom: -8%; left: 30%; animation-duration: 27s; animation-delay: -12s; }

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.08); }
    66% { transform: translate(-25px, 30px) scale(0.94); }
}

/* Ensure content sits above the blob field */
.blob-field + * ,
.blob-field ~ .container {
    position: relative;
    z-index: 1;
}

/* ---------- 2. Gradient shimmer text (hero headings) ---------- */
.shimmer-text {
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 25%, var(--accent) 50%, var(--primary) 75%, var(--primary-dark) 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmerSweep 6s linear infinite;
}

body[data-theme="dark"] .shimmer-text {
    background: linear-gradient(90deg, var(--paper, #f3efe8) 0%, var(--teal, #6fc4d1) 25%, var(--amber-soft, #a3dce5) 50%, var(--teal, #6fc4d1) 75%, var(--paper, #f3efe8) 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@keyframes shimmerSweep {
    to { background-position: -250% center; }
}

/* Variant for dark-background heroes that still use the light-theme
   palette (Home, Contact) — default shimmer-text is too dark to read there */
.shimmer-text-light {
    background: linear-gradient(90deg, #ffffff 0%, var(--accent) 25%, #ffffff 50%, var(--accent) 75%, #ffffff 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmerSweep 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .shimmer-text { animation: none; -webkit-text-fill-color: currentColor; color: inherit; background: none; }
}

/* ---------- 3. Letter-by-letter heading reveal ----------
   Applied via JS (animations.js) which wraps each letter in a span
   with class .char and a staggered transition-delay. */
.char-wrap {
    display: inline-block;
}
.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.char-wrap.in-view .char {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 4. Marquee / trust ticker ---------- */
.ticker {
    overflow: hidden;
    background: var(--primary-dark);
    padding: 16px 0;
    white-space: nowrap;
}

body[data-theme="dark"] .ticker {
    background: var(--ink-2, #132025);
    border-top: 1px solid var(--line, rgba(61,127,163,.28));
    border-bottom: 1px solid var(--line, rgba(61,127,163,.28));
}

.ticker-track {
    display: inline-flex;
    align-items: center;
    animation: tickerScroll 28s linear infinite;
}

.ticker:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    color: var(--text-light, #fff);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0 28px;
    opacity: 0.9;
}

body[data-theme="dark"] .ticker-item {
    color: var(--paper-dim, rgba(243,239,232,.65));
}

.ticker-item i {
    color: var(--accent);
    margin-right: 10px;
    font-size: 15px;
}

body[data-theme="dark"] .ticker-item i {
    color: var(--teal, #6fc4d1);
}

.ticker-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    margin: 0 28px;
    opacity: 0.6;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}

/* ---------- 5. Magnetic tilt (JS-driven via animations.js) ---------- */
.tilt-card {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    will-change: transform;
}

/* ---------- Bonus: idle float for icons, button ripple ---------- */
.icon-float {
    animation: iconFloat 4s ease-in-out infinite;
}
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.ripple-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out;
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: scale(2.5); opacity: 0; }
}

/* ---------- Reduced motion: mute the decorative extras globally ---------- */
@media (prefers-reduced-motion: reduce) {
    .blob { animation: none; }
    .icon-float { animation: none; }
}

/* ---------- Mobile: keep it light ---------- */
@media (max-width: 767px) {
    .blob { filter: blur(40px); }
    .blob-1 { width: 260px; height: 260px; }
    .blob-2 { width: 200px; height: 200px; }
    .blob-3 { width: 160px; height: 160px; }
    .ticker-item { font-size: 11.5px; padding: 0 18px; }
    .ticker-dot { margin: 0 18px; }
}