:root { --masuk: cubic-bezier(.2, 0, 0, 1); }
@font-face { font-family: "TK Serif"; src: url("card-fonts/card-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* Home hero, design D. From docs/design/redesign-2026-10/prototype/index.html. Loaded on the home page only. */
main > section.hero-d.band-plum:first-child { padding: 112px 24px 150px; overflow: hidden; }
.hero-d .wrap { padding-inline: 0; }
.copy { position: relative; z-index: 5; margin-top: 32px; text-align: center; }
.copy .hero-title { max-width: 18ch; margin-inline: auto; }
.copy .guest { display: inline; }
.copy .hero-sub { margin: var(--s-16) auto 0; }
.copy .btn-row { justify-content: center; margin-top: var(--s-24); }

.arc{position:relative;height:340px;max-width:1120px;margin:0 auto}
.slot{position:absolute;left:50%;top:0;width:var(--w);height:calc(var(--w)*4/3);margin-left:calc(var(--w)/-2);
  transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s,1));transition:transform .7s var(--masuk),opacity .4s;z-index:var(--z)}
.s1{--w:172px;--x:-400px;--y:74px;--r:-13deg;--z:1}
.s2{--w:190px;--x:-205px;--y:22px;--r:-6deg;--z:2}
.s3{--w:214px;--x:0px;--y:0px;--r:0deg;--z:3}
.s4{--w:190px;--x:205px;--y:22px;--r:6deg;--z:2}
.s5{--w:172px;--x:400px;--y:74px;--r:13deg;--z:1}
.js .enter .slot{transform:translate(0,60px) rotate(0deg) scale(.7);opacity:0}
.bob{height:100%;animation:bob var(--d,7s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes bob{50%{transform:translateY(-9px)}}
.card{position:relative;height:100%;border-radius:20px;overflow:hidden;box-shadow:0 18px 36px #1F2A5738;font-size:calc(var(--w)/11.5);line-height:1.2;transition:transform .25s var(--masuk)}
.slot:hover .card{transform:translateY(-6px) scale(1.03)}
.card svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.txt{position:absolute;left:0;right:0;text-align:center;padding:0 12px}
.ev{font-weight:800;font-size:.6em;letter-spacing:.16em}
.nm{font:400 1.8em/1.02 var(--font-display);margin:.18em 0 .28em}
.gs{font-size:.7em}
.gn{font:italic 400 1.4em var(--font-display);display:block}
.swap{display:inline-block;transition:opacity .2s,transform .2s}.swap.out{opacity:0;transform:translateY(-8px)}.gn.swap{display:block}


/* Scene motion: transform and opacity only */
.card svg *{transform-box:fill-box}
.tw{animation:tw 3s ease-in-out infinite}.tw.b{animation-delay:1s}.tw.c{animation-delay:2s}
@keyframes tw{50%{opacity:.2}}
.sway{transform-origin:50% 0;animation:sway 4.5s ease-in-out infinite}.sway.b{animation-duration:5.5s;animation-delay:-2s}.sway.c{animation-duration:3.8s;animation-delay:-1s}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.sun{animation:sun 9s ease-in-out infinite}@keyframes sun{50%{transform:translateY(16px)}}
.bird{animation:bird 12s linear infinite}@keyframes bird{from{transform:translateX(-40px)}to{transform:translateX(250px)}}.bird.b{animation-delay:-5s}
.glow{animation:glow 3.2s ease-in-out infinite}@keyframes glow{50%{opacity:.45}}
.rocket{animation:rocket 5s ease-in-out infinite}@keyframes rocket{50%{transform:translate(10px,-14px) rotate(4deg)}}
.flame{transform-origin:50% 0;animation:flame .35s ease-in-out infinite alternate}@keyframes flame{to{transform:scaleY(.65)}}
.planet{transform-origin:50% 50%;animation:planet 8s ease-in-out infinite}@keyframes planet{50%{transform:translateY(7px) rotate(-8deg)}}
.stamp{transform-origin:50% 50%;animation:stamp 6s var(--masuk) infinite}
@keyframes stamp{0%,8%{opacity:0;transform:scale(1.7)}16%,88%{opacity:.8;transform:scale(1) rotate(-12deg)}100%{opacity:0;transform:scale(1) rotate(-12deg)}}
.line{transform-origin:0 50%;animation:line 6s ease-out infinite}.line.b{animation-delay:.25s}.line.c{animation-delay:.5s}
@keyframes line{0%{transform:scaleX(0)}18%,100%{transform:scaleX(1)}}
.cloud{animation:cloud 10s ease-in-out infinite}@keyframes cloud{50%{transform:translateX(16px)}}
.block{animation:block 2.6s ease-in-out infinite}.block.b{animation-delay:.3s}.block.c{animation-delay:.6s}
@keyframes block{50%{transform:translateY(-5px)}}
.diam *{animation-play-state:paused!important}

/* Any card can take any place on the arc, at the same sizes as .s1 to .s5. */
@media (min-width: 761px) {
  .m-fan .slot, .m-flip .slot { --w: 214px; }
  .m-fan .p0, .m-flip .p0 { --x: 0px; --y: 0px; --r: 0deg; --s: 1; --z: 3; }
  .m-fan .p1, .m-flip .p1 { --x: 205px; --y: 22px; --r: 6deg; --s: .89; --z: 2; }
  .m-fan .p2, .m-flip .p2 { --x: 400px; --y: 74px; --r: 13deg; --s: .8; --z: 1; }
  .m-fan .p3, .m-flip .p3 { --x: -400px; --y: 74px; --r: -13deg; --s: .8; --z: 1; }
  .m-fan .p4, .m-flip .p4 { --x: -205px; --y: 22px; --r: -6deg; --s: .89; --z: 2; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .m-fan .p1, .m-flip .p1 { --x: 160px; --s: .8; }
  .m-fan .p2, .m-flip .p2 { --x: 300px; --s: .73; }
  .m-fan .p3, .m-flip .p3 { --x: -300px; --s: .73; }
  .m-fan .p4, .m-flip .p4 { --x: -160px; --s: .8; }
}

/* Fan: closes into one pile. */
.m-fan.closed .p0 { --x: 0px; --y: 10px; --r: 0deg; --s: 1; }
.m-fan.closed .p1 { --x: 14px; --y: 14px; --r: 3deg; --s: .96; }
.m-fan.closed .p2 { --x: 28px; --y: 18px; --r: 6deg; --s: .92; }
.m-fan.closed .p3 { --x: -28px; --y: 18px; --r: -6deg; --s: .92; }
.m-fan.closed .p4 { --x: -14px; --y: 14px; --r: -3deg; --s: .96; }

/* Flip: the card reaching the middle turns round and shows the guest's name. */
.m-flip .bob { perspective: 900px; }
.card .gs { transition: opacity .3s; }
.m-flip .card .gs { opacity: 0; }
.flipper { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--masuk); }
.flipper > .card, .flipper > .back { backface-visibility: hidden; }
.m-flip .p0 .flipper { transform: rotateY(180deg); }
.m-flip .slot:hover .card { transform: none; }
.back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: .5em; padding: 14px; text-align: center; color: var(--plum); background: #FBF7EF; border: 3px solid #F2A93B; border-radius: 20px; box-shadow: 0 18px 36px #1F2A5738; font-size: calc(var(--w) / 11.5); line-height: 1.2; }
.back .nm { margin: 0; }
.back .gs { margin-top: .9em; font-size: .85em; }
.back .gn { display: block; color: var(--plum); font-size: 1.75em; line-height: 1.1; margin-top: .15em; }
.m-flip .slot.hop { opacity: 0; transition: transform 0s .3s, opacity .3s; }

.copy{text-align:center;position:relative;z-index:5}


/* Guest card */
.tamu{position:relative;z-index:6;width:min(900px,100% - 48px);margin:-104px auto 0;background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;display:flex;gap:24px;align-items:center;box-shadow:0 20px 48px #161B331F}
.tamu>div{flex:1;min-width:0}.tamu label{display:block;font-weight:600;font-size:22px;margin-bottom:10px}
.tamu input{width:100%;height:60px;padding:0 20px;background:var(--mist);border:2px solid var(--plum);border-radius:16px;font:600 20px var(--font-sans);color:var(--ink)}
.hint{font-size:15px;color:var(--muted);margin-top:10px}
.pesan{background:#FCE7C2;border-radius:20px;padding:18px;font-size:16px;line-height:23px}.pesan b{display:block;color:var(--plum);font-size:15px;margin-top:8px}
.panah{color:var(--janur-text);font-size:28px}

@media (max-width: 1100px) {
  .s1{--x:-300px;--s:.82}.s5{--x:300px;--s:.82}.s2{--x:-160px;--s:.9}.s4{--x:160px;--s:.9}
}
@media (max-width: 760px) {
  main > section.hero-d.band-plum:first-child { padding: 88px 12px 110px; }
  .hero-d .wrap { display: flex; flex-direction: column; }
  .copy { order: -1; margin-top: 0; }
  .copy .btn-row .btn { width: 100%; }
  .arc{height:290px;margin:20px -12px 0;width:calc(100% + 24px);max-width:none}
  .slot{--w:186px}
  .p0{--x:0px;--y:6px;--r:0deg;--s:1;--z:3}
  .p1{--x:112px;--y:30px;--r:9deg;--s:.82;--z:2}
  .p2{--x:230px;--y:50px;--r:14deg;--s:.7;--z:1}
  .p3{--x:-230px;--y:50px;--r:-14deg;--s:.7;--z:1}
  .p4{--x:-112px;--y:30px;--r:-9deg;--s:.82;--z:2}
  .tamu{flex-direction:column;align-items:stretch;gap:12px;padding:18px;margin:-90px 20px 0;width:auto;border-radius:24px}.panah{display:none}.tamu label{font-size:19px}.tamu input{height:52px;font-size:18px}
}
@media (prefers-reduced-motion: reduce) {
  .arc, .arc *, .tamu * { animation: none !important; transition: none !important; }
}

.hs0 { --d:7.5s;--dl:-1s }
.hs1 { color:#fff }
.hs2 { bottom:20px }
.hs3 { color:#FFC84A }
.hs4 { display:inline }
.hs5 { --d:6.5s;--dl:-3s }
.hs6 { color:#FBF7EF }
.hs7 { color:#F7D774 }
.hs8 { --d:8s }
.hs9 { color:#2B2622 }
.hs10 { top:20px }
.hs11 { color:#A8461F }
.hs12 { --d:7s;--dl:-2s }
.hs13 { color:#3D2A18 }
.hs14 { bottom:22px }
.hs15 { color:#C4432F }
.hs16 { --d:6s;--dl:-4s }
.hs17 { color:#143E73 }
.hs18 { color:#C2553C }

/* Fit the name box inside a 1440 x 900 first view. */
@media (min-width: 761px) {
  main > section.hero-d.band-plum:first-child { padding-top: 100px; }
  .arc { height: 290px; transform: scale(.86); transform-origin: top center; }
  .copy { margin-top: 0; }
  .copy .hero-title { font-size: clamp(40px, 4.6vw, 60px); }
  .copy .btn-row { margin-top: var(--s-16); }
}