/* Mayur: the peacock-feather fan and its opening. Page, type and sections come from base.css. */
:root{--fh:min(54vw,232px)}

/* ---------- the feather fan (shared by the opening and the crests) ---------- */
.fan{position:relative;width:100%;max-width:calc(var(--fh) * 1.9);height:var(--fh);margin:0 auto}
.feather{position:absolute;left:50%;bottom:0;width:calc(var(--fh) / 4);height:var(--fh);margin-left:calc(var(--fh) / -8);overflow:visible;
  transform-origin:50% 100%;transform:rotate(calc(var(--k) * 12.5deg));will-change:transform}
.feather .glint{transform-box:fill-box;transform-origin:center}

/* ---------- opening ---------- */
.js .topen{background:radial-gradient(120% 80% at 50% 38%,var(--from) 0%,var(--to) 70%,#061f1d 100%)}
/* closed: the feathers lie almost on top of each other, like a folded fan */
.topen .feather{transform:rotate(calc(var(--k) * 1.1deg)) scale(.9);transition:transform 1.25s var(--spring);transition-delay:var(--d)}
.topen.open .feather{transform:rotate(calc(var(--k) * 12.5deg)) scale(1)}
.topen .fan{transition:transform 1.1s var(--ease),opacity .9s ease}
.topen.open .glint{animation:glint 1.1s ease-out calc(var(--d) + .7s) both}
@keyframes glint{0%{opacity:.35;transform:scale(1)}40%{opacity:1;transform:scale(2.4)}100%{opacity:.35;transform:scale(1)}}
.seal{position:absolute;left:50%;bottom:-34px;width:84px;height:84px;margin-left:-42px;z-index:20;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#F6E7AE,#C9A24A 55%,#8C6A22);color:#3A2A08;display:flex;align-items:center;justify-content:center;gap:3px;
  font-family:'Fraunces',serif;font-size:24px;box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 0 0 3px rgba(255,255,255,.25);
  transition:transform .6s var(--spring),opacity .5s ease;-webkit-tap-highlight-color:transparent;animation:breathe 2.8s ease-in-out infinite}
.seal i{font-style:italic;font-size:15px;opacity:.8}
.seal b{font-weight:500}
.seal-ring{position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--line);opacity:.7;animation:ring 2.8s ease-out infinite}
@keyframes breathe{50%{transform:scale(1.05)}}
@keyframes ring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.topen.open .seal{transform:scale(0) rotate(90deg);opacity:0;animation:none;pointer-events:none}
.topen-copy{margin-top:34px}
/* lift: the open fan rises and shrinks towards where the crest sits on the page, as the curtain fades */
.topen.lift .fan{transform:translateY(-22vh) scale(.6);opacity:0}

/* ---------- page ---------- */
.crest{--fh:min(30vw,128px);margin-top:44px;animation:sway 7s ease-in-out infinite alternate;transform-origin:50% 100%}
.crest.sm{--fh:84px;margin-top:0}
@keyframes sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.arch{left:20px;right:20px;bottom:0;top:calc(44px + min(30vw,128px) + 40px);width:calc(100% - 40px);height:calc(100% - 44px - min(30vw,128px) - 40px)}
.thero-in{padding-top:96px}

/* ===== countdown: four peacock-eye dials. A gold ring round each fills as its unit runs down. ===== */
.count{gap:12px;max-width:330px}
.count div{position:relative;aspect-ratio:1;border:0;border-radius:50%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 34%,#22A08A 0%,#0F5F58 52%,#0A3B39 100%);box-shadow:inset 0 0 0 5px rgba(6,31,29,.55),inset 0 0 14px rgba(0,0,0,.4),0 8px 18px rgba(0,0,0,.3)}
.count .ring{display:block;position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);transform:rotate(-90deg)}
.count .rt{stroke:rgba(217,180,90,.25);stroke-width:1.2}
.count .rp{stroke:#E7CF8C;stroke-width:2.2;stroke-linecap:round}
.count b{position:relative;font-family:'Fraunces',serif;font-weight:500;font-size:25px;color:#F7E9BD}
.count span{position:relative;font-size:8.5px;color:#D9B45A}
.script .count span{font-size:10.5px}
/* ===== functions: a gold thread with peacock-eye beads, each function on an arched plaque with a date medallion ===== */
.tl{gap:18px}
.tl li{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;padding:16px 16px 16px 14px;border-radius:30px 30px 12px 12px;
  border:1px solid rgba(217,180,90,.45);background:linear-gradient(165deg,rgba(34,160,138,.26),rgba(6,31,29,.3));box-shadow:0 10px 22px rgba(0,0,0,.22)}
.tl li.main{border-color:var(--line);background:linear-gradient(165deg,rgba(217,180,90,.24),rgba(34,160,138,.16))}
.tl .ev-date{display:flex;width:58px;height:58px;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 0 3px rgba(6,31,29,.5),0 0 0 4px rgba(217,180,90,.4);color:#F7E9BD;background:radial-gradient(circle,#14306E,#10184F)}
.tl .ev-date b{font-family:'Fraunces',serif;font-weight:500;font-size:22px}
.tl .ev-date i{font-size:8.5px;color:#D9B45A}
.tl .ev-full,.tl .ev-sep{display:none}
.tl-dot{top:50%;margin-top:-9px;background:radial-gradient(circle,#1B2A8A 0 30%,#14A396 31% 58%,var(--line) 59%)}

/* ===== family, notes and function drawings in Mayur's colours ===== */
.ev-art{right:2px;top:2px}
.letter{border-radius:26px 26px 10px 10px;background:linear-gradient(165deg,rgba(34,160,138,.24),rgba(6,31,29,.3));border-color:rgba(217,180,90,.5)}
.family{padding:26px 18px;border-radius:120px 120px 16px 16px;border:1px solid rgba(217,180,90,.4);background:linear-gradient(180deg,rgba(34,160,138,.16),transparent)}