/* ══════════════════════════════════════════════════════
   ZEHRA — Premium Romantic Anniversary Site
   ══════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

/* ─── Design Tokens ─── */
:root {
    --rose: #e8446d;
    --rose-soft: #ff8aab;
    --rose-deep: #a8174a;
    --blush: #ffd6e0;
    --gold: #f0c040;
    --gold-soft: #ffe4a0;
    --cream: #fff8f0;
    --night: #08060e;
    --night-blue: #0c0a18;
    --glass: rgba(255,255,255,0.035);
    --glass2: rgba(255,255,255,0.07);
    --glass-b: rgba(255,255,255,0.08);
    --text: #f4ede6;
    --text-dim: rgba(244,237,230,0.5);
    --font-script: 'Great Vibes', cursive;
    --font-serif: 'Cormorant Garamond', serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --ease: cubic-bezier(.4,0,.2,1);
    --bounce: cubic-bezier(.175,.885,.32,1.275);
}
body {
    font-family: var(--font-body);
    background: var(--night);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* ─── Petals Canvas ─── */
#petals-canvas {
    position: fixed; inset:0; z-index: 0;
    pointer-events: none;
}

/* ─── Cursor Trail ─── */
.cursor-heart {
    position: fixed; pointer-events: none; z-index: 9998;
    font-size: 14px; opacity: 0;
    animation: cursorPop .8s var(--ease) forwards;
}
@keyframes cursorPop {
    0% { opacity:1; transform: translate(0,0) scale(1); }
    100% { opacity:0; transform: translate(var(--dx), -60px) scale(0.3); }
}

/* ══════════════════════════════════════
   INTRO SCREEN
   ══════════════════════════════════════ */
#intro-screen {
    position: fixed; inset:0; z-index: 9999;
    background: var(--night);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
#intro-screen.bye {
    animation: introBye 1.8s var(--ease) forwards;
}
@keyframes introBye {
    0% { opacity:1; filter: blur(0); }
    100% { opacity:0; filter: blur(20px); pointer-events:none; }
}
#intro-stars { position:absolute; inset:0; }

.intro-center { position:relative; z-index:1; text-align:center; padding:0 1.5rem; }

