/* =========================================================
   PROJECT MIMI — SURPRISE 5
   THE HIDDEN PHOTOGRAPH
========================================================= */

#surprise5{
    position:fixed;inset:0;overflow:hidden;color:#fff;
    background:
      radial-gradient(circle at 50% 42%,rgba(235,198,117,.10),transparent 24%),
      radial-gradient(circle at 20% 75%,rgba(68,105,150,.10),transparent 35%),
      linear-gradient(180deg,#03060d 0%,#071120 58%,#091a2b 100%);
    font-family:Georgia,"Times New Roman",serif;
}
#surprise5 *{box-sizing:border-box}
#surprise5 button{-webkit-tap-highlight-color:transparent}
.s5-atmosphere,.s5-aura,.s5-stars{position:absolute;inset:0;pointer-events:none}
.s5-aura{background:radial-gradient(circle at 50% 50%,rgba(232,199,125,.11),transparent 24%);filter:blur(18px);animation:s5Breath 8s ease-in-out infinite}
.s5-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(231,198,125,.34);box-shadow:0 0 10px rgba(231,198,125,.15);animation:s5Twinkle 5s ease-in-out infinite}
.s5-stars i:nth-child(1){left:9%;top:19%}.s5-stars i:nth-child(2){left:78%;top:17%;animation-delay:.7s}.s5-stars i:nth-child(3){left:18%;top:42%;animation-delay:1.4s}.s5-stars i:nth-child(4){left:87%;top:43%;animation-delay:2.1s}.s5-stars i:nth-child(5){left:31%;top:27%;animation-delay:1s}.s5-stars i:nth-child(6){left:67%;top:31%;animation-delay:2.8s}.s5-stars i:nth-child(7){left:14%;top:78%;animation-delay:1.8s}.s5-stars i:nth-child(8){left:88%;top:77%;animation-delay:3s}
.s5-stage{position:relative;z-index:5;width:min(92vw,520px);height:100%;margin:auto}
.s5-header{position:absolute;z-index:20;top:38px;left:0;right:0;display:flex;justify-content:space-between;color:rgba(255,255,255,.31);font-size:9px;letter-spacing:4px}
.s5-header span:first-child{color:#e7c77d}
.s5-footer{position:absolute;z-index:20;bottom:26px;left:0;right:0;text-align:center;color:rgba(231,198,125,.35);font-size:10px;letter-spacing:2px}
.s5-phase{position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%,-50%);opacity:1;visibility:visible;transition:opacity .7s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.s5-phase[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-47%) scale(.975)}

