:root {
  --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --ui: -apple-system, 'Segoe UI', system-ui, sans-serif;
  --ph: min(66vh, 116vw); /* framed photo height (portrait 3:4) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--ui);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
body { position: fixed; inset: 0; }

/* ============ scenes ============ */
.scene {
  position: fixed; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease, visibility 0s linear 1.4s;
  pointer-events: none;
}
.scene.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.6s ease;
}

/* ============ start overlay ============ */
#overlay-start {
  position: fixed; inset: 0; z-index: 100;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
#overlay-start.hidden { opacity: 0; visibility: hidden; }
.start-inner { text-align: center; position: relative; z-index: 2; padding: 0 24px; }
.start-title {
  font-family: var(--display);
  font-size: clamp(42px, 9vmin, 88px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffe9ea;
  text-shadow: 0 0 40px rgba(255, 130, 150, 0.45);
  animation: startGlow 3.2s ease-in-out infinite alternate;
}
.start-sub {
  color: #b9a6a8;
  font-size: clamp(14px, 2.4vmin, 19px);
  letter-spacing: 0.14em;
  margin: 10px 0 44px;
}
#btn-start {
  font-family: var(--ui);
  font-size: clamp(17px, 2.6vmin, 22px);
  color: #fff;
  background: linear-gradient(135deg, #e2566e, #c73a55);
  border: none; border-radius: 999px;
  padding: 16px 38px;
  cursor: pointer;
  box-shadow: 0 6px 30px rgba(226, 86, 110, 0.45);
  animation: btnPulse 2s ease-in-out infinite;
}
#btn-start:active { transform: scale(0.96); }
#btn-start .hint { opacity: 0.75; font-size: 0.8em; }
@keyframes startGlow {
  from { text-shadow: 0 0 26px rgba(255,130,150,0.3); }
  to   { text-shadow: 0 0 60px rgba(255,130,150,0.65); }
}
@keyframes btnPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 26px rgba(226,86,110,0.4); }
  50%      { transform: scale(1.05); box-shadow: 0 6px 42px rgba(226,86,110,0.65); }
}
.start-hearts { position: absolute; inset: 0; overflow: hidden; }
.start-hearts span {
  position: absolute; bottom: -40px;
  animation: heartRise linear infinite;
  opacity: 0;
}
@keyframes heartRise {
  0%   { transform: translateY(0) scale(1);        opacity: 0; }
  12%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) scale(1.3); opacity: 0; }
}

/* ============ scene 1: sniff ============ */
#scene-sniff { z-index: 30; background: #000; }
.nose-wrap { position: absolute; inset: 0; animation: none; }
#scene-sniff.played .nose-wrap { animation: noseDrift 9s ease-in-out forwards; }
@keyframes noseDrift {
  from { transform: scale(1); }
  to   { transform: scale(1.13) translateY(-1.5%); }
}
#noseImg {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  filter: brightness(0.22) contrast(1.12) saturate(0.55) blur(1.6px);
}
#scene-sniff.played #noseImg { animation: noseLighten 8s ease forwards; }
@keyframes noseLighten {
  from { filter: brightness(0.14) contrast(1.12) saturate(0.5) blur(2.2px); }
  to   { filter: brightness(0.52) contrast(1.15) saturate(0.6) blur(1.2px); }
}
.nose-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.9), transparent 60%);
  opacity: 0; pointer-events: none;
}
.vignette {
  position: absolute; inset: -2%;
  background: radial-gradient(circle at 50% 52%, transparent 14%, rgba(0,0,0,0.82) 58%, #000 76%);
}
.grain { position: absolute; inset: 0; opacity: 0.07; animation: grainJump 0.45s steps(3) infinite; }
@keyframes grainJump {
  0%   { background-position: 0 0; }
  50%  { background-position: 37px 19px; }
  100% { background-position: -23px 41px; }
}
.viewfinder { position: absolute; inset: 0; color: rgba(255,255,255,0.4); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.viewfinder {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}
.vf-corner { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255,255,255,0.28); }
.vf-corner.tl { top: calc(4vmin + var(--sat)); left: calc(4vmin + var(--sal)); border-right: none; border-bottom: none; }
.vf-corner.tr { top: calc(4vmin + var(--sat)); right: calc(4vmin + var(--sar)); border-left: none; border-bottom: none; }
.vf-corner.bl { bottom: calc(4vmin + var(--sab)); left: calc(4vmin + var(--sal)); border-right: none; border-top: none; }
.vf-corner.br { bottom: calc(4vmin + var(--sab)); right: calc(4vmin + var(--sar)); border-left: none; border-top: none; }
.vf-rec { position: absolute; top: calc(4vmin + var(--sat) + 6px); left: calc(4vmin + var(--sal) + 14px); font-size: 13px; letter-spacing: 0.18em; }
.vf-rec i {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #e04444; margin-right: 7px;
  animation: recBlink 1.2s steps(1) infinite;
}
@keyframes recBlink { 50% { opacity: 0.15; } }
.vf-date { position: absolute; bottom: calc(4vmin + var(--sab) + 6px); right: calc(4vmin + var(--sar) + 14px); font-size: 13px; letter-spacing: 0.18em; }

/* ============ bark flash ============ */
#barkFlash {
  position: fixed; inset: 0; z-index: 25;
  background: radial-gradient(circle at 50% 50%, rgba(255,240,220,0.85), transparent 65%);
  opacity: 0; pointer-events: none;
}

