/* =========================================================
   Photo Invite — φωτογραφία μπρος/πίσω με 3D flip
   Παλέτες: .theme-neutral (sage/κρεμ/χρυσό) · .theme-boy · .theme-girl
   ========================================================= */
.theme-neutral{
  --bg:#f3efe6; --bg-2:#e7dfce; --card:#fffdf9;
  --ink:#4b4a42; --ink-soft:#6f6d62; --muted:#9a9483; --line:#e7e0d0;
  --accent:#97a886; --accent-deep:#6d7d57;
  --gold:#c0a35e; --gold-soft:#ddcda0;
  --orb-a:#c7b27a; --orb-b:#a9bd97; --orb-c:#e6d9bd;
}
.theme-boy{
  --bg:#eef2f6; --bg-2:#d7e3ee; --card:#ffffff;
  --ink:#3f464d; --ink-soft:#5e6770; --muted:#8c97a1; --line:#dde6ee;
  --accent:#8fb0c7; --accent-deep:#4f7896; --gold:#c0a35e; --gold-soft:#ddcda0;
  --orb-a:#9fc0d6; --orb-b:#c9d9e6; --orb-c:#e4d6ad;
}
.theme-girl{
  --bg:#f8eef1; --bg-2:#f1d9e0; --card:#fffafb;
  --ink:#4d4247; --ink-soft:#6f626a; --muted:#a8939b; --line:#efdbe1;
  --accent:#dca9b6; --accent-deep:#bd7e90; --gold:#c0a35e; --gold-soft:#ddcda0;
  --orb-a:#e6b3c1; --orb-b:#f0d3da; --orb-c:#e7d6ad;
}
/* Έναστρο / λυκόφως — δένει με τις φωτογραφίες «Καλλιστώ / Μεγάλη Άρκτος» */
.theme-night{
  --bg:#161d40; --bg-2:#3c2f59; --card:#0f1430;
  --ink:#f3ece0; --ink-soft:#ded4dc; --muted:#b6adc6; --line:rgba(240,220,171,.55);
  --accent:#9fb1e0; --accent-deep:#e6c98a;
  --gold:#e3c277; --gold-soft:#f0dcab;
  --orb-a:#caa27a; --orb-b:#5566a8; --orb-c:#b98aa6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow-x:hidden;
  font-family:"Cormorant Garamond",Georgia,serif;color:var(--ink);
  background:linear-gradient(160deg,var(--bg) 0%,var(--bg-2) 100%);
  background-attachment:fixed;
}
body.locked{overflow:hidden}
h1,h2,.display{font-family:"GFS Didot","Cormorant Garamond",serif;font-weight:400}

/* ---------- Φωτεινά orbs στο φόντο ---------- */
.bg-orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;filter:blur(60px)}
.bg-orbs i{position:absolute;border-radius:50%;opacity:.5;mix-blend-mode:multiply;animation:drift 18s ease-in-out infinite}
.bg-orbs i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-6vw;background:radial-gradient(circle,var(--orb-a),transparent 70%)}
.bg-orbs i:nth-child(2){width:52vw;height:52vw;right:-12vw;top:18vh;background:radial-gradient(circle,var(--orb-b),transparent 70%);animation-delay:-6s}
.bg-orbs i:nth-child(3){width:40vw;height:40vw;left:20vw;bottom:-14vw;background:radial-gradient(circle,var(--orb-c),transparent 70%);animation-delay:-11s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,3vh) scale(1.08)}66%{transform:translate(-3vw,-2vh) scale(.96)}}

/* ---------- Πέταλα / χρυσόσκονη ---------- */
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.petal{position:absolute;top:-30px;border-radius:50% 0 50% 50%;background:var(--accent);transform:rotate(45deg);animation:fall linear infinite}
.petal.gold{background:var(--gold-soft);border-radius:50%}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translateY(112vh) rotate(340deg);opacity:0}}

/* ---------- Σπίθες (burst στο άνοιγμα) ---------- */
.sparkles{position:fixed;inset:0;pointer-events:none;z-index:60}
.spark{position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,#fff,var(--gold) 60%,transparent);
  transform:translate(-50%,-50%) scale(1);opacity:0;will-change:transform,opacity}

/* =========================================================
   INTRO — φάκελος που ανοίγει
   ========================================================= */
.intro{
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:34px;cursor:pointer;
  background:transparent;                 /* διάφανο: φαίνονται τα εφέ (αστέρια/αστρόσκονη/λάμψεις) από κάτω */
  transition:opacity 1s ease, visibility 1s;
}
.intro.faded{opacity:0;visibility:hidden}
.intro__hint{color:var(--ink-soft);letter-spacing:.32em;text-transform:uppercase;font-size:12px;transition:opacity .4s}
.intro__hint span{display:inline-block;animation:pulse 2s ease-in-out infinite}
.intro.opening .intro__hint{opacity:0}

