/* ============ Zarf intro overlay — salihsudenaz.com ============
   Estetik: luxury wedding stationery · cotton paper · wine wax seal */

#env-intro{
  position:fixed;inset:0;z-index:100;
  height:100vh;height:100dvh;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 130% 95% at 50% 42%,
    #faf6ee 0%, #f6efe2 48%, #f0e6d4 82%, #ecdfc9 100%);
  transition:opacity .7s ease;
}
#env-intro.fade-out{opacity:0;pointer-events:none}

/* scroll kilidi + hero cross-reveal */
html.env-lock,html.env-lock body{overflow:hidden}
html.intro-active .hero-inner{opacity:0;transform:scale(.985)}
.hero-inner{transition:opacity .95s ease,transform .95s ease}

.env-scene{
  display:flex;flex-direction:column;align-items:center;
  gap:2.1rem;padding:1rem;
}

/* perspektif dogrudan zarfta: cocuklar duz kompozitlenir,
   z-index sirasi 3D derinlige ezilmez — kapak/kart cakismaz */
.envelope{
  position:relative;
  width:min(90vw,430px);
  height:calc(min(90vw,430px)*.66);
  perspective:1200px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
@supports(aspect-ratio:1){
  .envelope{height:auto;aspect-ratio:100/66}
}
@media(min-width:768px){
  .envelope{width:min(72vw,580px)}
}

/* gercekci contact shadow: yakinda koyu, uzakta yumusak */
.envelope::before{
  content:'';position:absolute;z-index:0;
  left:4%;right:4%;bottom:-5.5%;height:11%;
  border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(93,70,42,.42), rgba(93,70,42,.16) 55%, rgba(93,70,42,0) 78%);
  filter:blur(5px);
  transition:opacity .45s ease;
}
.envelope.shell-fade::before{opacity:0}

/* gercek pamuk kagit dokusu — tum zarfin ustunde hafif multiply */
.envelope::after{
  content:'';position:absolute;inset:0;z-index:7;border-radius:8px;
  pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background:url('paper-texture.webp') repeat;background-size:340px;
  transition:opacity .45s ease;
}
.envelope.shell-fade::after{opacity:0}

/* ---- arka yuz ---- */
.env-back{
  position:absolute;inset:0;z-index:1;border-radius:8px;
  background:#F1E7D3;
  box-shadow:
    0 8px 18px -10px rgba(93,70,42,.28),
    0 30px 55px -32px rgba(93,70,42,.3);
}

