@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
    --accent: #ff4fa3;
    --secondary: #7c5cff;
    --ink: #f7f3ff;
    --muted: #b9b1c9;
    --deep: #080612;
    --panel: rgba(20, 15, 34, .72);
    --line: rgba(255, 255, 255, .12);
    --radius-xl: 38px;
    --radius-lg: 26px;
    --radius-md: 18px;
    --shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "DM Sans", system-ui, sans-serif;
    color: var(--ink);
    background: var(--deep);
    overflow-x: hidden;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* LOCK PAGE */
.lock-page {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 34%),
        radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 38%),
        #080612;
}
#ambientCanvas, #celebrationCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.lock-noise, .hero-grain {
    position: fixed;
    inset: 0;
    opacity: .055;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    z-index: 1;
}
.lock-orb {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .28;
    pointer-events: none;
    animation: orbFloat 10s ease-in-out infinite alternate;
}
.lock-orb-one { background: var(--accent); left: -160px; top: -120px; }
.lock-orb-two { background: var(--secondary); right: -180px; bottom: -160px; animation-delay: -4s; }
@keyframes orbFloat { to { transform: translate3d(55px, 35px, 0) scale(1.13); } }

.lock-shell {
    position: relative;
    z-index: 3;
    width: min(94vw, 560px);
    padding: 34px 0;
}
.lock-card {
    position: relative;
    overflow: hidden;
    padding: 44px 44px 38px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(31,23,49,.86), rgba(12,9,23,.84));
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow);
}
.lock-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 120deg, transparent, color-mix(in srgb, var(--accent) 52%, transparent), transparent 34%, color-mix(in srgb, var(--secondary) 46%, transparent), transparent 70%);
    filter: blur(22px);
    opacity: .32;
    z-index: -1;
    animation: spinGlow 9s linear infinite;
}
@keyframes spinGlow { to { transform: rotate(1turn); } }
.brand-mark, .floating-brand, .final-brand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: -.04em;
    font-weight: 700;
}
.brand-mark { font-size: 19px; color: rgba(255,255,255,.82); }
.brand-mark b, .floating-brand b, .final-brand b { color: var(--accent); font-style: italic; padding: 0 2px; }
.animated-lock { width: 84px; height: 92px; margin: 30px auto 18px; position: relative; }
.lock-shackle {
    position: absolute;
    left: 18px;
    top: 0;
    width: 48px;
    height: 48px;
    border: 7px solid var(--accent);
    border-bottom: 0;
    border-radius: 25px 25px 0 0;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 55%, transparent));
    transform-origin: 8px 45px;
    transition: .65s cubic-bezier(.2,.8,.2,1);
}
.lock-body {
    position: absolute;
    left: 8px;
    bottom: 0;
    width: 68px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 84%, white), var(--secondary));
    box-shadow: 0 18px 45px color-mix(in srgb, var(--accent) 28%, transparent);
}
.lock-body i { position: absolute; left: 30px; top: 17px; width: 9px; height: 22px; background: #1c1029; border-radius: 9px; }
.lock-body i::before { content: ""; position: absolute; left: -3px; top: -3px; width: 15px; height: 15px; border-radius: 50%; background: #1c1029; }
.lock-card.unlocking .lock-shackle { transform: rotate(-42deg) translate(-3px, -2px); }
.lock-card.unlocking { animation: lockPulse .7s ease; }
@keyframes lockPulse { 50% { transform: scale(1.025); box-shadow: 0 0 0 14px rgba(255,79,163,.08), var(--shadow); } }
.eyebrow, .hero-kicker, .section-heading p, .final-copy > p {
    color: color-mix(in srgb, var(--accent) 86%, white);
    letter-spacing: .22em;
    font-size: 11px;
    font-weight: 700;
}
.lock-card h1 {
    margin: 10px 0 12px;
    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 7vw, 58px);
    line-height: 1.02;
}
.lock-copy { margin: 0 auto 28px; max-width: 390px; color: var(--muted); line-height: 1.7; }
.code-form { text-align: left; }
.code-form label { display: block; margin: 0 0 8px 5px; font-size: 12px; color: #ddd4eb; }
.code-input-wrap { position: relative; }
.code-input-wrap input {
    width: 100%;
    height: 58px;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.065);
    color: white;
    padding: 0 56px 0 18px;
    outline: none;
    transition: .25s ease;
}
.code-input-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent); }
.peek-code { position: absolute; right: 8px; top: 8px; width: 42px; height: 42px; border: 0; border-radius: 13px; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.unlock-button {
    width: 100%;
    height: 59px;
    margin-top: 15px;
    padding: 0 19px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 18px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(115deg, var(--accent), var(--secondary));
    box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 25%, transparent);
    transition: .25s ease;
}
.unlock-button:hover { transform: translateY(-2px); box-shadow: 0 22px 55px color-mix(in srgb, var(--accent) 34%, transparent); }
.unlock-button i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16); font-style: normal; }
.unlock-button:disabled, input:disabled { opacity: .55; cursor: not-allowed; }
.form-error { margin-top: 12px; padding: 11px 13px; border-radius: 12px; color: #ffd4e5; background: rgba(255,58,125,.12); border: 1px solid rgba(255,93,151,.25); font-size: 13px; }
.privacy-note { margin: 18px 0 0; color: #81798f; font-size: 11px; text-align: center; }

/* WISH EXPERIENCE */
.wish-page { background: #07050e; }
.wish-page::selection { background: var(--accent); color: white; }
.experience-gate, .cinematic-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    background: radial-gradient(circle at center, #25152f, #080612 62%);
    transition: opacity .7s ease, visibility .7s ease;
}
.experience-gate.hidden, .cinematic-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--accent); filter: blur(110px); opacity: .18; animation: gateGlow 2.4s ease-in-out infinite alternate; }
@keyframes gateGlow { to { transform: scale(1.18); opacity: .28; } }
.experience-gate p { position: relative; margin: 28px 0 4px; color: var(--muted); }
.experience-gate h1 { position: relative; margin: 0 0 22px; font: 700 clamp(43px, 9vw, 90px)/1 "Playfair Display", serif; }
.experience-gate button {
    position: relative;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 16px 25px;
    color: white;
    background: linear-gradient(120deg, var(--accent), var(--secondary));
    box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 28%, transparent);
    cursor: pointer;
    font-weight: 700;
}
.experience-gate small { position: relative; margin-top: 15px; color: #777083; }
.gift-cube { position: relative; width: 130px; height: 125px; animation: giftHover 2.2s ease-in-out infinite; }
.gift-box, .gift-lid { position: absolute; left: 10px; width: 110px; background: linear-gradient(135deg, var(--accent), var(--secondary)); box-shadow: 0 25px 55px color-mix(in srgb, var(--accent) 25%, transparent); }
.gift-box { bottom: 0; height: 83px; border-radius: 8px 8px 20px 20px; }
.gift-lid { top: 20px; height: 27px; width: 124px; left: 3px; border-radius: 9px; z-index: 3; }
.gift-ribbon-v { position: absolute; z-index: 4; top: 20px; left: 55px; width: 20px; height: 105px; background: rgba(255,255,255,.74); }
.gift-ribbon-h { position: absolute; z-index: 4; left: 10px; top: 66px; width: 110px; height: 17px; background: rgba(255,255,255,.74); }
.gift-cube::before, .gift-cube::after { content: ""; position: absolute; z-index: 5; top: 0; width: 48px; height: 31px; border: 9px solid rgba(255,255,255,.78); }
.gift-cube::before { left: 24px; border-radius: 55% 45% 0 55%; transform: rotate(18deg); }
.gift-cube::after { right: 24px; border-radius: 45% 55% 55% 0; transform: rotate(-18deg); }
@keyframes giftHover { 50% { transform: translateY(-10px) rotate(1deg); } }
.experience-gate.opening .gift-lid { animation: lidFly .7s ease forwards; }
.experience-gate.opening .gift-box { animation: boxPop .65s ease forwards; }
@keyframes lidFly { to { transform: translateY(-75px) rotate(16deg); opacity: 0; } }
@keyframes boxPop { 60% { transform: scale(1.16); } to { transform: scale(.4); opacity: 0; } }

.cinematic-loader { z-index: 990; opacity: 0; visibility: hidden; background: #07050e; }
.cinematic-loader.active { opacity: 1; visibility: visible; }
.loader-copy { position: relative; z-index: 3; display: grid; gap: 16px; }
.loader-copy span { color: var(--muted); letter-spacing: .24em; font-size: 11px; }
.loader-copy strong { font: 700 clamp(54px, 10vw, 120px)/1 "Playfair Display", serif; }
.loader-tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8,1fr); gap: 2px; opacity: .14; }
.loader-tiles::before { content: ""; grid-column: 1/-1; background: repeating-linear-gradient(90deg, var(--accent) 0 12.2%, transparent 12.2% 12.5%); animation: tileScan 1s linear infinite; }
@keyframes tileScan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