.envelope{--ew:340px;--eh:224px;position:relative;width:var(--ew);height:var(--eh);perspective:1500px;animation:rise 1s ease both}
@media(max-width:400px){.envelope{--ew:290px;--eh:191px}}
/* φωτεινό halo πίσω από τον φάκελο */
.envelope::before{content:"";position:absolute;inset:-40% -30%;border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft),transparent 62%);opacity:.45;
  filter:blur(14px);animation:halo 3.4s ease-in-out infinite;z-index:-1}

.env-back{position:absolute;inset:0;border-radius:8px;background:linear-gradient(155deg,var(--card),var(--bg-2));box-shadow:0 28px 70px rgba(60,52,30,.26)}
.env-letter{
  position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:calc(var(--ew) - 26px);height:calc(var(--eh) - 13px);
  border-radius:6px;z-index:2;overflow:hidden;background:var(--card);
  box-shadow:0 6px 18px rgba(0,0,0,.12);border:1px solid var(--line);
  transition:transform 1.05s cubic-bezier(.2,.8,.2,1) .55s;
}
.env-letter img{width:100%;height:100%;object-fit:cover;display:block}
.env-front{position:absolute;inset:0;border-radius:8px;z-index:3;
  background:linear-gradient(155deg,var(--bg-2),var(--card));
  clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%)}
.env-flap{position:absolute;left:0;top:0;width:0;height:0;z-index:4;transform-origin:top;
  border-left:calc(var(--ew)/2) solid transparent;border-right:calc(var(--ew)/2) solid transparent;
  border-top:calc(var(--eh) * 0.46) solid var(--accent);
  transition:transform .85s ease, z-index 0s linear .45s;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}
.seal-mini{position:absolute;left:50%;top:calc(var(--eh) * 0.20);transform:translateX(-50%);
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fffdf8,var(--card));border:2px solid var(--gold);
  color:var(--accent-deep);font-size:22px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.16);
  transition:transform .5s ease, opacity .5s ease}

.envelope.open .env-flap{transform:rotateX(178deg);z-index:0}
.envelope.open .seal-mini{transform:translateX(-50%) scale(1.8);opacity:0}
.envelope.open .env-letter{transform:translateX(-50%) translateY(calc(var(--eh) * -0.78)) scale(1.04)}

/* =========================================================
   STAGE — στολισμένη κάρτα με flip
   ========================================================= */
.stage{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;padding:48px 18px}

.frame{position:relative;perspective:1600px;padding:26px}
/* φωτεινό bloom πίσω από την κάρτα */
.frame::before{content:"";position:absolute;inset:-6% -10%;z-index:-1;border-radius:24px;
  background:radial-gradient(circle,var(--gold-soft),transparent 65%);opacity:.5;filter:blur(26px);
  animation:halo 5s ease-in-out infinite}

.scene{position:relative;width:min(84vw,400px);aspect-ratio:1766/2500;transform-style:preserve-3d;
  transition:transform .25s ease;cursor:pointer}
.flip{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.2,.75,.2,1)}
.flip.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:12px;overflow:hidden;background:var(--card);
  box-shadow:0 30px 70px rgba(50,42,20,.32), 0 4px 14px rgba(0,0,0,.12), inset 0 0 0 1px rgba(192,163,94,.5)}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.face.back{transform:rotateY(180deg)}
/* λάμψη που περνά πάνω από την κάρτα */
.shine{position:absolute;inset:0;border-radius:12px;pointer-events:none;transform:translateZ(2px);overflow:hidden}
.shine::after{content:"";position:absolute;inset:-50%;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-60%) rotate(8deg);animation:sheen 5.5s ease-in-out infinite}

/* διακοσμητικές γωνίες */
.corner{position:absolute;width:42px;height:42px;z-index:5}
.corner::before,.corner::after{content:"";position:absolute;background:var(--gold)}
.corner::before{width:100%;height:2px}.corner::after{width:2px;height:100%}
.corner i{position:absolute;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.corner.tl{top:0;left:0}.corner.tr{top:0;right:0}.corner.bl{bottom:0;left:0}.corner.br{bottom:0;right:0}
.corner.tr::before{right:0}.corner.tr::after{right:0}
.corner.bl::before{bottom:0}.corner.bl::after{bottom:0}
.corner.br::before{right:0;bottom:0}.corner.br::after{right:0;bottom:0}
.corner.tl i{right:-4px;bottom:-4px}.corner.tr i{left:-4px;bottom:-4px}
.corner.bl i{right:-4px;top:-4px}.corner.br i{left:-4px;top:-4px}

.flip-hint{font-family:"Cormorant Garamond",serif;font-size:16px;letter-spacing:.06em;color:var(--accent-deep);
  background:transparent;border:1px solid var(--gold-soft);border-radius:999px;padding:11px 22px;cursor:pointer;
  transition:.25s;display:inline-flex;align-items:center;gap:8px}
.flip-hint:hover{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep)}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px) scale(.96);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Keyframes ---------- */
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes halo{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.6;transform:scale(1.06)}}
@keyframes sheen{0%{transform:translateX(-60%) rotate(8deg)}55%,100%{transform:translateX(160%) rotate(8deg)}}

