#passion.panel,
#personal.panel {
  align-items: safe center;
  justify-content: safe center;
}

#passion .back-btn {
  position: absolute;
  top: calc(var(--chrome-h) + 0.45rem);
  left: 1.25rem;
  z-index: 20;
}

#personal .back-btn {
  position: fixed;
  top: calc(var(--chrome-h) + 0.45rem);
  left: 1.25rem;
  right: auto;
  z-index: 20;
}

body.site-hub #passion .passion-inner {
  padding-top: calc(var(--chrome-h) + 0.45rem);
  padding-bottom: 0.75rem;
}

body.site-hub #personal .panel-inner {
  padding-top: calc(var(--chrome-h) + 3.5rem);
}

body.site-hub #professional .professional-inner {
  padding-top: calc(var(--chrome-h) + 1.15rem);
}

#professional .back-btn {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.15rem;
  z-index: 20;
}

@media (max-width: 900px) {
  #passion.panel,
  #personal.panel {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@property --foil-spin {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --mx {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

@property --my {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

@property --from-center {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.35;
}

/* Secret Rare rim only — Photography + Religious.
   Outer gold border / sheen stays; the photographic face is a normal card. */
.playing-card.playing-card--foil {
  --mx: 0.5;
  --my: 0.5;
  --foil-spin: 0deg;
  --foil-glow: 1;
  --from-center: 0.35;
  border-color: #f0d36a;
  background:
    radial-gradient(
      160px circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),
      rgba(255, 252, 230, 0.98) 0%,
      rgba(255, 214, 80, 0.55) 18%,
      rgba(201, 162, 39, 0.28) 36%,
      transparent 58%
    ),
    conic-gradient(
      from calc(var(--foil-spin) + var(--mx) * 140deg),
      #fff6c2,
      #ffd54a,
      #d4af37,
      #8a6d12,
      #ffe082,
      #c9a227,
      #fff1a0,
      #b8860b,
      #ffec8b,
      #d4af37,
      #fff6c2
    );
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(255, 214, 80, calc(0.22 + var(--from-center) * 0.35)),
    0 0 32px rgba(201, 162, 39, calc(0.28 + var(--from-center) * 0.4)),
    0 0 54px rgba(255, 196, 40, calc(0.12 + var(--from-center) * 0.28)),
    inset 0 0 0 1px rgba(255, 248, 210, 0.55);
  animation: foil-idle 10s linear infinite, foil-wander 7.5s ease-in-out infinite;
}

.playing-card.playing-card--foil.is-tracking {
  animation: foil-idle 10s linear infinite;
}

.playing-card.playing-card--foil img {
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}

.playing-card.playing-card--foil > span {
  z-index: 4;
}

/* Gold rim sheen — masked to the outer border only. */
.playing-card.playing-card--foil::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  padding: 6px;
  background:
    radial-gradient(
      92px circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 236, 160, 0.7) 16%,
      rgba(212, 175, 55, 0.28) 34%,
      transparent 56%
    ),
    conic-gradient(
      from calc(var(--foil-spin) + var(--my) * 120deg),
      #fff8dc,
      #ffd54a,
      #c9a227,
      #fff1a8,
      #8a6d12,
      #ffe082,
      #d4af37,
      #fff8dc
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--foil-glow);
}

.hand.open .playing-card.playing-card--foil:hover,
.playing-card.playing-card--foil:focus-visible {
  border-color: #ffe9a0;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 248, 210, 0.7),
    0 0 12px 2px rgba(255, 255, 255, 0.55),
    0 0 26px 6px rgba(255, 214, 80, 0.7),
    0 0 50px 12px rgba(201, 162, 39, 0.55),
    0 0 78px 18px rgba(255, 196, 40, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.playing-card.playing-card--foil.is-pressed,
.playing-card.playing-card--foil:active {
  border-color: #fff6d8;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 16px 3px rgba(255, 255, 255, 0.6),
    0 0 32px 8px rgba(255, 214, 80, 0.8),
    0 0 58px 14px rgba(201, 162, 39, 0.62),
    0 0 86px 20px rgba(255, 220, 100, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

@keyframes foil-idle {
  to { --foil-spin: 360deg; }
}

@keyframes foil-wander {
  0%   { --mx: 0.18; --my: 0.30; }
  20%  { --mx: 0.74; --my: 0.22; }
  40%  { --mx: 0.82; --my: 0.70; }
  60%  { --mx: 0.32; --my: 0.86; }
  80%  { --mx: 0.20; --my: 0.52; }
  100% { --mx: 0.18; --my: 0.30; }
}

@media (prefers-reduced-motion: reduce) {
  .playing-card.playing-card--foil,
  .playing-card.playing-card--foil.is-tracking {
    animation: none;
  }
}

body.page-enter-active {
  animation: page-enter-unlock 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes page-enter-unlock {
  from { transform: translateX(100%); }
  to { transform: none; }
}