/* Divine wedding world and interactive surfaces. Base layout lives in style.css. */
:root {
  --wine:#300e17;--wine-deep:#210a10;--vermilion:#9c302c;--gold:#dfb96e;--gold-light:#f4d99e;
  --paper:#faf1df;--sand:#edddbf;
  --midnight:var(--wine-deep);--blue:var(--wine);--ink:#492b24;--pearl:var(--paper);
  --silver:#f4d99e;--muted:#745c4b;--pale:#edddbf;--rule:#b18a4e55;
}
html{scrollbar-color:#ad854c var(--wine)}
body.dialog-open{overflow:hidden}
button[data-open]{display:none}
.js button[data-open]{display:inline-flex}
.site-header{position:fixed;height:88px;border-color:#dfb96e30;transition:background .3s,box-shadow .3s}
.site-header.is-scrolled{background:var(--wine-deep);box-shadow:0 5px 20px #210a1020}
.site-header nav a{font-size:12px}
.language-switch>span{background:#dfb96e60}
.language-switch button{color:var(--gold-light);opacity:1}
.button{border-radius:4px;font-size:13px}
.button-light{background:var(--gold-light);color:var(--wine);border-color:var(--gold)}
.button-light:hover{background:#ffe7b5;box-shadow:0 6px 24px #dfb96e25}
.button-primary{background:var(--wine);color:var(--paper)}
.button-primary:hover{background:#682425}
.button-outline{border-color:#9d753f;color:var(--wine)}
.button-outline:hover{background:var(--sand);color:var(--wine)}
.button-light-outline{border-color:var(--gold);color:var(--gold-light)}
.button-light-outline:hover{background:var(--gold-light);color:var(--wine)}
.quiet-button,.sound-control,.motion-control{background:none;border:0;color:inherit;justify-content:center;align-items:center;gap:8px;padding:10px;min-height:44px;font-size:12px}
.quiet-button{display:none;margin:15px auto 0;color:var(--gold-light)}
.js .quiet-button{display:flex}
.quiet-button .icon{width:17px;height:17px;flex-basis:17px}
.quiet-button:hover span{text-decoration:underline;text-underline-offset:5px}
.hero{min-height:920px;max-height:1150px;padding:130px 24px 95px}
.hero-art{background-image:url("assets/divine-mandap.webp")}
.hero-shade{background:linear-gradient(#210a104d,transparent 25%,#210a1020 70%,#210a1066)}
.hero-halo{position:absolute;z-index:-1;inset:16% 25% 19%;background:radial-gradient(ellipse,#c9923e14,transparent 68%);pointer-events:none}
#petals{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.gold-mote{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--gold-light);opacity:.35;animation:gold-drift 14s linear infinite;contain:strict}
.atmosphere-paused .gold-mote{animation-play-state:paused}
@keyframes gold-drift{from{transform:translateY(35px);opacity:0}15%,80%{opacity:.4}to{transform:translateY(-45px);opacity:0}}
.hero-content{width:min(100%,960px);max-width:960px}
.ganapathi{width:154px;height:154px;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 8px 18px #0005)}
.blessing{font-size:15px;color:var(--gold-light);margin-bottom:13px}
.hero-intro{font-size:12px;margin-bottom:20px;color:#f1d9b7}
.hero h1{flex-direction:row;justify-content:center;gap:20px;line-height:1;color:#fff0d1}
.name-first,.name-second{padding:0}
.hero .ampersand{font-size:58px;color:var(--gold);padding:6px 0 0;line-height:1}
.hero-message{font-size:13px;color:#f1d9b7;margin-top:24px}
.hero-date{margin:25px 0 28px}
.hero-date time{border-color:#dfb96e75;font:500 22px/1.5 var(--display);letter-spacing:.04em}
.hero-foot{color:var(--gold-light);bottom:22px}
.sound-control{display:none}
.js .sound-control{display:flex}
.hero-foot .icon{width:17px;height:17px;flex-basis:17px}
.invitation-date{min-height:390px;max-width:320px;isolation:isolate;background:#f4e5c9;box-shadow:0 16px 40px #492b2410;border-color:#ac7c3b;border-radius:140px 140px 8px 8px;position:relative;padding:48px 35px 40px}
.invitation-date::before{content:"";position:absolute;inset:8px;border:1px solid #ac7c3b66;border-radius:inherit;z-index:-1}
.date-kannada{font-family:var(--kannada);color:var(--vermilion);margin-bottom:24px}
.date-ornament{stroke:#9c6d2c}
.welcome-kannada{color:var(--vermilion)}
.couple-join{color:#a27e44}
.countdown-section{background:var(--wine);color:var(--gold-light);position:relative;isolation:isolate;overflow:clip;border-color:#dfb96e40}
.countdown-section::before{content:"";position:absolute;inset:0;z-index:-1;background:url("assets/divine-mandap.webp") center 68%/cover;opacity:.12}
.countdown-separator{color:var(--gold)}
.section-heading h2{color:var(--wine)}
.day-number,.event time{color:var(--vermilion)}
.event-copy h4{font-size:31px}
.event-copy p{font-size:14px}
.text-link{color:var(--vermilion);padding:0;border:0;background:none}
.text-link>span:first-child{text-decoration-color:#9c302c66}
.calendar-action>p.time-note{margin-top:3px}
.venues-section{color:var(--paper)}
.venues-section::before{background-image:url("assets/divine-mandap.webp");opacity:.23}
.venues-intro h2{color:var(--gold-light)}
.venues-intro>p,.venue p{color:#ebd2b2}
.venue{border-color:#dfb96e70}
.venue-date{color:var(--gold)}
.light-link{color:var(--gold-light);margin-top:12px}
.light-link>span{text-decoration-color:#dfb96e80!important}
.map-note{color:#e0c19b}
.page-back{background:#e2ceb1}
.closing{background:var(--sand);padding-top:80px}
.closing-ganapathi{width:90px;height:90px;object-fit:contain;margin:0 auto 16px}
.closing-kannada,.closing-signature{color:var(--vermilion)}
.closing-actions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.closing-actions>button[data-open]{display:none}
.js .closing-actions>button[data-open]{display:inline-flex}
.site-footer{background:var(--wine-deep);color:var(--gold-light);border-color:#dfb96e30}
.floating-home-pin{position:fixed;bottom:24px;right:24px;z-index:25;display:flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid var(--gold);background:var(--wine);color:var(--gold-light);font-size:12px;text-decoration:none;border-radius:28px;box-shadow:0 6px 20px #210a102e;transition:opacity .25s,transform .25s}
body:not(.past-hero) .floating-home-pin,body.dialog-open .floating-home-pin{opacity:0;visibility:hidden;transform:translateY(12px)}
.dialog{background:var(--paper);color:var(--ink);border:1px solid #bc9450;border-radius:12px;max-width:620px;width:calc(100% - 32px);max-height:calc(100svh - 48px);padding:42px;overflow:auto;box-shadow:0 25px 80px #0005}
.dialog::backdrop{background:#210a10eb}
.dialog:not(.invitation-dialog){padding:0;overflow:hidden}
.dialog-scroll{padding:42px;overflow:auto;max-height:calc(100svh - 52px);overscroll-behavior:contain}
.dialog[open]{animation:dialog-arrive .35s var(--ease)}
.dialog h2{font-size:42px;line-height:1.15;letter-spacing:-.02em;padding-right:15px}
.dialog-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--wine);border-radius:50%}
.dialog-close:hover{background:var(--sand)}
.dialog-intro{font-size:14px;color:var(--muted);margin-top:13px}
.event-choices{display:flex;gap:10px;margin-block:25px}
.event-choices button{flex:1;min-height:80px;padding:12px;border:1px solid var(--rule);background:transparent;text-align:left;color:var(--ink);border-radius:6px}
.event-choices button[aria-pressed=true]{background:var(--wine);color:var(--paper);border-color:var(--wine)}
.event-choices span{display:block;font-family:var(--display);font-size:24px;line-height:1.3}
.event-choices small{font-size:11px;display:block;margin-top:8px}
.calendar-providers{display:flex;flex-direction:column}
.calendar-providers>a{position:relative;display:block;border-top:1px solid var(--rule);padding:17px 34px 17px 0;text-decoration:none}
.calendar-providers>a:last-child{border-bottom:1px solid var(--rule)}
.calendar-providers>a>span{font-weight:600;font-size:14px}
.calendar-providers small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.calendar-providers .icon{position:absolute;right:0;top:25px}
.calendar-providers a:hover>span{text-decoration:underline;text-underline-offset:5px}
.calendar-note,.import-help p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:18px}
.import-help{margin-top:15px}
.import-help summary{cursor:pointer;min-height:34px;font-size:12px;color:var(--wine);text-decoration:underline;text-underline-offset:4px}
.import-help p{margin-top:5px}
.all-dates{margin-top:13px;font-size:12px}
.invitation-dialog{width:min(100% - 24px,1080px);max-width:1080px;padding:0;overflow:hidden}
.viewer-header{position:relative;background:var(--wine);color:var(--gold-light);padding:20px 64px 20px 25px}
.viewer-header h2{font-size:29px;line-height:1.4;padding:0}
.viewer-header .dialog-close{color:var(--gold-light);top:14px}
.viewer-header .dialog-close:hover{background:#ffffff12}
.invitation-viewer{height:min(67svh,780px);overflow:auto;background:#e4d6bc;padding:22px;display:flex;align-items:flex-start;justify-content:center}
.invitation-viewer img{max-width:100%;width:auto;height:100%;object-fit:contain;margin:auto}
.invitation-viewer.zoomed{display:block}
.invitation-viewer.zoomed img{max-width:none;width:1000px;height:auto;margin:0 auto}
.viewer-controls{display:flex;justify-content:center;align-items:center;gap:14px;min-height:72px;padding:10px 15px}
.viewer-controls button{min-width:44px;min-height:44px;border:1px solid var(--rule);background:transparent;border-radius:4px;color:var(--wine);font-size:14px}
.viewer-controls button:not(#zoom-page){display:grid;place-items:center}
.icon-back{transform:rotate(180deg)}
.viewer-controls #zoom-page{padding-inline:14px;font-size:12px}
.viewer-controls>span{font-size:12px}
.viewer-controls>a{display:flex;align-items:center;gap:5px;min-height:44px;font-size:12px}
.viewer-controls .icon{width:16px;height:16px}
.blessing-dialog{text-align:center;background:var(--wine);color:var(--paper);border-color:var(--gold)}
.blessing-dialog .dialog-close{color:var(--gold-light)}
.blessing-dialog .dialog-close:hover{background:#ffffff12}
.blessing-dialog .dialog-scroll>img{width:140px;height:140px;object-fit:contain;margin:0 auto 15px}
.blessing-dialog h2{color:var(--gold-light);padding:0}
.ganesha-prayer{font:400 13px/2.1 var(--kannada);color:var(--gold-light);margin-block:23px}
.blessing-dialog .dialog-scroll>p:not([class]){font-size:13px;margin-top:20px}
.blessing-dialog .button{margin-top:26px;background:var(--gold-light);color:var(--wine)}
#blessing-status{min-height:26px;font-size:12px}
.travel-dialog .dialog-scroll>p{font-size:13px;color:var(--muted);margin-top:15px}
.home-map{height:270px;background:var(--sand);display:grid;place-items:center;margin-top:24px;border-radius:6px;overflow:hidden;font-size:13px}
.home-map iframe{width:100%;height:100%;border:0}
.travel-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.travel-dialog .pin-coordinates{font-variant-numeric:tabular-nums;font-size:12px}
.petal-shower{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.blessing-dialog>.petal-shower{position:absolute}
.falling-petal{position:absolute;top:-30px;left:var(--x);width:var(--size);height:calc(var(--size)*.65);border-radius:75% 0 75% 20%;background:var(--petal);animation:petal-fall 3.3s var(--delay) cubic-bezier(.2,.1,.5,1) both;opacity:0}
.js .hero-content{animation:none}
.js .hero-art{animation:mandap-arrive 2.3s var(--ease) both}
.js .ganapathi{animation:ganapathi-arrive 1.4s var(--ease) both}
.js .hero h1{animation:names-arrive 1.8s .15s var(--ease) both}
.js .hero-date,.js .open-invitation{animation:invitation-arrive 1.7s .3s var(--ease) both}
.invitation-entered .hero-halo{animation:blessing-light 1.2s var(--ease)}
@keyframes mandap-arrive{from{opacity:.55}to{opacity:1}}
@keyframes ganapathi-arrive{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes names-arrive{from{opacity:.3;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes invitation-arrive{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes blessing-light{50%{opacity:1}}
@keyframes dialog-arrive{from{opacity:.5;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes petal-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}8%{opacity:.9}90%{opacity:.85}100%{opacity:0;transform:translate3d(var(--drift),105svh,0) rotate(var(--spin))}}
.motion-paused{scroll-behavior:auto!important}
html[lang=kn] .hero h1{gap:22px;line-height:1.6}
html[lang=kn] .hero .ampersand{font-size:45px;line-height:1;padding:0}
html[lang=kn] .dialog h2{font-size:29px;line-height:1.7}
html[lang=kn] .event-choices span{font-family:var(--kannada);font-size:18px;line-height:1.8}
@media(min-width:1700px){.hero-art{background-size:100% 100%}}
@media(max-width:1000px){
  .hero h1{font-size:80px;gap:16px}.hero .ampersand{font-size:48px}
  html[lang=kn] .hero h1{font-size:52px;gap:15px}
}
@media(max-width:700px){
  :root{scroll-padding-top:94px}
  .site-header{height:76px;padding-inline:22px}
  .hero{min-height:940px;max-height:1150px;padding:112px 24px 106px}
  .hero-art{background-image:url("assets/divine-mandap-mobile.webp");background-size:100% 100%;background-position:center}
  .hero-shade{background:linear-gradient(#210a1038,transparent 25%,#210a1026 68%,#210a1055)}
  .ganapathi{width:142px;height:142px;margin-bottom:10px}.blessing{font-size:13px;margin-bottom:12px}
  .hero-intro{font-size:12px;max-width:230px;margin:0 auto 22px;line-height:1.8}
  .hero h1{font-size:clamp(60px,16vw,80px);flex-direction:column;gap:0;line-height:.95}
  .hero .ampersand{font-size:38px;padding:8px 0 10px;line-height:.9}
  .hero-message{font-size:12px;max-width:230px;margin:24px auto 0}
  .hero-date{margin:18px auto 25px}.hero-date time{border-color:#dfb96e75;font-size:20px}
  .quiet-button{font-size:11px;margin-top:10px}
  .hero-foot{bottom:15px;left:16px;right:16px;gap:5px}
  .sound-control,.motion-control{font-size:12px;gap:5px;padding:8px 4px}
  .hero-foot .icon{width:15px;height:15px;flex-basis:15px}
  .button{font-size:12px}
  .invitation-date{width:210px;min-height:285px;padding:32px 25px 26px;border-radius:100px 100px 6px 6px}
  .date-kannada{margin-bottom:15px}.invitation-date strong{font-size:90px}.invitation-date>span{font-size:12px}
  .countdown-layout h2{font-size:32px}.countdown strong{font-size:43px}
  .event-copy h4{font-size:29px}.event-copy p{font-size:13px}
  .calendar-action .button{width:100%}
  .closing{padding:62px 24px 46px}
  .closing-actions{flex-direction:column;align-items:center;gap:12px}.closing-actions .button{width:100%;max-width:350px}
  .site-footer{padding-bottom:80px}
  .floating-home-pin{bottom:18px;right:16px;padding:11px 16px;font-size:11px}
  .dialog{padding:38px 24px 26px;max-height:calc(100svh - 28px)}
  .dialog-scroll{padding:38px 24px 26px;max-height:calc(100svh - 32px)}
  .dialog h2{font-size:35px}.dialog-close{top:6px;right:6px}
  .dialog-intro{font-size:13px}.event-choices{gap:8px;margin-block:23px}.event-choices button{padding:11px 10px}
  .event-choices span{font-size:22px}.event-choices small{font-size:11px}
  .calendar-providers>a>span{font-size:13px}.calendar-providers small{font-size:12px}
  .invitation-dialog{padding:0}.viewer-header{padding:17px 55px 17px 18px}
  .viewer-header h2{font-size:26px}.viewer-header .dialog-close{top:9px}
  .invitation-viewer{height:65svh;padding:12px}.viewer-controls{gap:9px;padding-inline:10px}
  .viewer-controls #zoom-page{padding-inline:10px}.viewer-controls button{min-width:40px}
  .blessing-dialog .dialog-scroll>img{width:120px;height:120px}.blessing-dialog h2{font-size:35px}
  .ganesha-prayer{font-size:12px}.blessing-dialog .dialog-scroll>p:not([class]){font-size:12px}
  .home-map{height:240px}.travel-actions{flex-direction:column}.travel-actions .button{width:100%}
  html[lang=kn] .hero h1{font-size:clamp(42px,12vw,56px);line-height:1.55;gap:0}
  html[lang=kn] .hero .ampersand{font-size:32px;line-height:.5;padding-block:5px}
  html[lang=kn] .hero-message{margin-top:16px}
  html[lang=kn] .dialog h2{font-size:25px}
  html[lang=kn] .event-choices span{font-size:16px}
}
@media(max-width:370px){
  .site-header{padding-inline:16px}.hero{padding-inline:22px}.hero h1{font-size:59px}
  .hero-foot{left:12px;right:12px}.sound-control,.motion-control{font-size:11px}
  .viewer-controls{gap:7px}.viewer-controls #zoom-page{padding-inline:7px}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
  .quiet-button,.floating-home-pin,.dialog,.petal-shower,#petals{display:none!important}
  .hero{min-height:0;height:auto;max-height:none;padding:25px 0;background:white;color:var(--ink)}
  .hero-art,.hero-shade,.hero-halo{display:none}.hero h1,.hero-message,.hero-intro,.blessing,.hero .ampersand{color:var(--ink)}
  .hero h1{font-size:40px}.ganapathi{width:70px;height:70px}.hero .ampersand{font-size:25px}
  .site-footer{background:white;color:var(--ink);padding:20px}
}