/* BakeLoveAffair · Soft Bloom */
:root{
  --bg:#FFF3EA; --deep:#2F4F4F; --coral:#F47C6C; --coral-d:#d85f50; --mint:#CDEFE0; --butter:#FFE8A3; --pink:#FBD3DD; --lav:#E3DAFA; --white:#FFFDFA;
  --brown:#9A6338; --sun:#F6B63C;
  --accent:var(--pink);
  --display:"Fredoka",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif;
  --spring:cubic-bezier(.2,1.4,.3,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:90px}
body{background:var(--bg);color:var(--deep);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.01em}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:8px}
[data-reveal]{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .7s,transform .9s var(--spring)}
[data-reveal].in{opacity:1;transform:none}

.progress{position:fixed;top:0;left:0;height:4px;width:100%;background:var(--coral);transform-origin:left;transform:scaleX(0);z-index:70}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;translate:-50% 0;z-index:60;width:min(1120px,calc(100% - 24px));transition:translate .45s var(--spring)}
.nav.hide{translate:-50% -150%}
.nav-bar{background:rgba(255,253,250,.86);backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 10px 40px rgba(47,79,79,.1);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 9px 7px 14px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:"Josefin Sans",var(--display);font-weight:500;font-size:23px;color:var(--brown);letter-spacing:.01em;white-space:nowrap}
.brand img{width:48px;height:46px;object-fit:contain;mix-blend-mode:multiply;transition:rotate .5s var(--spring)}
.brand:hover img{rotate:-10deg}
.brand span{padding-top:4px}
.nav ul{display:flex;gap:26px;list-style:none;padding:0}
.nav ul a{text-decoration:none;font-weight:700;font-size:15px;transition:color .2s}
.nav ul a:hover{color:var(--coral)}
.nav-right{display:flex;align-items:center;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:0;cursor:pointer;text-decoration:none;transition:background .25s,transform .25s var(--spring),color .25s}
.icon-btn:hover{background:var(--pink);transform:rotate(-8deg) scale(1.08)}
.icon-btn svg{width:22px;height:22px}
.burger{display:none}
.menu{display:none}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:17px;text-decoration:none;padding:15px 28px;border-radius:999px;background:var(--coral);color:#fff;border:0;cursor:pointer;box-shadow:0 8px 0 var(--coral-d),0 16px 30px rgba(244,124,108,.35);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-3px);box-shadow:0 11px 0 var(--coral-d),0 22px 36px rgba(244,124,108,.4)}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--coral-d)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn.sm{padding:11px 20px;font-size:15px;box-shadow:0 4px 0 var(--coral-d)}
.btn.soft{background:var(--white);color:var(--deep);box-shadow:0 8px 0 #ecdccf}
.btn.soft:hover{box-shadow:0 11px 0 #ecdccf}
.btn.wa{background:#25D366;box-shadow:0 8px 0 #1aa851,0 16px 30px rgba(37,211,102,.3)}
.btn.wa:hover{box-shadow:0 11px 0 #1aa851,0 22px 36px rgba(37,211,102,.35)}
.btn.ig{background:var(--deep);box-shadow:0 8px 0 #1d3535}
.btn.ig:hover{box-shadow:0 11px 0 #1d3535}

/* ---------- hero ---------- */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative}
.eyebrow{display:inline-flex;gap:8px;align-items:center;background:var(--white);border-radius:999px;padding:7px 16px;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px}
.eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--coral);animation:pulse 1.6s infinite}
@keyframes pulse{50%{scale:1.6;opacity:.4}}
.hero h1{font-size:clamp(48px,7.6vw,112px)}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);animation:rise .8s var(--spring) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.hero h1 .love{color:var(--coral);position:relative;white-space:nowrap}
.hero h1 .love svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.3em;overflow:visible}
.hero h1 .love path{stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1s 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lead{font-size:20px;max-width:490px;margin:26px 0 34px}
.cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.follow{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-weight:800;text-decoration:none;border-bottom:2.5px solid var(--butter);padding-bottom:2px;transition:border-color .25s,gap .25s}
.follow:hover{border-color:var(--coral);gap:12px}
.follow svg{width:20px;height:20px}
.stage{position:relative;justify-self:center;width:min(420px,84vw);aspect-ratio:1/1.12}
.blob{position:absolute;inset:0;background:var(--accent);border-radius:58% 42% 55% 45%/48% 56% 44% 52%;animation:morph 9s ease-in-out infinite;transition:background .8s}
@keyframes morph{33%{border-radius:42% 58% 40% 60%/58% 42% 58% 42%}66%{border-radius:52% 48% 62% 38%/40% 60% 46% 54%}}
.shots{position:absolute;inset:7% 12%;border-radius:999px;overflow:hidden;box-shadow:0 30px 60px rgba(47,79,79,.22);border:8px solid var(--white);background:var(--white)}
.shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.25;rotate:6deg;transition:opacity .8s,scale 1.2s cubic-bezier(.2,.8,.2,1),rotate 1.2s}
.shots img.on{opacity:1;scale:1;rotate:0deg}
.label{position:absolute;left:-4%;bottom:14%;background:var(--white);border-radius:18px;padding:10px 18px;box-shadow:0 12px 30px rgba(47,79,79,.15);font-weight:800;animation:bob 4s ease-in-out infinite;z-index:2;border:0;cursor:pointer;text-align:left;line-height:1.3}
.label small{display:block;font-weight:600;font-size:12px;opacity:.7}
.stage .sunflower{position:absolute;right:-5%;top:6%;width:92px;z-index:2;animation:bob 5s -2s ease-in-out infinite}
@keyframes bob{50%{translate:0 -12px}}
.dots{position:absolute;right:6%;bottom:2%;display:flex;gap:7px;z-index:2}
.dots button{width:10px;height:10px;padding:0;border:0;border-radius:9px;background:var(--white);transition:width .4s,background .4s;cursor:pointer}
.dots button.on{width:30px;background:var(--coral)}
.sprinkle{position:absolute;width:26px;height:9px;border-radius:9px;will-change:transform;z-index:0}
.spark{position:absolute;font-size:22px;color:var(--coral);animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{scale:.4;opacity:.3;rotate:90deg}}
.sunflower svg{display:block;width:100%;height:auto;animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}

@keyframes flow{to{transform:translateX(-50%)}}

/* ---------- waves + sections ---------- */
.wavebox{overflow:hidden;line-height:0}
.wave{display:block;width:200%;height:70px;margin-bottom:-1px;animation:flow 14s linear infinite}
.wave.rev{animation-direction:reverse}
section{position:relative}
.pad{padding:80px 0 110px}
.title{text-align:center;margin-bottom:52px}
.title h2{font-size:clamp(38px,5.6vw,76px)}
.title h2 em{font-style:normal;color:var(--coral)}
.title p{max-width:540px;margin:14px auto 0;font-size:18px}

/* ---------- cakes ---------- */
.sig{background:var(--pink)}
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-18px 0 44px}
.chip{font:700 15px var(--body);color:var(--deep);background:var(--white);border:2.5px solid transparent;border-radius:999px;padding:10px 18px;cursor:pointer;transition:transform .2s cubic-bezier(.2,1.6,.3,1),background .2s,border-color .2s}
.chip:hover{transform:translateY(-3px) rotate(-2deg)}
.chip.on{background:var(--butter);border-color:var(--deep);transform:scale(1.06)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 34px}
.sc{position:relative;background:var(--white);border:0;border-radius:0 0 28px 28px;padding:6px 20px 24px;text-align:center;cursor:pointer;margin-top:14px;transition:translate .35s var(--spring),rotate .35s,opacity .4s,scale .4s var(--spring);font-family:var(--body);font-size:16px;line-height:1.5}
.sc::before{content:"";position:absolute;top:-13px;left:0;right:0;height:26px;background:radial-gradient(circle at 13px 13px,var(--white) 12.5px,transparent 13px) 0 0/26px 26px repeat-x}
.sc:hover{translate:0 -12px;rotate:-1.5deg}
.sc:nth-child(even):hover{rotate:1.5deg}
.sc.out{opacity:0;scale:.85;pointer-events:none}
.sc.gone{display:none}
.sc .ph{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1/1.15}
.sc .ph img{width:100%;height:100%;object-fit:cover;transition:scale .7s}
.sc:hover .ph img{scale:1.07}
.sc .peek{position:absolute;left:50%;bottom:14px;translate:-50% 30px;opacity:0;background:var(--white);border-radius:999px;padding:8px 18px;font-weight:800;font-size:14px;white-space:nowrap;transition:translate .35s var(--spring),opacity .3s;box-shadow:0 8px 20px rgba(47,79,79,.2)}
.sc:hover .peek,.sc:focus-visible .peek{translate:-50% 0;opacity:1}
.pill{display:inline-block;background:var(--mint);border-radius:999px;padding:4px 14px;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.sc .pill{margin:18px 0 8px}
.sc h3{font-size:27px;margin-bottom:6px}
.sc .more{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font-weight:800;color:var(--coral)}
.sc .more b{transition:translate .25s}.sc:hover .more b{translate:6px 0}
.more-note{text-align:center;margin-top:50px;font-weight:700}
.more-note a{color:var(--coral-d)}

/* ---------- cake detail sheet ---------- */
dialog.sheet{color:var(--deep);border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden}
dialog.sheet::backdrop{background:rgba(47,79,79,.55);backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}}
.sheet-in{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(940px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;background:var(--white);border-radius:36px;display:grid;grid-template-columns:.85fr 1.15fr;animation:sheet .55s var(--spring)}
@keyframes sheet{from{opacity:0;scale:.86;rotate:-3deg;translate:-50% -42%}}
.sheet.closing .sheet-in{animation:sheetout .22s ease-in forwards}
@keyframes sheetout{to{opacity:0;scale:.92;translate:-50% -46%}}
.sheet-photo{position:relative;background:var(--t,var(--pink));padding:34px;display:grid;place-items:center;border-radius:36px 0 0 36px;transition:background .5s;overflow:hidden}
.sheet-photo img{width:100%;max-width:300px;aspect-ratio:9/14;object-fit:cover;border-radius:999px;border:8px solid var(--white);box-shadow:0 24px 50px rgba(47,79,79,.25);rotate:-3deg;position:relative}
.sheet-photo img.swap{animation:swap .55s var(--spring)}
@keyframes swap{from{opacity:0;scale:.8;rotate:8deg}}
.sheet-photo .sunflower{position:absolute;width:150px;right:-40px;bottom:-40px;opacity:.9}
.sheet-body{padding:44px 42px 36px;position:relative}
.sheet-body h2{font-size:clamp(30px,3.6vw,44px);margin:14px 0 8px;padding-right:40px}
.sheet-body .quote{font-family:var(--display);font-weight:500;color:var(--coral-d);font-size:18px;margin-bottom:14px}
.sheet-body .desc{margin-bottom:20px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px}
.facts div{background:var(--bg);border-radius:18px;padding:11px 16px;animation:rise .5s var(--spring) both}
.facts dt{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.facts dd{font-weight:700;line-height:1.35}
.sheet-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.sheet-cta .btn{font-size:16px;padding:13px 22px}
.sheet-note{font-size:13.5px;opacity:.75;margin-top:18px}
.x{position:absolute;right:16px;top:16px;z-index:3}
.sheet-nav{display:flex;gap:8px;position:absolute;right:68px;top:16px}

/* ---------- wish builder ---------- */
.wish{background:var(--mint)}
.wishgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:start}
.q{margin-bottom:26px}
.q h3{font-size:21px;margin-bottom:12px;display:flex;gap:10px;align-items:center}
.q h3 span{width:30px;height:30px;border-radius:50%;background:var(--deep);color:var(--mint);display:grid;place-items:center;font-size:15px;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.field{font:700 15px var(--body);color:var(--deep);background:var(--white);border:2.5px solid transparent;border-radius:999px;padding:11px 18px;outline:0;width:min(100%,360px)}
.field:focus{border-color:var(--deep)}
.phone{position:sticky;top:110px;background:#EFE7DD;border-radius:34px;padding:18px 18px 22px;box-shadow:0 30px 60px rgba(47,79,79,.18);border:8px solid var(--white)}
.phone .top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(47,79,79,.1);margin-bottom:18px;font-weight:800;line-height:1.3}
.phone .top img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.phone .top small{display:block;font-weight:600;color:#3aa76d}
.bubble{background:#DCF8C6;border-radius:18px 18px 4px 18px;padding:14px 16px;margin-left:30px;white-space:pre-line;font-size:15.5px;line-height:1.5;min-height:150px;transition:scale .25s cubic-bezier(.2,1.8,.3,1);transform-origin:bottom right}
.bubble.bump{scale:1.03}
.phone .btn{width:100%;justify-content:center;margin-top:18px}
.phone .note{text-align:center;font-size:13px;margin-top:20px;opacity:.75}

/* ---------- process ---------- */
.proc{position:relative}
.proc svg.path{position:absolute;left:0;top:30px;width:100%;height:170px;overflow:visible}
.procgrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.ps{text-align:center}
.ps .ic{width:96px;height:96px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;font-size:40px;background:var(--c);border:6px solid var(--bg);box-shadow:0 12px 26px rgba(47,79,79,.14);transition:scale .5s cubic-bezier(.2,1.8,.3,1),rotate .5s}
.ps:nth-child(even){margin-top:70px}
.ps.lit .ic{scale:1.14;rotate:-8deg}
.ps h3{font-size:24px;margin-bottom:6px}
.ps p{font-size:15.5px;max-width:230px;margin:0 auto}

/* ---------- instagram ---------- */
.gal{background:var(--butter);overflow:hidden;padding:50px 0 90px}
.row{display:flex;gap:22px;width:max-content;animation:flow 50s linear infinite;padding:11px 0}
.row.b{animation-direction:reverse;animation-duration:58s}
.gal:hover .row{animation-play-state:paused}
.pol{flex:0 0 auto;width:210px;background:var(--white);padding:10px 10px 12px;border-radius:16px;box-shadow:0 10px 24px rgba(47,79,79,.12);text-decoration:none;transition:rotate .3s,scale .3s;border:0;cursor:pointer;font:inherit}
.pol:nth-child(odd){rotate:-2.5deg}.pol:nth-child(even){rotate:2deg}
.pol:hover{rotate:0deg;scale:1.07;z-index:2}
.pol img{border-radius:10px;aspect-ratio:1/1.1;object-fit:cover;width:100%}
.pol span{display:block;text-align:center;font-family:var(--display);font-weight:600;margin-top:9px}
.gal .center{text-align:center;margin-top:40px}

/* ---------- about ---------- */
.aboutgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.me{position:relative;width:min(360px,80vw);justify-self:center}
.me::before{content:"";position:absolute;inset:-7%;background:var(--lav);border-radius:58% 42% 55% 45%/48% 56% 44% 52%;animation:morph 10s ease-in-out infinite}
.me>img{position:relative;border-radius:46% 54% 48% 52%/40% 42% 58% 60%;aspect-ratio:1/1.25;object-fit:cover;width:100%;border:8px solid var(--white)}
.me .stamp{position:absolute;right:-12%;bottom:-6%;width:132px;height:132px;border-radius:50%;background:var(--white);box-shadow:0 14px 34px rgba(47,79,79,.18);display:grid;place-items:center;animation:bob 5s ease-in-out infinite}
.me .stamp img{width:86%;mix-blend-mode:multiply}
.aboutgrid h2{font-size:clamp(36px,5vw,68px);margin-bottom:22px}
.aboutgrid h2 em{font-style:normal;color:var(--coral)}
.aboutgrid p{font-size:19px;margin-bottom:14px;max-width:560px}
.daynight{display:flex;gap:14px;margin:26px 0 28px;flex-wrap:wrap}
.daynight div{flex:1;min-width:200px;border-radius:24px;padding:18px 22px;font-weight:700}
.daynight b{font-family:var(--display);font-size:22px;display:block}

/* ---------- footer ---------- */
.foot{background:var(--coral);color:#fff;text-align:center;padding:60px 0 36px;position:relative;overflow:hidden}
.foot h2{font-size:clamp(40px,7vw,96px);margin-bottom:14px}
.foot p.big{font-size:19px;margin-bottom:34px}
.foot .btn{background:var(--white);color:var(--deep);box-shadow:0 8px 0 rgba(0,0,0,.18)}
.foot .sunflower{position:absolute;width:260px;opacity:.9}
.foot .sunflower.l{left:-90px;top:-70px}.foot .sunflower.r{right:-100px;bottom:-90px}
.foot-base{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-top:80px;font-size:14px;font-weight:700;text-align:left}
.foot-base .mid{display:flex;gap:10px}
.foot-base .mid a{background:rgba(255,255,255,.2);color:#fff}
.foot-base .mid a:hover{background:var(--white);color:var(--coral-d)}
.foot-base span:last-child{text-align:right}

.fab{position:fixed;right:20px;bottom:20px;z-index:55;height:60px;border-radius:999px;background:#25D366;color:#fff;display:flex;align-items:center;gap:10px;padding:0 20px;font-family:var(--display);font-weight:600;text-decoration:none;box-shadow:0 14px 30px rgba(37,211,102,.45);animation:wig 5s infinite}
.fab svg{width:28px;height:28px}
@keyframes wig{0%,88%,100%{rotate:0deg}91%{rotate:-8deg}94%{rotate:7deg}97%{rotate:-4deg}}
.pop{position:fixed;z-index:80;width:14px;height:6px;border-radius:6px;pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav ul{display:none}
  .burger{display:grid}
  .menu{display:block;margin-top:8px;background:rgba(255,253,250,.96);backdrop-filter:blur(14px);border-radius:28px;box-shadow:0 20px 50px rgba(47,79,79,.16);padding:10px;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .5s var(--spring),opacity .3s,visibility .3s}
  .nav.open .menu{max-height:420px;opacity:1;visibility:visible}
  .menu a{display:block;padding:13px 18px;border-radius:18px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:20px}
  .menu a:active,.menu a:hover{background:var(--pink)}
  .brand{font-size:19px}.brand img{width:40px;height:38px}
  .nav-right .btn span{display:none}.nav-right .btn{padding:11px 13px}
  .hero{padding-top:118px}
  .hero .wrap,.wishgrid,.aboutgrid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr;gap:34px 16px}
  .sc{padding:6px 10px 18px}.sc h3{font-size:20px}.sc p{display:none}.sc .more{font-size:14px}.sc .pill{font-size:10.5px;padding:3px 10px}
  .procgrid{grid-template-columns:1fr 1fr}.proc svg.path{display:none}.ps:nth-child(even){margin-top:0}
  .phone{position:static}
  .fab span{display:none}.fab{width:60px;justify-content:center;padding:0}
  .sheet-in{grid-template-columns:1fr;border-radius:30px}
  .sheet-photo{border-radius:30px 30px 0 0;padding:26px 26px 20px}
  .sheet-photo img{max-width:190px}
  .sheet-body{padding:76px 22px 26px}
  .sheet-nav{right:auto;left:16px}
  .foot-base{grid-template-columns:1fr;text-align:center;justify-items:center}
  .foot-base span:last-child{text-align:center}
  .me .stamp{right:-4%;width:104px;height:104px}
}
@media (max-width:420px){.facts{grid-template-columns:1fr}.brand span{font-size:17px}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero h1 .w,[data-reveal]{opacity:1;transform:none}
  .hero h1 .love path{stroke-dashoffset:0}
}