@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Patrick+Hand&display=swap');

:root{
  --bg:#fff0f3;
  --card:#ffffff;
  --text:#2d2d2d;
  --shadow:0 12px 30px rgba(0,0,0,0.15);
  --radius:16px;
  --accent:#ff4d6d;

  --space:260px; 
  --anim:0.8s;

  --font-hand-title:'Caveat', cursive;
  --font-hand-body:'Patrick Hand', cursive;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:system-ui, sans-serif;
}

html, body{
    height:100%;
}

body{
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
    background-blend-mode: multiply;
    color: var(--text);
    overflow-x:hidden;
    transition: background-color 1.5s ease;
}

body.locked{
    height:100%;
    overflow:hidden;
    position:fixed;
    inset:0;
    width:100%;
}

#bg{
  position:fixed;
  inset:0;
  z-index:0;
}

.lockscreen{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#111;
  color:#fff;
  z-index:999;
}

.lockbox{
  text-align:center;
}

#display{
  font-size:2rem;
  letter-spacing:8px;
  margin:10px 0;
}

.pad{
  display:grid;
  grid-template-columns:repeat(3,60px);
  gap:10px;
  justify-content:center;
}

.pad button{
  padding:15px;
  border:none;
  border-radius:10px;
  background:#222;
  color:#fff;
}

.cover{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  z-index:2;
  position:relative;
}

.cover-card{
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);

  padding:30px 24px;
  border-radius:20px;

  box-shadow:0 20px 50px rgba(0,0,0,0.15);

  text-align:center;

  max-width:320px;

  animation:fadeIn 1s ease;
}

.cover-decoration{
  font-size:22px;
  margin-bottom:10px;
  opacity:0.8;
}

.cover-card h1{
  font-family:var(--font-hand-title);
  font-size:38px;
  font-weight:700;
  margin:10px 0;
}

.cover-line{
  width:90px;
  height:14px;
  margin:8px auto 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cpath d='M2 9 Q 15 2, 28 9 T 54 9 T 80 9 T 98 6' stroke='%23ff4d6d' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.cover-card p{
  font-family:var(--font-hand-body);
  font-size:17px;
  opacity:0.75;
}

.cover-scroll{
  margin-top:20px;
  font-size:12px;
  opacity:0.6;
  animation:bounce 1.5s infinite;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.scrollhint{
  margin-top:20px;
  opacity:0.6;
  animation:bounce 1.5s infinite;
}

@keyframes bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(6px);}
}

.hidden{display:none}

#timeline{
  position:relative;
  z-index:2;

  padding:120px 20px 200px;
}


#timeline::before,
#timeline::after{
  content:"";
  display:block;
}

#timeline::before{
  height:120px;
}

#timeline::after{
  height:200px;
}

.memory{
  opacity:0;
  transform:translateY(80px) scale(0.95);

  margin:var(--space) auto;

  max-width:340px;

  transition:
    all var(--anim) cubic-bezier(.22,.61,.36,1);

  position:relative;
}

.memory.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.memory:nth-child(odd){
  transform:translateY(80px) scale(0.97) rotate(-1deg);
}

.memory:nth-child(even){
  transform:translateY(80px) scale(0.97) rotate(1deg);
}

.photo{
  background:#fdf9f2;
  padding:14px 14px 38px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transform:rotate(-1deg);
  position:relative;
  overflow:hidden;
}

.photo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:0.18;
  pointer-events:none;
  z-index:2;
}

.photo::after{
  content:"";
  position:absolute;
  right:0;
  bottom:38px;
  width:22px;
  height:22px;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,.10) 50%),
    #fdf9f2;
  border-bottom-left-radius:8px;
  box-shadow:-2px 2px 4px rgba(0,0,0,.08);
  z-index:3;
}

.photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:12px;
}

.deco-tape::before{
    content:"";
    position:absolute;

    width:90px;
    height:26px;

    top:-12px;
    left:50%;
    transform:translateX(-50%) rotate(-8deg);

    background:
        linear-gradient(
            rgba(255,255,255,.75),
            rgba(240,240,240,.55)
        );

    border:1px solid rgba(255,255,255,.5);

    box-shadow:
        0 6px 14px rgba(0,0,0,.12);

    backdrop-filter:blur(2px);

    opacity:.9;

    z-index:20;
}