/* ENTRY */
.s5-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:480px}
.s5-seal{width:112px;height:112px;border:1px solid rgba(232,199,125,.28);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 12px rgba(232,199,125,.025),0 0 60px rgba(232,199,125,.08);position:relative}
.s5-seal:before{content:"";position:absolute;inset:12px;border:1px dashed rgba(232,199,125,.18);border-radius:50%}
.s5-seal span{font-size:24px;color:#f0d38a;animation:s5Float 2.6s ease-in-out infinite}
.s5-entry-mark{margin-top:30px;color:#d9b86f;font-size:10px;letter-spacing:6px}
.s5-entry-line{width:80px;height:1px;margin-top:18px;background:linear-gradient(90deg,transparent,#d9b86f,transparent);opacity:.5}

.s5-main-btn{display:flex;align-items:center;justify-content:center;gap:13px;min-width:220px;height:54px;margin:30px auto 0;padding:0 23px;border:1px solid rgba(232,199,125,.44);border-radius:999px;background:rgba(255,255,255,.035);color:#f1d99c;font:600 14px Georgia,"Times New Roman",serif;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;transition:.28s ease}
.s5-main-btn:hover,.s5-main-btn:focus-visible{transform:translateY(-2px);background:rgba(232,199,125,.08);box-shadow:0 14px 35px rgba(0,0,0,.22);outline:none}
.s5-main-btn b{font-size:19px;font-weight:400}.s5-main-btn.pressed{transform:scale(.97)}
.s5-intro.hide{opacity:0;transform:translate(-50%,-54%) scale(.94);pointer-events:none}

/* PUZZLE */
.s5-puzzle{width:min(92vw,440px);min-height:0;padding-top:10px;max-height:calc(100dvh - 150px)}
.s5-puzzle-top{display:flex;justify-content:space-between;align-items:center;margin:0 3px 17px;color:rgba(255,255,255,.43);font-size:9px;letter-spacing:4px}
.s5-puzzle-top b{color:#dfc17b;font-size:9px;font-weight:400;letter-spacing:2px}
.s5-board{width:min(82vw,340px);aspect-ratio:3/4;margin:auto;padding:4px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:3px;border:1px solid rgba(232,199,125,.22);background:rgba(3,8,16,.7);box-shadow:0 25px 65px rgba(0,0,0,.35),0 0 50px rgba(232,199,125,.035);border-radius:5px;transition:.8s ease}
.s5-piece{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:2px;background-image:url("../../assets/surprise5/birthday-reveal.png");background-size:400% 400%;background-repeat:no-repeat;background-color:#111b29;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer;transition:transform .24s ease,filter .24s ease,box-shadow .24s ease,border-color .24s ease;min-width:0;min-height:0}
.s5-piece:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 45%,rgba(0,0,0,.08));pointer-events:none}
.s5-piece:hover{filter:brightness(1.08);transform:scale(.985);z-index:2}
.s5-piece.selected{transform:scale(.94);border-color:#e9c979;box-shadow:0 0 0 2px rgba(233,201,121,.22),0 0 22px rgba(233,201,121,.20);z-index:5}
.s5-piece.correct{box-shadow:inset 0 0 0 1px rgba(232,199,125,.18)}
.s5-piece.just-moved{animation:s5Nudge .28s ease}
.s5-board.solved{gap:0;padding:0;border-color:rgba(239,207,137,.48);box-shadow:0 0 80px rgba(232,199,125,.22)}
.s5-board.solved .s5-piece{border-color:transparent;border-radius:0;pointer-events:none}
.s5-puzzle-status{height:26px;margin:10px 4px 7px;display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.45);font-size:11px;letter-spacing:1px}
#s5StatusDot{width:4px;height:4px;border-radius:50%;background:#8d7a50;transition:.3s}#s5StatusDot.active{background:#e8c77d;box-shadow:0 0 12px rgba(232,199,125,.8)}
.s5-progress{width:76%;height:2px;margin:auto;background:rgba(255,255,255,.08);overflow:hidden}.s5-progress i{display:block;width:0;height:100%;background:#e8c77d;box-shadow:0 0 12px rgba(232,199,125,.55);transition:width .45s ease}
.s5-puzzle.fade-out{opacity:0;transform:translate(-50%,-53%) scale(1.03)}

/* PHOTO */
.s5-photo-phase{display:grid;place-items:center;min-height:600px}
.s5-photo-halo{position:absolute;width:92%;height:82%;border-radius:50%;background:radial-gradient(circle,rgba(232,199,125,.15),transparent 63%);filter:blur(28px);animation:s5Breath 6s ease-in-out infinite}
.s5-photo-frame{position:relative;width:min(82vw,360px);max-height:68vh;margin:0;overflow:hidden;border:1px solid rgba(232,199,125,.42);padding:5px;background:#efe1ca;box-shadow:0 30px 90px rgba(0,0,0,.46),0 0 45px rgba(232,199,125,.10);transform:scale(.82);opacity:0;animation:s5PhotoIn 1.25s cubic-bezier(.22,.61,.36,1) .1s forwards}
.s5-photo-frame img{display:block;width:100%;height:auto;max-height:67vh;object-fit:contain}
.s5-photo-shine{position:absolute;inset:-30% -60%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%);transform:translateX(-65%);animation:s5Shine 2.3s ease 1.15s forwards;pointer-events:none}
.s5-photo-spark{position:absolute;right:9%;bottom:9%;width:58px;height:58px;border:1px solid rgba(232,199,125,.35);border-radius:50%;background:rgba(3,8,16,.62);color:#e9c97b;font-size:19px;opacity:0;pointer-events:none;transform:scale(.7);transition:.4s;box-shadow:0 0 0 8px rgba(232,199,125,.025),0 0 30px rgba(232,199,125,.08)}
.s5-photo-spark.ready{opacity:1;pointer-events:auto;transform:scale(1);animation:s5SparkPulse 2s ease-in-out infinite}
.s5-photo-spark.collected{transform:scale(1.4);opacity:0;pointer-events:none}
.s5-photo-hint{position:absolute;right:9%;bottom:9%;width:58px;height:58px;border-radius:50%;border:1px solid rgba(232,199,125,.6);opacity:0;transform:scale(.5);pointer-events:none}.s5-photo-hint.show{animation:s5Hint 1.05s ease forwards}

/* AFTER PHOTO */
.s5-after-photo{display:grid;place-items:center;min-height:520px}.s5-after-symbol{position:relative;z-index:2;width:92px;height:92px;border:1px solid rgba(232,199,125,.32);border-radius:50%;display:grid;place-items:center;color:#e8c77d;font-size:25px;box-shadow:0 0 0 13px rgba(232,199,125,.025),0 0 60px rgba(232,199,125,.10);animation:s5Float 3s ease-in-out infinite}.s5-after-orbit{position:absolute;width:230px;height:230px;border:1px dashed rgba(232,199,125,.12);border-radius:50%;animation:s5Rotate 16s linear infinite}.s5-after-particles i{position:absolute;width:5px;height:5px;border-radius:50%;background:#e8c77d;box-shadow:0 0 14px rgba(232,199,125,.7);animation:s5Float 2.8s ease-in-out infinite}.s5-after-particles i:nth-child(1){transform:translate(-120px,-95px)}.s5-after-particles i:nth-child(2){transform:translate(110px,-70px);animation-delay:.4s}.s5-after-particles i:nth-child(3){transform:translate(125px,85px);animation-delay:.8s}.s5-after-particles i:nth-child(4){transform:translate(-105px,95px);animation-delay:1.2s}.s5-after-particles i:nth-child(5){transform:translate(0,135px);animation-delay:1.6s}.s5-after-photo.leave{opacity:0;transform:translate(-50%,-56%) scale(.9)}

@keyframes s5Breath{50%{transform:scale(1.08);opacity:.75}}@keyframes s5Twinkle{50%{opacity:.15;transform:scale(.7)}}@keyframes s5Float{50%{transform:translateY(-7px)}}@keyframes s5Rotate{to{transform:rotate(360deg)}}@keyframes s5Nudge{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}@keyframes s5PhotoIn{to{opacity:1;transform:scale(1)}}@keyframes s5Shine{to{transform:translateX(65%)}}@keyframes s5SparkPulse{50%{box-shadow:0 0 0 13px rgba(232,199,125,.035),0 0 38px rgba(232,199,125,.22)}}@keyframes s5Hint{0%{opacity:0;transform:scale(.5)}35%{opacity:1}100%{opacity:0;transform:scale(1.9)}}

@media(max-width:420px){
    .s5-header{top:30px;font-size:8px;letter-spacing:3px}.s5-footer{bottom:20px;font-size:9px}
    .s5-puzzle{width:92vw;padding-top:4px}.s5-board{width:min(78vw,320px);gap:2px;padding:3px}.s5-puzzle-status{font-size:10px;height:24px;margin:8px 2px 6px}.s5-progress{width:72%}.s5-photo-frame{width:min(84vw,350px)}
}

/* FINAL MOBILE PUZZLE FIT */
#surprise5 .s5-board{
    overflow:hidden;
}
#surprise5 .s5-piece{
    aspect-ratio:3 / 4;
}
@media (max-height:720px){
    #surprise5 .s5-board{
        width:min(74vw,300px);
    }
}