.floating-brand { position: fixed; top: 18px; left: 20px; z-index: 50; padding: 10px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(10,8,17,.55); backdrop-filter: blur(18px); font-size: 13px; }
.scroll-progress { position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,.04); }
.scroll-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,var(--accent),var(--secondary)); box-shadow: 0 0 14px var(--accent); }

.cinematic-section { position: relative; min-height: 100vh; padding: 110px max(5vw, 24px); overflow: hidden; }
.wish-hero { min-height: 100svh; display: grid; place-items: center; padding: 0; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: heroDrift 14s ease-in-out infinite alternate; }
@keyframes heroDrift { to { transform: scale(1.17) translate3d(-1.5%, -1%, 0); } }
.hero-placeholder { width: 100%; height: 100%; background: radial-gradient(circle at 40% 30%, var(--secondary), #120a20 45%, #07050e); }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,3,10,.28), rgba(5,3,10,.5) 48%, #07050e 100%), radial-gradient(circle at 50% 43%, transparent, rgba(5,3,10,.5)); }
.hero-grain { position: absolute; }
.hero-copy { width: min(1180px, 92vw); text-align: center; padding-top: 4vh; }
.hero-kicker { margin-bottom: 20px; }
.split-title { margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .01em; font: 700 clamp(65px, 14vw, 190px)/.8 "Playfair Display", serif; letter-spacing: -.07em; text-shadow: 0 20px 70px rgba(0,0,0,.55); }
.split-title .char { display: inline-block; transform: translateY(120%) rotateX(-88deg); opacity: 0; transform-origin: bottom; }
body.experience-ready .split-title .char { animation: charRise .85s cubic-bezier(.2,.8,.18,1) forwards; animation-delay: calc(var(--i) * 48ms + 300ms); }
@keyframes charRise { to { transform: translateY(0) rotateX(0); opacity: 1; } }
.birthday-wordmark { margin-top: 20px; display: flex; justify-content: center; gap: 18px; font-weight: 700; letter-spacing: .5em; font-size: clamp(12px,2vw,19px); color: rgba(255,255,255,.82); }
.birthday-wordmark span:last-child { color: var(--accent); }
.hero-subtitle { max-width: 650px; margin: 22px auto 0; color: rgba(255,255,255,.8); line-height: 1.8; }
.age-counter { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 30px auto 0; }
.age-counter div { min-width: 92px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(10,7,17,.34); backdrop-filter: blur(13px); }
.age-counter strong { display: block; font-size: 22px; }
.age-counter span { color: #c1b8cc; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 7px; border: 0; color: rgba(255,255,255,.72); background: none; cursor: pointer; }
.scroll-cue span { width: 23px; height: 38px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; position: relative; }
.scroll-cue span::after { content: ""; position: absolute; top: 7px; left: 9px; width: 3px; height: 7px; border-radius: 4px; background: white; animation: cueDown 1.5s infinite; }
.scroll-cue small { letter-spacing: .2em; font-size: 9px; }
@keyframes cueDown { to { transform: translateY(16px); opacity: 0; } }

.moving-message { overflow: hidden; border-block: 1px solid rgba(255,255,255,.1); background: #0c0913; padding: 22px 0; }
.moving-message div { width: max-content; display: flex; animation: marquee 24s linear infinite; }
.moving-message span { white-space: nowrap; font: italic 600 clamp(25px,5vw,64px)/1 "Playfair Display", serif; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.6); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-heading { position: relative; z-index: 2; max-width: 900px; margin: 0 auto 55px; text-align: center; }
.section-heading h2 { margin: 12px 0 0; font: 600 clamp(39px,7vw,88px)/1.04 "Playfair Display", serif; letter-spacing: -.04em; }
.letter-section { display: grid; align-content: center; background: radial-gradient(circle at 50% 40%, rgba(124,92,255,.12), transparent 46%), #080612; }
.section-orb { position: absolute; left: 50%; top: 46%; width: 520px; height: 520px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--accent); filter: blur(150px); opacity: .1; }
.glass-panel { border: 1px solid rgba(255,255,255,.13); background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)); backdrop-filter: blur(20px); box-shadow: var(--shadow); }
.wish-letter { position: relative; z-index: 2; width: min(860px, 100%); margin: 0 auto; padding: clamp(34px,6vw,70px); border-radius: var(--radius-xl); font: 500 clamp(18px,2.2vw,26px)/1.9 "Playfair Display", serif; color: #eee7f6; }
.letter-quote { position: absolute; left: 30px; top: -23px; font: 700 110px/1 "Playfair Display", serif; color: var(--accent); opacity: .55; }
.signature { display: block; margin-top: 25px; color: color-mix(in srgb, var(--accent) 80%, white); font-size: 15px; }

.profile-reveal { display: grid; place-items: center; background: linear-gradient(180deg,#080612,#11091a); }
.profile-stage { position: relative; width: min(100%, 1050px); aspect-ratio: 16/10; border-radius: 42px; overflow: hidden; transform-style: preserve-3d; box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.profile-stage img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease-out; }
.profile-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(7,5,14,.88)); }
.profile-light { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.3); filter: blur(70px); pointer-events: none; transform: translate(-50%,-50%); opacity: 0; transition: opacity .2s; z-index: 2; }
.profile-stage:hover .profile-light { opacity: .28; }
.profile-caption { position: absolute; z-index: 3; left: clamp(25px,5vw,65px); bottom: clamp(25px,5vw,60px); }
.profile-caption span { color: var(--accent); letter-spacing: .2em; font-size: 10px; font-weight: 700; }
.profile-caption h2 { margin: 8px 0 0; font: 700 clamp(45px,8vw,100px)/.9 "Playfair Display", serif; }

.gallery-section { background: #0a0711; }
.memory-grid { width: min(1240px,100%); margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); gap: 22px; }
.memory-card { grid-column: span 4; min-width: 0; border-radius: 27px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.24); transform-style: preserve-3d; transition: border-color .3s, box-shadow .3s; }
.memory-card:nth-child(5n+1), .memory-card.featured-card { grid-column: span 8; }
.memory-card:hover { border-color: color-mix(in srgb, var(--accent) 58%, transparent); box-shadow: 0 35px 85px rgba(0,0,0,.38), 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent); }
.memory-media { position: relative; width: 100%; aspect-ratio: 4/5; padding: 0; border: 0; overflow: hidden; background: #17111f; cursor: zoom-in; }
.memory-card.featured-card .memory-media, .memory-card:nth-child(5n+1) .memory-media { aspect-ratio: 16/10; }
.memory-media img, .memory-media video { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .4s; }
.memory-card:hover .memory-media img, .memory-card:hover .memory-media video { transform: scale(1.06); filter: saturate(1.12); }
.card-shine { position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.24), transparent 65%); transform: translateX(-70%) rotate(10deg); transition: transform .75s; }
.memory-card:hover .card-shine { transform: translateX(70%) rotate(10deg); }
.card-number { position: absolute; top: 14px; left: 14px; z-index: 2; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; color: white; background: rgba(7,5,14,.55); backdrop-filter: blur(12px); font-size: 11px; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.88); color: #11091a; box-shadow: 0 15px 40px rgba(0,0,0,.3); }
.memory-copy { padding: 22px 23px 25px; }
.memory-copy h3, .video-card h3 { margin: 0; font: 600 clamp(21px,2vw,30px)/1.2 "Playfair Display", serif; }
.memory-copy p, .video-card p { margin: 8px 0 0; color: var(--muted); line-height: 1.65; font-size: 13px; }

