/* Tyohaar edits (public/tyohaar.js): a festival's page with its rangoli,
   Navratri's garba circle of nine days, and the year's wheel of festivals.
   Moves are slow and soft; with reduced motion everything stands still
   (app.css stops every animation and transition). */
@property --turn{syntax:"<angle>";inherits:true;initial-value:0deg}
@property --day{syntax:"<color>";inherits:true;initial-value:#E9B824}
@property --spin{syntax:"<angle>";inherits:true;initial-value:0deg}

.ty-page{padding-top:20px;padding-bottom:64px}
.ty-crumbs{margin-bottom:18px}
.ty-hero{display:grid;gap:28px;align-items:center;margin-bottom:36px}
@media (min-width:900px){.ty-hero{grid-template-columns:minmax(0,1fr) auto;gap:48px}}
.ty-head{display:grid;gap:8px;max-width:640px;align-content:start}
.ty-h1{margin:0;font-size:clamp(32px,6vw,52px);line-height:1.08;color:var(--text-strong)}
.ty-h1 em{color:var(--action-ink)}
.ty-hi{margin:0;font-size:18px;color:var(--text-muted)}
.ty-when{margin:0;font-size:14px;color:var(--text-muted)}
.ty-when b{color:var(--text-strong);font-weight:500}
.ty-when .ty-on{color:var(--action-ink)}
.ty-line{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--text-body)}
.ty-hint{margin:6px 0 0;padding-left:12px;border-left:2px solid var(--gold-500);font-size:14px;line-height:1.5;color:var(--text-muted)}
.ty-h2{margin:0 0 14px;font-size:clamp(24px,4vw,32px);line-height:1.15;color:var(--text-strong)}
.ty-h2 em{color:var(--action-ink)}
.ty-sw{display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

/* ---------- The rangoli ---------- */
.ty-rangoli{display:block;width:100%;height:auto;overflow:visible}
.ty-rangoli path{stroke:rgba(0,0,0,.14);stroke-width:.5}
.ty-rangoli .ty-r-eye{fill:var(--surface-soft)}
.ty-r{transform-origin:0 0;transition:opacity .45s var(--ease)}
.ty-r.is-dim{opacity:.18}
/* It opens ring by ring, from the centre out. */
.ty-anim .ty-r{animation:ty-bloom .9s cubic-bezier(.2,.7,.2,1) backwards}
.ty-anim .ty-r4{animation-delay:.05s}.ty-anim .ty-r2{animation-delay:.2s}.ty-anim .ty-r3{animation-delay:.35s}.ty-anim .ty-r1{animation-delay:.45s}
@keyframes ty-bloom{from{opacity:0;transform:rotate(-40deg) scale(.55)}}
.ty-art{display:block;justify-self:center;width:240px;max-width:100%;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ty-art{transition:--spin 1.1s cubic-bezier(.3,.7,.2,1)}
.ty-art .ty-rangoli{transform:rotate(var(--spin))}
.ty-art:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
/* A slow turn while it is looked at. */
@media (hover:hover){.ty-art:hover .ty-r1{animation:ty-drift 24s linear infinite}}
@keyframes ty-drift{to{transform:rotate(360deg)}}

/* ---------- A festival's colours to choose from ---------- */
.ty-cols{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.ty-col{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px 8px 10px;border:1px solid var(--sand-300);border-radius:var(--radius-ui);background:var(--surface-soft);color:var(--text-strong);font:inherit;font-size:14px;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.ty-col:hover{border-color:var(--action-ink)}
.ty-col:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ty-col[aria-pressed="true"]{border-color:var(--action-ink);background:var(--sand-100);box-shadow:inset 0 0 0 1px var(--action-ink)}
.ty-col-all{display:inline-flex}
.ty-col-all .ty-sw{width:16px;height:16px}
.ty-col-all .ty-sw+.ty-sw{margin-left:-6px}

/* ---------- Navratri's garba circle ---------- */
.ty-navratri{transition:--day .9s var(--ease)}
.ty-garba-box{display:grid;justify-items:center;gap:14px}
.ty-garba{--size:min(360px,86vw);--bead:calc(var(--size) * .15);--R:calc(var(--size) * .4);position:relative;width:var(--size);height:var(--size);transition:--turn .9s cubic-bezier(.45,.05,.2,1)}
/* The day's colour as a soft glow behind the circle. */
.ty-garba::before{content:"";position:absolute;inset:-4%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--day) 30%,transparent),color-mix(in srgb,var(--day) 8%,transparent) 70%,transparent)}
.ty-garba-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ty-garba-path circle{fill:none;stroke:var(--gold-500);stroke-width:.5;stroke-dasharray:1.2 2.4;transform-origin:50% 50%;animation:ty-drift 90s linear infinite}
.ty-garba-ring{position:absolute;inset:0;transform:rotate(var(--turn))}
/* Each day stands at its place round the ring, and stays upright as it turns. */
.ty-bead{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:var(--bead);height:var(--bead);margin:calc(var(--bead) / -2) 0 0 calc(var(--bead) / -2);padding:0;border:3px solid var(--surface-soft);border-radius:50%;background:var(--sw);box-shadow:0 2px 8px rgba(0,0,0,.14),inset 0 0 0 1px rgba(0,0,0,.12);font:inherit;font-size:16px;font-weight:600;cursor:pointer;transform:rotate(calc(var(--i) * 40deg)) translateY(calc(var(--R) * -1)) rotate(calc(var(--i) * -40deg - var(--turn))) scale(var(--k,1));transition:--k .3s var(--ease),box-shadow .3s var(--ease)}
.ty-bead{--k:1}
.ty-ink-dark{color:var(--text-strong)}
.ty-ink-light{color:var(--surface-soft)}
.ty-bead:hover{--k:1.08}
.ty-bead:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ty-bead[aria-pressed="true"]{--k:1.28;box-shadow:0 0 0 3px var(--surface-soft),0 0 0 5px var(--sw),0 6px 18px rgba(0,0,0,.18)}
.ty-bead.is-today{border-color:var(--gold-500)}
.ty-aaj{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:var(--radius-ui);background:var(--gold-500);color:var(--text-strong);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.04em;white-space:nowrap}
@property --k{syntax:"<number>";inherits:false;initial-value:1}
/* The chosen day, in the middle. */
.ty-garba-mid{position:absolute;left:50%;top:50%;width:48%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;text-align:center}
.ty-garba-mid>*{margin:0;animation:ty-fade .5s var(--ease) backwards}
.ty-garba-mid>:nth-child(2){animation-delay:.06s}.ty-garba-mid>:nth-child(3){animation-delay:.1s}.ty-garba-mid>:nth-child(4){animation-delay:.14s}
@keyframes ty-fade{from{opacity:0;transform:translateY(6px)}}
.ty-mid-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.ty-mid-k b{color:var(--action-ink);font-weight:600}
.ty-mid-h{font-size:clamp(22px,6vw,30px);line-height:1.1;color:var(--text-strong)}
.ty-mid-hi{font-size:15px;color:var(--text-body)}
.ty-mid-d{font-size:13px;line-height:1.3;color:var(--text-muted)}
.ty-garba-nav{display:flex;gap:10px}
.ty-garba-nav .btn{min-height:44px;padding-inline:18px}
/* The circle comes in turning, the days one after another. */
.ty-anim .ty-garba-ring{animation:ty-ring-in 1.2s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes ty-ring-in{from{opacity:0;transform:rotate(calc(var(--turn) - 120deg)) scale(.85)}}

/* The chosen day's styles. */
.ty-sel{margin-bottom:12px}
.ty-pick{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;padding:18px 20px;margin-bottom:16px;border-radius:var(--radius-ui);background:linear-gradient(100deg,color-mix(in srgb,var(--day) 26%,var(--surface-soft)),var(--surface-soft) 75%)}
.ty-pick>div{display:grid;gap:2px}
.ty-pick-k{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.ty-pick-k b{color:var(--action-ink);font-weight:500}
.ty-pick-h{margin:0;font-size:clamp(26px,4.5vw,36px);line-height:1.1;color:var(--text-strong)}
.ty-pick-h span{font-size:.6em;color:var(--text-muted)}
.ty-pick-d{margin:0;font-size:15px;color:var(--text-body)}
.ty-count{margin:0 0 12px;font-size:14px;color:var(--text-muted)}
.ty-pick .ty-count{margin:0}
.ty-grid{margin-bottom:8px}
.ty-none{display:grid;gap:12px;justify-items:start;padding:20px;border-radius:var(--radius-ui);background:var(--surface-soft)}
.ty-none p{margin:0;color:var(--text-body)}
.ty-note{margin:0 0 28px;font-size:13px;color:var(--text-muted)}

/* ---------- Tips, and the festivals to come ---------- */
.ty-tips{margin:8px 0 32px;padding:20px 22px;border-radius:var(--radius-ui);background:var(--surface-soft)}
.ty-tips ol{margin:0;padding:0;list-style:none;counter-reset:ty;display:grid;gap:12px;line-height:1.55;color:var(--text-body)}
.ty-tips li{counter-increment:ty;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.ty-tips li::before{content:counter(ty);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold-500);color:var(--text-strong);font-size:13px;font-weight:600}
.ty-more .ty-chips{display:flex;flex-wrap:wrap;gap:8px}
.ty-more .fchip{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;min-height:44px}
.ty-more .fchip .ty-sw{width:14px;height:14px}

/* ---------- The year's wheel ---------- */
.ty-wheel{position:relative;width:400px;max-width:100%;justify-self:center;aspect-ratio:1}
.ty-wheel svg{display:block;width:100%;height:100%;overflow:visible}
.ty-w-ring{fill:none;stroke:var(--sand-300);stroke-width:1.5}
.ty-w-tick{stroke:var(--sand-300);stroke-width:1.5}
.ty-w-m{fill:var(--text-muted);font-size:12px;text-anchor:middle;dominant-baseline:middle;letter-spacing:.04em}
.ty-w-arc{fill:none;stroke:var(--gold-500);stroke-width:4;stroke-linecap:round;transform-origin:160px 160px;transition:stroke-dasharray 1s cubic-bezier(.45,.05,.2,1)}
.ty-anim .ty-w-arc{animation:ty-arc-in 1.6s cubic-bezier(.3,.6,.2,1) .2s backwards}
@keyframes ty-arc-in{from{stroke-dasharray:0 900}}
.ty-w-today circle{fill:var(--action-ink);stroke:var(--surface-soft);stroke-width:2.5}
.ty-w-dot{cursor:pointer;outline:none}
.ty-w-hit{fill:transparent}
.ty-w-halo{fill:none;stroke:var(--sw);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ty-w-pin{fill:var(--sw);stroke:color-mix(in srgb,var(--sw) 72%,var(--text-strong));stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:transform .3s var(--ease)}
.ty-w-dot:hover .ty-w-pin{transform:scale(1.2)}
.ty-w-dot.is-on .ty-w-pin{transform:scale(1.25)}
.ty-w-dot.is-on .ty-w-halo,.ty-w-dot:focus-visible .ty-w-halo{opacity:1;transform:scale(1)}
.ty-w-dot:focus-visible .ty-w-halo{stroke:var(--focus-ring)}
.ty-anim .ty-w-pin{animation:ty-pop .5s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(.3s + var(--n,0) * 40ms)}
@keyframes ty-pop{from{opacity:0;transform:scale(0)}}
.ty-wheel-mid{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;text-align:center}
.ty-wheel-mid>*{margin:0;animation:ty-fade .5s var(--ease) backwards}
.ty-wheel-mid>:nth-child(2){animation-delay:.06s}.ty-wheel-mid>:nth-child(3){animation-delay:.1s}.ty-wheel-mid>:nth-child(4){animation-delay:.14s}
.ty-mid-go{margin-top:6px;padding:6px 4px;font-size:14px;font-weight:500;color:var(--action-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- The festivals in the order they come ---------- */
.ty-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ty-tile{position:relative;display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:14px 16px 14px 14px;min-height:44px;border:1px solid var(--sand-300);border-radius:var(--radius-ui);background:linear-gradient(110deg,color-mix(in srgb,var(--sw) 14%,var(--surface-soft)),var(--surface-soft) 60%);color:var(--text-strong);text-decoration:none;overflow:hidden;transition:border-color var(--dur) var(--ease),transform .3s var(--ease)}
.ty-tile:hover{border-color:var(--action-ink);transform:translateY(-2px)}
.ty-tile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ty-tile.is-now{border-color:var(--action-ink);box-shadow:inset 0 0 0 1px var(--action-ink)}
.ty-tile-art{width:72px;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.ty-tile:hover .ty-tile-art{transform:rotate(60deg)}
.ty-tile-t{display:grid;gap:3px;min-width:0}
.ty-tile b{font-size:21px;font-weight:400;line-height:1.2}
.ty-tile-hi{font-size:14px;color:var(--text-muted)}
.ty-tile small{font-size:13px;color:var(--text-muted)}
.ty-tile small em{font-style:normal;color:var(--action-ink);font-weight:500}
.ty-tile-sw{display:flex;gap:4px;margin-top:4px}
.ty-tile-sw .ty-sw{width:14px;height:14px}

@media (max-width:600px){
  .ty-hero{gap:20px;margin-bottom:28px}
  .ty-tiles{grid-template-columns:1fr}
  .ty-tile{grid-template-columns:60px 1fr}
  .ty-tile-art{width:60px}
  .ty-tile b{font-size:19px}
  .ty-pick{padding:14px 16px}
  .ty-bead{font-size:15px;border-width:2px}
  .ty-wheel{width:100%}
  .ty-art{width:min(180px,48vw)}
}

/* ---------- In time to wear ----------
   The days an order placed today cannot reach are softened; the chosen day
   says in a line whether it will arrive in time, and a festival ahead says
   by when to order. */
.ty-bead.is-late::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:rgba(var(--paper-rgb),.58);pointer-events:none}
.ty-bead.is-late[aria-pressed="true"]::after{background:rgba(var(--paper-rgb),.3)}
.ty-late-key{margin:0;font-size:13px;color:var(--text-muted);text-align:center}
.ty-fit{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--text-muted)}
.ty-fit.is-ok{color:var(--text-body)}
.ty-fit b{color:var(--action-ink);font-weight:600}
.ty-order{margin:0;font-size:15px;color:var(--text-body)}
.ty-order b{color:var(--action-ink);font-weight:600}