/* ═══════════════════════════════════════════════════════════════════════════
   Shared card photo flip — zoom → back → front → zoom
   ───────────────────────────────────────────────────────────────────────────
   Markup contract: Views/Shared/_CardPhotoFlip.cshtml
   Behaviour:       wwwroot/js/card-flip.js   (loaded globally in _StoreLayout)

   WHY THIS FILE EXISTS.  The state machine and the partial were already
   shared, but every one of these rules lived inside shop.css, which only the
   catalogue loads.  So the flip worked perfectly on the shop and nowhere
   else — My Collection could render the identical partial and still get an
   unstyled, zero-height button.  A shared component whose styling is not
   shared is not a shared component.

   Loaded globally from _StoreLayout.cshtml, immediately after card-photos.css
   and BEFORE any page sheet, so page sheets keep the last word on footprint
   (shop.css sizes the catalogue well, my-cards-season-row.css sizes the
   collection tile) while the mechanism stays identical everywhere.

   RULE: this file owns the mechanism — the turn, the perspective, the focus
   ring, the error shake.  It must never own a page's dimensions.
   ═══════════════════════════════════════════════════════════════════════════ */

.ia-card-flip {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    perspective: 1100px;
}

.ia-card-flip:disabled { cursor: default; }

.ia-card-flip-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: center;
}

.ia-card-flip-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* A sensible default for any surface that does not size the photo itself.
   Equal specificity to a page's own `.<well> img` rule, and this sheet loads
   first, so a page override always wins. */
.ia-card-flip-face img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* The swap happens at the midpoint of the turn, so one image serves every
   state and there are never competing stacked faces to fall out of sync. */
.ia-card-flip-out { animation: ia-card-turn-out .18s cubic-bezier(.55,.08,.9,.48) both; }
.ia-card-flip-in  { animation: ia-card-turn-in  .22s cubic-bezier(.12,.72,.26,1) both; }
.ia-card-flip-error .ia-card-flip-inner { animation: ia-card-flip-error .32s ease-in-out 2; }

@keyframes ia-card-turn-out {
    from { transform: perspective(1100px) rotateY(0)      scale(1);    }
    to   { transform: perspective(1100px) rotateY(90deg)  scale(.975); }
}
@keyframes ia-card-turn-in {
    from { transform: perspective(1100px) rotateY(-90deg) scale(.975); }
    to   { transform: perspective(1100px) rotateY(0)      scale(1);    }
}
@keyframes ia-card-flip-error {
    0%,100% { transform: translateX(0);   }
    50%     { transform: translateX(3px); }
}

/* The tilt is the affordance: it is the only thing telling a collector the
   photo is a control and not a picture. It must travel with the component. */
.ia-card-flip:not(:disabled):not([aria-busy="true"]):hover .ia-card-flip-inner,
.ia-card-flip:not(:disabled):not([aria-busy="true"]):focus-visible .ia-card-flip-inner {
    transform: rotateY(-7deg);
}

.ia-card-flip:focus-visible {
    outline: 3px solid rgba(83, 157, 255, .9);
    outline-offset: 3px;
    border-radius: 11px;
}

@media (prefers-reduced-motion: reduce) {
    .ia-card-flip-inner { transition: none; animation: none !important; }
    .ia-card-flip:not(:disabled):hover .ia-card-flip-inner,
    .ia-card-flip:not(:disabled):focus-visible .ia-card-flip-inner { transform: none; }
}

/* ═══ Overlays pinned over a flipping photo ═════════════════════════════════
   A grade chip, a ribbon, a badge -- anything absolutely positioned over a card
   photo is fine while the ZOOM shot is showing, because a zoom is a crop and
   its corners are slab background. The moment the card turns to its front or
   back, that same corner is real content. On the catalogue the grade chip was
   landing squarely on the Beckett label: a duplicate of the grade, covering the
   printed grade that proves it.

   Mark such an element `data-card-flip-overlay` and it retires while the photo
   is turned. It must be a FOLLOWING SIBLING of the [data-card-flip] button,
   which is how the catalogue already nests it.

   WHY `is-flipped` IS THE RIGHT HOOK. card-flip.js toggles it at the midpoint
   of the turn -- measured live at t=295ms, the exact instant the card is
   edge-on -- so the overlay leaves as the card presents its edge and returns as
   the zoom turns back in. It reads as one motion because it IS one moment.
   (`aria-busy` looks tempting and is wrong: measured, it lingers a full second
   after the motion ends.)

   `visibility`, not opacity alone: these overlays are usually links, and a
   transparent link is still tabbable and still announced. Same rule the glass
   tooltips follow. */

[data-card-flip-overlay] {
    /* Pinned to a corner, so it should collapse toward its own anchor rather
       than pivot about its middle. */
    transform-origin: right center;
    transition: opacity .16s ease,
                transform .18s cubic-bezier(.12, .72, .26, 1),
                visibility 0s linear 0s;
}

[data-card-flip].is-flipped ~ [data-card-flip-overlay] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* The perspective travels in the transform itself, exactly as
       ia-card-turn-out does, so the host needs no `perspective` property and
       this rule stays free of any assumption about its container. */
    transform: perspective(1100px) rotateY(90deg);
    transition: opacity .16s ease,
                transform .18s cubic-bezier(.55, .08, .9, .48),
                visibility 0s linear .18s;
}

@media (prefers-reduced-motion: reduce) {
    [data-card-flip-overlay] {
        transition: opacity .12s linear, visibility 0s linear 0s;
    }
    [data-card-flip].is-flipped ~ [data-card-flip-overlay] {
        transform: none;
        transition: opacity .12s linear, visibility 0s linear .12s;
    }
}