/* ==========================================================================
   Janković — rođendanske: a fondant cake with candles you can blow out,
   then the cakes themselves, one story each
   ========================================================================== */

.bday-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: end; gap: var(--space-m); padding-bottom: var(--space-xl); overflow: hidden; }
.bday-hero__copy { padding-bottom: 2rem; }

/* ---------- The cake ---------- */
.bcake { --cake: #F4B9C6; --cake-hi: #FBD9E0; --cake-lo: #DC93A6; position: relative; width: min(100%, 540px); justify-self: center; display: grid; justify-items: center; }
.bcake__candles { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 2.6vw, 30px); height: 230px; margin-bottom: -46px; }
.bcake__top {
  position: relative; z-index: 2; width: 92%; aspect-ratio: 5 / 1; border-radius: 50%;
  background:
    radial-gradient(circle at 18% 40%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 72% 62%, #C81F43 0 2px, transparent 3px),
    radial-gradient(circle at 40% 70%, #BCD7EE 0 2px, transparent 3px),
    radial-gradient(circle at 84% 34%, #F0D49A 0 2px, transparent 3px),
    radial-gradient(circle at 58% 28%, #B5D84A 0 2px, transparent 3px),
    radial-gradient(circle at 28% 66%, #F0D49A 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 40%, var(--cake-hi), var(--cake) 72%);
  box-shadow: inset 0 -6px 12px rgba(160, 60, 80, 0.18);
}
.bcake__body {
  position: relative; z-index: 1; width: 92%; height: 150px; margin-top: calc(-92% / 10);
  border-radius: 0 0 50% 50% / 0 0 36px 36px;
  background: linear-gradient(90deg, var(--cake-lo), var(--cake) 18%, var(--cake-hi) 44%, var(--cake) 70%, var(--cake-lo));
}
.bcake__pearls {
  position: absolute; left: 3%; right: 3%; bottom: 18px; height: 12px;
  background: radial-gradient(circle at 6px 6px, #fff 0 4.5px, transparent 5px) 0 0 / 14px 12px repeat-x;
  filter: drop-shadow(0 2px 1px rgba(160, 60, 80, 0.25));
}
.bcake__plate { width: 108%; height: 26px; margin-top: -16px; border-radius: 50%; background: linear-gradient(90deg, #D9CFC8, #fff 45%, #F2ECE7 60%, #CFC5BE); box-shadow: 0 18px 30px -12px rgba(120, 50, 60, 0.35); }
.bcake__ctrl { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.75rem; }
.bcake__msg { margin-top: 0.8rem; min-height: 1.6em; font-size: var(--fs-small); color: var(--muted); text-align: center; }
.bcake__msg.is-wish { font-family: var(--f-display); font-style: italic; font-size: 1.2rem; color: var(--malina); }

/* ---------- Candles ---------- */
.candle { --h: 110px; --c: #F5BFCA; position: relative; width: 16px; height: var(--h); touch-action: none; }
.candle__stick {
  position: absolute; inset: 0; border-radius: 5px 5px 2px 2px;
  background:
    repeating-linear-gradient(-58deg, var(--c) 0 9px, #fff 9px 16px),
    #fff;
  box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.12), inset 3px 0 3px rgba(255, 255, 255, 0.55);
}
.candle__wick { position: absolute; left: 50%; bottom: calc(100% - 1px); width: 2px; height: 9px; margin-left: -1px; border-radius: 1px; background: #3B2A22; }
.candle__flame {
  --lean: 0deg; position: absolute; left: 50%; bottom: calc(100% + 5px); width: 16px; height: 34px; margin-left: -8px;
  transform-origin: 50% 100%; transform: rotate(var(--lean)); transition: transform 160ms ease-out;
}
.candle__flame i {
  position: absolute; inset: 0; border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse 50% 60% at 50% 74%, #fff 0 22%, #FFF0B8 34%, #FFC04D 56%, rgba(255, 110, 40, 0.85) 70%, rgba(255, 110, 40, 0) 74%);
  transform-origin: 50% 100%;
  animation: flicker 1.7s ease-in-out infinite alternate; animation-delay: var(--fd, 0s);
  transition: transform 220ms var(--ease-out), opacity 220ms;
}
.candle__flame::after {
  content: ''; position: absolute; left: 50%; top: 60%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 90, 0.42), rgba(255, 196, 90, 0) 62%);
  pointer-events: none; transition: opacity 300ms;
}
@keyframes flicker {
  0% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(0.94, 1.06) skewX(2deg); }
  50% { transform: scale(1.04, 0.95) skewX(-1.5deg); }
  75% { transform: scale(0.97, 1.08) skewX(1deg); }
  100% { transform: scale(1.02, 0.98) skewX(-2deg); }
}
.candle.is-out .candle__flame i { transform: scale(0.1, 0.2); opacity: 0; animation: none; }
.candle.is-out .candle__flame::after { opacity: 0; }
.candle__smoke { position: absolute; left: 50%; bottom: calc(100% + 8px); width: 0; height: 0; pointer-events: none; }
.candle__smoke i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(110, 96, 96, 0.5); filter: blur(3px); opacity: 0;
}
.candle.is-out .candle__smoke i { animation: smoke 1.9s ease-out forwards; }
.candle.is-out .candle__smoke i:nth-child(2) { animation-delay: 0.18s; --sx: -14px; }
.candle.is-out .candle__smoke i:nth-child(3) { animation-delay: 0.36s; --sx: 10px; }
@keyframes smoke {
  0% { opacity: 0.75; transform: translate(0, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(var(--sx, 6px), -90px) scale(3.2); }
}
.candle.is-lighting .candle__flame i { animation: light 520ms var(--ease-out) both; }
@keyframes light { 0% { transform: scale(0.2, 0.1); opacity: 0; } 60% { transform: scale(1.1, 1.25); opacity: 1; } 100% { transform: none; opacity: 1; } }

@media (max-width: 900px) {
  .bday-hero { grid-template-columns: 1fr; }
  .bday-hero__copy { padding-bottom: 0; }
  .bcake { width: min(100%, 420px); }
  .bcake__candles { height: 190px; }
  .bcake__body { height: 110px; }
}

/* ---------- The cakes ---------- */
.cakes { padding: var(--space-xl) 0 var(--space-2xl); }
.cake { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(1.5rem, 5vw, 6rem); }
.cake + .cake { margin-top: var(--space-xl); }
.cake--1 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.cake--1 .cake__media { order: 2; }
.cake--2 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.cake--2 .cake__media { width: min(88%, 460px); justify-self: end; }
.cake__media { width: min(100%, 540px); justify-self: center; aspect-ratio: 4 / 5; border-radius: var(--r-dome); overflow: hidden; background: var(--slag-2); box-shadow: 0 50px 90px -50px rgba(42, 20, 13, 0.5); }
.cake__media img { width: 100%; height: 100%; object-fit: cover; }
.cake__body { display: grid; justify-items: start; gap: 1.1rem; max-width: 34rem; }
.cake__for { font-family: var(--f-display); font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-size: 1.15rem; color: var(--malina); }
.cake__title { font-family: var(--f-display); font-variation-settings: 'SOFT' 100; font-weight: 340; font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.8rem); line-height: 0.98; letter-spacing: -0.02em; }
.cake__text { color: var(--muted); max-width: 46ch; }
.cake__details { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cake__details li { padding: 0.35rem 0.85rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.82rem; }
.cake__quote { margin: 0.4rem 0; padding-left: 1.1rem; border-left: 2px solid var(--malina); }
.cake__quote p { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.3; }
.cake__quote footer { margin-top: 0.3rem; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 860px) {
  .cake, .cake--1, .cake--2 { grid-template-columns: 1fr; }
  .cake--1 .cake__media { order: 0; }
  .cake--2 .cake__media { width: 100%; }
}