.intro-heart-wrap {
    position: relative; width:120px; height:120px; margin: 0 auto 2rem;
    display:flex; align-items:center; justify-content:center;
}
.intro-heart-glow {
    position:absolute; width:100px; height:100px; border-radius:50%;
    background: radial-gradient(circle, rgba(232,68,109,.4) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes glowPulse {
    0%,100% { transform:scale(1); opacity:.5; }
    50% { transform:scale(1.4); opacity:.8; }
}
.intro-heart-emoji {
    position:relative; font-size: 4rem; z-index:1;
    opacity:0; transform: scale(0);
    animation: heartAppear 1s cubic-bezier(.175,.885,.32,1.275) .8s forwards;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 20px rgba(232,68,109,.5));
}
@keyframes heartAppear {
    0% { opacity:0; transform:scale(0) rotate(-15deg); }
    50% { opacity:1; transform:scale(1.3) rotate(5deg); }
    70% { transform:scale(.9) rotate(-2deg); }
    100% { opacity:1; transform:scale(1) rotate(0deg); }
}

.intro-typewriter {
    font-family: var(--font-script);
    font-size: clamp(2.5rem,7vw,4.5rem);
    background: linear-gradient(135deg, var(--rose-soft), var(--gold), var(--rose));
    background-size: 200% 200%;
    animation: gradShift 4s ease infinite;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    min-height: 1.2em;
}
@keyframes gradShift {
    0%,100% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
}

.intro-sub {
    font-family: var(--font-serif); font-style:italic;
    font-size: 1.15rem; color: var(--text-dim);
    opacity:0; transform: translateY(10px);
    animation: fadeIn 1s ease 3.5s forwards;
}
@keyframes fadeIn { to { opacity:1; transform:translateY(0); } }

/* ══════════════════════════════════════
   MUSIC BUTTON
   ══════════════════════════════════════ */
.music-btn {
    position:fixed; top:1.2rem; right:1.2rem; z-index:1000;
    width:44px; height:44px; border-radius:50%;
    background: var(--glass2); border:1px solid var(--glass-b);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition: all .3s var(--ease);
}
.music-btn:hover { background: rgba(232,68,109,.25); border-color: var(--rose); transform:scale(1.1); }
.music-visualizer {
    display:none; gap:2px; align-items:flex-end; height:18px;
}
.music-visualizer span {
    width:3px; background: var(--rose-soft); border-radius:3px;
    animation: bar .6s ease-in-out infinite alternate;
}
.music-visualizer span:nth-child(1){height:4px;animation-delay:0s}
.music-visualizer span:nth-child(2){height:10px;animation-delay:.15s}
.music-visualizer span:nth-child(3){height:6px;animation-delay:.3s}
.music-visualizer span:nth-child(4){height:14px;animation-delay:.1s}
.music-visualizer span:nth-child(5){height:8px;animation-delay:.25s}
@keyframes bar { to{height:18px} }
.music-off-icon { font-size:1.2rem; color: var(--text); }
.music-btn.playing .music-off-icon { display:none; }
.music-btn.playing .music-visualizer { display:flex; }

/* ══════════════════════════════════════
   HERO
   ══════════════════════════════════════ */
#hero {
    position:relative; min-height:100vh; display:flex;
    align-items:center; justify-content:center;
    overflow:hidden;
}
.hero-bg-gradient {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(232,68,109,.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(240,192,64,.06) 0%, transparent 60%);
}
.hero-content { text-align:center; z-index:1; padding:2rem; }
.hero-kicker {
    font-family: var(--font-serif); font-style:italic;
    color: var(--rose-soft); font-size:.95rem;
    letter-spacing:2px; margin-bottom:.5rem;
}
.hero-title {
    font-family: var(--font-script);
    font-size: clamp(3rem,8vw,6rem);
    color: var(--text); margin-bottom:2.5rem;
    position:relative;
}
.heart-inline {
    display:inline-block;
    animation: heartBeat 1.3s ease-in-out infinite;
    margin-left:.3rem;
}
@keyframes heartBeat {
    0%,100%{transform:scale(1)} 14%{transform:scale(1.2)} 28%{transform:scale(1)} 42%{transform:scale(1.15)}
}

/* ─── Counter ─── */
.counter-box {
    background: var(--glass); border:1px solid var(--glass-b);
    border-radius:28px; padding:2rem 2.5rem;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
    max-width: 700px; margin: 0 auto;
}
.counter-row {
    display:flex; align-items:center; justify-content:center; gap:.4rem;
    flex-wrap:wrap;
}
.cnt { display:flex; flex-direction:column; align-items:center; min-width:56px; }
.cnt-num {
    font-family: var(--font-body); font-weight:500;
    font-size: clamp(2rem,4.5vw,3.2rem);
    background: linear-gradient(180deg,#fff 0%, var(--rose-soft) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    line-height:1.1;
}
.cnt-lbl {
    font-size:.65rem; text-transform:uppercase; letter-spacing:2.5px;
    color: var(--text-dim); margin-top:.15rem;
}
.cnt-sep {
    font-size:1rem; color: var(--rose); opacity:.5;
    align-self:flex-start; margin-top:.7rem;
    animation: sepPulse 1s ease-in-out infinite;
}
@keyframes sepPulse { 0%,100%{opacity:.5} 50%{opacity:.15} }
.counter-tagline {
    margin-top:1.2rem; font-family: var(--font-serif); font-style:italic;
    font-size:.95rem; color: var(--gold-soft); opacity:.85;
}

/* ─── Scroll Hint ─── */
.scroll-hint {
    margin-top:3rem; display:flex; flex-direction:column; align-items:center;
    gap:.5rem; color: var(--text-dim); font-size:.75rem;
    letter-spacing:3px; text-transform:uppercase;
    animation: fadeIn 1s ease 1s both;
}
.scroll-arrow {
    width:20px; height:20px; border-right:2px solid var(--rose-soft);
    border-bottom:2px solid var(--rose-soft); transform:rotate(45deg);
    animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce { 0%,100%{transform:rotate(45deg) translate(0,0)} 50%{transform:rotate(45deg) translate(5px,5px)} }

/* ══════════════════════════════════════
   SCROLL ANIMATIONS
   ══════════════════════════════════════ */
[data-anim] {
    opacity:0; transform:translateY(40px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--delay, 0s);
}
[data-anim].visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════
   MEMORIES
   ══════════════════════════════════════ */
#memories {
    padding: 7rem 2rem; position:relative; z-index:1;
}
.section-header { text-align:center; margin-bottom:4rem; }
.section-tag {
    display:inline-block; font-size:.8rem; letter-spacing:3px;
    text-transform:uppercase; color: var(--rose-soft);
    margin-bottom:.6rem;
}
.section-heading {
    font-family: var(--font-script);
    font-size: clamp(2.2rem,5vw,3.8rem);
    color: var(--text);
}
.section-line {
    width:60px; height:2px; margin:1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--rose), transparent);
}

