@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/*
 * Brand palette is restricted to four colors:
 * Royal Purple #42156D, Metallic Gold #D4AF37, White #FFFFFF, Black #111111.
 * All tokens below are those colors or mixes/opacities of them.
 */

@theme inline {
  --font-display: "Cormorant Garamond", "Noto Serif Sinhala", serif;
  --font-sinhala-display: "Noto Serif Sinhala", "Cormorant Garamond", serif;
  --font-sans: "Noto Sans Sinhala", "Source Sans 3", system-ui, sans-serif;
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 6px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-gold: var(--gold);
  --color-royal: var(--royal);
  --color-ink: var(--ink);
}

:root {
  --radius: 0.25rem;
  --royal: oklch(0.33 0.15 302);
  --gold: oklch(0.77 0.135 86);
  --ink: oklch(0.18 0 0);
  --white: oklch(1 0 0);

  --background: oklch(0.201 0.021 302);
  --foreground: var(--white);
  --card: oklch(0.243 0.063 302);
  --card-foreground: var(--white);
  --popover: oklch(0.237 0.057 302);
  --popover-foreground: var(--white);
  --primary: var(--gold);
  --primary-foreground: var(--ink);
  --secondary: var(--royal);
  --secondary-foreground: var(--white);
  --muted: oklch(0.228 0.048 302);
  --muted-foreground: oklch(0.799 0.045 302);
  --accent: var(--royal);
  --accent-foreground: var(--gold);
  --destructive: var(--gold);
  --destructive-foreground: var(--ink);
  --border: oklch(0.77 0.135 86 / 0.28);
  --input: oklch(0.77 0.135 86 / 0.35);
  --ring: var(--gold);

  --gradient-page: radial-gradient(ellipse 120% 85% at 50% 36%, oklch(0.306 0.126 302) 0%, var(--background) 52%, oklch(0.198 0.018 302) 100%);
  --gradient-hero: linear-gradient(90deg, oklch(0.192 0.012 302) 0%, oklch(0.18 0 0 / 0.6) 45%, transparent 100%);
  --gradient-section: radial-gradient(ellipse at top, oklch(0.276 0.096 302) 0%, var(--background) 72%);
  --gradient-gold: linear-gradient(90deg, transparent, var(--gold), transparent);
  --shadow-glow: 0 0 60px -10px oklch(0.77 0.135 86 / 0.45);
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  html {
    font-size: 17px;
  }
  body {
    background-color: var(--color-background);
    background-image: var(--gradient-page);
    background-attachment: fixed;
    color: var(--color-foreground);
    font-family: var(--font-sans);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.25;
    font-weight: 600;
  }
  html[lang="si"] h1, html[lang="si"] h2, html[lang="si"] h3, html[lang="si"] h4 {
    font-family: var(--font-sinhala-display);
    line-height: 1.45;
  }
}

@utility gold-rule {
  height: 1px;
  background: var(--gradient-gold);
}

@utility gold-frame {
  border: 1px solid oklch(0.77 0.135 86 / 0.4);
  box-shadow: inset 0 0 0 4px var(--color-background), inset 0 0 0 5px oklch(0.77 0.135 86 / 0.18);
}

@utility bg-hero-fade {
  background: var(--gradient-hero);
}

@utility bg-section {
  background: var(--gradient-section);
}

@utility glow {
  box-shadow: var(--shadow-glow);
}

@utility eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

@utility fade-up {
  animation: fade-up 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.85; transform: scaleY(0.94); }
}

@utility flicker {
  animation: flicker 2.6s ease-in-out infinite;
  transform-origin: bottom center;
}

@utility bg-royal-tint {
  background: radial-gradient(ellipse 92% 82% at 58% 52%, oklch(0.33 0.15 302 / 0.34) 0%, oklch(0.33 0.15 302 / 0.16) 48%, oklch(0.18 0 0 / 0.38) 100%);
}

@utility bg-footer {
  background: linear-gradient(180deg, oklch(0.33 0.15 302 / 0.26) 0%, oklch(0.18 0 0 / 0.8) 65%);
}

