/* =========================================================
   MYSORE PAK — CSS ART
   Comfort Food Edition
   Pure CSS artwork with optional light animation
   ========================================================= */

:root {
  --bg: #fff4d6;
  --bg-deep: #f8dfaa;

  --sweet-light: #ffe9a3;
  --sweet: #e8a92e;
  --sweet-mid: #c77a16;
  --sweet-dark: #8b4612;

  --ghee: rgba(255, 232, 148, .72);
  --shadow: rgba(82, 42, 8, .28);

  --plate: #f7ead0;
  --plate-shadow: #c9aa78;

  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  overflow: hidden;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 50% 20%,
      #fff9e9 0%,
      var(--bg) 45%,
      var(--bg-deep) 100%
    );
}


/* =========================================================
   ARTBOARD
   ========================================================= */

.mysore-pak-art {
  position: relative;

  width: min(92vw, 900px);
  height: min(82vh, 650px);

  overflow: hidden;

  display: grid;
  place-items: center;

  border-radius: 32px;

  background:
    radial-gradient(
      ellipse at 50% 85%,
      rgba(222, 158, 45, .18),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      #fff9e9,
      #ffeac0
    );

  box-shadow:
    0 30px 70px rgba(88, 48, 10, .18),
    inset 0 1px 0 rgba(255,255,255,.9);
}


/* =========================================================
   DECORATIVE SPARKLES
   ========================================================= */

.sparkle {
  position: absolute;

  width: 12px;
  height: 12px;

  background: #f0ad28;

  transform: rotate(45deg);

  box-shadow:
    0 0 14px rgba(240,173,40,.55);

  animation: sparkle 2.8s ease-in-out infinite;
}

.sparkle::before,
.sparkle::after {
  content: "";
  position: absolute;

  background: inherit;
}

.sparkle::before {
  width: 4px;
  height: 26px;

  left: 4px;
  top: -7px;
}

.sparkle::after {
  width: 26px;
  height: 4px;

  left: -7px;
  top: 4px;
}

.sparkle.s1 {
  top: 18%;
  left: 17%;
}

.sparkle.s2 {
  top: 25%;
  right: 15%;

  transform: scale(.7) rotate(45deg);

  animation-delay: .8s;
}

.sparkle.s3 {
  bottom: 22%;
  left: 20%;

  transform: scale(.55) rotate(45deg);

  animation-delay: 1.4s;
}

.sparkle.s4 {
  bottom: 27%;
  right: 19%;

  transform: scale(.8) rotate(45deg);

  animation-delay: .4s;
}

@keyframes sparkle {
  0%, 100% {
    opacity: .35;
    transform: scale(.7) rotate(45deg);
  }

  50% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}


/* =========================================================
   TITLE
   ========================================================= */

.mysore-title {
  position: absolute;

  top: 34px;
  left: 50%;

  translate: -50% 0;

  z-index: 20;

  text-align: center;

  color: #6d3510;

  pointer-events: none;
}

.mysore-title .small {
  display: block;

  margin-bottom: 5px;

  font-size: .75rem;
  font-weight: 700;

  letter-spacing: .25em;
  text-transform: uppercase;

  color: #a86b20;
}

.mysore-title h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);

  line-height: .95;

  letter-spacing: -.03em;

  text-shadow:
    0 2px 0 #fff3c9,
    0 5px 12px rgba(103, 48, 8, .15);
}


/* =========================================================
   PLATE
   ========================================================= */

.plate {
  position: absolute;

  left: 50%;
  bottom: 9%;

  translate: -50% 0;

  width: 620px;
  height: 150px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 50% 35%,
      #fffaf0 0%,
      var(--plate) 55%,
      #dfc49a 100%
    );

  border: 5px solid #b8925b;

  box-shadow:
    0 22px 24px rgba(79, 42, 10, .22),
    inset 0 8px 12px rgba(255,255,255,.8),
    inset 0 -10px 15px rgba(120, 73, 20, .15);
}

.plate::before {
  content: "";

  position: absolute;

  left: 8%;
  right: 8%;
  top: 16%;

  height: 70%;

  border-radius: 50%;

  border: 3px solid rgba(193, 146, 76, .45);

  box-shadow:
    inset 0 4px 7px rgba(255,255,255,.6);
}


/* =========================================================
   MYSORE PAK PIECES
   ========================================================= */

.mysore-stack {
  position: relative;

  z-index: 10;

  width: 450px;
  height: 310px;

  margin-top: 70px;
}


/* Main sweet pieces */

.pak {
  position: absolute;

  width: 190px;
  height: 105px;

  overflow: hidden;

  border-radius: 12px 9px 16px 8px;

  border: 4px solid var(--sweet-dark);

  background:
    /* ghee shine */
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,255,255,.38) 25%,
      transparent 40%
    ),

    /* golden body */
    linear-gradient(
      145deg,
      var(--sweet-light) 0%,
      #f1c353 28%,
      var(--sweet) 58%,
      var(--sweet-mid) 100%
    );

  box-shadow:
    7px 9px 0 rgba(112, 54, 10, .25),
    inset 4px 4px 8px rgba(255,255,255,.45),
    inset -7px -10px 14px rgba(120,56,8,.22);
}