/* ============ scene 3+4: beach ============ */
#scene-beach { z-index: 20; background: #06070d; }
#worldZoom {
  position: absolute; inset: 0;
  transform-origin: 46% 59%;
}
#worldZoom.zoomed { transform: scale(2.7); }
#world { display: block; width: 100%; height: 100%; transition: filter 2.8s ease; }
#scene-beach.morphing #world { filter: blur(9px) saturate(1.08); }

.wavelet { stroke: rgba(255,255,255,0.42); stroke-width: 3; fill: none; stroke-linecap: round; }
.wavelet.dim { stroke: rgba(255,255,255,0.22); }
.sanddot { fill: #e3bd8b; }
.blade {
  stroke: #6f9f5c; stroke-width: 4; fill: none; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: bladeSway 3.2s ease-in-out infinite alternate;
}
.blade.thin { stroke-width: 2.5; stroke: #86b072; }
.blade:nth-child(2) { animation-delay: -0.7s; animation-duration: 3.8s; }
.blade:nth-child(3) { animation-delay: -1.4s; animation-duration: 2.9s; }
.blade:nth-child(4) { animation-delay: -2.1s; animation-duration: 3.5s; }
.blade:nth-child(5) { animation-delay: -1s; }
@keyframes bladeSway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.string { stroke: #8d8d94; stroke-width: 2; fill: none; opacity: 0.9; }
.gull { animation: gullBob 4.2s ease-in-out infinite alternate; }
.gull.g2 { animation-duration: 5.4s; animation-delay: -2s; }
@keyframes gullBob { from { transform: translate(480px,235px); } to { transform: translate(492px,224px); } }
.gull.g2 { animation-name: gullBob2; }
@keyframes gullBob2 { from { transform: translate(615px,185px); } to { transform: translate(603px,194px); } }

/* dog gait */
.leg { transform-box: fill-box; transform-origin: 11px 10px; transition: transform 0.5s ease; }
#scene-beach .running #legFN { animation: legSwing 0.38s ease-in-out infinite alternate; }
#scene-beach .running #legFF { animation: legSwing 0.38s ease-in-out infinite alternate; animation-delay: -0.08s; }
#scene-beach .running #legBN { animation: legSwing 0.38s ease-in-out infinite alternate; animation-delay: -0.19s; }
#scene-beach .running #legBF { animation: legSwing 0.38s ease-in-out infinite alternate; animation-delay: -0.27s; }
@keyframes legSwing { from { transform: rotate(-34deg); } to { transform: rotate(30deg); } }

#dogBob { transform-box: fill-box; transform-origin: 50% 60%; transition: transform 0.6s ease; }
.running #dogBob { animation: dogBobK 0.38s ease-in-out infinite alternate; }
@keyframes dogBobK {
  from { transform: translateY(1px) rotate(1.6deg); }
  to   { transform: translateY(-11px) rotate(3.8deg); }
}

#tongue { transform-box: fill-box; transform-origin: 50% 8%; }
#tongue.panting { animation: pant 0.42s ease-in-out infinite alternate; }
@keyframes pant { from { transform: scaleY(1); } to { transform: scaleY(0.8); } }

#dogHead { transition: transform 0.9s ease; }
.arrived #dogHead { transform: rotate(-9deg); }

/* balloon tilt handled by SMIL; strings sway via SMIL too */

/* dune slide-in: driven by JS tween (attribute transform) */

/* title */
#title {
  position: absolute; top: 7%; left: 0; right: 0;
  text-align: center;
  font-family: var(--display);
  color: #fff;
  pointer-events: none;
  z-index: 5;
  transition: opacity 1.1s ease;
}
#title.out { opacity: 0; }
#title .w {
  opacity: 0;
  font-size: clamp(38px, 8.2vmin, 86px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-shadow:
    0 2px 3px rgba(120, 60, 40, 0.55),
    0 4px 18px rgba(150, 70, 50, 0.5),
    0 0 44px rgba(255, 170, 110, 0.9);
}
#title .w2 { font-size: clamp(44px, 9.8vmin, 102px); color: #fff4ec; }
#title .ht { color: #ff6b81; }
#title.show .w1 { animation: titlePop 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
#title.show .w2 { animation: titlePop 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) 0.45s forwards; }
@keyframes titlePop {
  0%   { opacity: 0; transform: scale(0.4) translateY(24px); }
  70%  { opacity: 1; transform: scale(1.07) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* confetti */
#confetti-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.confetti {
  position: absolute; top: -24px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translate(var(--dx), 112vh) rotate(var(--rot)); opacity: 0.75; }
}

/* ============ scene 5+6: photo & flowers ============ */
#scene-photo {
  position: fixed; inset: 0; z-index: 40;
  opacity: 0; visibility: hidden;
  transition: opacity 2.4s ease, visibility 0s linear 2.4s, background 1.5s ease;
  background: transparent;
  pointer-events: none;
}
#scene-photo.show { opacity: 1; visibility: visible; transition: opacity 2.4s ease; pointer-events: auto; }
#scene-photo.framed { background: #000; }

#photoGroup {
  position: absolute; inset: 0;
  transition: transform 2.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#scene-photo.aside #photoGroup { transform: translateY(-17vh) scale(0.62); }

.photo-wrap {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%;
  background: #fff;
  overflow: hidden;
  transition: width 2s cubic-bezier(0.33, 0, 0.2, 1), height 2s cubic-bezier(0.33, 0, 0.2, 1),
              padding 2s cubic-bezier(0.33, 0, 0.2, 1), box-shadow 2s ease, border-radius 2s ease;
}
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
/* match-dissolve from the drawing: photo arrives oversized + soft, then settles sharp */
#photoMain.morph { animation: photoMorph 3.4s cubic-bezier(0.3, 0.5, 0.2, 1) forwards; }
@keyframes photoMorph {
  0%   { transform: scale(1.18); filter: blur(16px) saturate(1.1); }
  55%  { filter: blur(5px); }
  100% { transform: scale(1); filter: blur(0); }
}
#scene-photo.framed .photo-wrap {
  width: calc(var(--ph) * 0.75);
  height: var(--ph);
  padding: calc(var(--ph) * 0.022);
  border-radius: 2px;
  box-shadow:
    0 0 0 3px #ece0cd,
    0 0 0 calc(var(--ph) * 0.018 + 3px) #b8874f,
    0 0 0 calc(var(--ph) * 0.018 + 4.5px) #8a6238,
    0 24px 70px rgba(0, 0, 0, 0.65);
}

