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

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Kalam',cursive;
  background:#2a1810;
  overflow:hidden;
}

/* Scene switching */
.scene{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s ease;
}
.scene.active{opacity:1; visibility:visible}

/* ---------- DESK (landing) ---------- */
.desk{
  position:relative; width:100%; height:100%;
  background: #2b211c url('assets/desk-tecture.png') center/cover no-repeat fixed;
}
/* --- hotspots --- */
.hotspot{
  position:absolute;
  display:block;
  pointer-events:auto;
  text-decoration:none;
}

/* iPad hotspot: sized and rotated to sit on the screen */
.hotspot.ipad{
  bottom:34.8%;
  left:43.6%;
  width:16.8vw;             /* tweak if needed */
  height:10.6vw;
  transform:rotate(-14deg);
  transform-origin:center;
  z-index:5;
}
.hotspot.ipad::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius:16px;
  box-shadow:0 0 0 0 rgba(255,210,130,.0);
  animation:glowPulse 1.8s ease-in-out infinite;
}
.hotspot-label{
  position:absolute; right:4%; bottom:-1.8rem;
  font:700 .95rem/1 'Kalam', cursive;
  color:#fff;
  background:rgba(0,0,0,.45);
  padding:.25rem .6rem;
  border-radius:999px;
  backdrop-filter:blur(3px);
}

/* guestbook chip near the dotted notebook */
.hotspot.guestbook{
  bottom:29.6%;
  left:66.8%;
  width:8.8vw; height:3.2vw;   /* invisible hit area */
  transform:rotate(-8deg);
  z-index:6;
}
.hotspot-chip{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%) rotate(0deg);
  font:700 .9rem/1 'Kalam', cursive;
  color:#2a1810;
  background:#ffdcae;
  border:2px solid #caa06a;
  padding:.32rem .7rem;
  border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  animation:floaty 3s ease-in-out infinite;
}

/* curved welcome text */
.curve-welcome{
  position:absolute;
  left:50%; top:4%;
  transform:translateX(-50%);
  width:min(78vw, 900px);
  height:auto;
  overflow:visible;
  z-index:4;
}
.welcome-text{
  font:700 58px 'Caveat', cursive;
  fill:#ffe9c9;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  animation: welcomeFade 2.8s ease-in-out infinite;
}
@keyframes welcomeFade{
  0%,100%{ opacity:.85 }
  50%    { opacity:1 }
}

/* tiny float for the chip label */
@keyframes floaty{
  0%,100%{ transform:translate(-50%, -50%) }
  50%    { transform:translate(calc(-50% + 2px), calc(-50% - 4px)) }
}

/* keep for all glowing bits */
@keyframes glowPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,210,130,.0) }
  40%    { box-shadow:0 0 22px 6px rgba(255,210,130,.45) }
}

/* Clickable diary placement — tweak to line up with your background */
.diary-closed{
  position:absolute;
  bottom:9%;      /* adjust to place the book */
  left:14%;       /* adjust to place the book */
  transform: rotate(-18deg);
  width: clamp(220px, 28vw, 400px);
  border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
.diary-closed img{width:75%;height:auto;display:block;pointer-events:none}
.open-hint{
  position:absolute; bottom:-1.3rem; left:50%; transform:translateX(-50%);
  font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  color:#f3e7d7; background:rgba(0,0,0,.35); padding:.28rem .6rem;
  border-radius:499.5; backdrop-filter:blur(3px);
}

/* Optional overlay items for subtle hover — match positions in your ref image */
.layer{position:absolute; pointer-events:none; user-select:none}
/* === PIXEL-MATCHED POSITIONS FOR YOUR DESK IMAGE === */
/* These percentages were set against your 1153×768 desk image with background-size: cover */
/* precise positions for 1153×768 bg with background-size: cover */
/* precise placement for your current desk background */
#item-cup{
  position:absolute;
  bottom:4%;
  left:41.9%;
  width:16.0vw;              /* size */
  transform:rotate(-3deg);
  z-index:3;
}
#item-plate{
  position:absolute;
  bottom:9%;
  left:52%;
  width:13.8vw;             /* a bit smaller than before */
  transform:rotate(-2deg);
  z-index:2;
}
#item-camera{
  position:absolute;
  bottom:-1.5%;
  left:12%;
  width:75vw;
  transform:rotate(-4deg);
  z-index:3;
}

