/* base/tn-culture.css — Tamil Nadu cultural touches for the HOME page (body.tn-page)
   and the ADMIN / MEMBER desks (body.desk-body). The pieces are added by
   assets/js/tn-culture.js: mango-leaf thoranam with marigolds, zari borders,
   kolam that draws itself, kuthuvilakku lamps with a living flame, falling
   jasmine / marigold petals, kovil-arch photo frames. */

:root {
  --tnc-maroon: #7a1428;
  --tnc-maroon-2: #5c0d1d;
  --tnc-gold: #c9962e;
  --tnc-gold-2: #e6c069;
  --tnc-leaf: #2e7d32;
  --tnc-zari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cpath d='M0 12 L7 2 L14 12 L21 2 L28 12' fill='none' stroke='%23c9962e' stroke-width='1.6'/%3E%3Ccircle cx='7' cy='9' r='1.6' fill='%237a1428'/%3E%3Ccircle cx='21' cy='9' r='1.6' fill='%237a1428'/%3E%3C/svg%3E");
}

/* ---------- Thoranam (mango leaves + marigold) ---------- */
.tnc-thoranam {
  position: relative; z-index: 6; height: 42px; margin-bottom: -42px;
  display: flex; justify-content: center; align-items: flex-start; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #7a4a12 0 3px, transparent 3px);
}
.tnc-thoranam i {
  flex: none; width: 20px; height: 36px; margin: 0 2px;
  background: linear-gradient(90deg, #1b5e20, #4caf50 50%, #1b5e20);
  clip-path: polygon(50% 100%, 0 28%, 12% 0, 88% 0, 100% 28%);
  transform-origin: 50% 0; animation: tnc-sway 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.17s);
}
.tnc-thoranam b {
  flex: none; width: 18px; height: 18px; margin: 4px 3px 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe082, #ff9800 55%, #e65100);
  box-shadow: 0 0 0 3px rgba(255, 152, 0, .3);
  transform-origin: 50% -6px; animation: tnc-sway 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.2s);
}
@keyframes tnc-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* ---------- Zari band ---------- */
.tnc-zari { height: 12px; background: var(--tnc-zari) repeat-x center / auto 12px; }

