/* Denim & Diamonds — Tanjusay Dental Clinic Year End Party 2026
   v2: the hero is the real printed cover; attire boards (her/him, tap to zoom); raffle teaser.
   Palette sampled from the printed invitation: ice #dde8f1, denim #445b85, indigo #1f3463.
   Signature idea: every section title is a stitched denim patch (tan thread, like jeans labels). */

:root{
  --ice:#dde8f1; --ice-hi:#f2f7fb; --ice-lo:#c7d9ea;
  --navy:#1f3463; --denim:#445b85; --denim-2:#2f4a7d; --faded:#8fa6c8;
  --thread:#e0c086; --silver:#c9ced6; --err:#a3263a;
  --denim-tex:
    repeating-linear-gradient(35deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-55deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #5274ab, #3a5789 55%, #2c4471);
  --serif:'DM Serif Display', Georgia, serif;
  --script:'Pinyon Script', 'Brush Script MT', cursive;
  --sans:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--navy); font-family:var(--sans); line-height:1.55;
  background:var(--ice); overflow-x:hidden;
}
body::before{ /* the ice sheet: soft light + a few frozen facet lines; fixed layer so it never repaints on scroll */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(90% 45% at 50% 0%, var(--ice-hi) 0%, transparent 70%),
    radial-gradient(70% 40% at 0% 100%, rgba(143,166,200,.35), transparent 70%),
    linear-gradient(118deg, transparent 0 34%, rgba(255,255,255,.3) 34% 34.3%, transparent 34.4% 61%, rgba(255,255,255,.22) 61% 61.2%, transparent 61.3%),
    linear-gradient(28deg, transparent 0 47%, rgba(255,255,255,.22) 47% 47.2%, transparent 47.3%),
    linear-gradient(200deg, #e9f1f8, var(--ice-lo) 55%, #e1ebf4);
}
body.is-locked{overflow:hidden}
a{color:var(--denim-2)}
.defs{position:absolute;width:0;height:0;overflow:hidden}

#snow{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}

/* ---------- envelope intro ---------- */
.intro{
  position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding:24px; text-align:center;
  background:
    radial-gradient(80% 60% at 50% 45%, #f2f7fb, #c7d9ea 70%, #8fa6c8);
  transition:opacity .7s ease, visibility 0s linear .7s;
}
.intro.gone{opacity:0; visibility:hidden}
.intro-kicker{margin:0; font:600 italic .82rem/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--denim-2)}
.intro-tap{margin:0; font:600 .72rem var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--denim); animation:pulse 1.8s ease-in-out infinite}
.intro.open .intro-tap{opacity:0}

