@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Caveat+Brush&family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,600&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

:root{
  --pink-deep:#e07a92;
  --pink-mid:#eda3b4;
  --pink-soft:#f7cdd8;
  --pink-pale:#fbe4ea;
  --ink:#2b2224;
  --ink-soft:#5a4b4e;
  --scale:1;
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:#f3c9d6;
  overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:none; }
button{ font-family:inherit; cursor:pointer; }

/* PRELOADER */
#preloader{
  position:fixed; inset:0; z-index:9000;
  background:url('../assets/bg.jpg') center/cover;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .7s ease, visibility .7s ease;
}
#preloader.done{ opacity:0; visibility:hidden; }
#preloader .pl-sign{ width:300px; position:relative; animation:plswing 2.4s ease-in-out infinite; transform-origin:50% 8%; }
#preloader .pl-sign img{ width:100%; }
#preloader .pl-sign span{
  position:absolute; left:0; right:0; top:42%;
  text-align:center; font-family:'Caveat Brush',cursive;
  font-size:34px; color:var(--pink-deep); line-height:1.05;
}
@keyframes plswing{ 0%,100%{transform:rotate(-2.5deg);} 50%{transform:rotate(2.5deg);} }
#preloader .pl-bar{ width:180px; height:4px; background:rgba(224,122,146,.25); border-radius:4px; margin-top:26px; overflow:hidden; }
#preloader .pl-bar i{ display:block; height:100%; width:0; background:var(--pink-deep); border-radius:4px; transition:width .3s ease; }

/* FIXED BACKGROUND 
   One layer for the whole site: bg + blossom overlay + branches + flowers + cherries +
   butterflies, placed exactly as in the design PDF. It is position:fixed, so it never
   moves while the sections scroll over it. --bgscale = "cover" scale of the 1440x1024 canvas. */
#bgfix{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:#f0bfcc;
}
#bgfix .bgcanvas{
  position:absolute; left:0; top:0; width:1440px; height:1024px;
  transform-origin:0 0; transform:scale(var(--bgscale,1));
}
#bgfix img{ position:absolute; max-width:none; display:block; }
#bgfix .fx{ left:0; top:0; transform-origin:0 0; }
#bgfix .fx-clip{ position:absolute; left:0; top:0; width:1440px; overflow:hidden; }

/*  FIXED NAV (design: 1440 x 67.34, #D88A98 @ 50%) 
   Lives on the same 1440px canvas as the page and is scaled with it, so it always keeps
   the design's proportions. Pinned: it never scrolls away and has no blur / shadow / glow. */
#topnav{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  height:calc(67.34px * var(--scale,1));
  pointer-events:none;
}
#topnav .navband{
  position:absolute; inset:0;
  background:rgba(216,138,152,.5);
  pointer-events:auto;
}
/* the labels live on the same 1440 canvas as the page, scaled and centred with it */
#topnav .navcanvas{
  position:absolute; left:var(--offx,0px); top:0; width:1440px; height:67.34px;
  transform-origin:top left; transform:scale(var(--scale,1));
}
#topnav a{
  position:absolute; display:block; color:#fff; pointer-events:auto;
  transition:transform .25s ease;
}
#topnav a svg{ display:block; width:100%; height:100%; overflow:visible; fill:currentColor; }
#topnav .navlinks{ position:absolute; left:0; top:0; width:1440px; height:100%; pointer-events:none; }
#topnav a:hover{ transform:translateY(-2px); }
#topnav a:focus-visible{ outline:2px solid #fff; outline-offset:8px; border-radius:6px; }

/* burger - only used on the mobile layout */
#burger{ display:none; }

/* SCALED STAGE */
#stage-wrap{ position:relative; z-index:1; width:100%; overflow:hidden; }
#stage{ width:1440px; transform-origin:top left; position:relative; }

.page{
  position:relative;
  width:1440px; height:1024px;
  overflow:hidden;
  background:none;              /* the fixed layer behind shows through */
}
.el{ position:absolute; }
/* every positioned graphic keeps its real aspect ratio inside its spec box */
img.el, .el > img{ object-fit:contain; object-position:center; }

