/* =========================
   MJ.css (FULL FILE)
   ========================= */

*{ box-sizing:border-box; margin:0; padding:0; }

@keyframes gradientAnimation{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes popIn{
  0%   { opacity:0; transform: translateY(18px) scale(0.92); }
  60%  { opacity:1; transform: translateY(-2px) scale(1.03); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

@keyframes floaty{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

@keyframes sheenSweep{
  from { left:-60%; opacity:0.0; }
  10%  { opacity:0.55; }
  to   { left:120%; opacity:0.0; }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

/* Subtle lock wiggle */
@keyframes lockWiggle{
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(-6deg); }
}

/* DEFAULT (Slide 1) background: almost white faint pink */
body{
  min-height:100vh;
  overflow:hidden;
  font-family: "Playfair Display", serif;
  background: linear-gradient(180deg, #fff7fa, #fde9f0);
}

/* Slide 2+ background: animated Valentine gradient (turned on via JS) */
.valentine-bg{
  background: linear-gradient(
    45deg,
    #f4c6d3,
    #eeb4c5,
    #d98aa2,
    #efbccb,
    #f6d1dc
  );
  background-size: 500% 500%;
  animation: gradientAnimation 40s ease-in-out infinite;
}

/* Valentine screen “sexy red” mode */
.valentine-red{
  background: radial-gradient(circle at 15% 10%, #ff4d6d, #c9184a, #590d22);
  background-size: 500% 500%;
  animation: gradientAnimation 12s ease-in-out infinite;
}

/* haze blobs */
body::before, body::after{
  content:"";
  position:fixed;
  width:520px;
  height:520px;
  border-radius:50%;
  filter: blur(95px);
  opacity:.35;
  z-index:-1;
  pointer-events:none;
}
body::before{ background:#f3b7c5; top:-160px; left:-170px; }
body::after { background:#eaa9b9; bottom:-170px; right:-170px; }

/* full-screen layers */
.screen{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform: scale(1.01);
  transition: opacity .7s ease, transform .7s ease;
}
.screen.active{
  opacity:1;
  pointer-events:auto;
  transform: scale(1);
}

.fade-out{
  opacity:0 !important;
  transform: scale(.98) !important;
  pointer-events:none !important;
}

/* =========================
   Slide 1: Intro
   ========================= */
.intro-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.intro-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(48px, 8vw, 140px);
  color:#8b1e3f;
  letter-spacing:0.5px;
  text-shadow:
    0 12px 30px rgba(122, 31, 51, 0.25),
    0 2px 8px rgba(0,0,0,0.15);
  animation: popIn .65s cubic-bezier(.2,1.2,.3,1) both;
}

.intro-emoji{
  font-size: clamp(34px, 4vw, 56px);
  opacity:.95;
  animation: popIn .65s cubic-bezier(.2,1.2,.3,1) both .12s,
             floaty 2.4s ease-in-out infinite .9s;
}

/* =========================
   Buttons (shared)
   ========================= */
.main-btn{
  position: relative;
  padding: 46px 92px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;

  font-family: "Playfair Display", serif;
  font-size: 54px;
  letter-spacing: 6px;
  font-weight: 600;
  color: rgba(255,255,255,0.96);

  background: linear-gradient(90deg, #ff4f8b, #c2184a);

  box-shadow:
    0 30px 80px rgba(194, 24, 74, 0.45),
    0 0 0 6px rgba(255, 120, 165, 0.12);

  transition: transform .2s ease, box-shadow .2s ease;
}

/* lighter center glow */
.main-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,190,215,0.45),
      rgba(255,140,180,0.25),
      rgba(255,140,180,0.10),
      transparent 70%
    );
  pointer-events:none;
}

/* sheen line */
.main-btn::after{
  content:"";
  position:absolute;
  top:-35%;
  left:-60%;
  width:55%;
  height:170%;
  transform: skewX(-18deg);
  background: rgba(255,255,255,0.28);
  opacity:0;
  pointer-events:none;
}

.main-btn:hover::after{
  opacity:1;
  animation: sheenSweep 1.2s ease forwards;
}

.main-btn:active{ transform: translateY(-1px) scale(0.99); }

.main-btn.small{
  padding: 30px 64px;
  font-size: 38px;
  letter-spacing: 3px;
}

/* =========================
   Cards (Secret + Password)
   ========================= */
.secret-card{
  background: rgba(255,255,255,0.95);
  border-radius: 38px;
  padding: 46px 48px;
  width: min(680px, 86vw);
  box-shadow: 0 30px 90px rgba(0,0,0,0.18);
  border: 4px solid rgba(255, 100, 150, 0.45);
}

.secret-lock{
  font-size: 64px;
  margin-bottom: 18px;
  display: inline-block;
  animation: lockWiggle 2.6s ease-in-out infinite;
  transform-origin: 50% 20%;
}

.secret-title{
  font-family: "Playfair Display", serif;
  color:#c2184a;
  font-size: clamp(42px, 6vw, 86px);
  margin-bottom: 10px;
  white-space: nowrap;
}

.secret-subtitle{
  color:#6b6b6b;
  font-style: italic;
  font-size: clamp(18px, 2.3vw, 28px);
  margin-bottom: 40px;
}

/* Password */
.password-title{
  font-family: "Playfair Display", serif;
  font-size: 36px;
  color: #c2184a;
  margin-bottom: 10px;
}

.password-subtitle{
  font-size: 18px;
  color: #777;
  margin-bottom: 28px;
}

.password-input{
  width: 240px;
  padding: 16px 18px;
  font-size: 18px;
  text-align: center;
  border-radius: 14px;
  border: 2px solid #ff7aa8;
  outline: none;
  font-family: "Playfair Display", serif;
  margin-bottom: 26px;
  background: rgba(255,255,255,0.8);
}
.password-input::placeholder{ color: #bbb; }
.password-input:focus{ border-color: #c2184a; }

.password-hint{
  margin-top: 18px;
  font-size: 14px;
  color: #999;
  font-style: italic;
}

.password-error{
  margin-top: 14px;
  font-size: 16px;
  color: #c2184a;
  min-height: 22px;
}

.wrong-flash{
  filter: saturate(1.2);
}

/* =========================
   Slide 5: Game
   ========================= */
.game-card{
  background: rgba(255, 245, 248, 0.95);
  border-radius: 24px;
  padding: 34px 40px 34px;
  width: min(1100px, 94vw);
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);
  text-align: center;
  border: 3px solid rgba(255, 120, 165, 0.20);
}

.game-question{
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 3.2vw, 42px);
  color: #c2184a;
  margin-bottom: 26px;
}

.game-feedback{
  min-height: 24px;
  font-size: 18px;
  margin-bottom: 18px;
  color: #c2184a;
}

/* 5x3 grid */
.game-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  margin-top: 10px;
}

/* cubes */
.game-option{
  background: #f8d6d1;
  border: 2px solid rgba(0,0,0,0.35);
  border-radius: 18px;
  padding: 30px 12px;
  font-size: 26px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.game-option:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.game-option.correct{
  background: #ffdce8;
  border-color: #c2184a;
}

.game-option.wrong{
  background: #ffb3b3;
  animation: shake 0.35s;
}

/* NEXT button for game */
.game-next-btn{
  display: none;
  margin-top: 26px;
}

/* responsive grid */
@media (max-width: 900px){
  .game-grid{ grid-template-columns: repeat(3, 1fr); }
  .game-option{ font-size: 22px; padding: 26px 10px; }
}
@media (max-width: 520px){
  .game-grid{ grid-template-columns: repeat(2, 1fr); }
  .game-option{ font-size: 20px; padding: 24px 10px; }
}

/* =========================
   Slide 6: Valentine
   ========================= */
.valentine-card{
  background: rgba(255, 245, 248, 0.95);
  border-radius: 28px;
  padding: 48px 52px;
  width: min(820px, 92vw);
  box-shadow: 0 30px 90px rgba(0,0,0,0.18);
  border: 3px solid rgba(255, 120, 165, 0.20);
}

.valentine-question{
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 5vw, 72px);
  color: #c2184a;
  margin-bottom: 34px;
}

.valentine-buttons{
  display:flex;
  gap: 22px;
  justify-content:center;
  flex-wrap:wrap;
}

.yes-btn, .no-btn{
  font-size: 36px;
  padding: 26px 56px;
  letter-spacing: 2px;
}

/* =========================
   Slide 7: Video (UPDATED)
   ========================= */
.video-card{
  width: min(1000px, 92vw);
  height: min(640px, 70vh);          /* taller = “bigger square” feel */
  padding: 26px;
  border-radius: 26px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  display: grid;
  place-items: center;
}

.mj-video{
  width: 100%;
  height: 100%;                      /* fill the taller card */
  border-radius: 18px;
  outline: none;
  object-fit: contain;               /* keep full video visible */
  background: #000;                  /* clean frame */
}

/* Video text container */
.video-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* Verse styling */
.video-text{
  text-align: center;
  animation: popIn 1s ease both;
}

.verse{
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 3vw, 34px);
  color: #fff;
  text-shadow: 0 8px 30px rgba(0,0,0,0.35);
  margin-bottom: 6px;
}

.verse-ref{
  font-size: 16px;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  margin-bottom: 14px;
}

.love-message{
  font-size: 18px;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.5px;
}