/**
 * Holographic objects and the project photo card (style handle `holo-objects`).
 *
 * Verbatim port of PROTO src/assets/css/site.css lines 172-257 (ARCHITECTURE.md §7.3),
 * plus alias selectors for the core/image `card` block style
 * (.wp-block-image.is-style-card, registered by holo-base).
 * Tokens (--glow) come from the theme's alias layer (holo-base base.css).
 */

/* =====================================================================
   Holographic objects (verbatim from the prototype)
   ===================================================================== */
.float { animation: float var(--dur, 6s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes float { 0%, 100% { transform: translateY(-14px); } 50% { transform: translateY(14px); } }
.pool {
  position: absolute; left: 50%; bottom: -26%; width: 90%; height: 26px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--glow), .45), transparent 70%); filter: blur(8px);
  animation: pool var(--dur, 6s) ease-in-out infinite; animation-delay: var(--delay, 0s);
}
@keyframes pool { 0%, 100% { transform: translateX(-50%) scale(.75); opacity: .5; } 50% { transform: translateX(-50%) scale(1); opacity: 1; } }

.pyr { width: var(--s, 260px); height: calc(var(--s, 260px) * .9); perspective: 900px; position: relative; }
.pyr-3d { position: absolute; inset: 0; transform-style: preserve-3d; animation: spin 16s linear infinite; }
.pyr-face {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(var(--glow), .12) 60%, rgba(var(--glow), .35)); transform-origin: 50% 100%;
}
.pyr-face:nth-child(1) { transform: rotateY(0deg) translateZ(calc(var(--s, 260px) / 2)) rotateX(34deg); }
.pyr-face:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--s, 260px) / 2)) rotateX(34deg); }
.pyr-face:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s, 260px) / 2)) rotateX(34deg); }
.pyr-face:nth-child(4) { transform: rotateY(270deg) translateZ(calc(var(--s, 260px) / 2)) rotateX(34deg); }
.pyr-ghost {
  position: absolute; left: 50%; top: 42%; width: 32%; height: 46%; transform: translateX(-50%); border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .95), rgba(var(--glow), .6) 40%, transparent 72%);
  filter: blur(2px); animation: flicker 3.2s steps(1) infinite, breathe 4s ease-in-out infinite;
}
@keyframes spin { to { transform: rotateY(360deg); } }
@keyframes breathe { 0%, 100% { transform: translateX(-50%) scale(.92); } 50% { transform: translateX(-50%) scale(1.05); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: .55; } 43% { opacity: 1; } 77% { opacity: .75; } 78% { opacity: 1; } }

.orb {
  width: var(--s, 160px); aspect-ratio: 1; border-radius: 50%;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 32% 28%, #fff, rgba(var(--glow), .9) 22%, rgba(var(--glow), .25) 58%, rgba(var(--glow), .05) 72%);
  box-shadow: 0 0 60px rgba(var(--glow), .55), inset 0 0 40px rgba(255, 255, 255, .25);
}
.cube { width: var(--s, 200px); aspect-ratio: 1; perspective: 800px; }
.cube-3d { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: tumble 18s linear infinite; }
.cube-3d i {
  position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .85); background: linear-gradient(135deg, rgba(var(--glow), .22), rgba(255, 255, 255, .04));
  box-shadow: 0 0 24px rgba(var(--glow), .5), inset 0 0 24px rgba(var(--glow), .35);
}
.cube-3d i:nth-child(1) { transform: translateZ(calc(var(--s, 200px) / 2)); }
.cube-3d i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s, 200px) / 2)); }
.cube-3d i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s, 200px) / 2)); }
.cube-3d i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s, 200px) / 2)); }
.cube-3d i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s, 200px) / 2)); }
.cube-3d i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s, 200px) / 2)); }
@keyframes tumble { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } }
.rings { width: var(--s, 220px); aspect-ratio: 1; position: relative; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); animation: ripple 3s cubic-bezier(.2, .6, .3, 1) infinite; }
.rings i:nth-child(2) { animation-delay: 1s; }
.rings i:nth-child(3) { animation-delay: 2s; }
.rings b { position: absolute; inset: 38%; border-radius: 50%; background: #fff; box-shadow: 0 0 40px rgba(var(--glow), .9); }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.globe { width: var(--s, 260px); aspect-ratio: 1; filter: drop-shadow(0 0 18px rgba(var(--glow), .7)); }
.globe svg { width: 100%; height: 100%; overflow: visible; }
.globe .spin { transform-origin: 50% 50%; animation: meridian 8s linear infinite; }
@keyframes meridian { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

/* project photo card with holographic frame + sheen */
.card, .wp-block-image.is-style-card {
  --s: var(--sd, 320px);
  width: var(--s); aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; position: relative; transform: rotate(var(--r, -4deg));
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .35), 0 0 40px rgba(var(--glow), .35); background: rgba(var(--glow), .2);
}
.card img, .wp-block-image.is-style-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); }
.card::after, .pcard-media::after, .wp-block-image.is-style-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 62%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
  background-size: 250% 100%, auto; animation: sheen 5s ease-in-out infinite;
}
.card figcaption, .wp-block-image.is-style-card figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
@keyframes sheen { 0% { background-position: 120% 0, 0 0; } 60%, 100% { background-position: -120% 0, 0 0; } }
.obj { --os: var(--os-d); position: relative; }
/* home scenes: cards and objects are also capped by the viewport height (short / landscape screens);
   the caps sit above what 16:9 desktops and portrait phones use, so those are unchanged */
.home .scene .card { width: min(var(--s), 45vh); width: min(var(--s), 45svh); }
.home .obj { --os: min(var(--os-d), 30vh); }
/* phone-portrait sizes (landscape phones keep the desktop composition, see scenes.js compactMQ) */
@media (max-width: 800px) and (orientation: portrait) {
  .card, .wp-block-image.is-style-card { --s: var(--ms, var(--sd)); }
  .obj { --os: var(--ms, var(--os-d)); }
  .home .obj { --os: min(var(--ms, var(--os-d)), 30vh); }
}