.polaroid {
  position: absolute;
  width: calc(var(--ph) * 0.40);
  background: #fdfdfa;
  padding: calc(var(--ph) * 0.016) calc(var(--ph) * 0.016) 0;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  transform: rotate(8deg);
  opacity: 0;
  z-index: 3;
}
.polaroid img { width: 100%; aspect-ratio: 3 / 3.4; object-fit: cover; display: block; }
.pola-caption {
  font-family: var(--display);
  text-align: center;
  color: #57493c;
  font-size: calc(var(--ph) * 0.032);
  padding: calc(var(--ph) * 0.010) 0 calc(var(--ph) * 0.016);
}
.tape {
  position: absolute; top: -12px; left: 50%;
  width: 34%; height: 24px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(244, 184, 196, 0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#scene-photo.with-polaroid .polaroid {
  animation: polaroidDrop 1s cubic-bezier(0.2, 1.35, 0.4, 1) forwards;
}
@keyframes polaroidDrop {
  0%   { opacity: 0; transform: translateY(-8vh) rotate(-6deg) scale(1.15); }
  100% { opacity: 1; transform: translateY(0) rotate(8deg) scale(1); }
}

/* petals over black */
.petal-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.petal {
  position: absolute; top: -36px;
  animation: petalFall linear forwards;
  filter: saturate(0.9);
}
@keyframes petalFall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.85; }
  85%  { opacity: 0.85; }
  100% { transform: translate(var(--dx), 108vh) rotate(var(--rot)); opacity: 0; }
}