@utility text-shine-gold {
  background: linear-gradient(110deg, oklch(0.62 0.12 80) 0%, var(--gold) 25%, oklch(0.97 0.06 92) 45%, var(--gold) 60%, oklch(0.6 0.11 78) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px oklch(0.77 0.135 86 / 0.35));
  animation: gold-shine 6s ease-in-out infinite;
}
@keyframes gold-shine { 0%,100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* Deep antique gold: dark metallic letters with a slow travelling highlight. */
@utility text-shine-gold-deep {
  background: linear-gradient(110deg,
    oklch(0.48 0.12 80) 0%,
    oklch(0.63 0.14 84) 22%,
    oklch(0.83 0.13 89) 45%,
    oklch(0.63 0.14 84) 68%,
    oklch(0.46 0.11 78) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.6px oklch(0.72 0.13 86 / 0.45);
  filter: drop-shadow(0 0 14px oklch(0.6 0.13 86 / 0.55));
  animation: gold-shine 6s ease-in-out infinite;
}

/* White letters raised like engraved metal: dark shade below, gold rim above, soft gold glow. */
@utility text-emboss-white {
  color: #ffffff;
  text-shadow:
    0 1px 0 oklch(0 0 0 / 0.95),
    0 2px 3px oklch(0 0 0 / 0.75),
    0 -1px 0 oklch(0.8 0.13 86 / 0.6),
    0 0 14px oklch(0.77 0.135 86 / 0.35);
  animation: emboss-glow 5s ease-in-out infinite;
}
@keyframes emboss-glow {
  0%,100% { filter: drop-shadow(0 0 2px oklch(0.8 0.12 86 / 0.3)); }
  50% { filter: drop-shadow(0 0 10px oklch(0.8 0.12 86 / 0.6)); }
}

@utility bg-dark-shine {
  background:
    linear-gradient(100deg, transparent 0%, oklch(0.77 0.135 86 / 0.14) 42%, oklch(0.95 0.05 92 / 0.2) 50%, oklch(0.77 0.135 86 / 0.14) 58%, transparent 100%),
    linear-gradient(180deg, oklch(0.22 0 0) 0%, var(--ink) 55%, oklch(0.13 0 0) 100%);
  border-bottom: 1px solid oklch(0.77 0.135 86 / 0.55);
  box-shadow: inset 0 1px 0 oklch(0.77 0.135 86 / 0.28), inset 0 -12px 22px -18px oklch(0.77 0.135 86 / 0.45), 0 10px 24px -18px oklch(0 0 0 / 0.9);
}

@utility bg-royal-shine {
  background:
    linear-gradient(100deg, transparent 0%, oklch(0.77 0.135 86 / 0.12) 40%, oklch(0.95 0.05 92 / 0.22) 50%, oklch(0.77 0.135 86 / 0.12) 60%, transparent 100%),
    linear-gradient(180deg, oklch(0.4 0.16 302) 0%, oklch(0.33 0.15 302) 55%, oklch(0.22 0.09 302) 100%);
  border-top: 1px solid oklch(0.77 0.135 86 / 0.45);
  border-bottom: 1px solid oklch(0.77 0.135 86 / 0.45);
  box-shadow: inset 0 1px 0 oklch(0.77 0.135 86 / 0.3), inset 0 -12px 22px -18px oklch(0.77 0.135 86 / 0.45), 0 10px 24px -18px oklch(0 0 0 / 0.9);
}

/* Dark nav box raised like engraved metal: gold bevel edges, inner gold glow, embossed letters. */
@utility nav-emboss {
  background:
    radial-gradient(130% 130% at 50% -15%, oklch(0.82 0.13 86 / 0.28) 0%, transparent 58%),
    linear-gradient(180deg, oklch(0.47 0.17 302) 0%, var(--royal) 42%, oklch(0.16 0.07 302) 100%);
  border: 1px solid oklch(0.8 0.13 86 / 0.72);
  box-shadow:
    inset 0 2px 0 oklch(0.97 0.05 92 / 0.5),
    inset 0 -2px 0 oklch(0 0 0 / 0.8),
    inset 2px 0 0 oklch(0.77 0.135 86 / 0.32),
    inset -2px 0 0 oklch(0 0 0 / 0.5),
    inset 0 0 20px -4px oklch(0.77 0.135 86 / 0.55),
    0 0 0 1px oklch(0.05 0 0 / 0.85),
    0 5px 12px -5px oklch(0 0 0 / 0.95),
    0 0 26px -2px oklch(0.77 0.135 86 / 0.5),
    0 0 46px -8px oklch(0.77 0.135 86 / 0.45);
  text-shadow:
    0 1px 0 oklch(0 0 0 / 0.9),
    0 -1px 0 oklch(0.77 0.135 86 / 0.4),
    0 0 10px oklch(0.77 0.135 86 / 0.25);
  &:hover,
  &:focus-visible {
    border-color: oklch(0.86 0.12 86 / 0.95);
    box-shadow:
      inset 0 2px 0 oklch(0.98 0.05 92 / 0.7),
      inset 0 -2px 0 oklch(0 0 0 / 0.85),
      inset 2px 0 0 oklch(0.77 0.135 86 / 0.45),
      inset -2px 0 0 oklch(0 0 0 / 0.55),
      inset 0 0 26px -4px oklch(0.77 0.135 86 / 0.7),
      0 0 0 1px oklch(0.05 0 0 / 0.9),
      0 6px 16px -5px oklch(0 0 0 / 0.95),
      0 0 30px -6px oklch(0.77 0.135 86 / 0.9);
  }
}

/* The current page's box: deeper gold bevel and glow. */
@utility nav-emboss-active {
  border-color: oklch(0.88 0.12 86 / 1);
  box-shadow:
    inset 0 2px 0 oklch(0.98 0.05 92 / 0.8),
    inset 0 -2px 0 oklch(0 0 0 / 0.85),
    inset 2px 0 0 oklch(0.77 0.135 86 / 0.5),
    inset -2px 0 0 oklch(0 0 0 / 0.6),
    inset 0 0 28px -3px oklch(0.77 0.135 86 / 0.75),
    0 0 0 1px oklch(0.05 0 0 / 0.9),
    0 6px 16px -5px oklch(0 0 0 / 0.95),
    0 0 34px -5px oklch(0.77 0.135 86 / 0.95);
}

@utility bar-text {
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 2px oklch(0 0 0), 0 0 12px oklch(0.77 0.135 86 / 0.4);
}

/* Sliding (marquee) text for the chairman banner and the purple top bar. */
@utility marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

@utility logo-mark {
  filter: drop-shadow(0 0 20px oklch(0.77 0.135 86 / 0.3)) drop-shadow(0 8px 20px oklch(0 0 0 / 0.6));
}

/* ---- Hero emblem stage: the award emblem shown on its own, right of the fold copy ---- */
@utility emblem-bed {
  background:
    radial-gradient(circle at 50% 50%, oklch(0.14 0.005 302 / 0.9) 0%, oklch(0.14 0.005 302 / 0.72) 42%, oklch(0.14 0.005 302 / 0.34) 62%, oklch(0.14 0.005 302 / 0) 80%),
    radial-gradient(circle at 50% 50%, oklch(0.33 0.15 302 / 0.5) 0%, oklch(0.33 0.15 302 / 0.18) 55%, oklch(0.33 0.15 302 / 0) 78%);
}

@utility emblem-halo {
  background: radial-gradient(circle at 50% 46%, oklch(0.77 0.135 86 / 0.34) 0%, oklch(0.77 0.135 86 / 0.12) 40%, oklch(0.77 0.135 86 / 0) 70%);
}

@utility caption-plate {
  background: radial-gradient(ellipse at center, oklch(0.13 0.006 302 / 0.96) 0%, oklch(0.13 0.006 302 / 0.85) 62%, oklch(0.13 0.006 302 / 0.4) 84%, oklch(0.13 0.006 302 / 0) 100%);
  padding: 0.45rem 1.6rem;
}

@utility award-fade {
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 52%, oklch(0 0 0 / 0.82) 74%, oklch(0 0 0 / 0.3) 90%, oklch(0 0 0 / 0) 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 52%, oklch(0 0 0 / 0.82) 74%, oklch(0 0 0 / 0.3) 90%, oklch(0 0 0 / 0) 100%);
}





@utility emblem-pool {
  background: radial-gradient(ellipse 62% 50% at 50% 50%, oklch(0.77 0.135 86 / 0.28) 0%, oklch(0.77 0.135 86 / 0) 72%);
}

@utility float-slow {
  animation: float-slow 7.5s ease-in-out infinite;
}
@keyframes float-slow {
  0%, 100% { transform: translateY(-7px); }
  50% { transform: translateY(9px); }
}

@utility ring-spin {
  animation: ring-spin 46s linear infinite;
}
@utility ring-spin-rev {
  animation: ring-spin 68s linear infinite reverse;
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

@utility twinkle {
  animation: twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.8); }
  50% { opacity: 0.95; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .float-slow, .ring-spin, .ring-spin-rev, .twinkle { animation: none; }
}


/* ---- Chairman's message: clean document for printing / saving as PDF ---- */
.print-sheet {
  --paper: #ffffff;
  --paper-ink: #111111;
  --paper-soft: #4a4a4a;
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid oklch(0.77 0.135 86 / 0.45);
  box-shadow: 0 30px 70px -40px oklch(0 0 0 / 0.95);
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.25rem);
  max-width: 46rem;
  margin-inline: auto;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.print-head { text-align: center; }

.print-sheet .print-title {
  font-family: var(--font-sinhala-display);
  font-weight: 600;
  color: var(--royal);
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.45;
  margin-top: 1.1rem;
}

.print-sheet .print-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  width: 9rem;
  margin: 1.25rem auto 0.9rem;
}

