:root{
  --fr:clamp(160px,26vw,240px);
}

/* ── WRAPPER ── */
.portrait-wrap{
  position:relative;
  width:min(400px,88vw);
  opacity:0;
  animation:fadeIn .9s .2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes fadeIn{to{opacity:1}}

/* top HUD */
.p-hud{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid var(--bdr);
  margin-bottom:12px;
}
.p-hud-left{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:8px;letter-spacing:3px;
  text-transform:uppercase;color:var(--lime);
}
.p-hud-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 10px var(--lime);
  animation:hudPulse 1.8s ease-in-out infinite;
}
@keyframes hudPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.25;transform:scale(.65)}
}
.p-hud-right{
  font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--dim);
}
.p-hud-right strong{color:rgba(200,254,40,.6)}

/* ── STAGE ── */
.p-stage{
  --fx:50%;
  --fy:42%;
  position:relative;
  aspect-ratio:4/5;
  width:100%;
  border-radius:2px;
  overflow:hidden;
  background:var(--blk);
  cursor:none;
  pointer-events:auto;
  box-shadow:
    0 0 0 1px rgba(200,254,40,.07),
    0 32px 90px rgba(0,0,0,.55);
}

/* top accent bar */
.p-stage::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:10;
  background:linear-gradient(90deg,var(--lime),var(--red),transparent);
  pointer-events:none;
}

/* ── PHOTO — full image behind the veil ── */
.p-photo{
  position:absolute;inset:0;z-index:1;
  background:url("../assets/1000268467.jpg") center top / cover no-repeat;
  pointer-events:none;
}

/* ── FLASH — bright reveal through the beam ── */
.p-flash{
  position:absolute;inset:0;z-index:2;
  background-size:cover;
  background-position:center top;
  pointer-events:none;
  visibility:hidden;
  -webkit-mask-image:radial-gradient(
    circle var(--fr) at var(--fx) var(--fy),
    #000 0%,
    #000 52%,
    transparent 72%
  );
  mask-image:radial-gradient(
    circle var(--fr) at var(--fx) var(--fy),
    #000 0%,
    #000 52%,
    transparent 72%
  );
  filter:brightness(1.08) contrast(1.05) saturate(1.1);
}
.p-flash--photo{
  background-image:url("../assets/1000268467.jpg");
}
.p-stage.is-lit .p-flash{visibility:visible}

/* ── LIME GLOW BEAM ── */
.p-beam{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(
    circle calc(var(--fr) * 1.1) at var(--fx) var(--fy),
    rgba(200,254,40,.14) 0%,
    rgba(200,254,40,.03) 40%,
    transparent 65%
  );
  opacity:0;
  transition:opacity .3s ease;
  mix-blend-mode:screen;
}
.p-stage.is-lit .p-beam{opacity:1}

/* ── VEIL — covers back photo until flashlight cuts through ── */
.p-veil{
  position:absolute;inset:0;z-index:5;
  background:var(--blk);
  pointer-events:none;
  -webkit-mask-image:none;
  mask-image:none;
  transition:opacity .2s;
}
.p-stage.is-lit .p-veil{
  -webkit-mask-image:radial-gradient(
    circle var(--fr) at var(--fx) var(--fy),
    transparent 0%,
    transparent 48%,
    rgba(0,0,0,.25) 62%,
    #000 78%
  );
  mask-image:radial-gradient(
    circle var(--fr) at var(--fx) var(--fy),
    transparent 0%,
    transparent 48%,
    rgba(0,0,0,.25) 62%,
    #000 78%
  );
}

/* ── GRAIN ── */
.p-grain{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  opacity:0;transition:opacity .25s;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.p-stage.is-lit .p-grain{opacity:.28}

/* ── SCANLINES ── */
.p-scanlines{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 2px,
    rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 4px
  );
  opacity:.5;
  animation:scanDrift 8s linear infinite;
}
@keyframes scanDrift{from{background-position:0 0}to{background-position:0 8px}}