/* bouquet */
.bouquet-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
#scene-photo.flowers-on .bouquet-layer { opacity: 1; }
#bouquetSvg {
  position: absolute; bottom: -2vh; left: 50%;
  transform: translateX(-84%);
  width: min(46vmin, 430px);
  overflow: visible;
}
.stem { stroke-dasharray: 420; stroke-dashoffset: 420; }
.flowers-on .stem { animation: stemDraw 1.4s ease forwards; }
.flowers-on .s2 { animation-delay: 0.1s; } .flowers-on .s3 { animation-delay: 0.2s; }
.flowers-on .s4 { animation-delay: 0.3s; } .flowers-on .s5 { animation-delay: 0.35s; }
.flowers-on .s6 { animation-delay: 0.45s; } .flowers-on .s7 { animation-delay: 0.5s; }
@keyframes stemDraw { to { stroke-dashoffset: 0; } }

.leafp { transform-box: fill-box; transform-origin: 100% 100%; transform: scale(0); }
.flowers-on .leafp { animation: flowerPop 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.flowers-on .l1 { animation-delay: 0.9s; } .flowers-on .l2 { animation-delay: 1s; }
.flowers-on .l3 { animation-delay: 1.1s; } .flowers-on .l4 { animation-delay: 1.2s; }

.flower { transform-box: fill-box; transform-origin: 50% 80%; transform: scale(0); }
.flowers-on .flower { animation: flowerPop 0.9s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.flowers-on .f-tulip1 { animation-delay: 1.25s; }
.flowers-on .f-tulip2 { animation-delay: 1.4s; }
.flowers-on .f-rose1  { animation-delay: 1.55s; }
.flowers-on .f-rose3  { animation-delay: 1.7s; }
.flowers-on .f-rose2  { animation-delay: 1.85s; }
.flowers-on .f-daisy2 { animation-delay: 2s; }
.flowers-on .f-daisy1 { animation-delay: 2.15s; }
@keyframes flowerPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.gyps { opacity: 0; }
.flowers-on .gyps { animation: fadeIn 1.4s ease 2.4s forwards; }
.wrap { opacity: 0; }
.flowers-on .wrap { animation: fadeIn 0.9s ease 0.5s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.tw { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.flowers-on .tw { animation: twinkle 2.6s ease-in-out 3s infinite; }
.flowers-on .t2 { animation-delay: 3.9s; }
.flowers-on .t3 { animation-delay: 4.6s; }
.flowers-on .t4 { animation-delay: 5.4s; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 0.95; transform: scale(1.1) rotate(24deg); }
}

/* card */
.card {
  position: absolute; bottom: 7vh; left: 50%;
  transform: translateX(2%) rotate(3deg);
  width: min(74vw, 370px);
  background: linear-gradient(170deg, #fdf6ea, #f7ecd8);
  border-radius: 10px;
  padding: 24px 28px 20px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(184, 135, 79, 0.25);
  font-family: var(--display);
  color: #5b4636;
  font-size: clamp(15px, 2.4vmin, 20px);
  line-height: 1.65;
  opacity: 0;
  pointer-events: none;
}
#scene-photo.flowers-on .card {
  animation: cardIn 1.4s cubic-bezier(0.2, 1.2, 0.4, 1) 1.6s forwards;
  pointer-events: auto;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateX(2%) translateY(6vh) rotate(7deg); }
  to   { opacity: 1; transform: translateX(2%) translateY(0) rotate(3deg); }
}
.cardline { opacity: 0; transform: translateY(8px); transition: opacity 0.9s ease, transform 0.9s ease; }
.cardline.in { opacity: 1; transform: translateY(0); }
.cardline.cl0 { font-size: 1.25em; font-weight: 600; margin-bottom: 6px; }
.cardline.gap { margin-top: 0.7em; }
.cardline.sig { margin-top: 8px; font-size: 1.1em; font-weight: 600; }

/* replay */
#btn-replay {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  font-family: var(--ui);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s ease, background 0.3s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#btn-replay.show { opacity: 1; visibility: visible; }
#btn-replay:hover { background: rgba(255, 255, 255, 0.18); }

/* no-transition helper for scene jumps */
.no-trans, .no-trans * { transition: none !important; animation-duration: 0.01s !important; }

/* small screens */
@media (max-width: 680px) {
  :root { --ph: min(56vh, 104vw); }
  #scene-photo.aside #photoGroup { transform: translateY(-19vh) scale(0.56); }
  #bouquetSvg { width: min(64vw, 340px); transform: translateX(-62%); bottom: 22vh; }
  .card {
    bottom: 9vh; left: 50%;
    transform: translateX(-50%) rotate(2deg);
    width: min(88vw, 360px);
    padding: 18px 22px 16px;
  }
  #scene-photo.flowers-on .card { animation-name: cardInMobile; }
  @keyframes cardInMobile {
    from { opacity: 0; transform: translateX(-50%) translateY(6vh) rotate(6deg); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) rotate(2deg); }
  }
  #btn-replay { bottom: 10px; padding: 8px 18px; font-size: 13px; }
}