.memory-cards {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:2rem; max-width:1100px; margin:0 auto;
}
.memory-card {
    background: var(--glass); border:1px solid var(--glass-b);
    border-radius:20px; overflow:hidden; cursor:pointer;
    transition: all .5s var(--bounce);
    position:relative;
}
.memory-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: var(--rose);
    box-shadow: 0 30px 60px rgba(232,68,109,.15), 0 0 0 1px rgba(232,68,109,.2);
}
.card-img-wrap {
    position:relative; aspect-ratio:4/3; overflow:hidden;
}
.card-img-wrap img {
    width:100%; height:100%; object-fit:cover;
    transition: transform .7s var(--ease);
}
.memory-card:hover .card-img-wrap img { transform:scale(1.1); }
.card-overlay {
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 40%, rgba(8,6,14,.8));
    display:flex; align-items:flex-end; justify-content:center;
    padding:1.5rem; opacity:0; transition: opacity .4s var(--ease);
}
.memory-card:hover .card-overlay { opacity:1; }
.card-view {
    font-family: var(--font-serif); font-size:.9rem;
    color: var(--rose-soft); letter-spacing:1px;
}
.card-info {
    padding:1.2rem 1.5rem 1.5rem; text-align:center;
}
.card-emoji { font-size:1.8rem; display:block; margin-bottom:.3rem; }
.card-info h3 {
    font-family: var(--font-script); font-size:1.6rem;
    color: var(--text); margin-bottom:.2rem;
}
.card-info p {
    font-family: var(--font-serif); font-style:italic;
    font-size:.85rem; color: var(--text-dim);
}

/* ══════════════════════════════════════
   MODAL
   ══════════════════════════════════════ */
.modal {
    position:fixed; inset:0; z-index:2000;
    display:none; align-items:center; justify-content:center;
}
.modal.open { display:flex; }
.modal-backdrop {
    position:absolute; inset:0;
    background: rgba(8,6,14,.94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    animation: fadeIn .3s ease;
}
.modal-body {
    position:relative; z-index:1;
    width:92vw; max-width:1100px; max-height:88vh;
    background: linear-gradient(170deg, rgba(20,16,30,.95), rgba(12,10,24,.98));
    border:1px solid var(--glass-b); border-radius:24px;
    padding:2.5rem 2rem; overflow-y:auto;
    animation: modalPop .5s var(--bounce);
}
@keyframes modalPop { from { transform:scale(.85) translateY(40px); opacity:0; } }
.modal-x {
    position:sticky; top:0; float:right;
    width:40px; height:40px; border-radius:50%;
    background: var(--glass2); border:1px solid var(--glass-b);
    color:#fff; font-size:1.4rem; cursor:pointer;
    transition: all .3s var(--ease); z-index:10;
}
.modal-x:hover { background: var(--rose); transform:rotate(90deg); }
.modal-heading {
    font-family: var(--font-script); font-size:2.2rem;
    text-align:center; color: var(--rose-soft);
    margin-bottom:2rem;
}
.modal-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
    gap:1rem;
}
.modal-item {
    border-radius:14px; overflow:hidden; aspect-ratio:1;
    cursor:pointer; position:relative;
    transition: transform .3s var(--ease);
}
.modal-item:hover { transform:scale(1.06); z-index:2; }
.modal-item img, .modal-item video {
    width:100%; height:100%; object-fit:cover;
    transition: transform .5s var(--ease);
}
.modal-item:hover img { transform:scale(1.08); }