/* ---------- Kolam divider (draws itself) ---------- */
.tnc-kolam { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 18px 0 10px; }
.tnc-kolam::before, .tnc-kolam::after { content: ""; flex: 0 1 140px; height: 1px; background: linear-gradient(90deg, transparent, var(--tnc-gold)); }
.tnc-kolam::after { background: linear-gradient(90deg, var(--tnc-gold), transparent); }
.tnc-kolam svg { width: 150px; height: 46px; overflow: visible; }
.tnc-kolam circle { fill: var(--tnc-maroon); opacity: .75; }
.tnc-kolam path { fill: none; stroke: var(--tnc-gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.tnc-kolam.is-in path { animation: tnc-draw 2.2s ease forwards; }
@keyframes tnc-draw { to { stroke-dashoffset: 0; } }

/* ---------- Kuthuvilakku lamp ---------- */
.tnc-lamp { width: 54px; height: 108px; filter: drop-shadow(0 0 14px rgba(255, 182, 39, .55)); }
.tnc-flame { transform-origin: 30px 26px; animation: tnc-flicker 1.5s ease-in-out infinite; }
.tnc-lamp:nth-of-type(2) .tnc-flame { animation-delay: -.6s; }
@keyframes tnc-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  30% { transform: scale(1.08, .93) rotate(2deg); opacity: .9; }
  60% { transform: scale(.94, 1.1) rotate(-1deg); }
}
.tnc-lamps { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: space-between; padding: 0 14px; pointer-events: none; z-index: 2; }

/* ---------- Petals ---------- */
.tnc-petals { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.tnc-petals i {
  position: absolute; top: -24px; width: 11px; height: 15px; border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #ffd54f, #ff9800); opacity: .9;
  animation: tnc-fall linear forwards;
}
.tnc-petals i.m { background: linear-gradient(135deg, #fff, #f1ead2); width: 8px; height: 12px; box-shadow: 0 0 3px rgba(0, 0, 0, .15); }
.tnc-petals i.r { background: linear-gradient(135deg, #ff6f8a, #b5253d); }
@keyframes tnc-fall { to { transform: translate(var(--dx, 60px), 110vh) rotate(var(--rot, 540deg)); } }

/* ---------- Corner kolam watermark ---------- */
.tnc-corner { position: fixed; width: 220px; height: 220px; pointer-events: none; z-index: 0; opacity: .14; color: var(--tnc-maroon); }
.tnc-corner svg { width: 100%; height: 100%; animation: tnc-spin 80s linear infinite; }
.tnc-corner-br { right: -70px; bottom: -70px; }
.tnc-corner-tl { left: -70px; top: -70px; }
@keyframes tnc-spin { to { transform: rotate(360deg); } }

/* =================== HOME PAGE (theme L) =================== */
body.tn-page .ax-sec { border-top: 0; }
body.tn-page .ax-sec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--tnc-zari) repeat-x center / auto 12px; z-index: 2; }
body.tn-page .ax-hero .tnc-lamps { bottom: 18px; padding: 0 28px; z-index: 3; }
body.tn-page .ax-hero .tnc-lamp { width: 64px; height: 128px; }
/* kovil arch frames for photos */
body.tn-page .ax-tile, body.tn-page .ax-card { border-radius: 160px 160px 18px 18px / 90px 90px 18px 18px !important; border: 3px solid var(--tnc-gold) !important; box-shadow: 0 0 0 4px #fffaf0, 0 0 0 6px rgba(201, 150, 46, .55), 0 30px 50px -30px rgba(122, 20, 40, .6) !important; }
body.tn-page .ax-tile-wide { border-radius: 260px 260px 18px 18px / 110px 110px 18px 18px !important; }
body.tn-page .ax-piece { border-radius: 120px 120px 18px 18px / 70px 70px 18px 18px !important; border: 2px solid var(--tnc-gold) !important; }
body.tn-page .ax-acc { border: 3px solid var(--tnc-gold) !important; border-radius: 140px 140px 18px 18px / 80px 80px 18px 18px !important; }
body.tn-page.site .ax-head .kicker::before { content: "❖ " !important; color: var(--tnc-gold) !important; }
body.tn-page.site .ax-head .kicker::after { content: " ❖" !important; color: var(--tnc-gold) !important; }
body.tn-page .ax-ribbon { background: linear-gradient(90deg, #7a1428, #9e1b32, #7a1428) !important; transform: none; margin: 0; border-top: 3px solid var(--tnc-gold); border-bottom: 3px solid var(--tnc-gold); }
body.tn-page .ax-ribbon span { color: #ffe9a8 !important; }
body.tn-page .ax-ribbon i { color: var(--tnc-gold-2) !important; }
body.tn-page .ax-opening { border: 2px solid var(--tnc-gold) !important; border-radius: 120px 120px 18px 18px / 60px 60px 18px 18px !important; text-align: center; padding-top: 34px !important; }

/* =================== DESKS (admin + member) =================== */
body.desk-body .desk-top { position: relative; }
body.desk-body .desk-main > .tnc-thoranam { margin-bottom: -42px; }
body.desk-body .tnc-zari-top { margin: 0; }
body.desk-body .overview-hero, body.desk-body .client-hero { padding-bottom: 70px !important; }
body.desk-body .overview-hero .tnc-lamps, body.desk-body .client-hero .tnc-lamps { padding: 0 10px; bottom: 4px; }
body.desk-body .overview-hero .tnc-lamp, body.desk-body .client-hero .tnc-lamp { width: 34px; height: 68px; }
body.desk-body .stat::before, body.desk-body .dash-card::before { height: 8px !important; background: var(--tnc-zari) repeat-x center / auto 8px !important; transform: scaleX(1) !important; opacity: .9; }
body.desk-body .client-group h3::before { content: "❖ "; color: var(--tnc-gold); }
body.desk-body .panel { position: relative; }
body.desk-body .desk-content .tnc-kolam { padding: 6px 0 2px; }
body.desk-body .desk-content .tnc-kolam svg { width: 120px; height: 36px; }
body.desk-body .desk-rail nav a.is-on::after { content: "🪔"; margin-left: 6px; font-size: 14px; }

@media (max-width: 700px) {
  .tnc-thoranam i { width: 14px; height: 26px; }
  .tnc-thoranam b { width: 12px; height: 12px; }
  .tnc-corner { display: none; }
  body.tn-page .ax-hero .tnc-lamp { width: 40px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .tnc-thoranam i, .tnc-thoranam b, .tnc-flame, .tnc-corner svg { animation: none !important; }
  .tnc-kolam path { stroke-dashoffset: 0; }
  .tnc-petals { display: none; }
}
@media print { .tnc-thoranam, .tnc-lamps, .tnc-petals, .tnc-corner, .tnc-kolam { display: none !important; } }

/* public pages footer: maroon, not near-black */
body.site .site-footer { background: linear-gradient(180deg, #7a1428, #5c0d1d) !important; }