.portrait-stage {
  isolation: isolate;
}

.portrait-stage::before {
  content: "";
  position: absolute;
  inset: -8% -10% -6%;
  z-index: -2;
  pointer-events: none;
  opacity: .66;
  background:
    radial-gradient(ellipse at 52% 42%, rgba(43, 91, 137, .42), transparent 54%),
    radial-gradient(ellipse at 68% 62%, rgba(216, 184, 102, .09), transparent 45%);
  animation: portrait-ambient-light 14s ease-in-out infinite alternate;
}

.portrait-stage::after {
  content: "";
  position: absolute;
  inset: -10px -12px 13% 31%;
  z-index: 3;
  pointer-events: none;
  border-top: 1px solid rgba(234, 215, 158, .5);
  border-right: 1px solid rgba(234, 215, 158, .28);
  transform-origin: top right;
  animation: portrait-editorial-line .8s cubic-bezier(.22, .61, .36, 1) both;
}

/* Keep the hero portrait editorial and architectural: one restrained frame,
   no nested ornamental borders, no decorative orbit, and no metallic glow. */
.portrait-orbit {
  display: none;
}

.portrait-frame {
  aspect-ratio: 10 / 11;
  padding: 1px;
  border: 1px solid rgba(234, 215, 158, .48);
  border-radius: 4px;
  background: rgba(255, 253, 248, .035);
  box-shadow: 0 30px 72px rgba(0, 0, 0, .28);
}

.portrait-frame::before {
  display: none;
}

.portrait-inner {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 24%, rgba(55, 103, 145, .34), transparent 38%),
    linear-gradient(180deg, #0a2038 0%, #07182c 54%, #04101f 100%);
  box-shadow: inset 0 0 52px rgba(1, 6, 18, .24);
}

.portrait-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background: linear-gradient(180deg, rgba(255, 253, 248, .04), transparent 28%);
}

.portrait-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 8, 24, .15), transparent 14%, transparent 86%, rgba(2, 8, 24, .15)),
    linear-gradient(180deg, transparent 74%, rgba(2, 8, 24, .18));
}

/* A restrained broadcast-light composition moves behind the approved portrait.
   The geometry is deliberately slow and tonal so Alana remains the focal point. */
.portrait-motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.portrait-motion::before {
  content: "";
  position: absolute;
  width: 84%;
  aspect-ratio: 1;
  left: 8%;
  top: 5%;
  border-radius: 50%;
  background: conic-gradient(from 205deg, transparent 0 22%, rgba(216, 184, 102, .13) 31%, transparent 39% 67%, rgba(68, 126, 176, .18) 78%, transparent 88%);
  filter: blur(1px);
  animation: portrait-cinema-turn 34s linear infinite;
}

.portrait-motion::after {
  content: "";
  position: absolute;
  inset: 9% -22% 2% 16%;
  background: linear-gradient(112deg, transparent 30%, rgba(255, 253, 248, .065) 43%, rgba(216, 184, 102, .10) 48%, transparent 58%);
  transform: translateX(-32%);
  animation: portrait-cinema-sweep 16s ease-in-out infinite;
}

.portrait-motion-ring {
  position: absolute;
  border: 1px solid rgba(234, 215, 158, .16);
  border-radius: 50%;
  box-shadow: 0 0 42px rgba(46, 111, 156, .08);
}

.portrait-motion-ring-one {
  width: 76%;
  aspect-ratio: 1;
  right: -27%;
  top: 4%;
  animation: portrait-ring-drift 18s ease-in-out infinite alternate;
}

.portrait-motion-ring-two {
  width: 48%;
  aspect-ratio: 1;
  left: -19%;
  bottom: 7%;
  border-color: rgba(77, 137, 188, .18);
  animation: portrait-ring-drift 22s ease-in-out -7s infinite alternate-reverse;
}