/* ══════════════════════════════════════
   FILM STRIP
   ══════════════════════════════════════ */
#filmstrip { padding:7rem 0; position:relative; z-index:1; overflow:hidden; }
#filmstrip .section-header { padding:0 2rem; }

.strip-container { margin-top:3rem; }
.strip-row {
    display:flex; gap:1.2rem;
    width:max-content; padding:.5rem 0;
}
.strip-row-1 { animation: scrollLeft 80s linear infinite; }
.strip-row-2 { animation: scrollRight 90s linear infinite; margin-top:1.2rem; }
@keyframes scrollLeft { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes scrollRight { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.strip-row:hover { animation-play-state:paused; }

.strip-frame {
    flex-shrink:0; width:240px; height:300px;
    border-radius:16px; overflow:hidden;
    position:relative; cursor:pointer;
    border:2px solid rgba(255,255,255,.06);
    transition: all .4s var(--ease);
}
.strip-frame:hover {
    border-color: var(--rose);
    transform: scale(1.08) rotate(-1deg);
    box-shadow: 0 20px 50px rgba(232,68,109,.25);
}
.strip-frame img { width:100%; height:100%; object-fit:cover; }
/* Film perforations */
.strip-frame::before, .strip-frame::after {
    content:''; position:absolute; left:0; right:0; height:16px; z-index:1;
    background: repeating-linear-gradient(90deg,
        rgba(0,0,0,.85) 0px, rgba(0,0,0,.85) 8px,
        transparent 8px, transparent 13px);
}
.strip-frame::before { top:0; border-radius:16px 16px 0 0; }
.strip-frame::after { bottom:0; border-radius:0 0 16px 16px; }

/* ══════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════ */
.lightbox {
    position:fixed; inset:0; z-index:3000;
    background:rgba(0,0,0,.96); display:none;
    align-items:center; justify-content:center;
}
.lightbox.open { display:flex; }
.lb-close {
    position:absolute; top:1.5rem; right:1.5rem;
    width:50px; height:50px; border-radius:50%;
    background: var(--glass2); border:1px solid var(--glass-b);
    color:#fff; font-size:2rem; cursor:pointer;
    transition: all .3s var(--ease); z-index:5;
}
.lb-close:hover { background: var(--rose); transform:rotate(90deg); }
.lb-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    width:50px; height:50px; border-radius:50%;
    background: var(--glass2); border:1px solid var(--glass-b);
    color:#fff; font-size:2rem; cursor:pointer;
    transition: all .3s var(--ease); z-index:5;
    display:flex; align-items:center; justify-content:center;
}
.lb-prev { left:1.5rem; }
.lb-next { right:1.5rem; }
.lb-arrow:hover { background: var(--rose); }
#lb-img {
    max-width:88vw; max-height:85vh; object-fit:contain;
    border-radius:8px;
    animation: lbIn .35s var(--ease);
}
@keyframes lbIn { from { transform:scale(.92); opacity:0; } }
.lb-counter {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    font-size:.8rem; color: var(--text-dim); letter-spacing:2px;
}

/* ══════════════════════════════════════
   LOVE LETTER
   ══════════════════════════════════════ */