/* Gram flour texture */

.pak::before {
  content: "";

  position: absolute;

  inset: 7px;

  opacity: .55;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(122,66,13,.35) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 35% 70%,
      rgba(122,66,13,.3) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 58% 30%,
      rgba(122,66,13,.28) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 82% 68%,
      rgba(122,66,13,.3) 0 1px,
      transparent 2px
    );

  background-size:
    23px 19px,
    29px 25px,
    31px 23px,
    27px 22px;

  pointer-events: none;
}


/* Ghee highlight */

.pak::after {
  content: "";

  position: absolute;

  left: 14px;
  top: 12px;

  width: 75px;
  height: 12px;

  border-radius: 50%;

  background: rgba(255, 247, 199, .55);

  filter: blur(3px);

  transform: rotate(-8deg);
}


/* Back piece */

.pak.p1 {
  left: 72px;
  top: 62px;

  transform:
    rotate(-5deg)
    skewX(-2deg);

  z-index: 2;
}


/* Middle piece */

.pak.p2 {
  left: 166px;
  top: 70px;

  transform:
    rotate(4deg)
    skewX(1deg);

  z-index: 3;
}


/* Front-left piece */

.pak.p3 {
  left: 42px;
  top: 150px;

  transform:
    rotate(5deg)
    skewX(-2deg);

  z-index: 5;
}


/* Front-right piece */

.pak.p4 {
  left: 218px;
  top: 148px;

  transform:
    rotate(-4deg)
    skewX(2deg);

  z-index: 6;
}


/* =========================================================
   CUT / CRUMB DETAILS
   ========================================================= */

.crumb {
  position: absolute;

  z-index: 12;

  width: 7px;
  height: 5px;

  border-radius: 50%;

  background: #a95b16;

  box-shadow:
    1px 1px 2px rgba(85,40,5,.25);
}

.crumb.c1 {
  top: 96px;
  left: 80px;
  transform: rotate(20deg);
}

.crumb.c2 {
  top: 135px;
  left: 195px;
  transform: rotate(-25deg);
}

.crumb.c3 {
  top: 190px;
  left: 40px;
  transform: rotate(15deg);
}

.crumb.c4 {
  top: 214px;
  right: 74px;
  transform: rotate(-15deg);
}

.crumb.c5 {
  top: 105px;
  right: 40px;
  transform: rotate(40deg);
}


/* =========================================================
   GHEE DROPS
   ========================================================= */

.ghee-drop {
  position: absolute;

  z-index: 15;

  width: 10px;
  height: 16px;

  border-radius: 60% 40% 65% 35%;

  background:
    linear-gradient(
      135deg,
      #fff6ba,
      #eeb02e
    );

  box-shadow:
    0 2px 4px rgba(119, 68, 10, .25);

  animation: ghee-shine 3s ease-in-out infinite;
}

.ghee-drop.g1 {
  top: 105px;
  left: 110px;

  transform: rotate(25deg);
}

.ghee-drop.g2 {
  top: 125px;
  left: 255px;

  transform: rotate(-20deg);

  animation-delay: .8s;
}

.ghee-drop.g3 {
  top: 205px;
  left: 155px;

  transform: rotate(35deg);

  animation-delay: 1.4s;
}

@keyframes ghee-shine {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.25);
  }
}


/* =========================================================
   SMALL LABEL
   ========================================================= */