/* ---- davetiye karti ---- */
.env-card{
  position:absolute;left:5.5%;right:5.5%;top:7%;bottom:11%;z-index:2;
  border-radius:4px;
  background:#fdfaf3 url('card-face.webp') center/cover no-repeat;
  box-shadow:0 10px 28px rgba(93,70,42,.26);
  display:flex;align-items:center;justify-content:center;
  transform:translate3d(0,5%,0);
  transition:transform .85s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.env-card-inner{padding:1.2rem;text-align:center}
.ec-names{
  font-family:'Great Vibes',cursive;
  font-size:clamp(1.7rem,7.2vw,2.5rem);
  color:#4c4b3a;line-height:1.2;
}
.ec-names .amp{color:#b0a05f;font-size:.62em}
.ec-div{
  width:52px;height:1px;margin:.75rem auto;
  background:linear-gradient(90deg,transparent,#cfc39a,transparent);
}
.ec-date{
  font-family:'Cormorant Garamond',serif;
  letter-spacing:.38em;color:#6b6a55;
  font-size:clamp(.82rem,3vw,1rem);
  text-indent:.38em;
}

/* ---- on katmanlar: beyaz cizgi yok, cok yakin tonlar + hafif bindirme golgesi ---- */
.env-left,.env-right,.env-bottom{
  position:absolute;inset:0;border-radius:8px;pointer-events:none;
}
.env-left{
  z-index:3;clip-path:polygon(0 0,46.5% 50%,0 100%);
  background:linear-gradient(102deg,#EBDFC8 20%,#E9DCC4 90%);
}
.env-right{
  z-index:3;clip-path:polygon(100% 0,53.5% 50%,100% 100%);
  background:linear-gradient(-102deg,#EFE3CE 20%,#EDE1CB 90%);
}
.env-bottom{
  z-index:4;clip-path:polygon(0 100%,50% 42%,100% 100%);
  background:linear-gradient(180deg,#EADDC2 0%,#E5D6BA 100%);
  filter:drop-shadow(0 -2px 2px rgba(93,70,42,.1));
}

/* ---- acilan ust kapak ---- */
.env-flap{
  position:absolute;inset:0;z-index:5;border-radius:8px 8px 0 0;
  clip-path:polygon(0 0,100% 0,50% 57%);
  background:linear-gradient(180deg,#F4EAD7 0%,#EEE2CB 68%,#E8DABE 100%);
  filter:drop-shadow(0 2px 2px rgba(93,70,42,.12));
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform .7s cubic-bezier(.6,.05,.35,1);
  will-change:transform;
  pointer-events:none;
}
.envelope.is-open .env-flap{transform:rotateX(178deg)}
.env-flap.flap-down{z-index:1}

/* ---- gercek balmumu muhur fotografi ---- */
.env-seal{
  position:absolute;z-index:6;left:50%;top:54%;
  transform:translate(-50%,-50%) rotate(-5deg);
  width:clamp(84px,22vw,116px);height:clamp(84px,22vw,116px);
  border:none;cursor:pointer;padding:0;
  background:url('seal.webp') center/contain no-repeat;
  filter:drop-shadow(0 6px 12px rgba(70,42,32,.35));
  transition:transform .18s ease,opacity .28s ease;
  -webkit-tap-highlight-color:transparent;
  animation:sealBreath 5.6s ease-in-out infinite;
}
@keyframes sealBreath{
  0%,100%{transform:translate(-50%,-50%) rotate(-5deg) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(-5deg) scale(1.015)}
}
.env-seal:hover{
  animation:none;
  transform:translate(-50%,-50%) rotate(-5deg) scale(1.035);
}
.env-seal .wb,.seal-mono{display:none}
.env-seal:focus-visible{outline:2px solid #9c7c62;outline-offset:5px}
.env-seal.pressed{
  animation:none;
  transform:translate(-50%,-50%) rotate(-5deg) scale(.9);
}
.env-seal.gone{
  animation:none;opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-5deg) scale(.66);
}

/* ---- ipucu ---- */
.env-hint{
  font-family:'Jost',sans-serif;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:#8c7a63;margin:0;text-indent:.32em;
  animation:hintPulse 3.2s ease-in-out infinite;
  transition:opacity .35s ease;
}
@keyframes hintPulse{0%,100%{opacity:.78}50%{opacity:1}}
@media(max-width:640px){.env-hint{font-size:10px}}

/* ---- animasyon durumlari ---- */
.envelope.card-up .env-card{transform:translate3d(0,-64%,0)}
.envelope.card-pop .env-card{
  transform:translate3d(0,-64%,0) scale(1.03);
  transition:transform .38s ease;
}
.envelope.shell-fade .env-back,
.envelope.shell-fade .env-left,
.envelope.shell-fade .env-right,
.envelope.shell-fade .env-bottom,
.envelope.shell-fade .env-flap{opacity:0;transition:opacity .45s ease}
#env-intro.closing .env-hint{opacity:0}

/* ---- kisa/yatay ekranlar: kart yukselince tasmasin ---- */
@media (max-height:560px){
  .envelope{width:min(58vh,340px)}
  .env-scene{gap:1.1rem}
}

@media (prefers-reduced-motion:reduce){
  .env-flap,.env-card,.env-seal,.env-hint{transition:none;animation:none}
  #env-intro{transition:opacity .45s ease}
}