/* ---------- Starfield (αστέρια) ---------- */
.starfield{position:fixed;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;border-radius:50%;background:#fff;
  box-shadow:0 0 4px 1px rgba(255,255,255,.55);animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.18;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

/* ---------- Night theme: προσαρμογές για σκούρο φόντο ---------- */
.theme-night .bg-orbs i{mix-blend-mode:screen;opacity:.55}
.theme-night .frame::before{background:radial-gradient(circle,rgba(227,194,119,.55),transparent 65%);opacity:.6}
.theme-night .env-back{background:linear-gradient(155deg,#f5edda,#dccdb0)}
.theme-night .env-front{background:linear-gradient(155deg,#e7dabd,#f5edda)}
.theme-night .env-flap{border-top-color:#2d3768}
.theme-night .seal-mini{color:#2d3768;border-color:var(--gold)}
.theme-night .intro__hint{color:#eadfe6}
.theme-night .flip-hint{background:rgba(255,255,255,.06);color:var(--gold-soft);border-color:rgba(240,220,171,.5)}
.theme-night .flip-hint:hover{background:var(--accent-deep);color:#23284f;border-color:var(--accent-deep)}

/* ---------- CTA «Δηλώστε συμμετοχή» (έντονο, για να μην το χάσει κανείς) ---------- */
.scroll-cue{
  margin-top:14px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:15px 34px;border-radius:999px;
  font-family:"Cormorant Garamond",serif;font-size:19px;font-weight:600;letter-spacing:.04em;
  color:#23284f;background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  box-shadow:0 8px 26px rgba(227,194,119,.45);
  animation:ctaPulse 2.2s ease-in-out infinite;
}
.scroll-cue:hover{filter:brightness(1.07)}
.scroll-cue .arr{display:inline-block;font-size:20px;animation:bob 1.3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes ctaPulse{
  0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(227,194,119,.40)}
  50%{transform:scale(1.05);box-shadow:0 12px 38px rgba(227,194,119,.72)}
}

/* ---------- RSVP φόρμα ---------- */
.rsvp-section{position:relative;z-index:2;display:flex;justify-content:center;padding:30px 18px 84px}
.rsvp-card{width:min(94vw,470px);background:rgba(22,26,58,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(240,220,171,.28);border-radius:18px;padding:34px 28px;
  box-shadow:0 24px 70px rgba(0,0,0,.45)}
.rsvp-card h2{font-family:"GFS Didot",serif;font-size:30px;text-align:center;color:var(--gold-soft);margin:0 0 4px}
.rsvp-sub{text-align:center;color:var(--ink-soft);font-size:16px;margin:0 0 22px}
.rsvp-card .field{margin-bottom:16px}
.rsvp-card .row{display:flex;gap:14px}
.rsvp-card .row .field{flex:1}
.rsvp-card label{display:block;font-size:14px;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:6px}
.rsvp-card input[type=text],.rsvp-card input[type=email],.rsvp-card input[type=tel],.rsvp-card textarea{
  width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:9px;
  background:rgba(255,255,255,.07);color:var(--ink);font-family:inherit;font-size:16px;transition:border-color .2s}
.rsvp-card input::placeholder,.rsvp-card textarea::placeholder{color:rgba(230,224,236,.4)}
.rsvp-card input:focus,.rsvp-card textarea:focus{outline:none;border-color:var(--gold)}
.rsvp-card textarea{resize:vertical;min-height:78px}
.rsvp-card .stepper{display:flex;align-items:center;gap:14px}
.rsvp-card .stepper button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:var(--gold-soft);font-size:22px;cursor:pointer;line-height:1}
.rsvp-card .stepper button:hover{border-color:var(--gold)}
.rsvp-card .stepper .count{font-family:"GFS Didot",serif;font-size:26px;min-width:30px;text-align:center;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rsvp-submit{width:100%;margin-top:8px;padding:14px;border:0;border-radius:999px;cursor:pointer;
  font-family:"Cormorant Garamond",serif;font-size:17px;letter-spacing:.04em;font-weight:600;
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#23284f;transition:filter .2s}
.rsvp-submit:hover{filter:brightness(1.06)}
.rsvp-submit:disabled{opacity:.6;cursor:default}
.form-error{color:#ff9a9a;font-size:14px;text-align:center;margin-top:10px;min-height:18px}
.rsvp-thanks{text-align:center;padding:16px 6px}
.rsvp-thanks .big{font-family:"GFS Didot",serif;font-size:30px;color:var(--gold-soft);margin-bottom:6px}
.rsvp-thanks p{color:var(--ink-soft);margin:0}
@media(max-width:430px){.rsvp-card .row{flex-direction:column;gap:0}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important}
  [data-reveal]{opacity:1;transform:none}
  .shine{display:none}
}