/* Genda: a curtain of marigold garlands with a brass bell, and a page full of small moving details.
   Page, type and sections come from base.css. */
:root{--deep:#A85A08;--leaf:#5E8C3A}

/* ---------- opening: the marigold curtain ---------- */
.js .topen{background:none;display:block}
.topen::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 40%,#FFF4D6,#F6C96A);transition:opacity 1.1s ease .55s}
.curtain{position:relative;width:100%;max-width:480px;height:100%;margin:0 auto}
.gstr{position:absolute;top:-6px;left:calc(var(--k) * 10% - .3%);width:10.6%;height:calc(100% + 6px);transform-origin:50% 0;will-change:transform;
  animation:g-hang 4.6s ease-in-out calc(var(--k) * -.55s) infinite alternate;filter:drop-shadow(0 3px 3px rgba(120,60,0,.22))}
@keyframes g-hang{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
/* the bell is rung: every garland shivers, then they part from the middle outwards */
.topen.open .gstr{animation:g-shiver .9s ease-in-out calc(var(--e) * 40ms)}
@keyframes g-shiver{0%,100%{transform:rotate(0)}20%{transform:rotate(1.6deg)}45%{transform:rotate(-1.4deg)}70%{transform:rotate(.8deg)}}
.topen.a2 .gstr{animation:none;transform:translateX(calc(var(--dir) * var(--m) * 108%)) rotate(calc(var(--dir) * -9deg));
  transition:transform 1.75s cubic-bezier(.62,0,.28,1) calc(var(--e) * 75ms)}
.topen.a2::before{opacity:0}

.plaque{position:absolute;left:50%;top:50%;width:min(76%,292px);margin-left:calc(min(76%,292px) / -2);transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 20px 26px;text-align:center;color:#7A3E06;
  background:linear-gradient(180deg,#FFFBEE,#FFF1CF);border-radius:160px 160px 20px 20px;
  box-shadow:0 0 0 1px #D9A93A,0 0 0 6px #FFF7E0,0 0 0 7px #D9A93A,0 18px 40px rgba(110,55,0,.4);transition:opacity .6s ease,transform .7s var(--ease)}
.topen.a2 .plaque{opacity:0;transform:translateY(-50%) scale(.9);pointer-events:none}
.plaque .invoc{font-size:22px;line-height:1.2;color:var(--deep)}
.plaque .invoc.deva{font-size:14px}
.plaque .to-names{font-size:30px;color:#7A3E06}
.script .plaque .to-names{font-size:24px}

/* the bell */
.gbell{display:block;width:84px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% 6%;animation:g-wait 3.2s ease-in-out infinite}
.gbell svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 8px rgba(110,55,0,.35))}
.clapper{transform-box:view-box;transform-origin:30px 58px}
@keyframes g-wait{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.topen.open .gbell,.gbell.rung{animation:g-ring 1.3s cubic-bezier(.3,.2,.3,1)}
.topen.open .gbell .clapper,.gbell.rung .clapper{animation:g-clap 1.3s cubic-bezier(.3,.2,.3,1)}
@keyframes g-ring{0%{transform:rotate(-3deg)}12%{transform:rotate(19deg)}30%{transform:rotate(-16deg)}48%{transform:rotate(11deg)}66%{transform:rotate(-7deg)}84%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@keyframes g-clap{0%{transform:rotate(0)}12%{transform:rotate(-24deg)}30%{transform:rotate(22deg)}48%{transform:rotate(-15deg)}66%{transform:rotate(9deg)}100%{transform:rotate(0)}}

/* ---------- page ---------- */
.thero{padding-top:128px;padding-bottom:96px}
.frame{left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.swag{position:absolute;left:0;top:-4px;width:100%;height:auto;overflow:visible;transform-origin:50% 0;animation:g-swag 6s ease-in-out infinite alternate;filter:drop-shadow(0 4px 4px rgba(120,60,0,.2))}
@keyframes g-swag{from{transform:skewX(-1.2deg)}to{transform:skewX(1.2deg)}}
.js .card:not(.entered) .swag{translate:0 -130%}
.card.entered .swag{transition:translate 1.3s cubic-bezier(.3,1.35,.45,1) .1s}
.gcorner{position:absolute;bottom:0;width:38%;max-width:170px;height:auto;overflow:visible;filter:drop-shadow(0 4px 4px rgba(120,60,0,.2))}
.gcorner.bl{left:0;transform-origin:0 100%}
.gcorner.br{right:0;transform:scaleX(-1);transform-origin:50% 50%}
.js .card:not(.entered) .gcorner{scale:0;opacity:0}
.card.entered .gcorner{transition:scale 1.2s var(--spring) .7s,opacity .6s ease .7s}
.gcorner.bl{transform-origin:0 100%}
.card.entered .gcorner.br{transition-delay:.9s}
.thero-in>:first-child{margin-top:auto}
.thero-in .invoc{display:block;font-size:26px;line-height:1.2;color:var(--deep)}
.thero-in .invoc.deva{font-size:15px}
.names{color:var(--deep)}
/* names letter by letter */
.ch{display:inline-block;font-style:normal}
.js .card:not(.entered) .ch{opacity:0}
.card.entered .names.spell .a{animation:none;opacity:1}
.card.entered .ch{animation:g-letter .7s var(--spring) both;animation-delay:calc(.7s + var(--c) * 70ms)}
@keyframes g-letter{from{opacity:0;transform:translateY(.5em) rotate(8deg) scale(.7)}to{opacity:1;transform:none}}

h2,.tl time{color:var(--deep)}
.motif{color:var(--deep)}
/* the little drawings keep moving once drawn */
.m-glass svg{animation:g-glass 7s ease-in-out 2.5s infinite}
@keyframes g-glass{0%,78%{transform:rotate(0)}90%,100%{transform:rotate(180deg)}}
.m-mala svg{transform-origin:50% 10%;animation:g-wait 4s ease-in-out infinite}
.m-gate .pin{transform-box:view-box;transform-origin:32px 48px;animation:g-pin 2.4s ease-in-out infinite}
@keyframes g-pin{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* countdown: each number flips over as it changes */
.tfoot .gbell{width:68px}
.bless-cue{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);max-width:24ch}
.script .bless-cue{letter-spacing:0;font-size:14px;text-transform:none}

/* ===== countdown: a split-flap board hung on marigold threads. Each tile sways and flips as its number changes. ===== */
.count{gap:11px;max-width:330px;padding-top:30px;perspective:600px;background:linear-gradient(#B5630A,#B5630A) 0 0/100% 1px no-repeat}
.count div{position:relative;border:0;border-radius:9px;padding:15px 0 9px;background:linear-gradient(180deg,#8C4708 0 49%,#6E3404 51% 100%);box-shadow:0 10px 18px rgba(90,40,0,.3),inset 0 1px 0 rgba(255,255,255,.16);
  transform-origin:50% -30px;animation:g-tile 4.4s ease-in-out infinite alternate}
.count div:nth-child(2){animation-delay:-1.1s}.count div:nth-child(3){animation-delay:-2.2s}.count div:nth-child(4){animation-delay:-3.3s}
@keyframes g-tile{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.count div::before{content:"";position:absolute;left:50%;top:-30px;width:1px;height:30px;background:#B5630A}
.count div::after{content:"";position:absolute;left:50%;top:-37px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:radial-gradient(circle,#C85A06 0 20%,#FBC748 22% 50%,#F28C0F 52%)}
.count b{font-family:'Fraunces',serif;font-weight:500;font-size:30px;color:#FFF4D6;backface-visibility:hidden;background:linear-gradient(transparent 48%,rgba(0,0,0,.4) 48% 52%,transparent 52%)}
.count b.tk{animation:g-flip .55s cubic-bezier(.3,.7,.3,1)}
@keyframes g-flip{from{transform:rotateX(-88deg);opacity:.2}to{transform:none;opacity:1}}
.count span{color:#FAD67F}
/* ===== functions: festival tickets. An orange stub carries the date; a perforation parts it from the details. ===== */
.tl{gap:18px;padding-left:0;max-width:336px}
.tl-line,.tl-dot{display:none}
.tl li{position:relative;display:grid;grid-template-columns:70px 1fr;padding:0;border:0;border-radius:14px;overflow:hidden;background:#FFFBEE;box-shadow:0 10px 20px rgba(120,60,0,.16)}
.tl li:nth-child(odd){rotate:-1.2deg}.tl li:nth-child(even){rotate:1.2deg}
.tl li.main{background:#FFF6D8;box-shadow:0 0 0 1.5px var(--line),0 12px 24px rgba(120,60,0,.2)}
.tl .ev-date{display:flex;color:#fff;background:linear-gradient(180deg,#F5980F,#E06A08);padding:16px 0}
.tl li:nth-child(even) .ev-date{background:linear-gradient(180deg,#F8B41F,#EE8C0B)}
.tl .ev-date b{font-family:'Fraunces',serif;font-weight:500;font-size:30px}
.tl .ev-date em{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.script .tl .ev-date em{letter-spacing:0;font-size:11px;text-transform:none}
.ev-body{padding:14px 16px 14px 18px;border-left:2px dashed rgba(217,134,11,.55)}
.tl li::before,.tl li::after{content:"";position:absolute;left:62px;width:16px;height:16px;border-radius:50%;background:var(--from);z-index:1}
.tl li::before{top:-8px}.tl li::after{bottom:-8px;background:var(--to)}
.tl .ev-full,.tl .ev-sep{display:none}
.js .tl li.rv{transform:translateY(22px)}

/* ===== family, notes and function drawings in Genda's colours ===== */
:root{--accent:#A85A08}
.ev-art{right:14px;top:12px;color:#E06A08}
.family h3{color:var(--deep)}
.family{padding:24px 18px;border-radius:18px;background:#FFFBEE;box-shadow:0 10px 22px rgba(120,60,0,.12);border-top:5px solid #F28C0F}
.letter{background:#FFFBEE;border:0;border-radius:16px;box-shadow:0 10px 22px rgba(120,60,0,.14);border-left:5px solid #F28C0F;rotate:-.8deg}