/* ============================================================
   KARPATHOS IN TASCA — Animations
   ============================================================ */

/* ============================================================
   SCROLL REVEAL — base states
============================================================ */
[data-animate] {
    opacity: 0;
    transition: opacity .6s ease, transform .6s ease;
}
[data-animate="fade-up"]    { transform: translateY(30px); }
[data-animate="fade-left"]  { transform: translateX(-30px); }
[data-animate="fade-right"] { transform: translateX(30px); }
[data-animate="fade-in"]    { transform: scale(.97); }

[data-animate].visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   STAGGERED GRIDS
============================================================ */
.tutto-grid { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.tutto-grid.visible { opacity: 1; transform: none; }
.tutto-grid.visible .tutto-item:nth-child(1)  { animation: popIn .4s .05s both; }
.tutto-grid.visible .tutto-item:nth-child(2)  { animation: popIn .4s .10s both; }
.tutto-grid.visible .tutto-item:nth-child(3)  { animation: popIn .4s .15s both; }
.tutto-grid.visible .tutto-item:nth-child(4)  { animation: popIn .4s .20s both; }
.tutto-grid.visible .tutto-item:nth-child(5)  { animation: popIn .4s .25s both; }
.tutto-grid.visible .tutto-item:nth-child(6)  { animation: popIn .4s .30s both; }
.tutto-grid.visible .tutto-item:nth-child(7)  { animation: popIn .4s .35s both; }
.tutto-grid.visible .tutto-item:nth-child(8)  { animation: popIn .4s .40s both; }
.tutto-grid.visible .tutto-item:nth-child(9)  { animation: popIn .4s .45s both; }
.tutto-grid.visible .tutto-item:nth-child(10) { animation: popIn .4s .50s both; }
.tutto-grid.visible .tutto-item:nth-child(n+11) { animation: popIn .4s .55s both; }

@keyframes popIn {
    from { opacity: 0; transform: scale(.85) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.essentials-grid { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.essentials-grid.visible { opacity: 1; transform: none; }
.essentials-grid.visible .ess-card:nth-child(1) { animation: slideUp .5s .05s both; }
.essentials-grid.visible .ess-card:nth-child(2) { animation: slideUp .5s .12s both; }
.essentials-grid.visible .ess-card:nth-child(3) { animation: slideUp .5s .19s both; }
.essentials-grid.visible .ess-card:nth-child(4) { animation: slideUp .5s .26s both; }
.essentials-grid.visible .ess-card:nth-child(5) { animation: slideUp .5s .33s both; }
.essentials-grid.visible .ess-card:nth-child(6) { animation: slideUp .5s .40s both; }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.boat-grid { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.boat-grid.visible { opacity: 1; transform: none; }
.boat-grid.visible .boat-card:nth-child(1) { animation: slideUp .4s .05s both; }
.boat-grid.visible .boat-card:nth-child(2) { animation: slideUp .4s .15s both; }
.boat-grid.visible .boat-card:nth-child(3) { animation: slideUp .4s .25s both; }
.boat-grid.visible .boat-card:nth-child(4) { animation: slideUp .4s .35s both; }

.transport-grid { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.transport-grid.visible { opacity: 1; transform: none; }

.beaches-scroll { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.beaches-scroll.visible { opacity: 1; transform: none; }

.section-head { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.section-head.visible { opacity: 1; transform: none; }

/* ============================================================
   MAP MARKERS
============================================================ */
@keyframes markerAppear {
    from { opacity: 0; transform: scale(0) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes markerPulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}
@keyframes markerBounce {
    0%,100% { transform: translateY(0); }
    40%     { transform: translateY(-8px); }
    60%     { transform: translateY(-4px); }
}

.map-sim .map-marker { opacity: 0; }
.map-sim.animated .map-marker { animation: markerAppear .4s ease forwards; }
.map-sim.animated .map-marker:nth-child(4)  { animation-delay: .1s; }
.map-sim.animated .map-marker:nth-child(5)  { animation-delay: .2s; }
.map-sim.animated .map-marker:nth-child(6)  { animation-delay: .3s; }
.map-sim.animated .map-marker:nth-child(7)  { animation-delay: .4s; }
.map-sim.animated .map-marker:nth-child(8)  { animation-delay: .5s; }
.map-sim.animated .map-marker:nth-child(9)  { animation-delay: .6s; }
.map-sim.animated .map-marker:nth-child(10) { animation-delay: .7s; }
.map-sim.animated .map-marker.mm-selected   { animation-delay: .9s; }

/* ============================================================
   QUIZ
============================================================ */
@keyframes slideInQ {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.quiz-q.active { animation: slideInQ .3s ease; }

@keyframes selectPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
.quiz-opt.selected { animation: selectPop .25s ease; }

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
    [data-animate], .tutto-grid, .essentials-grid, .boat-grid,
    .transport-grid, .beaches-scroll, .section-head {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .map-sim .map-marker { opacity: 1; animation: none !important; }
    .tutto-grid.visible .tutto-item,
    .essentials-grid.visible .ess-card,
    .boat-grid.visible .boat-card { animation: none !important; }
}