* {
    box-sizing: border-box;
}

:root {
    --color-green: #0E3E09;
    --color-red: #902124;
    --color-chartreuse: #BA9F38;
    --color-pale-lime: #E1CC96;
    --color-cabernet: #64242E;
    --color-cinnamon-satin: #D46A79;
    --color-apricot: #F6CBB6;
    --color-red-chai: #632626;
    --color-masala: #9D5353;
    --color-wine: #4D0011;
    --color-blush: #C2858C;

    --background-color: 
    --primary-color: #2c3e50;
    --secondary-color: #e8d5c4;
    --accent-color: #d4a574;
    --text-color: #333;
    --light-bg: #faf8f5;
    --red-bg: #902124;
}

/* Hero Background */
.animated-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flower-top-left {
    position: absolute;
    opacity: 0;
    z-index: 1;
    animation: fadeInSway 2s ease-out forwards;
    height: 300px;
    top: -100px;
    left: -120px;
    --rotation: 130deg;
}

@media (min-width: 640px) {
    .flower-top-left {
        height: 450px;
        top: -150px;
        left: -150px;
    }
}

@media (min-width: 1024px) {
    .flower-top-left {
        height: 600px;
        top: -200px;
        left: -180px;
    }
}

.flower-top-right {
    position: absolute;
    opacity: 0;
    z-index: 1;
    animation: fadeInSway 2.3s ease-out forwards;
    height: 280px;
    top: -110px;
    right: -110px;
    --rotation: 225deg;
}

@media (min-width: 640px) {
    .flower-top-right {
        height: 420px;
        top: -165px;
        right: -140px;
    }
}

@media (min-width: 1024px) {
    .flower-top-right {
        height: 550px;
        top: -220px;
        right: -165px;
    }
}

.flower-bottom-left {
    position: absolute;
    opacity: 0;
    z-index: 1;
    animation: fadeInSway 2.1s ease-out forwards;
    height: 290px;
    bottom: -105px;
    left: -130px;
    --rotation: 45deg;
}

@media (min-width: 640px) {
    .flower-bottom-left {
        height: 435px;
        bottom: -155px;
        left: -165px;
    }
}

@media (min-width: 1024px) {
    .flower-bottom-left {
        height: 580px;
        bottom: -210px;
        left: -195px;
    }
}

.flower-bottom-right {
    position: absolute;
    opacity: 0;
    z-index: 1;
    animation: fadeInSway 1.9s ease-out forwards;
    height: 310px;
    bottom: -115px;
    right: -115px;
    --rotation: 315deg;
}

@media (min-width: 640px) {
    .flower-bottom-right {
        height: 465px;
        bottom: -170px;
        right: -145px;
    }
}

@media (min-width: 1024px) {
    .flower-bottom-right {
        height: 620px;
        bottom: -225px;
        right: -175px;
    }
}

@keyframes fadeInSway {
    0% {
        opacity: 0;
        transform: rotate(var(--rotation, 0deg)) translateX(var(--slide-in, 0)) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: rotate(var(--rotation, 0deg)) translateX(0) scale(1);
    }
}

.page-section {
    padding-top: 102px;
    min-height: 100vh;
}

/* Hero text entrance animation */
.hero-text-intro {
    opacity: 0;
    transform: translateY(30px);
    animation: heroTextIn 1.5s ease-out 1.2s forwards;
}

.hero-text-intro-delay {
    animation-delay: 1.8s;
}

@keyframes heroTextIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero scroll letter animation */
.hero-keep,
.hero-fade {
    display: inline-block;
    transition: none; /* JS controls everything */
}

.hero-fade {
    overflow: hidden;
    vertical-align: bottom;
}

/* Skip hero animations — flowers and text jump to final state */
.no-animate .flower-top-left,
.no-animate .flower-top-right,
.no-animate .flower-bottom-left,
.no-animate .flower-bottom-right {
    animation: none;
    opacity: 1;
}

.no-animate .hero-text-intro {
    animation: none;
    opacity: 1;
    transform: translateY(0);
}

.no-animate .hero-fade {
    /* On non-intro loads, show full text immediately */
    opacity: 1;
}

/* Hide default details marker across browsers */
details summary::-webkit-details-marker {
    display: none;
}
/* Flip Clock Animation */
.flip-digit-wrapper {
  position: relative;
  width: 36px;
  height: 54px;
  perspective: 400px;
}

@media (min-width: 768px) {
  .flip-digit-wrapper {
    width: 48px;
    height: 72px;
  }
}

.flip-digit {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.flip-digit-top,
.flip-digit-bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

.flip-digit-top {
  top: 0;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid #000;
  align-items: flex-end;
  transform-origin: bottom;
}

.flip-digit-bottom {
  bottom: 0;
  border-radius: 0 0 4px 4px;
  align-items: flex-start;
  background: linear-gradient(to bottom, #1a1a1a 0%, #0a0a0a 100%);
}

.flip-digit-top .digit-value,
.flip-digit-bottom .digit-value {
  font-size: 2rem;
  font-weight: 700;
  color: #f5f5f5;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

@media (min-width: 768px) {
  .flip-digit-top .digit-value,
  .flip-digit-bottom .digit-value {
    font-size: 2.75rem;
  }
}

.flip-digit-top .digit-value {
  transform: translateY(50%);
}

.flip-digit-bottom .digit-value {
  transform: translateY(-50%);
}

/* Flipping animation */
.flip-digit.flipping .flip-digit-top {
  animation: flipDown 0.5s ease-in forwards;
  z-index: 2;
}

@keyframes flipDown {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

/* Middle line shadow */
.flip-digit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
  z-index: 10;
  transform: translateY(-50%);
}