.envelope{
  position:relative; width:min(84vw,340px); aspect-ratio:3/2; padding:0; border:0; background:none; cursor:pointer;
  perspective:900px; filter:drop-shadow(0 18px 26px rgba(31,52,99,.28)); -webkit-tap-highlight-color:transparent;
}
.envelope > span{position:absolute; display:block}
.env-back{inset:0; border-radius:8px; background:var(--denim-tex)}
.env-card{
  left:7%; right:7%; top:9%; bottom:6%; z-index:1; border-radius:6px; background:linear-gradient(180deg,var(--ice-hi),var(--ice));
  display:flex !important; flex-direction:column; align-items:center; justify-content:center; color:var(--denim-2);
  transition:transform .8s cubic-bezier(.2,.8,.2,1) .45s;
}
.env-card-d{font:400 clamp(1.3rem,6vw,1.7rem)/1 var(--serif); text-transform:uppercase; letter-spacing:.04em}
.env-card-s{font:400 clamp(2rem,10vw,2.8rem)/1 var(--script)}
.env-front{
  inset:0; z-index:2; border-radius:8px; background:var(--denim-tex);
  clip-path:polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.env-front::after{ /* tan stitching around the pocket */
  content:""; position:absolute; inset:9px; border:1.5px dashed var(--thread); border-radius:4px; opacity:.85;
}
.env-flap{
  left:0; right:0; top:0; height:60%; z-index:3; background:
    repeating-linear-gradient(35deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#3f5f97,#2c4471);
  clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:50% 0; border-radius:8px 8px 0 0;
  transition:transform .7s cubic-bezier(.5,0,.3,1), z-index 0s linear .35s;
}
.env-seal{
  left:50%; top:60%; z-index:4; width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #d6dbe3 45%, #a3acba); box-shadow:0 4px 12px rgba(0,0,0,.25), inset 0 0 0 3px rgba(255,255,255,.6);
  display:grid !important; place-items:center; transition:transform .4s ease, opacity .4s ease;
}
.env-seal svg{width:42px; height:42px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.envelope:hover .env-seal{transform:scale(1.05)}
.intro.open .env-seal{transform:scale(.4); opacity:0}
.intro.open .env-flap{transform:rotateX(180deg); z-index:0}
.intro.open .env-card{transform:translateY(-58%)}

/* ---------- cover (the printed invitation itself) ---------- */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.cover{padding:max(16px, env(safe-area-inset-top)) 16px 0; text-align:center}
.cover-frame{
  position:relative; width:min(100%, 520px); margin:0 auto; border-radius:14px; overflow:hidden;
  aspect-ratio:1080/1523; background:#c7d9ea;
  box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 18px 40px rgba(31,52,99,.28);
}
.cover-frame img{display:block; width:100%; height:100%; object-fit:cover}
.cover-frame::after{ /* a slow diamond shine across the card */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  background-size:250% 100%; background-position:150% 0; animation:shine 6s ease-in-out 1.8s infinite;
}
.cover-btns{margin-top:20px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:13px 26px; border-radius:999px; text-decoration:none; cursor:pointer;
  font:700 .76rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:var(--denim-tex); border:1.5px dashed var(--thread); outline:3px solid #3a5789; outline-offset:0;
  box-shadow:0 8px 20px rgba(31,52,99,.25); -webkit-tap-highlight-color:transparent; transition:transform .15s ease;
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline-color:var(--navy); outline-offset:3px}
.btn[disabled]{opacity:.6; cursor:wait}
.btn-wide{display:block; width:calc(100% - 6px); margin:18px auto 0}
.btn-ghost{color:var(--denim-2); background:rgba(255,255,255,.7); border:1.5px solid rgba(47,74,125,.45); outline:0; box-shadow:none}
.row-btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px}

/* ---------- panels & denim patches ---------- */
main{padding-bottom:20px}
.panel{
  position:relative; width:min(100% - 32px, 560px); margin:46px auto 0; padding:48px 20px 26px; border-radius:22px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); box-shadow:0 12px 30px rgba(31,52,99,.10);
  -webkit-backdrop-filter:blur(8px) saturate(1.1); backdrop-filter:blur(8px) saturate(1.1);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .panel{background:rgba(240,246,251,.93)} }
.patch{
  position:absolute; top:-18px; left:50%; margin:0; padding:7px 22px 8px; white-space:nowrap;
  transform:translateX(-50%) rotate(-1.5deg); border-radius:6px;
  font:400 1.3rem/1.2 var(--serif); color:#f3f6fb; letter-spacing:.02em;
  background:var(--denim-tex); border:1.5px dashed var(--thread);
  box-shadow:0 0 0 4px #3a5789, 0 8px 16px rgba(31,52,99,.25);
}
.center{text-align:center}

/* countdown */
.countdown{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.countdown > div{text-align:center; padding:12px 2px 10px; border-radius:14px; background:rgba(255,255,255,.75); border:1px solid rgba(68,91,133,.18)}
.countdown b{display:block; font:400 clamp(1.6rem,8vw,2.2rem)/1.1 var(--serif); font-variant-numeric:tabular-nums; color:var(--navy)}
.countdown span{font:600 .62rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--denim)}
.countdown.is-now{display:block; text-align:center; font:400 2.2rem var(--script); color:var(--denim-2)}

/* dress code */
.script-line{margin:0 0 14px; text-align:center; font:400 clamp(1.9rem,8vw,2.4rem)/1.2 var(--script); color:var(--denim-2)}
.looks{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.look{text-align:center; padding:14px 10px; border-radius:16px; background:rgba(255,255,255,.65)}
.look svg{width:48px; height:48px; filter:drop-shadow(0 3px 5px rgba(31,52,99,.25))}
.look h3{margin:6px 0 4px; font:700 .74rem var(--sans); letter-spacing:.12em; text-transform:uppercase}
.look p{margin:0; font-size:.86rem; color:#33476f}
.swatch-label{margin:22px 0 10px; text-align:center; font:700 .7rem var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--denim)}
.swatches{display:flex; justify-content:center; gap:12px; margin:0; padding:0; list-style:none}
.swatches li{display:flex; flex-direction:column; align-items:center; gap:5px; font:600 .62rem var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--denim)}
.swatches li::before{content:""; width:42px; height:42px; border-radius:50%; background:var(--c); border:3px solid #fff; box-shadow:0 3px 8px rgba(31,52,99,.2)}

/* details */
.details{margin:0}
.details > div{display:grid; grid-template-columns:78px 1fr; gap:10px; padding:13px 0; border-bottom:1px dashed rgba(68,91,133,.32)}
.details > div:last-child{border-bottom:0}
.details dt{font:700 .7rem/1.9 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--denim)}
.details dd{margin:0; font:500 .98rem/1.5 var(--sans); color:var(--navy)}
.details small{color:#4a5d82}

.attire-tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; margin:4px 0 12px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid rgba(68,91,133,.2)}
.attire-tab{padding:10px; border:0; border-radius:999px; background:none; font:700 .74rem var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--denim-2); cursor:pointer}
.attire-tab[aria-selected="true"]{color:#fff; background:var(--denim-tex); box-shadow:inset 0 0 0 1.5px var(--thread)}
.board{position:relative; display:block; width:100%; padding:0; margin:0 0 16px; border:0; border-radius:12px; overflow:hidden; background:#c7d9ea; cursor:zoom-in; box-shadow:0 10px 24px rgba(31,52,99,.2)}
.board img{display:block; width:100%; height:auto; aspect-ratio:16/9}
.board-zoom{position:absolute; right:8px; bottom:8px; padding:5px 10px; border-radius:999px; background:rgba(31,52,99,.78); color:#fff; font:700 .62rem var(--sans); letter-spacing:.1em; text-transform:uppercase}
.zoom{position:fixed; inset:0; z-index:50; background:rgba(14,24,46,.94); display:flex; flex-direction:column; justify-content:center}
.zoom-scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.zoom-scroll img{display:block; height:min(78vh, 900px); width:auto; max-width:none; margin:0 auto}
.zoom-hint{margin:12px 0 0; text-align:center; color:#dfe7f3; font:600 .72rem var(--sans); letter-spacing:.12em; text-transform:uppercase}
.zoom-close{position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px; width:46px; height:46px; border-radius:50%; border:1.5px dashed var(--thread); background:var(--denim-tex); color:#fff; font:400 1.8rem/1 var(--sans); cursor:pointer}
@media (orientation:landscape){ .zoom-scroll img{height:auto; width:100%; max-height:90vh; object-fit:contain} .zoom-hint{display:none} }
.gift{position:relative; max-width:380px; margin:0 auto; border-radius:14px; overflow:hidden; box-shadow:0 12px 26px rgba(31,52,99,.22)}
.gift-img{display:block; width:100%; height:auto}
.gift.in-view .gift-img{animation:wiggle 2.8s ease-in-out .3s 2}
.gift-note{margin:14px 0 0; font:600 italic .95rem var(--sans); color:#2a4170}
.card-img{display:block; width:100%; max-width:380px; height:auto; margin:0 auto; border-radius:12px; box-shadow:0 12px 26px rgba(31,52,99,.25)}

/* ---------- RSVP ---------- */
.lbl{display:block; margin:16px 0 6px; font:700 .7rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--denim)}
.lbl small{font-weight:500; letter-spacing:.04em; text-transform:none}
.field{
  display:block; width:100%; padding:13px 14px; font:500 16px/1.4 var(--sans); color:var(--navy);
  background:rgba(255,255,255,.9); border:1.5px solid rgba(68,91,133,.35); border-radius:12px; appearance:none; -webkit-appearance:none;
}
select.field{background-image:linear-gradient(45deg,transparent 50%,var(--denim) 50%),linear-gradient(135deg,var(--denim) 50%,transparent 50%); background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px; background-repeat:no-repeat}
.field:focus{outline:0; border-color:var(--denim-2); box-shadow:0 0 0 3px rgba(68,91,133,.2)}
textarea.field{resize:vertical; min-height:84px}
.comp-note{margin:-2px 0 8px; font-size:.84rem; color:#4a5d82}
.comps{display:grid; gap:8px}
.comps .field{padding-left:42px; background-image:none}
.comp{position:relative}
.comp b{position:absolute; left:14px; top:50%; transform:translateY(-50%); font:700 .8rem var(--sans); color:var(--faded)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.hint{margin:10px 0 0; text-align:center; font-size:.8rem; color:#4a5d82}
.hello{margin:0; text-align:center; font:400 clamp(2.2rem,10vw,2.8rem)/1.15 var(--script); color:var(--denim-2)}
.existing{margin:12px 0 4px; padding:10px 12px; border-radius:12px; background:rgba(221,232,241,.9); font-size:.88rem; text-align:center}
.choice{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; border:0}
.choice legend{padding:0; grid-column:1/-1}
.choice label{position:relative; cursor:pointer}
.choice input{position:absolute; opacity:0; inset:0}
.choice span{
  display:block; padding:16px 8px; text-align:center; border-radius:14px; font:600 .92rem var(--sans);
  background:rgba(255,255,255,.85); border:1.5px solid rgba(68,91,133,.35); transition:background .2s, color .2s;
}
.choice input:checked + span{color:#fff; background:var(--denim-tex); border:1.5px dashed var(--thread); box-shadow:0 0 0 3px #3a5789}
.choice input:focus-visible + span{box-shadow:0 0 0 3px var(--navy)}
.link{display:block; margin:14px auto 0; padding:6px; background:none; border:0; font:600 .82rem var(--sans); color:var(--denim-2); text-decoration:underline; cursor:pointer}
.error{min-height:1.2em; margin:12px 0 0; text-align:center; font-weight:600; font-size:.9rem; color:var(--err)}
.done{text-align:center}
.venue-card{margin:20px 0 0; padding:18px 16px; text-align:center; border-radius:16px; background:rgba(255,255,255,.8); border:1.5px dashed rgba(68,91,133,.45)}
.venue-k{margin:0; font:700 .66rem var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--denim)}
.venue-name{margin:4px 0 0; font:400 1.45rem/1.25 var(--serif); color:var(--navy)}
.venue-addr{margin:2px 0 0; font-size:.88rem; color:#4a5d82}
.venue-when{margin:6px 0 0; font:600 .86rem var(--sans); color:#2a4170}
.venue-card .btn{margin-top:12px}
.done-glint{display:block; width:62px; height:62px; margin:0 auto 6px; padding:14px; border-radius:50%; background:var(--denim-tex); box-shadow:0 0 0 4px rgba(255,255,255,.8), 0 8px 18px rgba(31,52,99,.25); animation:twinkle 2.6s ease-in-out infinite}

/* ---------- music + footer ---------- */
.music-btn{
  position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:40; width:50px; height:50px; padding:13px;
  border-radius:50%; border:1.5px dashed var(--thread); outline:3px solid #3a5789; color:#fff; background:var(--denim-tex);
  box-shadow:0 8px 18px rgba(31,52,99,.3); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s;
}
.music-btn.show{opacity:1; pointer-events:auto}
.music-btn svg{width:100%; height:100%}
.music-btn.playing svg{animation:bob 1.4s ease-in-out infinite}
.foot{padding:40px 20px 70px; text-align:center; font-size:.82rem; color:#3b4f78}
.foot-script{margin:0 0 4px; font:400 2.1rem/1.2 var(--script); color:var(--denim-2)}

@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0); opacity:.55} 50%{transform:scale(1) rotate(20deg); opacity:1}}
@keyframes shine{0%,70%{background-position:150% 0} 100%{background-position:-50% 0}}
@keyframes wiggle{0%,100%{transform:rotate(0)} 10%{transform:rotate(-2deg) scale(1.02)} 20%{transform:rotate(2deg) scale(1.02)} 30%{transform:rotate(-1deg)} 40%{transform:rotate(0)}}
@keyframes pulse{0%,100%{opacity:.45} 50%{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)}}

@media (max-width:340px){ .looks{grid-template-columns:1fr} .swatches{gap:8px} .swatches li::before{width:36px;height:36px} }
@media (min-width:720px){ .panel{padding:54px 40px 34px} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition-duration:.01ms !important} html{scroll-behavior:auto} }