#love-letter {
    padding:7rem 2rem; position:relative; z-index:1;
    display:flex; justify-content:center;
}
.letter-scene { max-width:600px; width:100%; perspective:800px; }
.envelope {
    cursor:pointer; padding:2rem;
    background: linear-gradient(135deg, var(--rose-deep), var(--rose));
    border-radius:20px; text-align:center;
    box-shadow: 0 20px 60px rgba(232,68,109,.3);
    transition: all .5s var(--ease);
    animation: envelopePulse 3s ease-in-out infinite;
}
@keyframes envelopePulse {
    0%,100% { box-shadow: 0 20px 60px rgba(232,68,109,.3); }
    50% { box-shadow: 0 20px 80px rgba(232,68,109,.5); }
}
.envelope:hover { transform: translateY(-6px) scale(1.03); }
.envelope.opened {
    transform: rotateX(90deg) scale(.8); opacity:0;
    pointer-events:none; position:absolute;
    animation:none;
}
.envelope-heart { font-size:2.5rem; display:block; margin-bottom:.5rem; }
.envelope-text {
    font-family: var(--font-serif); font-size:1.1rem;
    color: rgba(255,255,255,.9); letter-spacing:1px;
}

.letter-paper {
    background: linear-gradient(170deg, #fefae0, #fff8ee);
    border-radius:16px; padding:3rem 2.5rem;
    color: #2c1810; position:relative;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
    max-height:0; overflow:hidden; opacity:0;
    transition: max-height 1.2s var(--ease), opacity .8s var(--ease), padding .8s var(--ease);
    padding:0 2.5rem;
}
.letter-paper.show {
    max-height:800px; opacity:1; padding:3rem 2.5rem;
    margin-top:1rem;
}
.letter-paper::before {
    content:''; position:absolute; top:0; left:2rem; right:2rem; height:1px;
    background: repeating-linear-gradient(90deg,
        transparent, transparent 8px, rgba(200,180,150,.3) 8px, rgba(200,180,150,.3) 10px);
}
.letter-greeting {
    font-family: var(--font-script); font-size:2rem;
    color: var(--rose-deep); margin-bottom:1.5rem;
}
.letter-body {
    font-family: var(--font-serif); font-size:1.05rem;
    line-height:2.2; color:#3a2218;
    background-image: repeating-linear-gradient(transparent, transparent 2rem, rgba(200,180,150,.2) 2rem, rgba(200,180,150,.2) calc(2rem + 1px));
}
.letter-body p { margin-bottom:1rem; }
.letter-sign {
    margin-top:2rem; text-align:right;
    font-family: var(--font-serif); color:#5a3a2a;
}
.letter-name {
    font-family: var(--font-script); font-size:2rem;
    color: var(--rose-deep); margin-top:.3rem;
}

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
#footer { padding:3rem 2rem; text-align:center; position:relative; z-index:1; }
.footer-line {
    width:100px; height:1px; margin:0 auto 1.5rem;
    background: linear-gradient(90deg, transparent, var(--glass-b), transparent);
}
.footer-text {
    font-family: var(--font-serif); font-style:italic;
    font-size:.9rem; color: var(--text-dim); letter-spacing:2px;
}
.footer-hearts {
    margin-top:1rem; font-size:1.2rem;
    animation: heartBeat 2s ease-in-out infinite;
}
.footer-hearts span { margin:0 .3rem; }

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media(max-width:768px){
    .counter-box { padding:1.5rem 1rem; }
    .cnt { min-width:42px; }
    .cnt-num { font-size:1.5rem !important; }
    .memory-cards { grid-template-columns:1fr; max-width:400px; }
    .strip-frame { width:200px; height:250px; }
    .modal-body { padding:1.5rem; }
    .modal-grid { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }
    .letter-paper { padding:0 1.5rem; }
    .letter-paper.show { padding:2rem 1.5rem; }
}
@media(max-width:480px){
    .cnt { min-width:36px; }
    .cnt-num { font-size:1.2rem !important; }
    .cnt-lbl { font-size:.55rem; }
    .strip-frame { width:160px; height:200px; }
}