.food-label {
  position: absolute;

  z-index: 30;

  bottom: 22px;
  left: 50%;

  translate: -50% 0;

  padding: 8px 20px;

  border-radius: 100px;

  background: rgba(255,255,255,.7);

  border: 2px solid rgba(125, 74, 18, .3);

  color: #71370f;

  font-size: .8rem;
  font-weight: 700;

  letter-spacing: .08em;
  text-transform: uppercase;

  backdrop-filter: blur(5px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .mysore-pak-art {
    width: 96vw;
    height: 600px;
  }

  .mysore-title {
    top: 28px;
  }

  .plate {
    width: 430px;
    height: 115px;

    bottom: 10%;
  }

  .mysore-stack {
    transform: scale(.78);

    margin-top: 80px;
  }

  .sparkle.s1 {
    left: 8%;
  }

  .sparkle.s2 {
    right: 8%;
  }
}


@media (max-width: 480px) {

  .mysore-pak-art {
    height: 520px;
  }

  .plate {
    width: 340px;
    height: 90px;
  }

  .mysore-stack {
    transform: scale(.62);

    margin-top: 60px;
  }

  .mysore-title h1 {
    font-size: 2rem;
  }

  .mysore-title .small {
    font-size: .6rem;
  }

  .food-label {
    font-size: .65rem;
    padding: 6px 14px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* =========================================================
   EXTRA MYSORE PAK ANIMATIONS
   ========================================================= */

/* Gentle floating movement for the whole sweet */
.mysore-stack {
  animation: sweet-float 4s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes sweet-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(.5deg);
  }
}


/* Individual pieces have slightly different movement */
.pak.p1 {
  animation: pak-back 4s ease-in-out infinite;
}

.pak.p2 {
  animation: pak-middle 4.5s ease-in-out infinite;
  animation-delay: .3s;
}

.pak.p3 {
  animation: pak-front-left 4.2s ease-in-out infinite;
  animation-delay: .6s;
}

.pak.p4 {
  animation: pak-front-right 4.7s ease-in-out infinite;
  animation-delay: .9s;
}


@keyframes pak-back {
  0%, 100% {
    transform: rotate(-5deg) translateY(0);
  }

  50% {
    transform: rotate(-4deg) translateY(-4px);
  }
}


@keyframes pak-middle {
  0%, 100% {
    transform: rotate(4deg) translateY(0);
  }

  50% {
    transform: rotate(5deg) translateY(-6px);
  }
}


@keyframes pak-front-left {
  0%, 100% {
    transform: rotate(5deg) translateY(0);
  }

  50% {
    transform: rotate(4deg) translateY(-4px);
  }
}


@keyframes pak-front-right {
  0%, 100% {
    transform: rotate(-4deg) translateY(0);
  }

  50% {
    transform: rotate(-5deg) translateY(-5px);
  }
}


/* =========================================================
   GHEE SHIMMER
   ========================================================= */

.pak::after {
  animation: ghee-sheen 3.5s ease-in-out infinite;
}

@keyframes ghee-sheen {
  0% {
    opacity: .25;
    transform: translateX(-10px) rotate(-8deg);
  }

  50% {
    opacity: .8;
    transform: translateX(80px) rotate(-8deg);
  }

  100% {
    opacity: .25;
    transform: translateX(150px) rotate(-8deg);
  }
}


/* =========================================================
   GHEE DROPS GLOW
   ========================================================= */

.ghee-drop {
  animation:
    ghee-glow 2.5s ease-in-out infinite,
    ghee-bob 3.5s ease-in-out infinite;
}

.ghee-drop.g2 {
  animation-delay: .7s;
}

.ghee-drop.g3 {
  animation-delay: 1.3s;
}

@keyframes ghee-glow {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.35);
  }
}

@keyframes ghee-bob {
  0%, 100% {
    margin-top: 0;
  }

  50% {
    margin-top: -3px;
  }
}


/* =========================================================
   CRUMBS — TINY RANDOM MOVEMENT
   ========================================================= */

.crumb {
  animation: crumb-bounce 3s ease-in-out infinite;
}

.crumb.c1 {
  animation-delay: .2s;
}

.crumb.c2 {
  animation-delay: .8s;
}

.crumb.c3 {
  animation-delay: 1.1s;
}

.crumb.c4 {
  animation-delay: 1.7s;
}

.crumb.c5 {
  animation-delay: 2.1s;
}

@keyframes crumb-bounce {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -3px;
  }
}


/* =========================================================
   PLATE SHINE
   ========================================================= */

.plate::after {
  content: "";

  position: absolute;

  top: 18%;
  left: -30%;

  width: 35%;
  height: 55%;

  border-radius: 50%;

  background: linear-gradient(
    110deg,
    transparent,
    rgba(255,255,255,.65),
    transparent
  );

  filter: blur(4px);

  animation: plate-shine 6s ease-in-out infinite;
}

@keyframes plate-shine {
  0% {
    left: -30%;
    opacity: 0;
  }

  25% {
    opacity: .8;
  }

  50% {
    left: 100%;
    opacity: 0;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}


/* =========================================================
   SPARKLE BURST
   ========================================================= */

.sparkle {
  animation:
    sparkle 2.8s ease-in-out infinite,
    sparkle-rotate 5s linear infinite;
}

@keyframes sparkle-rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}


/* =========================================================
   TITLE ENTRANCE
   ========================================================= */

.mysore-title {
  animation: title-enter 1.2s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes title-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -25px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}


/* =========================================================
   FOOD LABEL
   ========================================================= */

.food-label {
  animation: label-pulse 3s ease-in-out infinite;
}

@keyframes label-pulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(210,145,35,0);
  }

  50% {
    box-shadow:
      0 5px 20px rgba(210,145,35,.18);
  }
}


/* =========================================================
   INITIAL ART ENTRANCE
   ========================================================= */

.plate {
  animation: plate-enter 1s cubic-bezier(.2,.8,.2,1) both;
}

.mysore-stack {
  animation:
    stack-enter 1.1s cubic-bezier(.2,.8,.2,1) both,
    sweet-float 4s ease-in-out 1.1s infinite;
}

@keyframes plate-enter {
  from {
    opacity: 0;
    transform: translateY(35px) scale(.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes stack-enter {
  from {
    opacity: 0;
    transform: translateY(50px) scale(.85);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}