.print-sheet .print-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-soft);
}

.print-sheet .print-quote {
  font-family: var(--font-sinhala-display);
  color: var(--royal);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.8;
  text-align: center;
  max-width: 34rem;
  margin: 2.25rem auto 0;
}

.print-sheet .print-body {
  margin-top: 2.25rem;
  display: grid;
  gap: 1.15rem;
}

.print-sheet .print-body p {
  color: var(--paper-ink);
  font-size: 1.02rem;
  line-height: 1.85;
}

.print-sheet .print-body .print-lead {
  font-family: var(--font-sinhala-display);
  color: var(--royal);
  font-size: 1.3rem;
  text-align: center;
}

.print-sheet .print-tagline {
  font-family: var(--font-sinhala-display);
  color: var(--royal);
  font-size: 1.15rem;
  text-align: center;
  border-top: 1px solid oklch(0.77 0.135 86 / 0.5);
  padding-top: 1.6rem;
}

.print-sheet .print-sign { margin-top: 2.5rem; text-align: right; }
.print-sheet .print-closing { color: var(--paper-soft); }

.print-sheet .print-name {
  font-family: var(--font-sinhala-display);
  color: var(--royal);
  font-size: 1.35rem;
  margin-top: 0.5rem;
}

.print-sheet .print-role { color: var(--paper-ink); }
.print-sheet .print-org { color: var(--paper-soft); }
.print-sheet .print-event { color: var(--paper-soft); font-size: 0.85rem; }