.portrait-motion-beam {
  position: absolute;
  width: 132%;
  height: 1px;
  left: -18%;
  top: 43%;
  background: linear-gradient(90deg, transparent 2%, rgba(216, 184, 102, .08) 25%, rgba(234, 215, 158, .65) 51%, rgba(216, 184, 102, .08) 74%, transparent 98%);
  box-shadow: 0 0 14px rgba(216, 184, 102, .16);
  transform: rotate(-8deg) translateX(-30%);
  animation: portrait-beam-pass 13s cubic-bezier(.45, 0, .55, 1) infinite;
}

.portrait-motion-glint {
  position: absolute;
  width: 7px;
  height: 7px;
  right: 12%;
  top: 18%;
  border: 1px solid rgba(255, 243, 205, .7);
  border-radius: 50%;
  background: rgba(234, 215, 158, .22);
  box-shadow: 0 0 18px rgba(234, 215, 158, .42), 0 0 42px rgba(60, 123, 177, .2);
  animation: portrait-glint-breathe 7s ease-in-out infinite;
}

.portrait-inner img {
  width: 100%;
  height: auto;
  max-height: 100%;
  z-index: 1;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: normal;
  filter: drop-shadow(0 16px 22px rgba(1, 6, 18, .28));
}

@keyframes portrait-ambient-light {
  from { opacity: .52; transform: translate3d(-3px, 2px, 0) scale(.985); }
  to { opacity: .76; transform: translate3d(4px, -3px, 0) scale(1.015); }
}

@keyframes portrait-editorial-line {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes portrait-cinema-turn {
  to { transform: rotate(360deg); }
}

@keyframes portrait-cinema-sweep {
  0%, 18% { opacity: 0; transform: translateX(-42%); }
  43%, 58% { opacity: .9; }
  82%, 100% { opacity: 0; transform: translateX(32%); }
}

@keyframes portrait-ring-drift {
  from { opacity: .38; transform: translate3d(-3%, 2%, 0) scale(.96); }
  to { opacity: .8; transform: translate3d(4%, -3%, 0) scale(1.04); }
}

@keyframes portrait-beam-pass {
  0%, 20% { opacity: 0; transform: rotate(-8deg) translateX(-38%); }
  42%, 58% { opacity: .75; }
  80%, 100% { opacity: 0; transform: rotate(-8deg) translateX(34%); }
}

@keyframes portrait-glint-breathe {
  0%, 100% { opacity: .28; transform: scale(.72); }
  50% { opacity: .9; transform: scale(1.12); }
}

/* About photography should feel like a magazine portrait rather than a framed
   graphic. Use the same restrained geometry with a warm editorial field. */
.about-photo-frame {
  overflow: hidden;
  border-radius: 4px;
  border-color: rgba(20, 35, 58, .14);
  background: var(--ivory-100);
  box-shadow: 0 20px 48px rgba(5, 18, 38, .09);
}

.about-photo-frame::before {
  background: linear-gradient(180deg, rgba(255, 253, 248, .22), transparent 32%);
}

.about-photo-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 958 / 968;
  object-fit: contain;
  object-position: center bottom;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 253, 248, .98), rgba(248, 242, 230, .95) 62%, rgba(238, 227, 206, .92));
}

@media (max-width: 720px) {
  .portrait-stage::before {
    inset: -3% -4% 0;
    opacity: .58;
    animation: none;
  }

  .portrait-stage::after {
    inset: -7px -8px 18% 38%;
  }

  .portrait-frame {
    aspect-ratio: 10 / 11;
    border-radius: 3px;
    box-shadow: 0 22px 52px rgba(0, 0, 0, .24);
  }

  .portrait-inner img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-stage::before,
  .portrait-stage::after,
  .portrait-motion::before,
  .portrait-motion::after,
  .portrait-motion-ring,
  .portrait-motion-beam,
  .portrait-motion-glint {
    animation: none;
    transform: none;
  }
}