.video-section { background: linear-gradient(180deg,#0a0711,#080612); }
.video-grid { width: min(1120px,100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 25px; }
.video-card { padding: 16px 16px 24px; border-radius: 28px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); }
.video-frame { overflow: hidden; border-radius: 19px; aspect-ratio: 16/9; background: #000; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-card h3, .video-card p { padding-inline: 8px; }
.video-card h3 { margin-top: 18px; }

.scratch-section { display: grid; align-content: center; background: radial-gradient(circle at 50% 60%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 45%), #080612; }
.scratch-card { position: relative; width: min(780px,100%); min-height: 390px; margin: 0 auto; border-radius: 34px; overflow: hidden; box-shadow: var(--shadow); }
.scratch-message { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 45px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 78%,#180d26), color-mix(in srgb,var(--secondary) 82%,#120a20)); }
.scratch-message span { font-size: 11px; letter-spacing: .23em; font-weight: 700; }
.scratch-message p { max-width: 600px; margin: 0; font: 600 clamp(25px,4vw,48px)/1.35 "Playfair Display", serif; }
#scratchCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.scratch-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2; pointer-events: none; color: #fff; font-size: 12px; padding: 10px 16px; border-radius: 999px; background: rgba(7,5,14,.55); backdrop-filter: blur(12px); transition: opacity .3s; }
.scratch-card.revealed .scratch-hint { opacity: 0; }

.cake-section { display: grid; align-content: center; background: #0a0711; }
.cake-stage { display: grid; justify-items: center; gap: 42px; }
.css-cake { position: relative; width: 330px; height: 320px; filter: drop-shadow(0 32px 45px rgba(0,0,0,.35)); }
.cake-layer { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 25px 25px 15px 15px; background: linear-gradient(180deg,#ffc9de 0 22%,#ff8fb9 22% 36%,#5c2e40 36% 47%,#f7bd75 47% 100%); box-shadow: inset 0 -14px rgba(83,37,52,.14); opacity: 0; }
.cake-bottom { width: 290px; height: 92px; bottom: 42px; animation: cakeBuild .7s .25s ease forwards; }
.cake-middle { width: 235px; height: 82px; bottom: 122px; animation: cakeBuild .7s .55s ease forwards; }
.cake-top { width: 175px; height: 72px; bottom: 192px; animation: cakeBuild .7s .85s ease forwards; }
@keyframes cakeBuild { from { opacity:0; transform:translate(-50%,45px) scale(.8); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
.cake-top i { position: absolute; top: 18px; width: 14px; height: 29px; border-radius: 0 0 10px 10px; background: #ffd7e7; }
.cake-top i:nth-child(1){left:20px}.cake-top i:nth-child(2){left:58px;height:21px}.cake-top i:nth-child(3){right:58px;height:34px}.cake-top i:nth-child(4){right:20px;height:24px}
.cake-plate { position: absolute; left: 50%; bottom: 24px; width: 330px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(180deg,#eee8f8,#aaa0ba); box-shadow: 0 15px 25px rgba(0,0,0,.24); }
.candle { position: absolute; z-index: 6; left: 50%; bottom: 258px; width: 18px; height: 62px; transform: translateX(-50%); border-radius: 8px 8px 3px 3px; background: repeating-linear-gradient(135deg,#fff 0 7px,var(--accent) 7px 14px); opacity:0; animation: candleRise .7s 1.18s ease forwards; }
@keyframes candleRise { to { opacity:1; transform:translate(-50%,-4px); } }
.flame { position: absolute; left: 50%; top: -34px; width: 20px; height: 33px; transform: translateX(-50%); border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 50% 70%,#fff 0 16%,#ffd359 17% 46%,#ff6e2d 47% 75%,transparent 77%); filter: drop-shadow(0 0 12px #ff9d3c); transform-origin: center bottom; animation: flameDance .22s ease-in-out infinite alternate; }
@keyframes flameDance { to { transform: translateX(-50%) rotate(5deg) scale(.9,1.08); } }
.smoke { position: absolute; left: 50%; top: -27px; width: 10px; height: 10px; border-radius: 50%; opacity: 0; background: rgba(255,255,255,.6); filter: blur(4px); }
.css-cake.blown .flame { opacity: 0; transform: translateX(-50%) scale(.2); transition: .2s; }
.css-cake.blown .smoke { animation: smokeRise 1.8s ease-out forwards; }
@keyframes smokeRise { 0%{opacity:.7;transform:translate(-50%,0) scale(.7)} 100%{opacity:0;transform:translate(30px,-90px) scale(4)} }
.blow-button { border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 15px 25px; color: white; background: linear-gradient(120deg,var(--accent),var(--secondary)); cursor: pointer; box-shadow: 0 16px 40px color-mix(in srgb,var(--accent) 25%,transparent); font-weight: 700; }

.final-section { display: grid; place-items: center; min-height: 105vh; text-align: center; background: radial-gradient(circle at center, color-mix(in srgb,var(--secondary) 18%,transparent), transparent 38%), #07050e; }
.final-rings { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; transform: translate(-50%,-50%); }
.final-rings i { position: absolute; inset: 0; border: 1px solid color-mix(in srgb,var(--accent) 32%,transparent); border-radius: 50%; animation: ringPulse 4s ease-out infinite; }
.final-rings i:nth-child(2){animation-delay:1.3s}.final-rings i:nth-child(3){animation-delay:2.6s}
@keyframes ringPulse { 0%{transform:scale(.25);opacity:0} 30%{opacity:.7} 100%{transform:scale(1.35);opacity:0} }
.final-copy { position: relative; z-index: 3; max-width: 1000px; }
.final-copy h2 { margin: 15px 0 25px; font: 600 clamp(43px,8vw,110px)/1.02 "Playfair Display", serif; letter-spacing: -.05em; }
.final-copy > span { color: var(--muted); font-size: clamp(16px,2vw,23px); }
.final-brand { display: flex; justify-content: center; margin-top: 45px; color: rgba(255,255,255,.75); }

.reveal-block, .reveal-card { opacity: 0; transform: translateY(55px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal-card:nth-child(even) { transform: translateY(65px) rotate(1deg); }
.reveal-block.visible, .reveal-card.visible { opacity: 1; transform: translateY(0) rotate(0); }

.floating-controls { position: fixed; z-index: 75; right: 18px; bottom: 18px; display: grid; gap: 10px; }
.control-button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: white; background: rgba(10,8,17,.65); backdrop-filter: blur(16px); cursor: pointer; }
.equalizer { height: 18px; display: flex; align-items: end; gap: 3px; }
.equalizer i { display:block; width:3px; height:45%; border-radius:3px; background:var(--accent); animation:eq .65s ease-in-out infinite alternate; }
.equalizer i:nth-child(2){animation-delay:-.25s;height:90%}.equalizer i:nth-child(3){animation-delay:-.45s;height:65%}.equalizer i:nth-child(4){animation-delay:-.12s;height:35%}
.control-button.paused .equalizer i { animation-play-state: paused; height: 25%; }
@keyframes eq { to { height: 100%; } }
.lock-again { font-size: 24px; }

.lightbox { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 24px; background: rgba(5,3,10,.92); backdrop-filter: blur(18px); opacity:0; visibility:hidden; transition:.3s; }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox-content { width:min(1100px,94vw); max-height:86vh; display:grid; place-items:center; }
.lightbox-content img, .lightbox-content video { max-width:100%; max-height:86vh; border-radius:22px; box-shadow:0 35px 100px rgba(0,0,0,.6); }
.lightbox-close { position:absolute; top:20px; right:22px; width:46px; height:46px; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:white; background:rgba(255,255,255,.08); font-size:30px; cursor:pointer; }

#floatingLayer { position:fixed; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.float-item { position:absolute; bottom:-80px; animation:floatUp linear forwards; opacity:.8; }
@keyframes floatUp { to { transform:translate3d(var(--drift),-115vh,0) rotate(360deg); opacity:0; } }
#mouseTrail { position:fixed; inset:0; z-index:6; pointer-events:none; }
#mouseTrail img { position:absolute; width:82px; height:104px; object-fit:cover; border-radius:14px; opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(var(--r)); box-shadow:0 16px 35px rgba(0,0,0,.35); transition:opacity .25s, transform .6s; }
#mouseTrail img.show { opacity:.88; transform:translate(-50%,-50%) scale(1) rotate(var(--r)); }

/* ADMIN */
.admin-body { min-height:100vh; color:#24202b; background:#f5f3f8; }
.admin-login-page { display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 20% 20%,rgba(255,79,163,.16),transparent 30%),radial-gradient(circle at 80% 80%,rgba(124,92,255,.17),transparent 34%),#0b0812; }
.admin-login-card { width:min(460px,100%); padding:36px; border-radius:30px; background:#fff; color:#27212e; box-shadow:0 35px 100px rgba(0,0,0,.35); }
.admin-login-card .brand-mark { color:#2d2734; }
.admin-login-card h1 { margin:28px 0 8px; font:700 40px/1.05 "Playfair Display",serif; }
.admin-login-card p { color:#786f80; line-height:1.6; }
.admin-form { display:grid; gap:15px; margin-top:25px; }
.admin-form label, .field label { font-size:12px; font-weight:700; color:#514958; }
.admin-form input, .field input, .field textarea, .field select {
    width:100%; border:1px solid #ded8e4; border-radius:13px; background:#fff; padding:13px 14px; color:#28222e; outline:none;
}
.admin-form input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,79,163,.1); }
.admin-primary-button, .admin-secondary-button, .admin-danger-button { display:inline-flex; align-items:center; justify-content:center; min-height:43px; padding:10px 16px; border:0; border-radius:12px; cursor:pointer; font-weight:700; }
.admin-primary-button { color:#fff; background:linear-gradient(120deg,var(--accent),var(--secondary)); }
.admin-secondary-button { color:#37303e; background:#eeeaf2; }
.admin-danger-button { color:#b51d4f; background:#ffe5ee; }
.admin-shell { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.admin-sidebar { position:sticky; top:0; height:100vh; padding:28px 20px; color:#f5effa; background:#100c18; }
.admin-sidebar .brand-mark { margin:0 10px 35px; }
.admin-nav { display:grid; gap:7px; }
.admin-nav a { padding:12px 14px; border-radius:12px; color:#bdb4c7; font-size:14px; }
.admin-nav a:hover, .admin-nav a.active { color:white; background:linear-gradient(90deg,rgba(255,79,163,.17),rgba(124,92,255,.12)); }
.admin-sidebar-bottom { position:absolute; bottom:24px; left:20px; right:20px; display:grid; gap:8px; }
.admin-main { min-width:0; padding:34px; }
.admin-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.admin-topbar h1 { margin:0; font:700 38px/1 "Playfair Display",serif; }
.admin-topbar p { margin:7px 0 0; color:#7c7384; }
.admin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stat-card, .admin-panel { border:1px solid #e7e1eb; border-radius:20px; background:#fff; box-shadow:0 12px 34px rgba(34,25,43,.055); }
.stat-card { padding:23px; }
.stat-card span { color:#786f80; font-size:12px; }
.stat-card strong { display:block; margin-top:8px; font:700 36px/1 "Playfair Display",serif; }
.admin-panel { padding:24px; margin-bottom:22px; }
.admin-panel-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.admin-panel-head h2 { margin:0; font:700 26px/1.15 "Playfair Display",serif; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field textarea { min-height:115px; resize:vertical; line-height:1.6; }
.check-row { display:flex; flex-wrap:wrap; gap:12px; }
.check-item { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #e5dfe9; border-radius:12px; background:#faf9fb; }
.check-item input { width:auto; }
.admin-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.admin-table-wrap { overflow:auto; }
.admin-table { width:100%; border-collapse:collapse; min-width:760px; }
.admin-table th, .admin-table td { padding:13px 12px; border-bottom:1px solid #eee9f1; text-align:left; vertical-align:middle; font-size:13px; }
.admin-table th { color:#776e7f; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.badge { display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.badge.active { color:#177047; background:#dbf7e9; }
.badge.hidden { color:#9c4a17; background:#fff0d9; }
.admin-media-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.admin-media-card { overflow:hidden; border:1px solid #e4dfe8; border-radius:17px; background:#fff; }
.admin-media-preview { aspect-ratio:4/3; overflow:hidden; background:#14101b; }
.admin-media-preview img, .admin-media-preview video { width:100%; height:100%; object-fit:cover; }
.admin-media-body { padding:13px; display:grid; gap:9px; }
.admin-media-body input, .admin-media-body textarea { width:100%; padding:9px 10px; border:1px solid #ddd7e2; border-radius:9px; }
.admin-media-actions { display:flex; gap:7px; flex-wrap:wrap; }
.flash { margin-bottom:18px; padding:13px 15px; border-radius:13px; font-size:13px; }
.flash.success { color:#17643f; background:#dcf7e9; border:1px solid #bcebd5; }
.flash.error { color:#9d234c; background:#ffe8ef; border:1px solid #ffc8da; }
.empty-state { padding:35px; text-align:center; color:#817888; border:1px dashed #d8d0de; border-radius:17px; }
.color-field { display:flex; gap:10px; align-items:center; }
.color-field input[type=color] { width:52px; height:44px; padding:3px; }
.admin-mobile-toggle { display:none; }

@media (max-width: 980px) {
    .memory-card, .memory-card:nth-child(5n+1), .memory-card.featured-card { grid-column:span 6; }
    .admin-shell { grid-template-columns:1fr; }
    .admin-sidebar { position:fixed; z-index:200; left:0; top:0; width:270px; transform:translateX(-105%); transition:.3s; }
    .admin-sidebar.open { transform:translateX(0); }
    .admin-mobile-toggle { display:inline-flex; }
    .admin-main { padding:24px; }
    .admin-media-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 700px) {
    .lock-card { padding:34px 21px 29px; border-radius:27px; }
    .cinematic-section { padding:88px 18px; min-height:auto; }
    .wish-hero { min-height:100svh; padding:0 18px; }
    .floating-brand { top:12px; left:12px; font-size:11px; }
    .split-title { font-size:clamp(55px,19vw,95px); line-height:.83; }
    .birthday-wordmark { letter-spacing:.27em; gap:8px; }
    .age-counter { gap:6px; }
    .age-counter div { min-width:72px; padding:10px; }
    .age-counter strong { font-size:18px; }
    .section-heading { margin-bottom:35px; }
    .wish-letter { border-radius:27px; padding:38px 25px; }
    .profile-stage { aspect-ratio:4/5; border-radius:27px; }
    .profile-caption h2 { font-size:52px; }
    .memory-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; padding:0 7vw 15px; margin-inline:-18px; scrollbar-width:none; }
    .memory-grid::-webkit-scrollbar { display:none; }
    .memory-card, .memory-card:nth-child(5n+1), .memory-card.featured-card { flex:0 0 84vw; scroll-snap-align:center; }
    .memory-card .memory-media, .memory-card.featured-card .memory-media, .memory-card:nth-child(5n+1) .memory-media { aspect-ratio:4/5; }
    .video-grid { grid-template-columns:1fr; }
    .scratch-card { min-height:420px; }
    .scratch-message { padding:30px 22px; }
    .css-cake { transform:scale(.82); margin:-25px 0; }
    #mouseTrail { display:none; }
    .admin-main { padding:18px; }
    .admin-topbar { align-items:flex-start; }
    .admin-topbar h1 { font-size:30px; }
    .admin-grid, .form-grid { grid-template-columns:1fr; }
    .field.full { grid-column:auto; }
    .admin-media-grid { grid-template-columns:1fr; }
    .admin-panel { padding:18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* V2 MASTER ANIMATION LAYER */
.sweet-universe{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;perspective:900px}
.sweet-shape{position:absolute;display:block;opacity:.34;filter:drop-shadow(0 22px 35px rgba(0,0,0,.35));will-change:transform}
.sweet-round{width:82px;height:82px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff 0 6%,#ffb7d7 7% 19%,var(--accent) 20% 54%,#8f255b 55% 100%);box-shadow:inset -13px -18px 25px rgba(47,6,30,.35),inset 9px 8px 18px rgba(255,255,255,.22)}
.sweet-oval{width:110px;height:67px;border-radius:55% 45% 52% 48%;background:linear-gradient(145deg,#ffcf9d,#bc6a3d 45%,#612f2d);box-shadow:inset 0 10px 18px rgba(255,255,255,.18),inset 0 -16px 24px rgba(41,9,13,.35)}
.sweet-oval::after{content:"";position:absolute;inset:13px 18px;border-radius:50%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 5px,transparent 5px 11px);transform:rotate(-8deg)}
.sweet-ring{width:78px;height:78px;border:12px solid var(--secondary);border-radius:50%;box-shadow:0 0 30px rgba(124,92,255,.4),inset 0 0 20px rgba(255,255,255,.2)}
.sweet-one{left:6%;top:9%;animation:sweetFloatOne 13s ease-in-out infinite alternate}
.sweet-two{right:5%;top:11%;animation:sweetFloatTwo 15s ease-in-out infinite alternate}
.sweet-three{left:11%;bottom:8%;width:56px;height:56px;animation:sweetFloatTwo 11s ease-in-out infinite alternate-reverse}
.sweet-four{right:10%;bottom:9%;transform:rotate(-18deg);animation:sweetFloatOne 14s ease-in-out infinite alternate-reverse}
.sweet-five{left:2%;top:48%;width:48px;height:48px;border-width:8px;animation:sweetSpin 12s linear infinite}
.sweet-six{right:2%;top:47%;width:55px;height:55px;border-width:9px;animation:sweetSpin 15s linear infinite reverse}
@keyframes sweetFloatOne{0%{transform:translate3d(0,0,0) rotate(-12deg)}50%{transform:translate3d(28px,-35px,70px) rotate(14deg)}100%{transform:translate3d(-18px,22px,10px) rotate(-4deg)}}
@keyframes sweetFloatTwo{0%{transform:translate3d(0,0,0) rotate(10deg)}50%{transform:translate3d(-36px,26px,90px) rotate(-18deg)}100%{transform:translate3d(18px,-24px,20px) rotate(6deg)}}
@keyframes sweetSpin{to{transform:rotate(360deg) translateY(-20px)}}
.lock-orbit-system{position:fixed;left:50%;top:50%;z-index:1;width:min(82vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.34}
.lock-orbit-system span{position:absolute;inset:0;border:1px solid rgba(255,255,255,.09);border-radius:50%;animation:orbitRotate 22s linear infinite}
.lock-orbit-system span::after{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px var(--accent)}
.lock-orbit-system span:nth-child(2){inset:12%;animation-duration:15s;animation-direction:reverse;transform:rotate(60deg)}
.lock-orbit-system span:nth-child(2)::after{background:var(--secondary);box-shadow:0 0 22px var(--secondary)}
.lock-orbit-system span:nth-child(3){inset:25%;animation-duration:10s;transform:rotate(130deg)}
@keyframes orbitRotate{to{transform:rotate(360deg)}}
.lock-marquee{position:fixed;left:0;right:0;bottom:22px;z-index:2;overflow:hidden;white-space:nowrap;color:rgba(255,255,255,.13);font-weight:800;letter-spacing:.35em;font-size:12px;pointer-events:none;transform:rotate(-1deg)}
.lock-marquee div{display:inline-block;min-width:200%;animation:lockMarquee 26s linear infinite}
@keyframes lockMarquee{to{transform:translateX(-50%)}}
.lock-card{animation:cardBreathe 4.5s ease-in-out infinite}
@keyframes cardBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.lock-card.unlocking{animation:lockPulse .7s ease}
.animated-lock::after{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;border:1px solid rgba(255,255,255,.13);border-radius:50%;transform:translate(-50%,-50%);animation:lockRadar 2.4s ease-out infinite}
@keyframes lockRadar{0%{transform:translate(-50%,-50%) scale(.45);opacity:0}35%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
.hero-aurora{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-aurora i{position:absolute;width:56vw;height:56vw;border-radius:50%;filter:blur(95px);opacity:.18;mix-blend-mode:screen;animation:auroraDrift 13s ease-in-out infinite alternate}
.hero-aurora i:nth-child(1){left:-18vw;top:-22vw;background:var(--accent)}
.hero-aurora i:nth-child(2){right:-20vw;top:18vh;background:var(--secondary);animation-delay:-5s}
.hero-aurora i:nth-child(3){left:26vw;bottom:-32vw;background:#56e0ff;animation-delay:-8s}
@keyframes auroraDrift{to{transform:translate3d(9vw,7vh,0) scale(1.2);opacity:.3}}
.hero-comets{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.hero-comets i{position:absolute;width:150px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);filter:drop-shadow(0 0 7px #fff);transform:rotate(-35deg) translateX(-220px);opacity:0;animation:cometFly 5.8s linear infinite}
.hero-comets i:nth-child(1){left:12%;top:18%;animation-delay:.5s}.hero-comets i:nth-child(2){left:48%;top:8%;animation-delay:2.2s}.hero-comets i:nth-child(3){left:68%;top:34%;animation-delay:3.8s}.hero-comets i:nth-child(4){left:25%;top:60%;animation-delay:5s}
@keyframes cometFly{0%{opacity:0;transform:rotate(-35deg) translateX(-240px)}12%{opacity:1}35%,100%{opacity:0;transform:rotate(-35deg) translateX(480px)}}
body:not(.experience-ready) #wishExperience{filter:blur(15px);transform:scale(1.035)}
#wishExperience{transition:filter 1.1s ease,transform 1.25s cubic-bezier(.2,.8,.2,1)}
body.experience-ready #wishExperience{filter:none;transform:none}
.cake-layer,.candle{animation:none!important}
.cake-section.cake-visible .cake-bottom{animation:cakeBuild .7s .15s ease forwards!important}
.cake-section.cake-visible .cake-middle{animation:cakeBuild .7s .45s ease forwards!important}
.cake-section.cake-visible .cake-top{animation:cakeBuild .7s .75s ease forwards!important}
.cake-section.cake-visible .candle{animation:candleRise .7s 1.08s ease forwards!important}
.memory-card{position:relative}
.memory-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.08) 45%,transparent 64%);transform:translateX(-120%);transition:transform .8s ease}
.memory-card:hover::after{transform:translateX(120%)}
@media(max-width:700px){.sweet-one,.sweet-two{transform:scale(.62)}.sweet-three,.sweet-four,.sweet-five,.sweet-six{display:none}.lock-orbit-system{width:125vw}.lock-marquee{bottom:8px}.lock-card{animation:cardBreatheMobile 4.5s ease-in-out infinite}@keyframes cardBreatheMobile{50%{transform:translateY(-4px)}}}

/* Bulk photo manager */
.admin-panel-note{margin:7px 0 0;color:#9f96aa;font-size:13px;line-height:1.6}
.bulk-photo-picker{display:grid;place-items:center;min-height:170px;padding:28px;border:1px dashed rgba(255,255,255,.24);border-radius:22px;background:linear-gradient(145deg,rgba(255,79,163,.09),rgba(124,92,255,.08));text-align:center;cursor:pointer;transition:.25s ease}
.bulk-photo-picker:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 18px 45px rgba(0,0,0,.22)}
.bulk-photo-picker strong{font-size:22px;color:#fff}
.bulk-photo-picker span{margin-top:8px;color:#a9a0b5;font-size:13px}
.bulk-photo-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bulk-upload-summary{margin:16px 0;padding:12px 15px;border-radius:13px;background:rgba(255,255,255,.05);color:#cfc7d7;font-size:13px}
.bulk-photo-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bulk-photo-item{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:19px;background:rgba(255,255,255,.04)}
.bulk-photo-thumb{aspect-ratio:4/3;background:#0c0912;overflow:hidden}
.bulk-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bulk-photo-fields{display:grid;gap:9px;padding:14px}
.bulk-photo-fields strong{font-size:13px;color:#fff}
.bulk-photo-fields input,.bulk-photo-fields textarea{width:100%;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(255,255,255,.06);color:#fff;padding:11px 12px;outline:none;font:inherit}
.bulk-photo-fields textarea{resize:vertical;min-height:76px}
.bulk-photo-fields input:focus,.bulk-photo-fields textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.bulk-photo-fields small{overflow:hidden;color:#8f8799;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1050px){.bulk-photo-preview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.bulk-photo-preview{grid-template-columns:1fr}.bulk-photo-picker{min-height:145px}.bulk-photo-picker strong{font-size:19px}}