/* Colour themes: the Theme button (bottom right) cycles 1 -> 8; the choice is kept per browser (localStorage "eo.landingTheme").
   bg1-3 page background, fg page text, hi directorate line, b1-3 background glows, a1/a2 accent (headings, button),
   soft1/soft2/softbd date box, gold focus ring. */
:root {
  --bg1:#0a2a18; --bg2:#1f5130; --bg3:#0d3a24; --fg:#fff; --hi:#ffe7a8; --b1:#3da35d; --b2:#d9a93b; --b3:#1b6e8a;
  --a1:#1f5130; --a2:#2f7d49; --gold:#d9a93b; --soft1:#eef6f0; --soft2:#e3efe6; --softbd:#cfe2d4;
  --ink:#14201a; --muted:#566660; --px:0px; --py:0px;
}
[data-theme="2"] { --bg1:#08142e; --bg2:#1e3a8a; --bg3:#0c2557; --hi:#ffe08a; --b1:#3b82f6; --b2:#f2c14e; --b3:#06b6d4; --a1:#1e3a8a; --a2:#2f5fd0; --gold:#f2c14e; --soft1:#eef3fd; --soft2:#e2eafb; --softbd:#c9d6f3; --ink:#141c2e; --muted:#566070; }
[data-theme="3"] { --bg1:#22070c; --bg2:#7a1f2b; --bg3:#4a0f18; --hi:#ffd9a0; --b1:#c2414f; --b2:#e0b04a; --b3:#7e3a8c; --a1:#7a1f2b; --a2:#a8323f; --gold:#e0b04a; --soft1:#fbf1f1; --soft2:#f6e4e5; --softbd:#edcacd; --ink:#2a1418; --muted:#6a5558; }
[data-theme="4"] { --bg1:#04262a; --bg2:#0f5e63; --bg3:#083b40; --hi:#ffe9b0; --b1:#14b8a6; --b2:#f0b75e; --b3:#2563eb; --a1:#0f5e63; --a2:#148a8f; --gold:#f0b75e; --soft1:#ebf7f6; --soft2:#dcf0ef; --softbd:#bfe2df; --ink:#12201f; --muted:#52646a; }
[data-theme="5"] { --bg1:#170a2e; --bg2:#4c2a85; --bg3:#2b1656; --hi:#f9d97a; --b1:#8b5cf6; --b2:#f4c95d; --b3:#db2777; --a1:#4c2a85; --a2:#6d43c0; --gold:#f4c95d; --soft1:#f4f0fc; --soft2:#ebe4f8; --softbd:#d9cdf1; --ink:#1d1430; --muted:#5f5670; }
[data-theme="6"] { --bg1:#2e1203; --bg2:#9a420a; --bg3:#5c2606; --hi:#ffe28a; --b1:#f97316; --b2:#fcd34d; --b3:#b91c1c; --a1:#9a420a; --a2:#c75a12; --gold:#fcd34d; --soft1:#fff5ec; --soft2:#fde9d7; --softbd:#f5d1b0; --ink:#2a1a0e; --muted:#6b5a4c; }
[data-theme="7"] { --bg1:#0b0f14; --bg2:#2b3440; --bg3:#161c24; --hi:#f3c969; --b1:#475569; --b2:#e3b341; --b3:#0e7490; --a1:#263241; --a2:#3f5068; --gold:#e3b341; --soft1:#f1f3f6; --soft2:#e6e9ee; --softbd:#d3d8e0; --ink:#151a21; --muted:#5b6573; }
[data-theme="8"] { --bg1:#fbf7ee; --bg2:#efe6d2; --bg3:#f6efe0; --fg:#1f2a24; --hi:#8a5a00; --b1:#e9c46a; --b2:#a7d3b5; --b3:#9cc3e6; --a1:#1f5130; --a2:#2f7d49; --gold:#b8860b; --soft1:#f4f8f2; --soft2:#e9f1e6; --softbd:#d3e3cf; }

* { box-sizing:border-box; } html, body { min-height:100%; }
body { margin:0; color:var(--fg); font:16px/1.55 "Noto Sans Tamil", "Nirmala UI", Latha, Inter, system-ui, "Segoe UI", sans-serif; background:linear-gradient(135deg,var(--bg1),var(--bg2) 55%,var(--bg3)); overflow-x:hidden; transition:color .4s; }
h1, p { margin:0; }

/* animated backdrop */
.bg { position:fixed; inset:0; overflow:hidden; z-index:0; }
.blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; transform:translate(var(--px),var(--py)); transition:transform .4s ease-out, background-color .6s; }
.b1 { width:46vmax; height:46vmax; left:-12vmax; top:-14vmax; background:var(--b1); animation:float1 18s ease-in-out infinite alternate; }
.b2 { width:38vmax; height:38vmax; right:-10vmax; bottom:-14vmax; background:var(--b2); opacity:.28; animation:float2 22s ease-in-out infinite alternate; }
.b3 { width:30vmax; height:30vmax; left:38%; top:30%; background:var(--b3); opacity:.28; animation:float1 26s ease-in-out infinite alternate-reverse; }
@keyframes float1 { to { margin:6vmax 0 0 8vmax; } } @keyframes float2 { to { margin:-8vmax 6vmax 0 0; } }

/* On a computer the page is scaled (CSS zoom, set by the script in index.html) so it always fills the window without
   scrolling, whatever the screen size or browser zoom. Phones (<= 820px) scroll normally. */
.page { position:relative; z-index:1; min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }

/* top bar: emblem left, department centre, town panchayat logo right */
.bar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:14px clamp(14px,3vw,40px); }
.seal, .tplogo { background:#fff; border-radius:50%; padding:4px; box-shadow:0 6px 18px rgba(0,0,0,.28); flex:none; }
.seal { width:112px; height:112px; } .tplogo { width:96px; height:96px; padding:3px; }
.seal img, .tplogo img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; }
.dept { text-align:center; min-width:0; }
.dept .ta { font-size:clamp(16px,2vw,26px); font-weight:700; line-height:1.3; }
.dept .en { font-size:clamp(13px,1.5vw,18px); font-weight:600; margin-top:2px; }
.dept .dir { font-size:clamp(16px,2vw,26px); font-weight:700; margin-top:6px; color:var(--hi); transition:color .4s; }

.stage { display:grid; place-items:center; padding:clamp(12px,3vw,40px) clamp(14px,3vw,40px); }
.card { width:min(980px,100%); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); background:#fff; color:var(--ink); border-radius:26px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.45); transition:transform .25s ease-out; will-change:transform; animation:rise .7s cubic-bezier(.2,.8,.2,1) both; }
[data-theme="8"] .card { box-shadow:0 24px 60px rgba(60,45,10,.22); }
@keyframes rise { from { opacity:0; transform:translateY(24px) scale(.98); } }

.art { position:relative; min-height:420px; background:var(--bg1); }
.art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; transition:transform 6s ease-out; }
.card:hover .art img { transform:scale(1.06); }
.art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,color-mix(in srgb, var(--a1) 85%, transparent)); }
.art p { color:#fff; position:absolute; left:22px; right:22px; bottom:18px; z-index:1; font-weight:600; font-size:15px; }

.panel { padding:clamp(24px,4vw,48px); display:flex; flex-direction:column; justify-content:center; }
.hello { font-size:15px; font-weight:600; color:var(--a2); }
.panel h1 { margin-top:2px; font:700 clamp(30px,3.9vw,46px)/1.1 Georgia, "Times New Roman", serif; color:var(--a1); }
.sub { margin-top:12px; color:var(--muted); font-size:15.5px; } .sub.ta { margin-top:2px; font-size:14.5px; }

.clock { margin:24px 0; padding:16px 20px; display:flex; flex-direction:column; gap:2px; border-radius:16px; background:linear-gradient(135deg,var(--soft1),var(--soft2)); border:1px solid var(--softbd); }
.clock b { font-size:clamp(32px,4vw,46px); line-height:1.1; color:var(--a1); }
.clock .date { font-size:clamp(20px,2.4vw,27px); font-weight:600; color:var(--ink); line-height:1.25; }
.clock .date-ta { font-size:15px; color:var(--muted); }
.clock .time { margin-top:6px; font:600 14px/1 ui-monospace, "SF Mono", Consolas, monospace; color:var(--muted); font-variant-numeric:tabular-nums; }

.start { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:12px; padding:16px 28px; font-size:19px; font-weight:700; color:#fff; text-decoration:none; border-radius:14px; background:linear-gradient(135deg,var(--a1),var(--a2)); box-shadow:0 10px 24px color-mix(in srgb, var(--a1) 40%, transparent); transition:transform .15s, box-shadow .15s; }
.start:hover { transform:translateY(-2px); box-shadow:0 14px 30px color-mix(in srgb, var(--a1) 50%, transparent); } .start:active { transform:translateY(0); }
.start:focus-visible { outline:4px solid var(--gold); outline-offset:3px; }
.start svg { width:22px; height:22px; transition:transform .2s; } .start:hover svg { transform:translateX(6px); }
.rip { position:absolute; width:12px; height:12px; margin:-6px; border-radius:50%; background:rgba(255,255,255,.55); animation:rip .65s ease-out forwards; pointer-events:none; }
@keyframes rip { to { transform:scale(40); opacity:0; } }
.hint { margin-top:10px; text-align:center; font-size:13px; color:var(--muted); }
[hidden] { display:none !important; }

/* sign in */
.login { display:flex; flex-direction:column; gap:12px; }
.login .lhead { font-weight:700; font-size:15px; color:var(--a1); }
.fld { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--muted); }
.fld input { width:100%; font:inherit; font-size:16px; font-weight:500; color:var(--ink); padding:11px 14px; border-radius:12px; border:1.5px solid var(--softbd); background:var(--soft1); transition:border-color .15s, box-shadow .15s, background .15s; }
.fld input:focus { outline:none; border-color:var(--a2); background:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--a2) 18%, transparent); }
.pw { position:relative; display:block; } .pw input { padding-right:48px; }
.eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; }
.eye:hover, .eye.on { color:var(--a1); background:var(--soft2); } .eye svg { width:20px; height:20px; }
.eye:focus-visible { outline:3px solid var(--gold); outline-offset:1px; }
.lerr { min-height:1.3em; margin:-4px 0 -2px; font-size:13.5px; font-weight:600; color:#b42318; }
.login .start { border:0; cursor:pointer; font-family:inherit; width:100%; }
.login .start:disabled { opacity:.7; cursor:progress; }
.shake { animation:shake .38s; } @keyframes shake { 20%,60% { transform:translateX(-7px); } 40%,80% { transform:translateX(7px); } }
.linkbtn { border:0; background:none; padding:0; font:inherit; font-weight:600; color:var(--a2); text-decoration:underline; cursor:pointer; }
.linkbtn:focus-visible { outline:3px solid var(--gold); outline-offset:2px; border-radius:3px; }
#go .hint b { color:var(--ink); }

/* footer: text in the middle, Theme button on the right */
.foot { position:relative; display:flex; align-items:center; justify-content:center; min-height:48px; padding:8px clamp(14px,3vw,40px); font-size:13px; }
.foot > span { opacity:.75; }
.themebtn { position:absolute; right:clamp(14px,3vw,40px); top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:99px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; line-height:1; color:var(--fg); background:color-mix(in srgb, var(--fg) 12%, transparent); border:1px solid color-mix(in srgb, var(--fg) 30%, transparent); transition:background .2s, color .4s; }
.themebtn:hover { background:color-mix(in srgb, var(--fg) 22%, transparent); }
.themebtn:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.themebtn .sw { width:24px; height:24px; border-radius:50%; flex:none; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2); background:conic-gradient(var(--a2) 0 33%, var(--hi) 0 66%, var(--bg1) 0); }
.themebtn small { font-weight:500; opacity:.75; }

@media (max-width:820px) {
  .card { grid-template-columns:1fr; } .art { min-height:200px; }
  .bar { grid-template-columns:auto 1fr auto; gap:10px; } .seal { width:68px; height:68px; } .tplogo { width:58px; height:58px; } .dept .dir { font-size:14px; }
  .foot { flex-direction:column; gap:8px; } .themebtn { position:static; transform:none; }
}
@media (prefers-reduced-motion:reduce) { .blob, .card, .art img, .shake { animation:none; transition:none; } .start, .start svg { transition:none; } }