/* === STAGE === */
.film-stage{
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  pointer-events:auto;
}

/* === FILM BASE === */
.film{
  position:absolute;
  inset:0;
  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.08) 18%,
      rgba(255,255,255,.03) 40%,
      rgba(255,255,255,.02) 55%,
      rgba(255,255,255,.06) 78%,
      rgba(255,255,255,.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(236,241,247,.10) 0%,
      rgba(210,220,233,.06) 100%
    ),
    rgba(245,248,252,.05);

  backdrop-filter: blur(7px) saturate(1.03);
  -webkit-backdrop-filter: blur(7px) saturate(1.03);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 90px rgba(255,255,255,.04),
    inset 0 0 120px rgba(0,0,0,.04);

  will-change: clip-path, opacity, filter, transform;
}

/* === LIGHT SHINE === */
.film::before{
  content:"";
  position:absolute;
  inset:-6%;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,.05) 46%,
      rgba(255,255,255,.12) 52%,
      rgba(255,255,255,.05) 60%,
      transparent 75%,
      transparent 100%
    );

  mix-blend-mode:screen;
  opacity:.72;

  animation:filmShine 6s ease-in-out infinite;
}

@keyframes filmShine{
  0%{ transform:translateX(-20%); }
  50%{ transform:translateX(4%); }
  100%{ transform:translateX(20%); }
}

/* === CORNER TAB === */
.film::after{
  content:"";
  position:absolute;

  top:10px;
  right:10px;

  width:84px;
  height:84px;

  border-radius:0 24px 0 100%;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.14) 40%,
      rgba(255,255,255,.04) 75%,
      rgba(255,255,255,0) 100%
    );

  box-shadow:
    -6px 8px 16px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.12);

  transform-origin:top right;
  opacity:0;
}

/* === HINT TEXT === */
.film-hint.hide{
  animation:none;
  opacity:0;
  transform:translateY(-10px) scale(.96);
  filter:blur(4px);
  pointer-events:none;
}

@keyframes hintPulse{
  0%{ opacity:.55; }
  50%{ opacity:1; }
  100%{ opacity:.55; }
}

.film-hint.hide{
  opacity:0;
  transform:translateY(-8px);
}

/* === PEEL ANIMATION === */
.film.peeled{
  clip-path: polygon(
    0% 0%,
    90% 0%,
    94% 2%,
    97% 7%,
    99% 14%,
    100% 24%,
    100% 100%,
    0% 100%
  );

  opacity: 0;

  transition:
    clip-path 4.2s cubic-bezier(.20,.78,.16,1),
    opacity 2.6s ease .35s;
}
/* === REVEAL FLASH LAYER === */
.film-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:99;
  pointer-events:none;
  opacity:0;

  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.20), transparent 22%),
    radial-gradient(circle at 50% 62%, rgba(255,244,210,.10), transparent 40%);
  mix-blend-mode:screen;
}

.film-stage.reveal-flash::before{
  animation:revealFlash .75s ease-out forwards;
}

@keyframes revealFlash{
  0%{
    opacity:0;
    filter:blur(10px);
    transform:scale(1.02);
  }
  22%{
    opacity:.95;
    filter:blur(4px);
    transform:scale(1);
  }
  100%{
    opacity:0;
    filter:blur(0);
    transform:scale(1);
  }
}

/* === FILM STAGE BOOST DURING REVEAL === */
.film-stage.reveal-flash .film{
  animation:filmRevealBoost .72s ease-out forwards;
}

@keyframes filmRevealBoost{
  0%{
    transform:scale(1.005);
    filter:brightness(1.02);
  }
  35%{
    transform:scale(1);
    filter:brightness(1.08);
  }
  100%{
    transform:scale(1);
    filter:brightness(1);
  }
}

/* === BIRD (если используется) === */
.bird{
  pointer-events:none;
  position:absolute;
  left:0;
  top:0;

  width:120px;

  transform-origin:center center;
  opacity:0;
  z-index:2;

  will-change:transform, opacity;

  user-select:none;
  -webkit-user-drag:none;

  filter:
    drop-shadow(0 12px 20px rgba(0,0,0,0.35))
    drop-shadow(0 0 18px rgba(255,244,210,0.10));
}
.film-hint{
  position:absolute;
  top:20px;
  right:20px;
  left:auto;
  bottom:auto;

  z-index:101;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:44px;
  height:44px;
  padding:0 14px;

  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;

  background:rgba(18,18,22,0.52);
  backdrop-filter: blur(9px) saturate(1.02);
-webkit-backdrop-filter: blur(9px) saturate(1.02);

  color:rgba(255,255,255,.92);
  font-size:15px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  text-align:center;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);

  animation:hintPulse 2.6s ease-in-out infinite;
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease;

  pointer-events:none;
}

.film-hint.hide{
  animation:none;
  opacity:0;
  transform:scale(.96);
  filter:blur(4px);
  pointer-events:none;
}
/* === MOBILE === */
@media (max-width:680px){
  .film-hint{
    top:16px;
    right:16px;
    left:auto;
    font-size:13px;
    height:40px;
    padding:0 12px;
    border-radius:12px;
  }

  .bird{
    width:110px;
  }
}

  .film::after{
    width:72px;
    height:72px;
  }

.film.peeled::after{
  opacity: 1;

  transform:
    translate3d(10px, 4px, 0)
    rotate(18deg)
    scale(1.02, .96);

  transition:
    transform 4.2s cubic-bezier(.20,.78,.16,1),
    opacity .45s ease;
}

  .bird{
    width:110px;
  }