/* keep these so they feel clickable */
.selectable{ pointer-events:auto; }
.selectable-glow, .selectable:hover{
  filter: drop-shadow(0 8px 18px rgba(255,245,200,.55))
          drop-shadow(0 0 24px rgba(255,210,130,.45));
}

.selectable::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius:14px;
  box-shadow:0 0 0 0 rgba(255,210,130,.0);
  animation:glowPulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,210,130,.0) }
  40%   { box-shadow:0 0 22px 6px rgba(255,210,130,.45) }
}

/* make the diary button glow too */
.diary-closed.selectable{ position:absolute; z-index:4; }
}


/* ---------- OPEN DIARY ---------- */
#diary-open{
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center,#4a3426 0%, #2a1810 100%);
  z-index:2;
}
.diary-container{
  width:90%; max-width:900px; height:600px; position:relative; display:flex;
}
.diary-page{
  width:50%; height:100%; position:relative; background:#FFF5E6; overflow:hidden;
  box-shadow:0 0 30px rgba(0,0,0,.5);
}
.left-page { border-radius:10px 0 0 10px }
.right-page{ border-radius:0 10px 10px 0 }

/* Paper texture (kept from your version) */
.page-texture{
  position:absolute; inset:0; opacity:.3;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 28px,#E5D4B1 28px,#E5D4B1 29px),
    repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(229,212,177,.1) 1px,rgba(229,212,177,.1) 2px);
}
.page-texture::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(165,140,100,.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(165,140,100,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(165,140,100,.06) 0%, transparent 40%);
}
.page-content{position:relative; z-index:1; padding:40px}

/* Typography */
.diary-heading{font-family:'Caveat',cursive; font-size:32px; color:#6D1F42; text-align:center; margin-bottom:10px}
.diary-date{font-size:14px; color:#876029; text-align:center; margin-bottom:20px}
.handwritten{font-size:18px; line-height:32px; color:#3D2817}
.section-title{font-family:'Caveat',cursive; font-size:28px; color:#25533F; text-align:center; margin-bottom:20px}

/* Inside navigation blocks */
.diary-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:15px;
}
.nav-item{
  text-decoration:none; color:#3D2817; padding:15px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease;
}
.nav-item:hover{transform:scale(1.04)}
.nav-item.polaroid{background:#fff; border:1px solid #ddd; box-shadow:2px 2px 8px rgba(0,0,0,.15)}
.nav-item.note{background:#FFEAA7; box-shadow:2px 2px 6px rgba(0,0,0,.12)}
.nav-item.photo{background:linear-gradient(135deg,#B8CEE8 0%, #52A5CE 100%); color:#fff}
.nav-item.ticket{background:#FFB8D1; border:2px dashed #FF7BAC}
.nav-item.stamp{background:#D3B6D3; border:3px solid #9B7AA8; position:relative}
.nav-item.stamp::after{content:''; position:absolute; inset:3px; border:1px dashed #9B7AA8}

/* Tabs on the outside */
.diary-tabs{
  position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:18px;
}
.tab{
  width:120px; height:30px; display:flex; align-items:center; padding-left:10px;
  background:var(--tab-color); color:#2a1810; font-weight:700; border-radius:0 6px 6px 0;
  text-decoration:none; box-shadow:2px 2px 6px rgba(0,0,0,.2);
}

/* Close */
.close-btn{
  position:absolute; top:16px; right:16px; width:40px; height:40px;
  background:#6D1F42; color:#FFF5E6; border:0; border-radius:50%; font-size:24px; cursor:pointer;
}

/* Responsive */
@media (max-width:768px){
  .diary-closed{width:56vw; bottom:8%; left:10%}
  .item-cup{display:none} .item-plate{display:none} .item-camera{display:none}
  .diary-container{width:95%; height:80vh}
  .diary-nav{grid-template-columns:1fr; gap:12px}
}