@page { size: A4; margin: 18mm 16mm; }

@media print {
  body[data-print-doc] { background: #ffffff !important; }

  body[data-print-doc] .min-h-screen > header,
  body[data-print-doc] .min-h-screen > footer,
  body[data-print-doc] .min-h-screen > .bg-dark-shine,
  body[data-print-doc] .min-h-screen > .bg-royal-shine,
  body[data-print-doc] .min-h-screen > .bg-ink,
  .no-print { display: none !important; }

  .print-doc { max-width: none; margin: 0; padding: 0; }

  .print-sheet {
    max-width: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .print-sheet .print-body p { orphans: 3; widows: 3; }

  .print-sheet .print-quote,
  .print-sheet .print-tagline,
  .print-sheet .print-sign { break-inside: avoid; }
}


/* ---- Printable nomination form ---- */
.form-section {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  color: #42156d;
  border-bottom: 2px solid #d4af37;
  padding-bottom: 0.35rem;
  margin: 1.75rem 0 1rem;
}
.form-sub { font-weight: 600; color: var(--paper-ink); margin: 1.25rem 0 0.5rem; }
.form-note { font-size: 0.85rem; color: var(--paper-soft); margin-bottom: 0.5rem; }
.form-line { display: flex; align-items: flex-end; gap: 0.5rem; margin: 1.1rem 0; }
.form-line-label { font-size: 0.9rem; color: var(--paper-ink); white-space: nowrap; }
.form-line-rule { flex: 1; border-bottom: 1px solid #999; min-width: 3rem; }
.form-line-hint { font-size: 0.75rem; color: var(--paper-soft); white-space: nowrap; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.form-checks { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 2rem; }
.form-checks li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--paper-ink); break-inside: avoid; }
.form-box { width: 0.85rem; height: 0.85rem; border: 1.5px solid #42156d; flex-shrink: 0; }
.form-write-line { border-bottom: 1px solid #bbb; height: 2rem; }
/* Phones: single column, wrapping labels, larger readable text */
@media screen and (max-width: 640px) {
  .form-grid, .form-checks { grid-template-columns: 1fr; }
  .form-line { flex-wrap: wrap; margin: 1.25rem 0; }
  .form-line-label { white-space: normal; font-size: 1rem; }
  .form-line-rule { flex-basis: 100%; height: 1.75rem; }
  .form-line-hint { white-space: normal; }
  .form-checks li { font-size: 1rem; align-items: flex-start; }
  .form-checks .form-box { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
  .form-note { font-size: 0.95rem; line-height: 1.7; }
}
@media print {
  .form-grid, .form-checks { grid-template-columns: 1fr 1fr; }
  .form-line { flex-wrap: nowrap; }
  .form-line-label, .form-line-hint { white-space: nowrap; }
  .form-checks, .form-grid, .form-line, .form-sub { break-inside: avoid; }
  .form-section, .form-sub { break-after: avoid; }
}