html,body,*{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
img,video{pointer-events:none;-webkit-user-drag:none;}
:root {
--cream: #fff7f2;
--blush: #ffd9e4;
--rose: #e85d75;
--rose-deep: #c8425c;
--plum: #4a2c3d;
--gold: #f2b664;
--paper: #fffdfa;
--shadow: rgba(74, 44, 61, 0.18);
--font-display: 'Pacifico', cursive;
--font-body: 'Poppins', sans-serif;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
min-height: 100dvh;
background:
radial-gradient(circle at 15% 20%, #ffe8ee 0%, transparent 45%),
radial-gradient(circle at 85% 80%, #ffeccb 0%, transparent 50%),
var(--cream);
font-family: var(--font-body);
color: var(--plum);
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
}
.float-layer {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.float-item {
position: absolute;
bottom: -10%;
font-size: 1.4rem;
opacity: 0;
animation: floatUp linear forwards;
will-change: transform, opacity;
}
@keyframes floatUp {
0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
10%  { opacity: 0.9; }
90%  { opacity: 0.7; }
100% { transform: translateY(-115vh) translateX(var(--drift, 20px)) rotate(360deg); opacity: 0; }
}
.stage {
position: relative;
z-index: 1;
width: 100%;
max-width: 860px;
margin: 0 auto;
padding: clamp(1.4rem, 5vw, 2.8rem) clamp(1rem, 4vw, 1.6rem) clamp(1.8rem, 5vw, 3rem);
padding-top: max(clamp(1.4rem, 5vw, 2.8rem), env(safe-area-inset-top));
padding-left: max(clamp(1rem, 4vw, 1.6rem), env(safe-area-inset-left));
padding-right: max(clamp(1rem, 4vw, 1.6rem), env(safe-area-inset-right));
padding-bottom: max(clamp(1.8rem, 5vw, 3rem), env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-text { margin-bottom: clamp(1rem, 3.5vw, 1.8rem); }
.eyebrow {
margin: 0 0 0.3rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.72rem;
font-weight: 600;
color: var(--rose-deep);
}
.title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 6vw, 3.4rem);
color: var(--rose-deep);
margin: 0 0 0.4rem;
text-shadow: 2px 2px 0 var(--blush);
line-height: 1.15;
}
.subtitle {
margin: 0 auto;
max-width: 46ch;
font-size: clamp(0.82rem, 2.2vw, 1rem);
font-weight: 400;
color: var(--plum);
opacity: 0.85;
}
.polaroid {
position: relative;
background: var(--paper);
padding: clamp(8px, 2vw, 14px);
border-radius: 10px;
box-shadow: 0 18px 40px var(--shadow), 0 2px 0 #fff inset;
transform: rotate(-1.4deg);
transition: transform 0.4s ease;
width: min(96vw, 780px);
}
.polaroid:hover { transform: rotate(0deg); }
.tape {
position: absolute;
width: clamp(44px, 8vw, 70px);
height: clamp(18px, 3.4vw, 26px);
background: repeating-linear-gradient(45deg, #ffe3a8, #ffe3a8 4px, #ffd98a 4px, #ffd98a 8px);
opacity: 0.85;
box-shadow: 0 2px 4px var(--shadow);
z-index: 3;
}
.tape-left  { top: -10px; left: -14px; transform: rotate(-35deg); }
.tape-right { top: -10px; right: -14px; transform: rotate(35deg); }
.cam-window {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: min(70vh, 70dvh);
margin: 0 auto;
border-radius: 6px;
overflow: hidden;
background: #1b1420;
}
#webcam, #overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
#overlay { pointer-events: none; }
#webcam {
filter: blur(0px) saturate(1) brightness(1);
transition: filter 1.1s ease;
}
.cam-window.is-romantic #webcam {
filter: blur(9px) saturate(1.35) brightness(1.06);
}
.status-pill {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
max-width: calc(100% - 90px);
background: rgba(255,255,255,0.88);
backdrop-filter: blur(4px);
color: var(--rose-deep);
font-size: clamp(0.62rem, 1.8vw, 0.75rem);
font-weight: 600;
padding: 5px 12px;
border-radius: 999px;
box-shadow: 0 4px 10px var(--shadow);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 4;
transition: background 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}
.cam-window.is-romantic .status-pill {
background: var(--rose);
color: #fff;
opacity: 0.95;
}
.romance-frame {
position: absolute;
inset: 0;
z-index: 3;
opacity: 0;
transform: scale(0.94);
transition: opacity 1s ease, transform 1s ease;
pointer-events: none;
}
.cam-window.is-romantic .romance-frame {
opacity: 1;
transform: scale(1);
}
.corner-heart {
position: absolute;
font-size: clamp(1.1rem, 3.2vw, 1.8rem);
filter: drop-shadow(0 2px 4px var(--shadow));
animation: pulseHeart 1.8s ease-in-out infinite;
}
.corner-tl { top: 8px; left: 8px; animation-delay: 0s; }
.corner-tr { top: 8px; right: 8px; animation-delay: 0.3s; }
.corner-bl { bottom: 8px; left: 8px; animation-delay: 0.6s; }
.corner-br { bottom: 8px; right: 8px; animation-delay: 0.9s; }
@keyframes pulseHeart {
0%, 100% { transform: scale(1) rotate(-4deg); }
50%      { transform: scale(1.18) rotate(4deg); }
}
.glow-bloom {
position: absolute;
inset: 0;
border-radius: 6px;
box-shadow: inset 0 0 60px 6px rgba(255, 214, 232, 0.55);
animation: breatheGlow 2.6s ease-in-out infinite;
}
@keyframes breatheGlow {
0%, 100% { opacity: 0.55; }
50%      { opacity: 1; }
}
.polaroid-caption {
text-align: center;
font-family: var(--font-display);
color: var(--rose-deep);
font-size: clamp(0.85rem, 2.6vw, 1.1rem);
padding: clamp(8px, 2vw, 14px) 6px 4px;
}
.controls {
margin-top: clamp(1.2rem, 3.5vw, 1.8rem);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
width: 100%;
}
.cassette-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--blush);
border: 2px solid var(--rose);
color: var(--rose-deep);
font-family: var(--font-body);
font-weight: 600;
font-size: clamp(0.82rem, 2.2vw, 0.92rem);
padding: 12px 22px;
min-height: 44px;
border-radius: 999px;
cursor: pointer;
transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease;
}
.cassette-btn:hover { transform: translateY(-2px) scale(1.03); }
.cassette-btn:active { transform: translateY(0) scale(0.98); }
.cassette-btn[aria-pressed="true"] {
background: var(--rose);
color: #fff;
}
.cassette-icon {
display: inline-block;
animation: none;
}
.cassette-btn[aria-pressed="true"] .cassette-icon {
animation: spinSlow 2.2s linear infinite;
}
@keyframes spinSlow {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}
.hint {
max-width: min(90vw, 380px);
font-size: clamp(0.68rem, 2vw, 0.75rem);
color: var(--plum);
opacity: 0.65;
margin: 0;
padding: 0 0.5rem;
}
@media (max-width: 380px) {
.stage { padding-left: 0.8rem; padding-right: 0.8rem; }
.title { font-size: clamp(1.6rem, 7vw, 2rem); }
.cassette-btn { padding: 10px 18px; }
}
@media (max-height: 480px) and (orientation: landscape) {
.hero-text { margin-bottom: 0.6rem; }
.title { font-size: clamp(1.3rem, 4vw, 1.8rem); margin-bottom: 0.15rem; }
.subtitle { display: none; }
.stage { padding-top: 1rem; padding-bottom: 1rem; }
.cam-window { max-height: 62vh; max-height: 62dvh; }
.controls { margin-top: 0.8rem; }
.hint { display: none; }
}
@media (min-width: 600px) and (max-width: 1024px) {
.stage { max-width: 700px; }
.polaroid { width: min(90vw, 680px); }
}
@media (min-width: 1025px) {
.stage { max-width: 900px; padding-top: 3rem; }
.polaroid { width: min(80vw, 800px); }
.polaroid:hover { transform: rotate(-0.4deg) scale(1.01); }
}
@media (min-width: 1440px) {
.stage { max-width: 960px; }
}
@media (prefers-reduced-motion: reduce) {
.float-item, .corner-heart, .glow-bloom, .cassette-icon {
animation: none !important;
}
#webcam, .romance-frame, .status-pill, .polaroid, .cassette-btn {
transition: none !important;
}
}