/* =========================================================
   CONCEPTO INK — SCROLL ANIMATIONS
   Every element with [data-reveal] starts hidden/offset and
   animates in once it crosses the viewport (see reveal.js).
   Variant is set via data-reveal="fade-up|fade-in|zoom-in|
   slide-left|slide-right|image".
========================================================= */

[data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
    transition:
        opacity 0.9s cubic-bezier(.22,.68,0,1),
        transform 0.9s cubic-bezier(.22,.68,0,1);
}

[data-reveal="fade-up"]    { transform: translateY(45px); }
[data-reveal="fade-in"]    { transform: translateY(0); }
[data-reveal="zoom-in"]    { transform: scale(0.88); }
[data-reveal="slide-left"]  { transform: translateX(-70px); }
[data-reveal="slide-right"] { transform: translateX(70px); }

/* "image" variant: the image scrolls/scales from slightly
   outside its frame into place — used on hero photos, gallery
   tiles and card imagery so pictures feel like they animate
   in, not just fade. */
[data-reveal="image"] {
    transform: scale(1.18) translateY(30px);
    filter: saturate(0.7) brightness(0.85);
}

[data-reveal].in-view {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: saturate(1) brightness(1);
}

/* Stagger children automatically when the parent has
   [data-reveal-group] — reveal.js assigns incremental delay */
[data-reveal-group] [data-reveal] {
    transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        transition-duration: 0.01ms !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =========================================================
   CONTINUOUS AMBIENT MOTION (independent of scroll — gives
   the "a lot of animations / moving pictures" feel even on
   a page that isn't being scrolled)
========================================================= */

@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes floatSlower {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1.5deg); }
}

@keyframes kenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

@keyframes shimmerSweep {
    0%   { transform: translateX(-120%) skewX(-20deg); }
    100% { transform: translateX(220%) skewX(-20deg); }
}

.float-slow    { animation: floatSlow 5s ease-in-out infinite; }
.float-slower  { animation: floatSlower 7s ease-in-out infinite; }

/* Ken-Burns slow zoom for any background/hero image */
.kenburns {
    animation: kenBurns 16s ease-in-out infinite alternate;
}

/* Card image gentle sweep highlight on hover, used across
   service/gallery/home cards */
.sweep-hover {
    position: relative;
    overflow: hidden;
}

.sweep-hover::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.16),
        transparent
    );
    transform: translateX(-150%) skewX(-20deg);
    pointer-events: none;
}

.sweep-hover:hover::after {
    animation: shimmerSweep 1.1s ease;
}

/* Page transition fade-in (applies to <main> on load).
   Opacity-only on purpose: a `transform` here would make <main>
   a new containing block for any position:fixed descendant
   (e.g. .social-floating, a WhatsApp button), pinning it to
   <main>'s box instead of the viewport. Individual sections
   already get their own translateY via [data-reveal], so <main>
   itself doesn't need to move. */
@keyframes pageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.page-enter {
    animation: pageIn 0.6s cubic-bezier(.22,.68,0,1) both;
}