@keyframes flutter{
  0%,100%{ transform:translate(0,0) rotate(var(--r,0deg)); }
  50%{ transform:translate(9px,-13px) rotate(calc(var(--r,0deg) - 9deg)); }
}

/* falling blossom petals */
#petalfall{ position:fixed; inset:0; pointer-events:none; z-index:900; overflow:hidden; }
@media (min-width:768px){ #petalfall{ display:none; } }
#petalfall img{ position:absolute; top:-60px; opacity:.55; will-change:transform; }
@keyframes fall{
  0%{ transform:translateY(-60px) translateX(0) rotate(0deg); }
  100%{ transform:translateY(105vh) translateX(var(--dx,60px)) rotate(var(--spin,320deg)); }
}

/*  HOME */
.music-sign{ transform:rotate(-18deg); transform-origin:50% 50%; animation:musicsway 6s ease-in-out infinite; }
@keyframes musicsway{ 0%,100%{transform:rotate(-15deg);} 50%{transform:rotate(-21deg);} }

.music-wrap{ z-index:10; }
.music-wrap .vinyl{
  position:absolute; right:-2%; top:14%; width:47%;
  transform-origin:50% 50%;
}
.music-wrap .vinyl.spinning{ animation:spin 3.2s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.music-controls{ position:absolute; left:4.7%; top:72%; width:64%; height:26%; color:transparent; z-index:12; }
.music-progress{ height:9px; background:transparent; border-radius:5px; position:relative; margin-bottom:6px; cursor:pointer; }
.music-progress .fill{ position:absolute; inset:0 auto 0 0; width:15%; background:transparent; border-radius:5px; }
.music-progress .knob{
  position:absolute; top:50%; width:11px; height:11px; border-radius:50%;
  background:transparent; transform:translate(-50%,-50%); left:15%;
  transition:transform .15s ease;
}
.music-progress:hover .knob{ transform:translate(-50%,-50%) scale(1.35); }
.music-times{ display:flex; justify-content:space-between; font-size:11px; margin-bottom:6px; visibility:hidden; }
.music-btns{ display:flex; justify-content:space-between; }
.music-btns button{ background:none; border:none; color:transparent; font-size:17px; padding:0; transition:transform .2s ease, color .2s ease; }
.music-btns button:hover{ transform:scale(1.25); }
.music-btns button.active{ color:transparent; }

.hanging-sign{ z-index:10; transform-origin:50% 6%; animation:signswing 6s ease-in-out infinite; }
@keyframes signswing{ 0%,100%{transform:rotate(-1.6deg);} 50%{transform:rotate(1.6deg);} }
.hanging-sign .sign-lettering{ position:absolute; }
.hanging-sign img{ width:100%; height:100%; }
.hanging-sign img.sign-lettering{ width:auto; height:auto; }
.sr-only{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.img-btn{ display:block; transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease; }
.img-btn:hover{ filter:drop-shadow(0 8px 16px rgba(190,100,120,.35)); }
.img-btn img{ width:100%; height:100%; object-fit:fill; }

.social{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.social:hover{ transform:translateY(-8px) scale(1.14) rotate(-6deg); }
.social img{ width:100%; height:100%; object-fit:fill; }

.scrollhint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:20; text-align:center; color:var(--pink-deep);
  font-family:'Caveat',cursive; font-size:22px;
  animation:bob 2s ease-in-out infinite; cursor:pointer;
}
@keyframes bob{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,10px);} }

.tilt{ transition:transform .18s ease-out; will-change:transform; }

/*  ABOUT  */
.photo-frame{
  background:#fff; padding:10px 10px 34px; border-radius:3px;
  box-shadow:0 14px 30px rgba(160,80,100,.3);
  transform:rotate(-4deg);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.photo-frame:hover{ transform:rotate(0deg) scale(1.03); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; }
.photo-frame figcaption{
  font-family:'Caveat',cursive; font-size:20px; color:var(--ink-soft);
  text-align:center; margin-top:6px;
}

.statsbox{ position:relative; }
.statsbox > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.statsbox .statrow{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-around;
}
.stat{ text-align:center; }
.stat b{
  display:block; font-family:'Playfair Display',serif; font-size:36px;
  color:var(--pink-deep); line-height:1.1;
}
.stat span{ font-size:12px; color:var(--ink-soft); letter-spacing:.3px; }

/*  WORKSPACE */
.folder-link{ display:block; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.folder-link img.f{ width:100%; height:100%; object-fit:contain; transition:filter .35s ease; }
.folder-link:hover{ transform:translateY(-14px) scale(1.05) rotate(-2deg); }
.folder-link:hover img.f{ filter:drop-shadow(0 18px 24px rgba(190,100,120,.4)); }

.like-btn{
  position:absolute; top:4px; right:10px;
  background:rgba(255,255,255,.85); border:none; border-radius:50%;
  width:34px; height:34px; font-size:17px; color:#e07a92; line-height:1;
  box-shadow:0 3px 9px rgba(190,100,120,.28);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1); z-index:14;
}
.like-btn:hover{ transform:scale(1.18); }
.like-btn.liked{ color:#e0435f; background:#fff; animation:pop .4s ease; }
@keyframes pop{ 0%{transform:scale(1);} 45%{transform:scale(1.45);} 100%{transform:scale(1);} }

/*  CONTACT */
.connect-card{
  background:linear-gradient(165deg,#fce0e8 0%,#f7c6d6 100%);
  border-radius:30px;
  box-shadow:0 18px 40px rgba(190,100,120,.3);
  padding:34px 32px; text-align:center;
  border:1px solid rgba(255,255,255,.65);
}
.connect-card h2{ font-family:'Caveat',cursive; font-weight:700; color:var(--pink-deep); font-size:46px; margin:0 0 2px; }
.connect-card .sub{ font-size:16px; color:var(--ink-soft); font-style:italic; margin:0; }
.connect-card .arrow{ font-size:26px; color:var(--pink-deep); margin:4px 0 10px; animation:bob 2s ease-in-out infinite; }
.connect-link{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.8); border-radius:30px;
  padding:12px 20px; margin:13px 0; font-size:16px; color:var(--ink-soft);
  box-shadow:0 4px 12px rgba(200,120,140,.18);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
.connect-link:hover{ transform:translateX(6px); background:#fff; }
.connect-link .ico{ font-size:20px; }
.connect-link small{ display:block; font-size:11px; color:var(--pink-deep); }


/* desktop connect card (matches the design) */
.ccard{
  box-sizing:border-box; border:3px solid #fff; border-radius:38px;
  background:linear-gradient(to bottom, rgb(255,230,234), rgb(251,202,214));
  font-family:'Poppins',sans-serif; font-style:italic; color:#D88A98;
}
.ccard > *{ position:absolute; }
.ccard .csub{ margin:0; text-align:center; font-size:24px; line-height:30px; white-space:nowrap; transform:translateY(1px); }
.crow{
  box-sizing:border-box; display:block; color:#D88A98;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.crow > img{ position:absolute; max-width:none; pointer-events:none; }
.crow:hover{ transform:translateX(6px); }
.crow .clabel{ position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; font-size:20.4px; padding-bottom:3px; }
.crow .cmail{ position:absolute; inset:0; }
.crow .cmail small{ position:absolute; left:85.5px; width:200px; top:8.8px; text-align:center; font-size:16.2px; line-height:20px; color:#D88A98; }
.crow .cmail u{ position:absolute; left:44px; width:300px; top:36.6px; text-align:center; font-size:14.1px; line-height:20px; color:#E9A0AD; text-underline-offset:2px; }

.footerbar{
  position:absolute; left:0; bottom:0; width:1440px; height:66px;
  background:rgba(238,200,207,.727); border-top:1px solid rgba(216,138,152,.3);
  z-index:30; font-family:'Poppins',sans-serif; font-style:italic; font-weight:600; font-size:12.3px; color:#111;
}
.footerbar > *{ position:absolute; top:0; height:64px; line-height:64px; white-space:nowrap; }
.footerbar .fbrand{ left:52.5px; font-size:12.5px; }
.footerbar a{ transition:color .25s ease, transform .25s ease; display:block; }
.footerbar a:hover{ color:var(--pink-deep); transform:translateY(-3px); }

/*  SHARED UI */
.sparkle{ position:fixed; z-index:9999; pointer-events:none; font-size:14px; color:var(--pink-deep); animation:sparkfade .8s ease-out forwards; }
@keyframes sparkfade{ 0%{opacity:1;transform:translateY(0) scale(1);} 100%{opacity:0;transform:translateY(-24px) scale(.4);} }

.back-to-top{
  position:fixed; bottom:26px; right:26px; width:50px; height:50px;
  border-radius:50%; background:var(--pink-deep); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  box-shadow:0 8px 22px rgba(190,100,120,.45);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.8);
  transition:all .35s cubic-bezier(.34,1.56,.64,1); z-index:1150;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.back-to-top:hover{ transform:translateY(-5px) scale(1.08); }

.reveal-el{ opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.reveal-el.in{ opacity:1; transform:translateY(0); }

.modal-content.pink-modal{ background:#fdf1f4; border:none; border-radius:24px; }
.modal-content.pink-modal .modal-title{ font-family:'Caveat',cursive; font-weight:700; font-size:30px; color:var(--pink-deep); }
.pill{ background:var(--pink-pale); color:var(--pink-deep); padding:6px 15px; border-radius:30px; font-size:13px; display:inline-block; margin:0 6px 6px 0; }
.btn-pink{
  background:var(--pink-mid); color:#fff; border:none; border-radius:30px;
  font-weight:600; padding:10px 24px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
}
.btn-pink:hover{ color:#fff; filter:brightness(1.06); transform:translateY(-2px); }
.btn-pink:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

#contactForm .form-control{
  border:1px solid var(--pink-soft); background:rgba(255,255,255,.8);
  border-radius:12px; padding:11px 15px; font-size:14px;
}
#contactForm .form-control:focus{ border-color:var(--pink-deep); box-shadow:0 0 0 .18rem rgba(224,122,146,.25); }
#contactForm .form-control.is-invalid{ border-color:#d9455f; }
#formStatus.ok{ color:#2e7d32; }
#formStatus.err{ color:#c62828; }
.toast{ background:var(--pink-mid); color:#fff; border:none; }

/* MOBILE (< 768px) */
#mobile-site{ display:none; }
@media (max-width:767px){
  #stage-wrap, #topnav, #bgfix, #petalfall, .back-to-top{ display:none !important; }
  #mobile-site{ display:block; position:relative; z-index:1; background:#f0bfcc; }
  body{ background:#f0bfcc; }

  /* fixed background layer (same on every section) */
  #mbg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#f0bfcc; }
  #mbg .mbgc{ position:absolute; left:0; top:0; width:100%; height:calc(100vw * 1567 / 724); }
  #mbg .mbg-img{ position:absolute; max-width:none; }
  #mbg .mbgc > img{ position:absolute; max-width:none; height:auto; }
  #mbg > .mbgc > img.mbg-img{ left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:75% 50%; }
  #mbg .mbg-blossom{ opacity:.38; }
  #mbg .mbg-branch{ opacity:.3; }
  #mbg .mbg-branch.flip{ transform:scaleX(-1); }

  /* fixed nav: two rows, script labels (same vector outlines as desktop) */
  #mnav{ position:fixed; top:0; left:0; right:0; z-index:1100; height:calc(100vw * 167.5 / 724); background:rgba(216,138,152,.5); }
  #mnav .mnc{ position:relative; width:100%; height:100%; }
  #mnav a{ position:absolute; display:block; color:#fff; }
  #mnav a svg{ display:block; width:100%; height:100%; overflow:visible; fill:currentColor; }
  #mnav a:active{ opacity:.75; }

  /* sections: one design canvas each */
  #mobile-site .ms{ position:relative; width:100%; aspect-ratio:724 / 1567; overflow:hidden; }
  #mobile-site .ms > img, #mobile-site .ms > .m-abs, #mobile-site .ms > div{ position:absolute; }
  #mobile-site .ms img{ max-width:none; height:auto; display:block; }
  #mobile-site .m-abs{ display:block; }
  #mobile-site .m-abs > img{ width:100%; height:auto; }
  #mobile-site .m-doodle{ position:absolute; height:auto; }
  #mobile-site .m-sign{ transform-origin:50% 6%; }
  #mobile-site .m-sign > img{ position:absolute; left:0; top:0; width:100%; height:100%; }
  #mobile-site .m-sign > img.m-lett{ height:auto; }
  #mobile-site .m-soc, #mobile-site .m-folder, #mobile-site .m-abs{ -webkit-tap-highlight-color:transparent; }

  /* about */
  #mobile-site .m-divider i{ display:block; height:0; border-top:calc(100vw * 5 / 724) solid #E1A1E9; }
  #mobile-site .m-divider i{ border-top-color:#e9a1ae; }
  #mobile-site .m-stats{ }
  #mobile-site .m-stats > img{ position:absolute; left:0; top:0; width:100%; height:100%; }
  #mobile-site .m-statrow{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-around; }
  #mobile-site .m-stat{ text-align:center; width:33%; }
  #mobile-site .m-stat b{ display:block; font-family:'Playfair Display',serif; font-size:calc(100vw * 36 / 724 * .9); color:var(--pink-deep); line-height:1.1; }
  #mobile-site .m-stat span{ display:block; font-size:calc(100vw * 13 / 724); color:var(--ink-soft); line-height:1.2; }

  /* contact */
  #mobile-site .m-quote{ font-family:'Poppins',sans-serif; font-style:italic; font-weight:400; color:#555; white-space:nowrap; font-size:calc(100vw * 25.4 / 724); line-height:1.25; }
  #mobile-site .m-ccard{ box-sizing:border-box; border:calc(100vw * 3 / 724) solid #fff; border-radius:calc(100vw * 38 / 724); background:linear-gradient(to bottom, rgb(255,230,234), rgb(251,202,214)); font-family:'Poppins',sans-serif; font-style:italic; color:#D88A98; }
  #mobile-site .m-ccard > img{ position:absolute; height:auto; pointer-events:none; }
  #mobile-site .m-csub{ position:absolute; margin:0; text-align:center; font-size:calc(100vw * 24.5 / 724); line-height:calc(100vw * 34 / 724); white-space:nowrap; }
  #mobile-site .m-crow{ position:absolute; box-sizing:border-box; display:block; color:#D88A98; background:#F9E9EC; border:calc(100vw * 2 / 724) solid #D88A98; border-radius:calc(100vw * 32 / 724); }
  #mobile-site .m-clabel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:calc(100vw * 22.6 / 724); padding-bottom:calc(100vw * 3 / 724); }
  #mobile-site .m-cmail{ background:#F6D2DA; border-color:rgba(216,138,152,.75); border-width:calc(100vw * 3 / 724); border-radius:calc(100vw * 44 / 724); }
  #mobile-site .m-cmail small{ position:absolute; left:0; right:0; top:calc(100vw * 10 / 724); text-align:center; font-size:calc(100vw * 18 / 724); line-height:1.2; color:#D88A98; }
  #mobile-site .m-cmail u{ position:absolute; left:calc(100vw * 69 / 724); top:calc(100vw * 38 / 724); text-align:left; white-space:nowrap; font-size:calc(100vw * 16.15 / 724); line-height:1.2; color:#E9A0AD; text-underline-offset:2px; }
  #mobile-site .m-foot{ position:absolute; left:0; right:0; background:rgba(238,200,207,.727); border-top:1px solid rgba(216,138,152,.3); font-family:'Poppins',sans-serif; font-style:italic; font-weight:400; color:#111; z-index:5; }
  #mobile-site .m-foot a{ position:absolute; top:calc(100vw * 20 / 724); font-size:calc(100vw * 21 / 724); line-height:1.4; white-space:nowrap; }
  /* music player (home): same transparent live controls as desktop, bigger tap targets */
  #mobile-site .m-music{ position:absolute; }
  #mobile-site .m-music > img{ position:static; display:block; width:100%; height:auto; }
  #mobile-site .m-music .music-controls{ position:absolute; left:4.7%; top:72%; width:64%; height:26%; z-index:12; }
  #mobile-site .m-music .music-progress{ height:calc(100vw * 22 / 724); margin-bottom:0; }
  #mobile-site .m-music .music-btns button{ padding:calc(100vw * 14 / 724) calc(100vw * 12 / 724); font-size:calc(100vw * 22 / 724); -webkit-tap-highlight-color:transparent; }
}