.deco-pin::before{
    content:"";

    position:absolute;

    width:20px;
    height:20px;

    border-radius:50%;

    background:
        radial-gradient(circle at 30% 30%,
        #ff8ca0,
        #ff4d6d);

    top:-14px;
    left:50%;
    transform:translateX(-50%);

    box-shadow:
        0 5px 12px rgba(0,0,0,.25);

    z-index:20;
}

.deco-pin::after{

    content:"";

    position:absolute;

    width:2px;
    height:20px;

    background:#777;

    top:4px;
    left:50%;

    transform:translateX(-50%);

    z-index:19;
}

.deco-clip::before{

    content:"";

    position:absolute;

    width:24px;
    height:40px;

    border:3px solid #9d9d9d;

    border-radius:14px;

    border-bottom:none;

    right:18px;
    top:-18px;

    transform:rotate(14deg);

    z-index:20;
}

.deco-clip::after{

    content:"";

    position:absolute;

    width:16px;
    height:30px;

    border:3px solid #bdbdbd;

    border-radius:10px;

    border-bottom:none;

    right:22px;
    top:-10px;

    transform:rotate(14deg);

    z-index:21;
}

.deco-flower::before{

    content:"";

    position:absolute;

    width:26px;
    height:26px;

    border-radius:50%;

    background:
        radial-gradient(circle,#ffd1dc 20%,#ff8ca0);

    top:-12px;
    left:-12px;

    box-shadow:
        18px 0 #ffd1dc,
        -18px 0 #ffd1dc,
        0 18px #ffd1dc,
        0 -18px #ffd1dc;
}

.deco-flower::after{

    content:"";

    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#ffe066;

    top:1px;
    left:1px;
}

.deco-leaf::before{

    content:"";

    position:absolute;

    width:18px;
    height:34px;

    background:#7ca67d;

    border-radius:50% 0;

    transform:rotate(-35deg);

    left:-10px;
    bottom:10px;

    box-shadow:0 3px 8px rgba(0,0,0,.15);
}

.deco-leaf::after{

    content:"";

    position:absolute;

    width:2px;
    height:26px;

    background:#5f7b5e;

    left:-2px;
    bottom:14px;

    transform:rotate(-35deg);
}

.deco-sticker::after{
  content:"❤️";
  position:absolute;
  bottom:-10px;
  left:10px;
}

.layout-A .content{ text-align:left; }
.layout-B .content{ text-align:right; }

.layout-C{ transform:rotate(-2deg); }
.layout-D{ transform:rotate(2deg); }

.layout-E .photo{ transform:rotate(-3deg); }
.layout-F .photo{ transform:rotate(3deg); }

.hidden{
  display:none;
}

.content{
  margin-top:12px;
  padding:12px 14px;

  background:rgba(255,255,255,0.85);
  border-radius:12px;

  box-shadow:0 8px 20px rgba(0,0,0,0.08);

  backdrop-filter: blur(4px);

  position:relative;
}

.content::after{
  content:"";
  position:absolute;
  top:-11px;
  right:-6px;
  width:24px;
  height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14.2 9 L21.5 9 L15.5 13 L17.7 21 L12 16.3 L6.3 21 L8.5 13 L2.5 9 L9.8 9 Z' fill='none' stroke='%23ffb703' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0.85;
  pointer-events:none;
  transform:rotate(-8deg);
}

.memory:nth-child(even) .content::after{
  transform:rotate(10deg);
  left:-6px;
  right:auto;
}

.content::before{
  content:"";
  position:absolute;
  width:40px;
  height:10px;
  background:rgba(255,255,255,0.6);

  top:-6px;
  left:20px;

  transform:rotate(-8deg);
  border-radius:3px;
}

.content h3{
  font-family:var(--font-hand-title);
  font-size:24px;
  font-weight:700;
  margin-bottom:6px;
  color:#2d2d2d;
}

.content p{
  font-family:var(--font-hand-body);
  font-size:16px;
  line-height:1.4;
  opacity:0.85;
}

.memory:nth-child(odd) .content{
  transform:rotate(-1deg);
}

.memory:nth-child(even) .content{
  transform:rotate(1deg);
}

.memory{
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.memory:hover{
  transform: scale(1.03) rotate(0deg) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

.photo img{
  transition: transform 0.5s ease;
}

.memory:hover .photo img{
  transform: scale(1.05);
}

.ending{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px 24px;

    opacity:0;
    transform:translateY(40px);
    transition:.5s ease;
}

.ending.show{
    opacity:1;
    transform:translateY(0);
}

.ending-card{

    max-width:420px;
    width:100%;

    background:rgba(255,248,250,.95);

    border-radius:28px;

    padding:36px 28px;

    text-align:center;

    box-shadow:
        0 20px 50px rgba(0,0,0,.12);

    border:2px solid rgba(255,192,203,.35);

    backdrop-filter:blur(12px);
}

.ending-icon{

    font-size:54px;

    margin-bottom:18px;

    animation:heartbeat 2s infinite;
}

.ending-card h2{

    font-family:var(--font-hand-title);
    color:#ff4d6d;

    margin-bottom:14px;

    font-size:40px;
}

.ending-card h2::after{
    content:"";
    display:block;
    width:110px;
    height:14px;
    margin:6px auto 2px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cpath d='M2 9 Q 15 2, 28 9 T 54 9 T 80 9 T 98 6' stroke='%23ff4d6d' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

.ending-card p{

    font-family:var(--font-hand-body);
    line-height:1.8;

    color:#555;

    margin-bottom:20px;

    font-size:17px;
}

.ending-card small{

    font-family:var(--font-hand-body);
    color:#999;

    font-size:16px;
}

@keyframes heartbeat{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }
}

.restart-btn{

    margin-top:26px;

    padding:12px 24px;

    border:none;

    border-radius:999px;

    background:#ff4d6d;

    color:white;

    cursor:pointer;

    transition:.3s;
}

.restart-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(255,77,109,.35);
}

.memory{
    overflow:visible;
}

#bg-gradient{
    position: fixed;
    inset: 0;
    z-index: -2;

    background: linear-gradient(
        135deg,
        #ffd6e0,
        #fff0f5
    );

    transition: background 1.5s ease;
}

.bg-layer{
    position: fixed;
    inset: 0;

    z-index: 0;

    transition: opacity 1.5s ease;

    pointer-events: none;
}

#bg{
    position: fixed;
    inset: 0;

    z-index: 1;

    pointer-events: none;
}

#bg1{
    opacity: 1;
}

#bg2{
    opacity: 0;
}

#cover,
main,
.timeline,
.ending{
    position: relative;
    z-index: 2;
}