/* Kannada Habba greeting shown on the home page every November. */
.ky-overlay{
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  overflow: hidden;
  color: #FFF8E1;
  background:
    radial-gradient(ellipse 75% 65% at 50% 46%, #7A1420 0%, #470B14 48%, #1C0509 100%);
  animation: ky-fade-in .5s ease both;
}
.ky-overlay[hidden]{ display: none; }
.ky-overlay.is-closing{ animation: ky-fade-out .45s ease forwards; pointer-events: none; }

.ky-glow{
  position: absolute; left: 50%; top: 46%;
  width: 120vmax; height: 120vmax;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,196,50,.20) 0%, rgba(255,120,40,.07) 28%, transparent 52%);
  animation: ky-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
.ky-flash{
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, #FFF7CF 0%, rgba(255,210,31,.75) 22%, transparent 62%);
  opacity: 0;
  animation: ky-flash 1s ease-out .55s both;
  pointer-events: none;
}

/* ---------- Karnataka outline ---------- */
.ky-map{
  position: absolute; left: 50%; top: 50%;
  height: min(94dvh, 142vw);
  width: auto; max-width: none;
  transform: translate(-50%,-50%);
  overflow: visible;
  filter: drop-shadow(0 0 16px rgba(255,205,70,.5));
  pointer-events: none;
}
.ky-map-fill{ animation: ky-fade-in 1.2s ease .9s both; }
.ky-map-line{
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: ky-draw 1.5s cubic-bezier(.55,.05,.3,1) .1s both;
}

