/* ============================================================
   Mochie Bliss — Global Stylesheet v5 (Pink & White Aesthetic)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Playfair+Display:ital,wght@0,700;1,400&family=DM+Sans:wght@300;400;500;600;700&family=Dancing+Script:wght@600;700&display=swap');

:root {
  --pink-bright: #ff4d6d;
  --pink-main:   #ff758f;
  --pink-soft:   #ff8fa3;
  --pink-light:  #fff0f3;
  --pink-pale:   #ffe5eb;
  --pink-mist:   #fff7f9;
  --pink-border: #ffd6e0;
  --white:       #ffffff;
  --text-dark:   #1e0a12;
  --text-mid:    #7a5a63;
  --text-light:  #b08090;
  --font-brand:  'Pacifico', cursive;
  --font-heading:'Playfair Display', serif;
  --font-cursive:'Dancing Script', cursive;
  --font-body:   'DM Sans', sans-serif;
  --radius-xl:   36px;
  --radius-lg:   24px;
  --radius-md:   16px;
  --shadow-glow: 0 0 40px rgba(255,77,109,.22);
  --shadow-card: 0 12px 48px rgba(255,77,109,.12);
  --shadow-sm:   0 4px 20px rgba(255,77,109,.08);
  --transition:  0.38s cubic-bezier(0.4,0,0.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  background:#fff7f9;
  color:var(--text-dark);
  overflow-x:hidden;
  line-height:1.75;
}

/* ── ANIMATIONS ─────────────────────────────────── */
@keyframes slideInLeft  {from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight {from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)}}
@keyframes slideInUp    {from{opacity:0;transform:translateY(50px)} to{opacity:1;transform:translateY(0)}}
@keyframes slideInDown  {from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn       {from{opacity:0}to{opacity:1}}
@keyframes scaleIn      {from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes float        {0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatX       {0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes spin         {to{transform:rotate(360deg)}}
@keyframes pulsePink    {0%,100%{box-shadow:0 0 0 0 rgba(255,77,109,.4)}70%{box-shadow:0 0 0 14px rgba(255,77,109,0)}}
@keyframes sakuraFall   {0%{transform:translateY(-5vh) rotate(0deg) scale(1);opacity:.9}100%{transform:translateY(110vh) rotate(900deg) scale(.5);opacity:0}}
@keyframes shimmer      {0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes glow         {from{text-shadow:0 0 8px #fff,0 0 16px var(--pink-soft)}to{text-shadow:0 0 20px #fff,0 0 40px var(--pink-bright),0 0 60px var(--pink-soft)}}
@keyframes morphBlob    {0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
@keyframes ticker       {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes heartBeat    {0%,100%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}
@keyframes gradientBG   {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.anim-slide-left  {animation:slideInLeft  .8s ease-out both}
.anim-slide-right {animation:slideInRight .8s ease-out both}
.anim-slide-up    {animation:slideInUp    .8s ease-out both}
.anim-slide-down  {animation:slideInDown  .65s ease-out both}
.anim-fade        {animation:fadeIn       .9s ease-out both}
.anim-scale       {animation:scaleIn      .65s ease-out both}
.anim-float       {animation:float        3.5s ease-in-out infinite}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.22s}
.delay-3{animation-delay:.38s}.delay-4{animation-delay:.55s}
.delay-5{animation-delay:.72s}.delay-6{animation-delay:.9s}

.reveal        {opacity:0;transform:translateY(40px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── GLASS ──────────────────────────────────────── */
.glass-card{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1.5px solid rgba(255,214,224,.55);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

/* ── TICKER STRIP ───────────────────────────────── */
.ticker-strip{
  background:linear-gradient(90deg,var(--pink-bright),#ff8fa3,var(--pink-bright));
  background-size:200%;
  animation:gradientBG 5s linear infinite;
  color:#fff;
  font-family:var(--font-cursive);
  font-size:.95rem;
  padding:9px 0;
  overflow:hidden;
  white-space:nowrap;
}
.ticker-inner{
  display:inline-block;
  animation:ticker 28s linear infinite;
}

/* ── NAVBAR ─────────────────────────────────────── */
.navbar-mochi{
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,182,193,.3);
  box-shadow:0 2px 24px rgba(255,77,109,.07);
  padding:10px 0;
}
.navbar-mochi .navbar-brand{
  font-family:var(--font-brand);
  font-size:1.8rem;
  background:linear-gradient(135deg,var(--pink-bright),#ff9ab0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.navbar-mochi .nav-link{
  font-weight:600;
  font-size:.9rem;
  color:var(--text-mid)!important;
  transition:var(--transition);
  padding:8px 16px;
  border-radius:50px;
  position:relative;
}
.navbar-mochi .nav-link::after{
  content:'';position:absolute;bottom:4px;left:50%;right:50%;
  height:2px;background:var(--pink-bright);border-radius:2px;
  transition:var(--transition);
}
.navbar-mochi .nav-link:hover::after,
.navbar-mochi .nav-link.active::after{left:16px;right:16px;}
.navbar-mochi .nav-link:hover,
.navbar-mochi .nav-link.active{color:var(--pink-bright)!important;}

/* ── BUTTONS ────────────────────────────────────── */
.btn-mochi{
  background:linear-gradient(135deg,var(--pink-bright) 0%,#ff8fa3 100%);
  color:#fff!important;border:none;border-radius:50px;
  font-weight:700;padding:11px 30px;letter-spacing:.3px;
  box-shadow:0 6px 22px rgba(255,77,109,.36);
  transition:var(--transition);position:relative;overflow:hidden;
}
.btn-mochi::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:.55s;
}
.btn-mochi:hover::before{left:100%;}
.btn-mochi:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(255,77,109,.46);}
.btn-mochi-outline{
  border:2px solid var(--pink-bright);color:var(--pink-bright)!important;
  background:transparent;border-radius:50px;font-weight:700;padding:9px 28px;
  transition:var(--transition);
}
.btn-mochi-outline:hover{
  background:var(--pink-bright);color:#fff!important;
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,77,109,.32);
}

/* ── FORM ───────────────────────────────────────── */
.form-mochi{
  border:2px solid var(--pink-border);border-radius:14px;
  padding:12px 18px;font-weight:500;background:#fff;
  transition:var(--transition);color:var(--text-dark);
  font-family:var(--font-body);
}
.form-mochi:focus{
  border-color:var(--pink-main);
  box-shadow:0 0 0 4px rgba(255,117,143,.15);outline:none;
}

/* ── PRODUCT CARD ───────────────────────────────── */
.product-card{
  border-radius:var(--radius-lg);overflow:hidden;
  transition:var(--transition);background:#fff;
  box-shadow:var(--shadow-sm);
  border:1.5px solid rgba(255,214,224,.4);
}
.product-card:hover{
  transform:translateY(-12px) scale(1.01);
  box-shadow:0 28px 60px rgba(255,77,109,.22);
  border-color:var(--pink-pale);
}
.product-card img{width:100%;height:200px;object-fit:cover;transition:transform .6s ease;}
.product-card:hover img{transform:scale(1.1);}

/* ── FEATURE CARD ───────────────────────────────── */
.feature-card{
  background:#fff;border:1.5px solid var(--pink-border);
  border-radius:var(--radius-lg);padding:32px 24px;
  transition:var(--transition);text-align:center;
  position:relative;overflow:hidden;
}
.feature-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,77,109,.04),transparent);
  opacity:0;transition:var(--transition);
}
.feature-card:hover::after{opacity:1;}
.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 52px rgba(255,77,109,.17);
  border-color:var(--pink-soft);
}

/* ── TESTIMONIAL CARD ───────────────────────────── */
.testimonial-card{
  background:#fff;border:1.5px solid var(--pink-border);
  border-radius:var(--radius-lg);padding:30px;
  transition:var(--transition);position:relative;overflow:hidden;
}
.testimonial-card::before{
  content:'"';position:absolute;top:-5px;right:16px;
  font-size:6rem;font-family:var(--font-heading);
  color:var(--pink-pale);line-height:1;pointer-events:none;
}
.testimonial-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(255,77,109,.17);
  border-color:var(--pink-soft);
}

/* ── SECTION TITLE ──────────────────────────────── */
.section-title{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--pink-bright);
  font-size:clamp(1.8rem,4vw,2.6rem);
}

/* ── LED TEXT ───────────────────────────────────── */
.led-text{
  font-family:var(--font-brand);
  color:var(--pink-bright);
  animation:glow 2s ease-in-out infinite alternate;
}

/* ── FOOTER ─────────────────────────────────────── */
.footer-mochi{
  background:linear-gradient(160deg,#1a0009 0%,#4a0018 50%,#2d000e 100%);
  color:rgba(255,255,255,.72);
  padding:64px 0 28px;
  position:relative;overflow:hidden;
}
.footer-mochi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--pink-bright),var(--pink-soft),#ffccd5,var(--pink-bright));
  background-size:200%;animation:shimmer 4s linear infinite;
}
.footer-mochi::after{
  content:'';position:absolute;
  bottom:-80px;right:-80px;
  width:260px;height:260px;border-radius:50%;
  background:rgba(255,77,109,.07);pointer-events:none;
}
.footer-mochi h5{
  font-family:var(--font-brand);color:var(--pink-soft);font-size:1.6rem;
}
.footer-mochi h6{
  font-family:var(--font-heading);color:rgba(255,255,255,.9);font-size:1rem;margin-bottom:16px;
}
.footer-link{
  color:rgba(255,255,255,.62)!important;text-decoration:none;
  font-size:.88rem;transition:var(--transition);display:inline-block;
}
.footer-link:hover{color:var(--pink-soft)!important;transform:translateX(4px);}

/* ── SAKURA ─────────────────────────────────────── */
.sakura-particle{
  position:fixed;top:-10%;pointer-events:none;z-index:9999;
  animation:sakuraFall linear infinite;
}

/* ── SCROLLBAR ──────────────────────────────────── */
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background:#fff0f3;}
::-webkit-scrollbar-thumb{background:var(--pink-soft);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--pink-bright);}
::selection{background:var(--pink-pale);color:var(--pink-bright);}