/* Slow-motion photo hero (live since 24 Sep 2026). Loaded after style.css. */

/* lighter shade: photos stay bright, dark only where the text sits */
.hero-shade { background:
  linear-gradient(180deg, rgb(20 6 6 / .55) 0%, transparent 22%, transparent 45%, rgb(30 8 8 / .88) 100%),
  radial-gradient(120% 70% at 15% 100%, rgb(30 8 8 / .55), transparent 65%); }

/* photo slides: each fades in, zooms slowly toward its focus point, fades out (24 s loop, 6 s per photo).
   Transform/opacity animations run on the GPU with sub-pixel motion, so there is no shake. */
.hero { background: var(--night); }
.hero-slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; isolation: isolate; }
.hero-shade { z-index: 1; }
.hero-inner, .hero .ribbon { z-index: 2; }
.hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--fx) var(--fy); transform-origin: var(--fx) var(--fy);
  opacity: 0; will-change: transform, opacity; backface-visibility: hidden;
  animation: hero-kb 24s linear infinite; }
.hero-slides img:nth-child(1) { opacity: 1; animation-delay: -1.5s; }   /* first photo already showing at load */
.hero-slides img:nth-child(2) { animation-delay: 4.5s; }
.hero-slides img:nth-child(3) { animation-delay: 10.5s; }
.hero-slides img:nth-child(4) { animation-delay: 16.5s; }
@keyframes hero-kb {
  0%     { opacity: 0; transform: scale(1); animation-timing-function: ease-in-out; }
  6.25%  { opacity: 1; }
  25%    { opacity: 1; animation-timing-function: ease-in-out; }
  31.25% { opacity: 0; transform: scale(1.12); }
  100%   { opacity: 0; transform: scale(1.12); }
}

