/* ==================================================================
   Logo spin — Free Bounce mark hover motion

   Two modes, one markup shape. Set the mode on the stage:

     <div class="logo-spin" data-logo-spin="dimensional"> ... </div>

   Modes:
     "flat"        — one clockwise turn in the plane of the screen.
     "dimensional" — one turn around the vertical axis, left edge
                     swinging toward the viewer. Reads as the badge
                     turning in space rather than a wheel.

   Why two faces instead of one image: a flat picture rotated past 90
   degrees on Y shows the viewer its own back, which is the artwork
   mirrored -- the wordmark comes out reversed. The back face is a
   second copy pre-turned 180 degrees, so once the card passes edge-on
   the mark is already facing front and reads correctly. Both faces
   hide their own backs, so only ever one is visible.

   That is the honest ceiling of this approach: the geometry is real 3D
   but the chrome is painted. Highlights do not travel across the metal
   during the turn the way they would on a rendered model. Fixing that
   needs frames baked from a 3D source, not more CSS.

   Pair with: <script src="js/logo-spin.js" defer></script>
   ================================================================== */

.logo-spin {
    perspective: 750px;
}

.logo-spin__mark {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}

.logo-spin__face {
    position: absolute;
    inset: 0;
    margin: auto;
    backface-visibility: hidden;
}

.logo-spin__face--back {
    transform: rotateY(180deg);
}

/* On giving the mark a ground: don't -------------------------------

   The mark is an open lattice -- chrome ribs with the panels between
   them left transparent -- so on this background the page shows through
   it and the silhouette breaks up. The obvious fix is a sphere body
   behind the ribs. It was tried here and it does not work, which is
   worth writing down so it is not tried again.

   The problem is circular. A ground only fills the panels if it differs
   from the page behind it; anything that differs from the page enough
   to fill them also differs enough to be seen, and what you see is a
   plate sitting behind the badge. Feathering the rim softens the edge
   but not the fact that there is a second object there.

   The legibility problem is real, but it is in the artwork meeting a
   dark background, and it wants an art answer -- the solid OG mark at
   assets/icons/chrome/freebounce-logo-og.webp, or a version of this one
   drawn with its panels filled -- not a CSS one underneath it.

   What is left is worked on the ribs themselves rather than behind
   them. A cool halo, tight enough to hug the outline instead of pooling
   into a disc, gives the silhouette an edge to end on; a dark shadow
   under it keeps the mark sitting above the page rather than glowing
   out of it. The interior stays a wireframe -- that part only an
   artwork change fixes -- but the shape now closes. */
.logo-spin__face {
    filter:
        drop-shadow(0 0 7px rgba(140, 190, 230, .35))
        drop-shadow(0 2px 6px rgba(0, 0, 0, .75));
}

/* Mode: flat -------------------------------------------------------- */

.logo-spin[data-logo-spin="flat"] .logo-spin__mark.is-spinning {
    animation: logo-spin-flat 1.1s cubic-bezier(0.33, 0, 0.15, 1);
    will-change: transform;
}

@keyframes logo-spin-flat {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Mode: dimensional ------------------------------------------------- */

/* Slower than the flat turn on purpose: the card spends part of the
   cycle near edge-on, where it is a sliver, and a fast pass through
   that reads as a flicker rather than a rotation. */
.logo-spin[data-logo-spin="dimensional"] .logo-spin__mark.is-spinning {
    animation: logo-spin-dimensional 1.35s cubic-bezier(0.33, 0, 0.15, 1);
    will-change: transform;
}

@keyframes logo-spin-dimensional {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

/* Stillness --------------------------------------------------------- */

/* js/logo-spin.js also refuses to start a turn under this setting.
   Belt and braces: a stale class must not animate either. */
/* No reduced-motion gate. The turn is a deliberate response to being
   pointed at -- a badge catching the light -- and the site animates the
   same way for everyone, as the ticker and the crossing already do. */