/* happyBirthdayKatya — standalone styles, no frameworks.
   Vanilla replacements for the utility classes the design uses,
   plus the custom show CSS (garden, cake, bubbles, gallery, intro). */

/* ── minimal reset (replaces Tailwind preflight) ── */
*, ::before, ::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #050505;
  color: #fff;
  overflow-x: hidden;
  position: relative;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(236, 72, 153, .3); color: #fce7f3; }

/* ── layout utilities ── */
.fixed { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .bottom-6 { bottom: 1.5rem; } .bottom-10 { bottom: 2.5rem; }
.z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-50 { z-index: 50; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; }
.hidden { display: none; } .block { display: block; }
.flex-col { flex-direction: column; } .flex-row { flex-direction: row; }
.items-center { align-items: center; } .justify-center { justify-content: center; }
.gap-2 { gap: .5rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-16 { gap: 4rem; }
.w-full { width: 100%; } .h-screen { height: 100vh; } .min-h-screen { min-height: 100vh; }
.h-\[85vh\] { height: 85vh; }
.w-12 { width: 3rem; } .h-12 { height: 3rem; }
.w-\[280px\] { width: 280px; } .h-\[400px\] { height: 400px; }
.max-w-6xl { max-width: 72rem; } .mx-auto { margin-left: auto; margin-right: auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.p-4 { padding: 1rem; } .p-8 { padding: 2rem; }
.mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; }
.mx-1 { margin-left: .25rem; margin-right: .25rem; } .mr-2 { margin-right: .5rem; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.text-center { text-align: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* ── typography ── */
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-light { font-weight: 300; } .font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.tracking-tight { letter-spacing: -.025em; } .tracking-tighter { letter-spacing: -.05em; }
.tracking-wide { letter-spacing: .025em; } .tracking-widest { letter-spacing: .1em; }
.leading-relaxed { line-height: 1.625; }
.uppercase { text-transform: uppercase; }
.text-white { color: #fff; }
.text-neutral-950 { color: #0a0a0a; }
.text-pink-100\/70 { color: rgba(252, 231, 243, .7); }
.text-pink-100\/40 { color: rgba(252, 231, 243, .4); }
.text-pink-200\/50 { color: rgba(251, 207, 232, .5); }
.text-pink-300 { color: #f9a8d4; }
.text-pink-300\/50 { color: rgba(249, 168, 212, .5); }
.text-pink-400 { color: #f472b6; }
.text-pink-600 { color: #db2777; }
.text-white\/30 { color: rgba(255, 255, 255, .3); }
.text-transparent { color: transparent; }
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.font-arabic { font-family: 'Tajawal', sans-serif; }
.align-middle { vertical-align: middle; } .inline { display: inline; }

/* ── backgrounds / borders ── */
.bg-black { background: #000; } .bg-white { background: #fff; }
.from-pink-200 { --g-from: #fbcfe8; } .to-red-200 { --g-to: #fecaca; }
.from-white { --g-from: #fff; } .to-pink-200\/60 { --g-to: rgba(251, 207, 232, .6); }
.from-transparent { --g-from: transparent; } .to-pink-900\/20 { --g-to: rgba(131, 24, 67, .2); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--g-from), var(--g-to)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--g-from), var(--g-to)); }
.border-t { border-top: 1px solid rgba(131, 24, 67, .2); }
.rounded-full { border-radius: 9999px; } .rounded-xl { border-radius: .75rem; } .rounded-2xl { border-radius: 1rem; }

/* ── effects ── */
.opacity-0 { opacity: 0; } .opacity-70 { opacity: .7; } .opacity-80 { opacity: .8; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; }
.duration-300 { transition-duration: .3s; } .duration-500 { transition-duration: .5s; } .duration-1000 { transition-duration: 1s; }
.hover\:scale-105:hover { transform: scale(1.05); }
.active\:scale-95:active { transform: scale(.95); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.hover\:bg-pink-500:hover { background-color: #ec4899; }
.hover\:border-pink-500:hover { border-color: #ec4899; }
.hover\:bg-pink-900\/20:hover { background-color: rgba(131, 24, 67, .2); }
.group-hover\:opacity-100 { transition-opacity: opacity .5s; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .07)) drop-shadow(0 2px 2px rgba(0, 0, 0, .06)); }
.animate-bounce { animation: bounce 1s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } }
.translate-y-4 { transform: translateY(1rem); }

/* ── responsive (md: 768px) ── */
@media (min-width: 768px) {
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:block { display: block; }
  .md\:hidden { display: none; }
  .md\:w-\[350px\] { width: 350px; }
  .md\:h-\[520px\] { height: 520px; }
  .md\:p-3 { padding: .75rem; }
  .md\:bottom-auto { bottom: auto; }
  .md\:top-8 { top: 2rem; }
}
@media (max-width: 767px) {
  .block.md\:hidden { display: block; }
}
@media (max-width: 639px) {
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
}

/* ═════════ CORE SHOW STYLES (from original) ═════════ */
.ambient-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 15% 50%, rgba(220, 38, 38, 0.08), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.08), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(190, 24, 93, 0.05), transparent 50%);
}
.intro-exit { opacity: 0; pointer-events: none; transition: opacity 1s ease-in-out; }
.content-enter { opacity: 0; transition: opacity 1.5s ease-in-out 0.5s; }
.content-visible { opacity: 1; }
/* Flip Gallery sizing: ~2x the original card, capped by viewport width.
   aspect-ratio keeps the 7:10 portrait proportion at any size. */
#flip-gallery { width: min(88vw, 560px); aspect-ratio: 7 / 10; overflow: hidden; border-radius: 12px; }
@media (min-width: 768px) {
  #flip-gallery { width: 640px; }
}
/* Double-buffered transition layers: the incoming photo is staged on the
   back layer while the front layer animates out, then they swap roles.
   One continuous photo per layer — no hinge, no seam, no dividing line. */
.photo-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  border-radius: 12px;
  will-change: transform, opacity, filter;
}
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.glass-card-pink {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(236, 72, 153, 0.05) 100%);
  border: 1px solid rgba(236, 72, 153, 0.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ═════════ FLOWER GARDEN ═════════ */
:root { --dark-color: #1a050b; }
#garden-wrapper {
  position: relative; width: 100%; height: 80vh; overflow: hidden;
  background-color: var(--dark-color);
  display: flex; align-items: flex-end; justify-content: center;
}
.night {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 100%; height: 100%; filter: blur(0.1vmin);
  background-image:
    radial-gradient(ellipse at top, transparent 0%, var(--dark-color)),
    radial-gradient(ellipse at bottom, #3f0918, rgba(236, 72, 153, 0.15)),
    repeating-linear-gradient(220deg, rgba(0,0,0,0.3) 0px, rgba(0,0,0,0.3) 19px, transparent 19px, transparent 22px),
    linear-gradient(90deg, #9d174d, #be185d);
  opacity: 0.8;
}
.flowers { position: relative; transform: scale(0.9); }
.flower { position: absolute; bottom: 10vmin; transform-origin: bottom center; z-index: 10; --fl-speed: 0.8s; }
.flower--1 { animation: moving-flower-1 4s linear infinite; }
.flower--1 .flower__line { height: 70vmin; animation-delay: 0.3s; }
.flower--1 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 1.6s backwards; }
.flower--1 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 1.4s backwards; }
.flower--1 .flower__line__leaf--3 { animation: blooming-leaf-left var(--fl-speed) 1.2s backwards; }
.flower--3 { left: 50%; transform: rotate(-15deg); animation: moving-flower-3 4s linear infinite; }
.flower--3 .flower__line { animation-delay: 0.9s; }
.flower__leafs { position: relative; animation: blooming-flower 2s backwards; }
.flower__leafs::after {
  content: ""; position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  width: 8vmin; height: 8vmin; background-color: #ec4899; filter: blur(10vmin);
}
.flower__leaf {
  position: absolute; bottom: 0; left: 50%; width: 8vmin; height: 11vmin;
  border-radius: 51% 49% 47% 53%/44% 45% 55% 69%;
  background-color: #fbcfe8; background-image: linear-gradient(to top, #f472b6, #ec4899);
  transform-origin: bottom center; opacity: 0.9; box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.5);
}
.flower__leaf--1 { transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg); }
.flower__leaf--2 { transform: translate(-50%, -4%) rotateX(40deg); }
.flower__leaf--3 { transform: translate(-90%, 0%) rotateY(45deg) rotateX(50deg); }
.flower__leaf--4 {
  width: 8vmin; height: 8vmin; transform-origin: bottom left; border-radius: 4vmin 10vmin 4vmin 4vmin;
  transform: translate(0%, 18%) rotateX(70deg) rotate(-43deg);
  background-image: linear-gradient(to top, #be185d, #ec4899); z-index: 1; opacity: 0.8;
}
.flower__white-circle {
  position: absolute; left: -3.5vmin; top: -3vmin; width: 9vmin; height: 4vmin;
  border-radius: 50%; background-color: #fff;
}
.flower__white-circle::after {
  content: ""; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  width: 60%; height: 60%; border-radius: inherit;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 12px),
    linear-gradient(90deg, #fce7f3, #fbcfe8);
}
.flower__line {
  height: 55vmin; width: 1.5vmin;
  background-image: linear-gradient(to left, rgba(0,0,0,0.2), transparent, rgba(255,255,255,0.2)),
    linear-gradient(to top, transparent 10%, #9d174d, #831843);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.5); animation: grow-flower-tree 4s backwards;
}
.flower__line__leaf {
  --w: 7vmin; --h: calc(var(--w) + 2vmin); position: absolute; top: 20%; left: 90%;
  width: var(--w); height: var(--h); border-top-right-radius: var(--h); border-bottom-left-radius: var(--h);
  background-image: linear-gradient(to top, rgba(131, 24, 67, 0.4), #9d174d);
}
.flower__line__leaf--1 { transform: rotate(70deg) rotateY(30deg); }
.flower__line__leaf--2 { top: 45%; transform: rotate(70deg) rotateY(30deg); }
.flower__line__leaf--3, .flower__line__leaf--4, .flower__line__leaf--6 {
  border-top-right-radius: 0; border-bottom-left-radius: 0; border-top-left-radius: var(--h); border-bottom-right-radius: var(--h);
  left: -460%; top: 12%; transform: rotate(-70deg) rotateY(30deg);
}
.flower__light {
  position: absolute; bottom: 0vmin; width: 1vmin; height: 1vmin; background-color: #fbcfe8;
  border-radius: 50%; filter: blur(0.2vmin); animation: light-ans 4s linear infinite backwards;
}
.flower__light:nth-child(odd) { background-color: #be185d; }
.flower__grass {
  --c: #831843; --line-w: 1.5vmin; position: absolute; bottom: 12vmin; left: -7vmin;
  display: flex; flex-direction: column; align-items: flex-end; z-index: 20;
  transform-origin: bottom center; transform: rotate(-48deg) rotateY(40deg);
}
.flower__grass--1 { animation: moving-grass 2s linear infinite; }
.flower__grass--top {
  width: 7vmin; height: 10vmin; border-top-right-radius: 100%; border-right: var(--line-w) solid var(--c);
  transform-origin: bottom center; transform: rotate(-2deg);
}
.flower__grass--bottom { margin-top: -2px; width: var(--line-w); height: 25vmin; background-image: linear-gradient(to top, transparent, var(--c)); }
.flower__grass__leaf {
  --size: 10vmin; position: absolute; width: calc(var(--size) * 2.1); height: var(--size);
  border-top-left-radius: var(--size); border-top-right-radius: var(--size);
  background-image: linear-gradient(to top, transparent, transparent 30%, var(--c)); z-index: 100;
}
.flower__g-long {
  --w: 2vmin; --h: 6vmin; --c: #831843; position: absolute; bottom: 10vmin; left: -3vmin;
  transform-origin: bottom center; transform: rotate(-30deg) rotateY(-20deg);
  display: flex; flex-direction: column; align-items: flex-end; animation: flower-g-long-ans 3s linear infinite;
}
.flower__g-long__top {
  top: calc(var(--h) * -1); width: calc(var(--w) + 1vmin); height: var(--h);
  border-top-right-radius: 100%; border-right: 0.7vmin solid var(--c); transform: translate(-0.7vmin, 1vmin);
}
.flower__g-long__bottom {
  width: var(--w); height: 50vmin; transform-origin: bottom center;
  background-image: linear-gradient(to top, transparent 30%, var(--c));
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); clip-path: polygon(35% 0, 65% 1%, 100% 100%, 0% 100%);
}
.flower__g-right .leaf {
  width: 30vmin; height: 50vmin; border-top-left-radius: 100%; border-left: 2vmin solid #9d174d;
  background-image: linear-gradient(to bottom, transparent, var(--dark-color) 60%);
  mask-image: linear-gradient(to top, transparent 30%, #9d174d 60%);
}
.flower__g-fr .leaf {
  width: 30vmin; height: 50vmin; border-top-left-radius: 100%; border-left: 2vmin solid #9d174d;
  mask-image: linear-gradient(to top, transparent 25%, #9d174d 50%); position: relative; z-index: 1;
}
/* BUBBLES */
.bubbles { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; }
.bubble { position: absolute; z-index: 200; border-radius: 50%; }
.heart { fill: transparent; opacity: 0; }
.bubble:nth-child(1) { top: 8%; left: 60%; height: 11vmin; width: 11vmin; animation: love-burst 3s infinite 0s; transform-origin: center bottom; }
.bubble:nth-child(1) .heart { animation: love 3s forwards infinite 0s; transform: scale(0.5) rotate(-4deg); }
.bubble:nth-child(2) { top: 83%; left: 14%; height: 20vmin; width: 20vmin; animation: love-burst 3s infinite 0.15s; transform-origin: center bottom; }
.bubble:nth-child(2) .heart { animation: love 3s forwards infinite 0.15s; transform: scale(0.5) rotate(22deg); }
.bubble:nth-child(3) { top: 25%; left: 49%; height: 4vmin; width: 4vmin; animation: love-burst 3s infinite 0.3s; transform-origin: center bottom; }
.bubble:nth-child(3) .heart { animation: love 3s forwards infinite 0.3s; transform: scale(0.5) rotate(-5deg); }

/* ═════════ KEYFRAMES ═════════ */
@keyframes moving-flower-1 { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }
@keyframes moving-flower-3 { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-20deg) rotateY(-10deg); } }
@keyframes blooming-leaf-right { 0% { transform-origin: left; transform: rotate(70deg) rotateY(30deg) scale(0); } }
@keyframes blooming-leaf-left { 0% { transform-origin: right; transform: rotate(-70deg) rotateY(30deg) scale(0); } }
@keyframes grow-flower-tree { 0% { height: 0; border-radius: 1vmin; } }
@keyframes blooming-flower { 0% { transform: scale(0); } }
@keyframes moving-grass { 0%, 100% { transform: rotate(-48deg) rotateY(40deg); } 50% { transform: rotate(-50deg) rotateY(40deg); } }
@keyframes flower-g-long-ans { 0%, 100% { transform: rotate(-30deg) rotateY(-20deg); } 50% { transform: rotate(-32deg) rotateY(-20deg); } }
@keyframes light-ans {
  0% { opacity: 0; transform: translateY(0vmin); }
  25% { opacity: 1; transform: translateY(-5vmin) translateX(-2vmin); }
  50% { opacity: 1; transform: translateY(-15vmin) translateX(2vmin); filter: blur(0.2vmin); }
  100% { transform: translateY(-30vmin); opacity: 0; filter: blur(1vmin); }
}
@keyframes love-burst { 50%, 100% { box-shadow: inset 0 0 0 0 #ec4899; transform: translate(0, 0) scale(1); } }
@keyframes love { 50% { fill: #ec4899; opacity: 1; } }

/* ═════════ BIRTHDAY CAKE ═════════ */
.birthday-cake-container {
  position: absolute; bottom: 12vmin; left: 50%; transform: translateX(-50%);
  width: 20vmin; height: 18vmin; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  animation: bounce-cake 4s infinite ease-in-out;
}
@keyframes bounce-cake { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-1vmin); } }
.cake-layer {
  width: 100%; height: 6vmin; background: linear-gradient(to right, #f472b6, #ec4899);
  border-radius: 1vmin; position: relative; box-shadow: 0 1vmin 2vmin rgba(0,0,0,0.2);
  z-index: 2; margin-top: -1vmin;
}
.cake-layer.top { width: 15vmin; background: linear-gradient(to right, #fbcfe8, #f9a8d4); z-index: 3; }
.cake-layer.bottom { width: 22vmin; height: 7vmin; background: linear-gradient(to right, #db2777, #be185d); z-index: 1; }
.frosting {
  position: absolute; top: -1.5vmin; left: -1vmin; width: calc(100% + 2vmin); height: 3vmin;
  background: #fff; border-radius: 2vmin; z-index: 4;
  box-shadow: 0 0.5vmin 0.5vmin rgba(0,0,0,0.05);
}
.frosting::after {
  content: ''; position: absolute; bottom: -1vmin; left: 10%; width: 2vmin; height: 3vmin;
  background: #fff; border-radius: 0 0 1vmin 1vmin; box-shadow: 2vmin 0 0 #fff, 4vmin 0.5vmin 0 #fff, 6vmin -0.5vmin 0 #fff;
}
.cake-candle {
  width: 2vmin; height: 6vmin; background: repeating-linear-gradient(45deg, #f472b6, #f472b6 0.5vmin, #fff 0.5vmin, #fff 1vmin);
  position: absolute; top: -6vmin; left: 50%; transform: translateX(-50%); z-index: 0;
  border-radius: 0.2vmin;
}
.flame {
  position: absolute; top: -3vmin; left: 50%; transform: translateX(-50%);
  width: 2vmin; height: 3vmin; background: #fbbf24; border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 1vmin #f59e0b, 0 0 2vmin #ef4444;
  animation: flicker 1s infinite alternate;
}
@keyframes flicker { 0% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) scale(0.9); opacity: 0.8; } }