/* ==========================================================================
   flipper.css  -  Cast flip cards
   Everything is prefixed with "flipcard" (classes and custom properties) and
   scoped under .flipcard-block, so it will not clash with existing site
   styles. No styles are applied to html, body or any bare element selectors
   outside a .flipcard-block.

   Theming: override the custom properties on .flipcard-block (or any
   ancestor).
   ========================================================================== */

.flipcard-block {
  --flipcard-role-colour: #ffd23f;
  --flipcard-name-colour: #ffffff;
  --flipcard-text-colour: #eeeeee;
  --flipcard-card-bg: #533008;
  --flipcard-back-bg: #914a10;
  --flipcard-radius: 16px;
  --flipcard-time: 0.8s;
  --flipcard-zoom-time: 6s;
  --flipcard-min-card: 275px;            /* 25% bigger than the previous 220px */
  --flipcard-gap: 1.75rem;
  --flipcard-font-family: Poppins, "Times New Roman", serif;

  max-width: 1300px;
  margin: 0 auto 4rem;
  font-family: var(--flipcard-font-family);
  color: var(--flipcard-name-colour);
}

.flipcard-block *,
.flipcard-block *::before,
.flipcard-block *::after {
  box-sizing: border-box;
}

/* ---------- Block title ---------- */
.flipcard-block-title {
  margin: 0 0 1.5rem;
  font-family: var(--flipcard-font-family);
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--flipcard-role-colour);
}

/* ---------- Responsive grid ---------- */
/* Flex-wrap (rather than CSS grid) so that an incomplete last row is centred. */
.flipcard-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--flipcard-gap);
}

/* ---------- Card ---------- */
.flipcard-card {
  flex: 0 1 var(--flipcard-min-card);   /* fixed width; only shrinks if the screen is narrower than one card */
  max-width: 100%;
  perspective: 1200px;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.flipcard-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flipcard-time) cubic-bezier(.4, .2, .2, 1);
}

.flipcard-card.flipcard-flipped .flipcard-card-inner {
  transform: rotateY(180deg);
}

.flipcard-card:focus-visible .flipcard-card-inner {
  box-shadow: 0 0 0 3px var(--flipcard-role-colour);
  border-radius: var(--flipcard-radius);
}

.flipcard-face {
  position: absolute;
  inset: 0;
  border-radius: var(--flipcard-radius);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--flipcard-card-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* ---------- Front ---------- */
.flipcard-front .flipcard-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--flipcard-zoom-time) ease-out;  /* Ken Burns */
  will-change: transform;
}

.flipcard-card:hover .flipcard-front .flipcard-image,
.flipcard-card:focus-visible .flipcard-front .flipcard-image {
  transform: scale(1.12) translate(-1.5%, -1.5%);
}

.flipcard-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4rem 1.1rem 1.2rem;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 25%, rgba(0, 0, 0, 0));
}

.flipcard-role {
  margin: 0;
  font-family: var(--flipcard-font-family);
  font-size: 1.25rem;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--flipcard-role-colour);
}

.flipcard-actor {
  margin: 0;
  font-family: var(--flipcard-font-family);
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.15;
  color: var(--flipcard-name-colour);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .4s ease, opacity .4s ease,
              transform .4s ease, margin .4s ease;
}

.flipcard-card:hover .flipcard-actor,
.flipcard-card:focus-visible .flipcard-actor {
  max-height: 4.5rem;
  opacity: 1;
  transform: translateY(0);
  margin-top: .4rem;
}

/* Touch devices have no hover: always show the actor name */
@media (hover: none) {
  .flipcard-actor {
    max-height: 4.5rem;
    opacity: 1;
    transform: none;
    margin-top: .4rem;
  }
}

/* ---------- Back ---------- */
/* Layout: the bio text and hint keep the space they need; the video takes
   whatever is left, so the text is always fully visible. */
.flipcard-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .9rem;
  background: var(--flipcard-back-bg);
}

.flipcard-video {
  display: block;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  object-fit: cover;
  background: #000;
  border-radius: 8px;
  pointer-events: none;              /* no controls: clicks flip the card back */
}

.flipcard-text {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--flipcard-font-family);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--flipcard-text-colour);
}

.flipcard-hint {
  flex: 0 0 auto;
  font-family: var(--flipcard-font-family);
  font-size: .72rem;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--flipcard-role-colour);
  opacity: .7;
}

/* ---------- Hover sparkles (created by flipper.js) ---------- */
.flipcard-sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.flipcard-sparkle {
  position: absolute;
  background: #ffffff;
  /* four-pointed star */
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: flipcard-twinkle 900ms ease-in-out forwards;
}

@keyframes flipcard-twinkle {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0)   rotate(0deg); }
  50%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(90deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0)   rotate(180deg); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .flipcard-card-inner { transition-duration: .01s; }
  .flipcard-front .flipcard-image { transition: none; }
  .flipcard-sparkles { display: none; }
}