/* ── PROFILE — always on top; fades inside the beam to reveal back photo ── */
.p-profile{
  position:absolute;inset:0;z-index:8;
  background:url("../assets/profile.png") center / contain no-repeat;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 0%,#000 100%);
  mask-image:radial-gradient(circle,#000 0%,#000 100%);
}
.p-stage.is-lit .p-profile{
  -webkit-mask-image:radial-gradient(
    circle var(--fr) at var(--fx) var(--fy),
    transparent 0%,
    transparent 48%,
    rgba(0,0,0,.35) 62%,
    #000 78%
  );
  mask-image:radial-gradient(
    circle var(--fr) at var(--fx) var(--fy),
    transparent 0%,
    transparent 48%,
    rgba(0,0,0,.35) 62%,
    #000 78%
  );
}

/* ── CORNERS ── */
.p-corner{position:absolute;width:16px;height:16px;z-index:8;pointer-events:none}
.p-corner::before,.p-corner::after{content:'';position:absolute;background:rgba(200,254,40,.5)}
.p-corner::before{width:100%;height:1px}
.p-corner::after{width:1px;height:100%}
.p-corner.tl{top:14px;left:14px}
.p-corner.tr{top:14px;right:14px}
.p-corner.tr::after{right:0;left:auto}
.p-corner.bl{bottom:14px;left:14px}
.p-corner.bl::before{bottom:0;top:auto}
.p-corner.br{bottom:14px;right:14px}
.p-corner.br::before{bottom:0;top:auto}
.p-corner.br::after{right:0;left:auto}

/* ── REC ── */
.p-rec{
  position:absolute;top:14px;right:14px;z-index:8;
  display:flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:7px;letter-spacing:2px;
  color:rgba(255,45,85,.75);pointer-events:none;
}
.p-rec-dot{
  width:5px;height:5px;border-radius:50%;background:var(--red);
  animation:recBlink 1.2s ease-in-out infinite;
}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.15}}

/* ── COORDS (only when lit) ── */
.p-coords{
  position:absolute;top:14px;left:14px;z-index:8;
  font-family:var(--mono);font-size:7px;letter-spacing:1.5px;
  color:rgba(200,254,40,.4);pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.p-stage.is-lit .p-coords{opacity:1}

/* ── TIMECODE ── */
.p-timecode{
  position:absolute;bottom:12px;right:14px;z-index:8;
  font-family:var(--mono);font-size:7px;letter-spacing:1.5px;
  color:rgba(200,254,40,.38);pointer-events:none;
}

/* ── HINT ── */
.p-hint{
  position:absolute;bottom:16px;left:50%;z-index:8;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:8px;letter-spacing:3px;
  text-transform:uppercase;color:rgba(245,245,245,.28);
  pointer-events:none;white-space:nowrap;
  transition:opacity .4s;
  animation:hintBreathe 3s ease-in-out infinite;
}
@keyframes hintBreathe{
  0%,100%{opacity:.7}50%{opacity:.35}
}
.hint-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(200,254,40,.4);
}
.p-stage.is-lit .p-hint{opacity:0;animation:none}

/* ── BOTTOM FILMBAR ── */
.p-filmbar{
  display:flex;align-items:center;gap:14px;
  padding-top:12px;
  border-top:1px solid var(--bdr);
  margin-top:12px;
  font-family:var(--mono);font-size:8px;letter-spacing:2px;
  text-transform:uppercase;
}
.p-fb-idx{color:rgba(245,245,245,.22);flex-shrink:0}
.p-fb-track{
  flex:1;height:2px;background:rgba(245,245,245,.05);
  border-radius:2px;overflow:hidden;
}
.p-fb-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--lime),var(--red));
  border-radius:2px;transition:width .08s linear;
}
.p-fb-name{color:var(--wht);flex-shrink:0}
.p-fb-tag{color:var(--lime);flex-shrink:0;margin-left:auto}

/* ── MOBILE / TOUCH ───────────────── */
@media (hover:none),(pointer:coarse){
  .p-stage{cursor:pointer;touch-action:none}
}
@media (max-width:900px){
  :root{--fr:clamp(110px,34vw,190px)}
  .portrait-wrap{width:min(360px,100%)}
  .p-hud{gap:8px}
  .p-hud-left,.p-hud-right{font-size:7px;letter-spacing:2px}
  .p-stage{box-shadow:0 0 0 1px rgba(200,254,40,.07),0 20px 50px rgba(0,0,0,.5)}
  .p-hint{font-size:7px;letter-spacing:2px;max-width:92%;white-space:normal;text-align:center}
  .p-filmbar{gap:10px;flex-wrap:wrap}
  .p-fb-tag{margin-left:0}
}
@media (max-width:520px){
  :root{--fr:clamp(100px,42vw,160px)}
  .portrait-wrap{width:100%}
  .p-hud-left{gap:6px}
  .p-hud-left,.p-hud-right{font-size:6px;letter-spacing:1.5px}
  .p-rec,.p-coords,.p-timecode{font-size:6px}
  .p-corner{width:12px;height:12px}
  .p-corner.tl,.p-corner.tr{top:10px}
  .p-corner.tl,.p-corner.bl{left:10px}
  .p-corner.tr,.p-corner.br{right:10px}
  .p-corner.bl,.p-corner.br{bottom:10px}
}