/* Ending (screens 41-42): staggered photo, "te amo" line, light-bulb drawer. */

/* screen41's photo under "te adoro mi amorsito :3". */
.screen-photo {
  max-width: 70vw;
  max-height: 35vh;
  border-radius: 8px;
}

/* screen41's photo and next button, revealed one after the other (see
   screen41Photo in script.js) - same idea as screen3's monkey, at the
   site's usual 1.2s fade. Unclickable until shown. The id selector on the
   button is needed to outrank .next-btn's own transition. */
.reveal-step {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

#nextBtn41.reveal-step {
  transition: opacity 1.2s ease, background 0.3s ease, color 0.3s ease;
}

.reveal-step.visible {
  opacity: 1;
  pointer-events: auto;
}

/* screen42's "te amo<3": hidden until a beat after the screen itself has
   faded in (see screen42Late in script.js), then slowly fades in over
   2.4s (2x the site's usual 1.2s, like the bulb). */
.late-message {
  opacity: 0;
  transition: opacity 2.4s ease;
}

.late-message.visible {
  opacity: 1;
}

/* screen42's light-bulb drawer: the comida drawer's own structure/CSS
   (.comida-drawer*, slide + handle-travels-with-panel) in a dark theme.
   Always in layout (not display:none like comida's) so it can fade in
   slowly - hidden and unclickable until .bulb-drawer--visible. */
.comida-drawer.bulb-drawer {
  display: block;
  /* Closed = fully below the screen edge (comida's drawer leaves a 2rem
     strip of panel peeking; here only the bulb handle should show). */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s ease, opacity 2.4s ease;
}

.comida-drawer.bulb-drawer.comida-drawer--open {
  transform: translateY(0);
}

.comida-drawer.bulb-drawer.bulb-drawer--visible {
  opacity: 1;
  pointer-events: auto;
}

.bulb-drawer .bulb-drawer__handle {
  background: #1b1b1b;
  box-shadow: 0 0 14px 2px rgba(255, 224, 130, 0.18);
  border: 1px solid #333333;
}

.bulb-drawer.comida-drawer--open .bulb-drawer__handle {
  box-shadow: 0 0 22px 6px rgba(255, 214, 90, 0.45);
}

.bulb-icon {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: #d9cfa8;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.5s ease, stroke 0.5s ease;
}

/* Switched on while the drawer is open. */
.bulb-drawer.comida-drawer--open .bulb-icon__glass {
  fill: #ffd84a;
  stroke: #ffd84a;
}

.bulb-drawer.comida-drawer--open .bulb-icon__base {
  stroke: #ffd84a;
}

.bulb-drawer .comida-drawer__panel {
  background: #141414;
  box-shadow: 0 0 16px 4px rgba(0, 0, 0, 0.6);
}

.bulb-drawer.comida-drawer--open .comida-drawer__panel {
  box-shadow: 0 0 18px 4px rgba(255, 214, 90, 0.12);
}

.bulb-drawer .comida-drawer__message {
  color: #ffffff;
}

/* "aqui": just yellow text, same font/style as the rest of the message. */
.bulb-drawer__link {
  color: #ffd84a;
  text-decoration: none;
}