/*
 * TITLE:   Aggiungere un effetto rotazione alle cards di Bootstrap
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/aggiungere-un-effetto-rotazione-alle-cards-di-bootstrap/
 */

/* Required snippet style */
.rotate-container { position: relative; }
.rotate-container .card-front,
.rotate-container .card-back {
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: all 0.5s linear 0s;
}
.rotate-container .card-front {
	-webkit-transform: perspective(600px) rotateY(0deg);
	transform: perspective(600px) rotateY(0deg);
}
.rotate-container .card-back {
	-webkit-transform: perspective(1600px) rotateY(180deg);
	transform: perspective(1600px) rotateY(180deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.rotate-container .card-front.rotate {
	-webkit-transform: perspective(1600px) rotateY(-180deg);
	transform: perspective(1600px) rotateY(-180deg);
}
.rotate-container .card-back.rotate {
	-webkit-transform: perspective(1600px) rotateY(0deg);
	transform: perspective(1600px) rotateY(0deg);
}
.rotate-container .card-front .btn-rotate,
.rotate-container .card-back .btn-rotate { position: static; z-index: 0; }
 
/* Demo style only */
.demo-content { margin-bottom: 70px; text-align: center; }
.rotate-container { width: 300px; }

/* Credits */
/* @import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem; text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color: #33b5e5; color: #fff !important; } */

/* ----------------------- CARDS ANIMATE -------------------------------------------------------------------------------------- */

/* Card base */
    .custom-card {
      background-color: #ffffff;
      border: none;
      border-radius: 14px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      transition: 
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    /* Hover animato */
    .hover-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
    }

    /* Titolo in rilievo */
    .text-rilievo {
      color: #2f2f2f;
      text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.9),
      -1px -1px 1px rgba(0, 0, 0, 0.2);
    }

    /* Testo rilievo leggero */
    .text-rilievo-light {
      color: #555;
      text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.7),
      -1px -1px 1px rgba(0, 0, 0, 0.12);
    }

    /* Card base */
    .clickable-card {
      background-color: #ffffff;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    }

    /* Hover */
    .clickable-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
    }

    /* Click (effetto pressione) */
    .clickable-card:active {
      transform: translateY(-2px) scale(0.98);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    }

    /* Focus da tastiera (accessibilità) */
    .clickable-card:focus {
      outline: none;
      box-shadow:
        0 0 0 3px rgba(13, 110, 253, 0.25),
        0 10px 22px rgba(0, 0, 0, 0.12);
    }


    /* Animazione flottante */
    @keyframes float {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-6px);
      }
      100% {
        transform: translateY(0);
      }
    }


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


    .floating-card {
      animation: floatShadow 4.5s ease-in-out infinite;
    }


    /* Card con movimento continuo */
    .floating-card {
      animation: float 4s ease-in-out infinite;
    }

    /* Hover: più reattiva e ferma l'animazione */
    .floating-card:hover {
      animation-play-state: paused;
      transform: translateY(-6px);
    }

    /* Click */
    .floating-card:active {
      transform: translateY(-2px) scale(0.98);
    }