/* ---------- Flags ---------- */
.ky-flag{
  --dir: 1;
  --tilt: -4deg;
  --flag-w: clamp(200px, 25vw, 380px);
  --pole: 12px;
  position: absolute; top: 11dvh; bottom: -3dvh;
  left: clamp(40px, 7vw, 120px);
  width: var(--flag-w);
  transform-origin: 0 100%;
  transform: scaleX(var(--dir)) rotate(var(--tilt));
  animation: ky-flag-rise 1.25s cubic-bezier(.2,1.25,.4,1) .35s both;
  pointer-events: none;
}
.ky-flag-right{
  --dir: -1;
  left: auto;
  right: clamp(40px, 7vw, 120px);
  translate: 100% 0;
}
.ky-flag::before{
  content: "";
  position: absolute; left: -8%; top: -6%;
  width: 118%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,205,70,.26) 0%, rgba(255,150,50,.09) 42%, transparent 68%);
  animation: ky-breathe 4s ease-in-out infinite;
}
.ky-pole, .ky-collar, .ky-ring, .ky-finial, .ky-tassel{ z-index: 1; }
.ky-pole{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--pole);
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(90deg, #4E3106 0%, #A87A22 13%, #FFF6CC 34%, #F2CC63 50%, #B8862E 74%, #4E3106 100%);
  box-shadow: 0 0 14px rgba(0,0,0,.55), 0 0 10px rgba(255,210,90,.22);
}
.ky-collar{
  position: absolute; left: 0;
  width: calc(var(--pole) * 1.8);
  height: calc(var(--pole) * 1.15);
  transform: translateX(-50%);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(70,40,4,.65), transparent 16%, transparent 40%, rgba(70,40,4,.6) 48%, transparent 56%, transparent 84%, rgba(70,40,4,.65)),
    linear-gradient(90deg, #4E3106 0%, #B8862E 15%, #FFF6CC 36%, #F2CC63 52%, #A87A22 78%, #4E3106 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
/* The two rings holding the flag: the cloth takes up 13% to 85% of its canvas height */
.ky-ring{
  position: absolute; left: 0;
  width: calc(var(--pole) * 1.75);
  height: calc(var(--pole) * .6);
  transform: translateX(-50%);
  border-radius: 99px;
  background: linear-gradient(90deg, #5A3A08, #FFF6CC 40%, #D9A52F 62%, #5A3A08);
  box-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.ky-ring-top{ top: calc(var(--flag-w) * .667 * .18); }
.ky-ring-bottom{ top: calc(var(--flag-w) * .667 * .79); }
.ky-finial{
  position: absolute; left: 0; top: 0;
  width: 37px; height: 77px;
  transform: translate(-50%, -96%);
  overflow: visible;
  filter: drop-shadow(0 0 9px rgba(255,220,120,.8));
}
.ky-tassel{
  position: absolute; left: -30px; top: 2px;
  width: 24px; height: clamp(58px, 10dvh, 92px);
  overflow: visible;
  transform-origin: 90% 0;
  animation: ky-tassel-swing 2.6s ease-in-out infinite;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
}
.ky-cloth{
  position: absolute; left: 0; top: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  filter: drop-shadow(0 12px 12px rgba(0,0,0,.42));
}

/* ---------- Fireworks ---------- */
.ky-fireworks{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Greeting ---------- */
.ky-content{
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  width: min(92vw, 780px);
  padding: 0 8px;
  text-align: center;
}
.ky-namaste{
  position: relative;
  display: grid; place-items: center;
  width: clamp(120px, 21dvh, 190px);
  aspect-ratio: 1;
  margin-bottom: clamp(4px, 1.4dvh, 16px);
}
.ky-rays{
  position: absolute; inset: -22%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,214,90,.42) 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 27%, #000 34%, transparent 70%);
          mask: radial-gradient(circle, transparent 27%, #000 34%, transparent 70%);
  animation: ky-rays-in .9s ease-out .6s both, ky-spin 26s linear infinite;
}
.ky-hands{
  position: relative;
  height: clamp(92px, 17dvh, 156px);
  width: auto;
  overflow: visible;
  filter: drop-shadow(0 0 20px rgba(255,216,110,.8));
  animation: ky-pop .95s cubic-bezier(.2,1.6,.4,1) .55s both, ky-float 4.2s ease-in-out 1.6s infinite;
}
.ky-title{
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: .28em;
  font-family: var(--font-kn-display);
  font-weight: 700;
  font-size: clamp(1.9rem, min(5.4vw, 8dvh), 3.9rem);
  line-height: 1.45;
  text-shadow: none;
}
.ky-word{
  display: inline-block;
  padding: .06em .02em .12em;
  color: transparent;
  background: linear-gradient(105deg, #FFD21F 0%, #FFD21F 38%, #FFFBE6 50%, #FFD21F 62%, #FF9E45 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
  animation:
    ky-word-in .85s cubic-bezier(.2,1,.3,1) calc(1s + var(--i) * .16s) both,
    ky-shimmer 4.5s ease-in-out calc(2.2s + var(--i) * .16s) infinite;
}
.ky-subtitle{
  margin-top: clamp(2px, 1dvh, 10px);
  font-family: var(--font-en-display);
  font-weight: 500;
  font-size: clamp(.98rem, min(2.1vw, 3.2dvh), 1.45rem);
  letter-spacing: .035em;
  color: #FFF4D0;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  animation: ky-rise-in .8s ease 1.8s both;
}
.ky-continue{
  margin-top: clamp(12px, 3dvh, 30px);
  padding: 12px 28px;
  border: 1.5px solid #FFD21F;
  border-radius: 999px;
  background: rgba(40,6,10,.55);
  color: #FFE680;
  font-family: var(--font-en-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s ease, color .2s ease, transform .2s ease;
  animation: ky-rise-in .8s ease 2.2s both;
}
.ky-continue:hover{ background: #FFD21F; color: #4A0B12; transform: translateY(-2px); }
.ky-close{
  position: absolute; top: clamp(12px, 2.5dvh, 26px); right: 50%;
  translate: 50% 0;
  z-index: 4;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,235,170,.55);
  border-radius: 50%;
  background: rgba(30,4,8,.55);
  color: #FFF4D0;
  cursor: pointer;
  transition: background .2s ease, transform .25s ease;
}
.ky-close svg{ width: 20px; height: 20px; }
.ky-close:hover{ background: #E0202C; transform: rotate(90deg); }
.ky-overlay :focus-visible{ outline: 2px solid #FFF4D0; outline-offset: 3px; }

/* ---------- Phones: flags move to the top corners, above the greeting ---------- */
@media (max-width: 720px){
  .ky-flag{ top: 7dvh; left: 38px; --flag-w: 33vw; --pole: 7px; --tilt: -1.4deg; }
  .ky-flag-right{ left: auto; right: 38px; }
  .ky-finial{ width: 22px; height: 46px; }
  .ky-tassel{ left: -18px; width: 14px; height: 44px; }
  .ky-content{ margin-top: 20dvh; }
}
/* Short landscape screens */
@media (max-height: 480px){
  .ky-flag{ top: 13dvh; left: 36px; --flag-w: 20vw; --pole: 7px; --tilt: -2deg; }
  .ky-flag-right{ left: auto; right: 36px; }
  .ky-content{ margin-top: 0; width: min(62vw, 560px); }
  .ky-namaste{ width: 78px; margin-bottom: 0; }
  .ky-hands{ height: 66px; }
  .ky-finial{ width: 19px; height: 40px; }
  .ky-tassel{ left: -17px; width: 13px; height: 40px; }
  .ky-continue{ padding: 7px 20px; margin-top: 6px; }
  .ky-close{ top: 8px; width: 38px; height: 38px; }
}

@keyframes ky-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes ky-fade-out{ to{ opacity: 0; transform: scale(1.03); } }
@keyframes ky-breathe{ 50%{ opacity: .6; } }
@keyframes ky-flash{ 0%{ opacity: 0; } 12%{ opacity: .95; } 100%{ opacity: 0; } }
@keyframes ky-draw{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
@keyframes ky-flag-rise{
  from{ opacity: 0; transform: translateY(70%) scaleX(var(--dir)) rotate(calc(var(--tilt) * 3)); }
  to{ opacity: 1; transform: scaleX(var(--dir)) rotate(var(--tilt)); }
}
@keyframes ky-tassel-swing{
  0%, 100%{ transform: rotate(5deg); }
  50%{ transform: rotate(-7deg); }
}
@keyframes ky-pop{
  0%{ opacity: 0; transform: scale(.15) rotate(-14deg); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes ky-float{ 50%{ translate: 0 -7px; } }
@keyframes ky-spin{ to{ rotate: 360deg; } }
@keyframes ky-rays-in{ from{ opacity: 0; transform: scale(.3); } to{ opacity: 1; transform: scale(1); } }
@keyframes ky-word-in{
  from{ opacity: 0; transform: translateY(26px) scale(.92); }
  to{ opacity: 1; transform: none; }
}
@keyframes ky-shimmer{
  0%{ background-position: 100% 0; }
  55%, 100%{ background-position: 0 0; }
}
@keyframes ky-rise-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .ky-overlay, .ky-overlay *{ animation: none !important; transition: none !important; }
  .ky-flash, .ky-fireworks{ display: none; }
}