:root{
  --sky-50:#E0F2FF; --sky-100:#CCE8FF; --sky-200:#AEDDFF; --sky-300:#8FD0FD;
  --sky-400:#60A5FA; --sky-500:#3B82F6; --glass: rgba(255,255,255,.55);
  --shadow-md: 0 10px 30px rgba(0,0,0,.12);
}

*{font-family:"Kanit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}

.perspective{ perspective:900px; }

.heart{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; display:block; margin:auto;
}
.heart-half{
  position:absolute; inset:0; border-radius:16px; transform-origin:center;
  background: radial-gradient(120% 120% at 50% 20%, #fff8 0%, #fff0 40%),
              linear-gradient(160deg, var(--sky-200), var(--sky-400));
  box-shadow: var(--shadow-md);
  clip-path: path("M110 30 C110 5, 80 0, 60 20 C40 0, 10 5, 10 35 C10 65, 35 90, 60 110 C85 90, 110 65, 110 35 Z");
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.heart-half.left{ transform: translateZ(0) translateX(-12px) rotateY(0deg); }
.heart-half.right{ transform: translateZ(0) translateX(12px) rotateY(0deg) scaleX(-1); }

.heart.open .left{ transform: translateX(-60px) rotateY(-35deg) scale(1.02); }
.heart.open .right{ transform: translateX(60px)  rotateY(35deg)  scale(1.02); }

.heart-core{
  position:absolute; inset:0; margin:auto; width:40%; height:40%; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #fff7, #fff0 60%),
              radial-gradient(circle at 50% 50%, var(--sky-100), transparent 70%);
  filter: blur(6px); opacity:0; transition: opacity .5s ease;
}
.heart.open .heart-core{ opacity:1; }

.glass{
  background: var(--glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.btn-primary,.btn-secondary,.btn-ghost{
  padding:.75rem 1.1rem; border-radius:.9rem; font-weight:600;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-primary{ background:linear-gradient(180deg,var(--sky-300),var(--sky-500)); color:white; }
.btn-secondary{ background:white; color:#0f172a; border:1px solid var(--sky-200); }
.btn-ghost{ background:transparent; color:#0f172a; border:1px dashed var(--sky-300); }
.btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover{ transform: translateY(-2px); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active{ transform: translateY(0); }

.section-title{ font-weight:700; font-size:1.25rem; margin-bottom:.75rem; color:#0c4a6e; }

.timeline{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory;
}
.memory{
  flex:0 0 auto; width:280px; scroll-snap-align:center; border-radius:1rem; overflow:hidden; box-shadow: var(--shadow-md);
  background:white;
}
.memory img{ display:block; width:100%; height:180px; object-fit:cover; }
.memory figcaption{ padding:.6rem .8rem; font-size:.95rem; color:#0f172a; }

.card{
  position:relative; width:100%; height:160px; perspective:1000px;
}
.card-inner{
  position:absolute; inset:0; transform-style:preserve-3d; transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.card.flipped .card-inner{ transform: rotateY(180deg); }
.card-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:1rem; padding:1rem; display:flex; align-items:center; justify-content:center;
}
.card-front{ background:linear-gradient(180deg, var(--sky-100), var(--sky-300)); color:#0f172a; }
.card-back{ background:white; transform: rotateY(180deg); color:#0f172a; border:1px solid var(--sky-200); }

.tab-panel{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){ .tab-panel{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .tab-panel{ grid-template-columns:repeat(3,1fr); } }

/* Floating hearts */
#bg-hearts .h{ position:absolute; opacity:.3; animation: floatUp linear forwards; }
@keyframes floatUp{
  from{ transform: translateY(30vh) scale(.9); opacity:.0; }
  10%{ opacity:.35; }
  to{ transform: translateY(-110vh) scale(1); opacity:0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .heart-half, .card-inner{ transition: none !important; }
  #bg-hearts .h{ animation: none !important; }
}