/* "Memories from Rajyotsava 2025" tag on the photos */
.hero-memory { position: absolute; z-index: 2; right: var(--gutter); bottom: 34px; margin: 0;
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgb(0 0 0 / .4); border: 1px solid rgb(255 255 255 / .3); backdrop-filter: blur(6px);
  color: #fff; font-weight: 600; font-size: .9rem; animation: hero-rise 1.4s 2.4s cubic-bezier(.2,.7,.2,1) both; }
.hero-memory svg { width: 18px; height: 18px; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 720px) { .hero-memory { right: auto; left: var(--gutter); bottom: auto; top: calc(var(--bar-h) + 10px); padding: 3px 10px; gap: 6px; font-size: .76rem; }
  .hero-memory svg { width: 14px; height: 14px; } }

/* text rises slowly out of a soft blur, one line after another */
.hero-inner > * , .hero h1 span { animation: hero-rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hero .kicker    { animation-delay: .3s; }
.hero .t1        { animation-delay: .6s; animation-duration: 1.8s; }
.hero .t2        { animation-delay: 1.0s; }
.hero .tagline   { animation-delay: 1.5s; }
.hero .when      { animation-delay: 1.8s; }
.hero .cta       { animation-delay: 2.1s; }
.hero h1         { animation: none; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(28px); filter: blur(10px); } }

/* slow golden light sweeping across the title, every 6 s */
.hero .t1 { background: linear-gradient(100deg, var(--yellow) 40%, #fff6c9 50%, var(--yellow) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hero-rise 1.8s .6s cubic-bezier(.2,.7,.2,1) both, hero-shine 6s 2.6s ease-in-out infinite; }
@keyframes hero-shine { from { background-position: 100% 0; } 40%, to { background-position: -50% 0; } }
.hero h1 { text-shadow: none; filter: drop-shadow(0 2px 18px rgb(0 0 0 / .5)); }

/* the "watch" button gently breathes once the text has settled */
.hero .btn.primary { animation: hero-pulse 2.8s 3.5s ease-in-out infinite; }
@keyframes hero-pulse { 50% { box-shadow: 0 0 0 10px rgb(214 32 39 / 0), 0 0 24px 4px rgb(244 180 0 / .45); } }

/* phones: photos fill the top of the screen and fade into the background, text sits below them,
   so no face is ever behind the title */
@media (max-width: 720px) {
  .hero { min-height: 0; display: block; }
  .hero-slides { position: relative; inset: auto; height: 40svh; min-height: 250px; max-height: 360px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .hero-shade { background: linear-gradient(180deg, rgb(20 6 6 / .55) 0%, transparent 16%); }
  .hero-inner { padding-top: 4px; padding-bottom: 34px; }
  .hero .kicker { display: none; }
  .hero .t1 { font-size: clamp(2.6rem, 13vw, 3.4rem); line-height: 1.15; }
  .hero .t2 { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
  .hero h1 { margin-bottom: 4px; }
  .hero .tagline { font-size: 1.05rem; margin-bottom: 6px; }
  .hero .when { font-size: .95rem; margin-bottom: 16px; }
  .hero .cta { flex-wrap: nowrap; gap: 8px; }
  .hero .cta .btn { min-height: 44px; padding: .5em 1em; font-size: .92rem; white-space: nowrap; }
}
@media (max-width: 360px) { .hero .cta { flex-wrap: wrap; } }

/* ─── Home: "Story of Karnataka" teaser band ─────────────────────────────── */
.story-teaser { position: relative; overflow: hidden; background: radial-gradient(90% 70% at 50% 110%, #5c1116, #1a0707 70%); color: #fbeee0;
  padding: 0 0 clamp(64px, 9vw, 110px); text-align: center; }
.st-strip { display: flex; gap: 18px; width: max-content; padding: clamp(48px, 7vw, 84px) 0 clamp(36px, 5vw, 56px);
  animation: st-marquee 60s linear infinite; }
.story-teaser:hover .st-strip { animation-play-state: paused; }
@keyframes st-marquee { to { transform: translateX(-50%); } }
.st-strip figure { position: relative; margin: 0; width: clamp(190px, 22vw, 290px); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; flex: none;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / .8); transform: rotate(var(--r, 0deg)); }
.st-strip figure:nth-child(odd) { --r: -2deg; margin-top: 18px; }
.st-strip figure:nth-child(even) { --r: 2deg; }
.st-strip img { width: 100%; height: 100%; object-fit: cover; }
.st-strip figcaption { position: absolute; inset: auto 0 0; padding: 30px 14px 12px; font: 700 .95rem/1.3 var(--font-head); text-align: left;
  background: linear-gradient(transparent, rgb(0 0 0 / .75)); color: #fff; }
.st-strip:empty { display: none; }
html[lang="kn"] .st-strip figcaption [lang="en"], html[lang="en"] .st-strip figcaption [lang="kn"] { display: none; }
.st-strip:empty + .st-inner { padding-top: clamp(64px, 9vw, 110px); }
.st-inner { position: relative; }
.st-kicker { display: inline-block; margin: 0 0 12px; padding: 4px 14px; border-radius: 999px; background: var(--yellow); color: #3a2200; font-weight: 800; font-size: .9rem; }
.story-teaser h2 { font-size: clamp(2.4rem, 1.5rem + 4.5vw, 5rem); line-height: 1.15; margin-bottom: .25em;
  background: linear-gradient(100deg, #ffe58a, var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-text { max-width: 56ch; margin: 0 auto 28px; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: #e8d3c3; }
.story-teaser .btn svg { width: 20px; height: 20px; }
.nav a.nav-story { color: var(--yellow); }

/* ─── Home: sections float in as you scroll (class added by app.js) ──────── */
.rv { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .st-strip { animation: none; } }


/* ─── Draft marker on sections still showing the 2025 plan ─────────────── */
.draft-badge { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 14px; padding: 5px 14px; border-radius: 999px;
  background: var(--yellow-soft); color: #5a3a00; border: 1.5px dashed #d99a00; font-weight: 700; font-size: .92rem; }
.draft-badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-color-scheme: dark) { .draft-badge { background: rgb(244 180 0 / .14); color: var(--yellow-soft); border-color: rgb(244 180 0 / .6); } }

/* the "2025 memories" label: full text on desktop, a tiny short label on phones */
.hero-memory .mem-short { display: none; }
@media (max-width: 720px) {
  .hero-memory { padding: 2px 9px; font-size: .68rem; font-weight: 600; background: rgb(0 0 0 / .35); border-color: rgb(255 255 255 / .2); }
  .hero-memory svg { display: none; }
  .hero-memory .mem-long { display: none; }
  .hero-memory .mem-short { display: inline; }
}

/* ─── Countdown inside the hero, glass tiles (same look as the new event page) ── */
.ev-count { margin: 0 0 26px; }
.ev-count-title { margin: 0 0 10px; font-weight: 700; color: #ffd766; letter-spacing: .03em; }
.ev-count .cd-grid { grid-template-columns: repeat(4, minmax(0, 112px)); justify-content: start; gap: 10px; }
.ev-count .cd-grid div { background: rgb(0 0 0 / .32); border: 1px solid rgb(244 180 0 / .38); border-radius: 18px; padding: 12px 4px 10px; backdrop-filter: blur(8px); text-align: center; }
.ev-count .cd-grid .n { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.ev-count .cd-msg { text-align: left; }
.hero .ev-count { animation: hero-rise 1.4s 1.9s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 720px) {
  .ev-count { margin-bottom: 18px; }
  .ev-count .cd-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .ev-count .cd-grid div { padding: 10px 2px 8px; border-radius: 14px; }
  .ev-count .cd-grid .n { font-size: 1.7rem; }
  .ev-count .cd-grid .u { font-size: .75rem; }
  .hero .when { margin-bottom: 14px; }
}

/* flag-colour divider: yellow over red, the Kannada flag */
.flag-bar { position: absolute; left: 0; right: 0; top: 0; height: 12px; z-index: 1;
  background: linear-gradient(180deg, var(--yellow, #f4b400) 0 50%, var(--red, #d2232a) 50% 100%); box-shadow: 0 6px 24px rgb(0 0 0 / .35); }

/* ─── Desktop: use the width (phones unchanged) ───────────────────────────── */
@media (min-width: 1100px) {
  /* word of the day: heading left, card right */
  .word .wrap.narrow { max-width: var(--maxw); display: grid; grid-template-columns: 1fr minmax(0, 560px); column-gap: clamp(40px, 6vw, 110px); align-items: center; text-align: left; }
  .word .wrap > h2 { grid-column: 1; align-self: end; margin-bottom: .2em; font-size: clamp(2.4rem, 1.4rem + 2.4vw, 3.6rem); }
  .word .wrap > .muted { grid-column: 1; align-self: start; font-size: 1.2rem; }
  .word .word-card { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: none; }
  .word .word-actions { grid-column: 2; margin-top: 16px; }
  /* announcements: two columns */
  .news .wrap.narrow, .ev-news .ev-wrap.narrow { max-width: var(--maxw); }
  .news-list { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
  /* 2025 highlights (main page): text left, video right */
  .reels > .wrap { display: grid; grid-template-columns: minmax(260px, 1fr) 2.1fr; column-gap: clamp(40px, 5vw, 80px); align-items: center; }
  .reels > .wrap > h2, .reels > .wrap > .muted { grid-column: 1; }
  .reels > .wrap > h2 { align-self: end; font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); }
  .reels > .wrap > .muted { align-self: start; font-size: 1.15rem; }
  .reels .carousel { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  /* programme cards (main page) a little roomier */
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .timeline li { padding: 26px 26px 24px 84px; }
}

/* ─── "Start the story": the boldest button in its section ─────────────── */
.btn-story { position: relative; overflow: hidden; isolation: isolate; min-height: 62px; padding: .75em 2.1em; gap: .6em;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); color: #2a1600; background: linear-gradient(100deg, #ffe58a, var(--yellow, #f4b400) 60%);
  border: 0; box-shadow: 0 0 0 4px rgb(244 180 0 / .25), 0 14px 40px -8px rgb(244 180 0 / .6); }
.btn-story:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 6px rgb(244 180 0 / .3), 0 18px 48px -8px rgb(244 180 0 / .75); }
.btn-story svg { width: 24px; height: 24px; transition: transform .25s; }
.btn-story:hover svg { transform: translateX(4px); }
.btn-story::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .8) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; animation: story-shine 3.5s 1s ease-in-out infinite; }
@keyframes story-shine { 0% { background-position: -150% 0; } 40%, 100% { background-position: 250% 0; } }
@media (max-width: 720px) { .btn-story { display: flex; justify-content: center; width: 100%; max-width: 420px; margin: 0 auto; } }
/* the moving monument photos open the story too */
.st-strip figure { cursor: pointer; transition: transform .35s; }
.st-strip figure:hover { transform: rotate(0deg) scale(1.04); }

/* ─── Story of Karnataka as a destination banner: Mysuru Palace behind it ── */
.story-teaser { isolation: isolate; background: #1a0707; }
.story-teaser::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: url(/img/heritage/pattadakal.jpg?v=2) 55% 60% / cover no-repeat; background-image: image-set(url(/img/heritage/pattadakal.jpg?v=2) 1x, url(/img/heritage/pattadakal-xl.jpg) 2x); animation: banner-zoom 30s ease-in-out infinite alternate; }
.story-teaser::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgb(20 6 6 / .9) 0%, rgb(20 6 6 / .42) 30%, rgb(20 6 6 / .35) 55%, rgb(20 6 6 / .9) 100%),
  radial-gradient(70% 60% at 50% 50%, transparent, rgb(20 6 6 / .5)); }
@keyframes banner-zoom { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.story-teaser h2 { text-shadow: none; filter: drop-shadow(0 4px 24px rgb(0 0 0 / .6)); }
.st-text, .story-teaser .s-sub { color: #fbe6d2 !important; text-shadow: 0 2px 12px rgb(0 0 0 / .7); }
@media (prefers-reduced-motion: reduce) { .story-teaser::before { animation: none; } }
/* phones: a 1000 px Pattadakal is plenty for the story banner (saves ~1 MB) */
@media (max-width: 720px) { .story-teaser::before { background-image: url(/img/heritage/pattadakal-md.jpg); } }