/* Noolukettu & Naming Ceremony invitation.
   Layout: one card. A photo cover with the title over it, then the details on matching paper.
   Phones: the card runs edge to edge. Wider screens: a centred card over a blurred copy of the cover. */

:root{
  --f-disp:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-script:"Pinyon Script", "Snell Roundhand", cursive;
  --f-label:"Marcellus", Georgia, serif;
  --f-ml:"Noto Serif Malayalam", "Kartika", "Manjari", serif;
  --ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-btn:2px; --r-cell:2px;

  /* Pooja Arch */
  --page:#E6D2AE;
  --paper:#F8EAD4; --paper-top:#EFD6AE;
  --ink:#3A2316; --muted:#6B4F3B;
  --gold:#B98A2F; --gold2:#E6C46C;
  --accent:#7E1F2A; --on-accent:#FBF0D9; --band-edge:#7E1F2A;
  --line:rgba(185,138,47,.45); --cell:rgba(255,250,240,.55);
  --ttl-en-c:var(--ink); --halo:rgba(253,244,230,.78);
  --seal-bg:radial-gradient(circle at 34% 28%, #B13C47, #7E1F2A 55%, #5E1219);
  --seal-fg:#F1D27C; --seal-ring:rgba(241,210,124,.6);
  --seal-shadow:0 0 0 5px rgba(126,31,42,.12), inset 0 -6px 10px rgba(0,0,0,.25), 0 12px 22px -8px rgba(94,18,25,.55);
  --backdrop:url("pooja-arch.jpg");
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background:var(--page); color:var(--ink);
  font-family:var(--f-disp);
  -webkit-font-smoothing:antialiased;
  padding:0;
}
img{max-width:100%}
p{margin:0}

/* ---------- Card ---------- */
.inv{
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; max-width:560px; margin:0 auto;
  background:var(--paper); color:var(--ink);
  text-align:center;
}
.fx{position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden}

/* ---------- Cover ---------- */
.cover{position:relative; z-index:1; width:100%; container-type:inline-size; line-height:0}
.cover-img{display:block; width:100%; height:auto}
.ovl{position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(8px,2.6cqw,16px); line-height:normal}
.ovl::before{content:""; position:absolute; z-index:-1; background:radial-gradient(closest-side, var(--halo), transparent)}
.ovl > *{max-width:100%}

/* Text sits inside the painted arch */
.d-arch .ovl{left:19%; right:19%; top:17%; height:58%}
.d-arch .ovl::before{inset:-4%}

/* Lamp-flame glows painted over the photo */
.glow-dot{position:absolute; width:9cqw; height:9cqw; margin:-4.5cqw 0 0 -4.5cqw; border-radius:50%; background:radial-gradient(circle, rgba(255,226,140,.85), rgba(255,180,60,.35) 35%, rgba(255,160,40,0) 70%); mix-blend-mode:screen; animation:glow 1.3s ease-in-out infinite alternate; pointer-events:none}
.glow-dot:nth-of-type(2n){animation-duration:1.7s; animation-delay:-.6s}
.glow-dot:nth-of-type(3n){animation-duration:1.1s; animation-delay:-.3s}

/* ---------- Title block (inside the cover) ---------- */
.blessing{display:flex; flex-direction:column; gap:4px}
.eyebrow{font:400 clamp(10px,2.2cqw,12.5px)/1.4 var(--f-label); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.ml{font-family:var(--f-ml)}
.ml-sm{font-size:14px; line-height:1.7; color:var(--muted)}
.ovl .ml-sm{font-size:clamp(11px,2.6cqw,14px)}
.ttl{margin:0; display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:400; text-wrap:balance}
.ttl-ml{font:600 clamp(24px,7.2cqw,40px)/1.4 var(--f-ml); color:var(--accent)}
.ttl-en{font:400 clamp(22px,6cqw,34px)/1.1 var(--f-script); color:var(--ttl-en-c)}

/* Name seal */
.seal-wrap{display:flex; flex-direction:column; align-items:center; gap:10px}
.seal{position:relative; overflow:hidden; width:clamp(66px,15cqw,96px); height:clamp(66px,15cqw,96px); border-radius:50%; border:0; padding:0; cursor:pointer; display:grid; place-items:center; background:var(--seal-bg); color:var(--seal-fg); box-shadow:var(--seal-shadow); transition:transform .25s; -webkit-tap-highlight-color:transparent}
.seal span{font:600 clamp(32px,7.2cqw,46px)/1 var(--f-disp); transform:translateY(-2px)}
.seal::before{content:""; position:absolute; inset:9px; border-radius:50%; border:1px dashed var(--seal-ring)}
.seal::after{content:""; position:absolute; inset:-20%; background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%); transform:translateX(-120%); animation:sheen 4.5s ease-in-out 1.2s infinite}
.seal:hover{transform:scale(1.04)}
.seal:focus-visible{outline:2px solid var(--accent); outline-offset:5px}
.seal.nudge{animation:wiggle .6s ease}
.seal-note{font:italic 500 clamp(13px,3.4cqw,16px)/1.35 var(--f-disp); color:var(--muted); min-height:1.4em; max-width:26ch; text-wrap:balance}
.baby-name{font:400 clamp(40px,11cqw,60px)/1.1 var(--f-script); color:var(--accent)}
.baby-name-ml{font:600 clamp(20px,5.4cqw,28px)/1.4 var(--f-ml); color:var(--accent)}

/* ---------- Details ---------- */
.details{
  position:relative; z-index:1; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding-top:58px; padding-bottom:clamp(64px,10vw,80px);
  padding-left:max(22px, env(safe-area-inset-left, 0px));
  padding-right:max(22px, env(safe-area-inset-right, 0px));
  background:linear-gradient(var(--paper-top), var(--paper) 140px);
}
.lead{font:italic 500 clamp(20px,5.4vw,24px)/1.4 var(--f-disp); max-width:26ch; text-wrap:balance}
.ml-body{font-size:15px; line-height:1.95; max-width:32ch}

/* Kasavu border band */
.kband{position:absolute; left:0; right:0; height:32px; z-index:2; overflow:hidden;
  background:
    linear-gradient(var(--band-edge),var(--band-edge)) 0 0/100% 3px no-repeat,
    linear-gradient(var(--gold2),var(--gold)) 0 6px/100% 12px no-repeat,
    conic-gradient(from 135deg at 50% 0, var(--gold) 90deg, transparent 0) 0 18px/16px 8px repeat-x,
    linear-gradient(var(--gold),var(--gold)) 0 29px/100% 1px no-repeat;
}
.kband::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 42%,rgba(255,250,225,.7) 50%,transparent 58%); background-size:300% 100%; animation:shimmer 6s linear infinite; mix-blend-mode:soft-light}
.kband.top{top:0}
.kband.bot{bottom:0; transform:scaleY(-1)}

.rule{display:flex; align-items:center; gap:12px; width:min(260px,80%)}
.rule span{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
.rule span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.rule i{width:8px; height:8px; transform:rotate(45deg); background:var(--gold); box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--gold)}

.when{display:flex; flex-direction:column; align-items:center; gap:8px}
.dow{font:400 12px/1 var(--f-label); letter-spacing:.3em; text-transform:uppercase; color:var(--accent)}
.date{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; width:min(320px,100%)}
.date .mon,.date .yr{font:400 13px/1 var(--f-label); letter-spacing:.22em; text-transform:uppercase; padding-block:9px; border-block:1px solid var(--gold)}
.date .day{font:600 76px/.9 var(--f-disp); color:var(--accent); font-variant-numeric:lining-nums}

.facts{display:grid; grid-template-columns:1fr 1fr; width:100%; max-width:420px}
.fact{display:flex; flex-direction:column; gap:6px; padding:4px 14px; min-width:0}
.fact + .fact{border-left:1px solid var(--line)}
.k{font:400 12px/1 var(--f-label); letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.v{font:600 21px/1.25 var(--f-disp)}
.addr{font:400 16px/1.4 var(--f-disp); color:var(--muted)}
.ml-xs{font-size:12.5px; line-height:1.7; color:var(--muted)}

.actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:13px 22px; border-radius:var(--r-btn); font:400 13px/1 var(--f-label); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); cursor:pointer; transition:transform .2s, box-shadow .2s; -webkit-tap-highlight-color:transparent}
.btn svg{width:16px; height:16px; flex:none}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px -8px var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.btn.ghost{background:transparent; color:var(--accent)}
.ics{font:italic 400 15px/1.3 var(--f-disp); color:var(--muted); text-underline-offset:3px}
.ics:hover{color:var(--accent)}

.cd-wrap{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%}
.cd{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; max-width:340px}
.cd div{display:flex; flex-direction:column; gap:4px; padding:10px 4px; border:1px solid var(--line); border-radius:var(--r-cell); background:var(--cell)}
.cd b{font:600 28px/1 var(--f-disp); font-variant-numeric:tabular-nums lining-nums}
.cd small{font:400 12px/1 var(--f-label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cd-cap{font:italic 400 16px/1.3 var(--f-disp); color:var(--muted)}

.sign{display:flex; flex-direction:column; align-items:center; gap:2px}
.fam{font:italic 400 17px/1.3 var(--f-disp); color:var(--muted)}
.names{font:400 clamp(34px,9vw,44px)/1.2 var(--f-script); color:var(--accent)}

/* Copyright footer, below the card */
.site-foot{
  padding-top:20px; padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  text-align:center; font:400 12px/1.4 var(--f-label); letter-spacing:.12em; color:var(--muted);
}
.site-foot a{color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--accent); text-decoration-color:currentColor}

/* Falling jasmine */
.petal{position:absolute; top:-16px; width:9px; height:13px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:radial-gradient(circle at 40% 35%, #FFFFFF, #F4ECDA); box-shadow:0 1px 2px rgba(120,90,40,.25); animation:fall linear infinite}
.petal.o{background:radial-gradient(circle at 40% 35%, #FFC37A, #EE8526)}

/* Entrance */
.ovl > *, .details > *:not(.kband){animation:rise .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 80ms)}

@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes sheen{0%,60%{transform:translateX(-120%)} 100%{transform:translateX(120%)}}
@keyframes wiggle{0%,100%{transform:rotate(0)} 20%{transform:rotate(-9deg)} 40%{transform:rotate(8deg)} 60%{transform:rotate(-5deg)} 80%{transform:rotate(3deg)}}
@keyframes shimmer{from{background-position:150% 0} to{background-position:-150% 0}}
@keyframes glow{from{opacity:.65} to{opacity:1}}
@keyframes fall{0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(var(--dx,30px),1800px) rotate(540deg)}}

/* Phones: a little tighter, details stack */
@media (max-width:440px){
  .facts{grid-template-columns:1fr; gap:18px}
  .fact + .fact{border-left:0; border-top:1px solid var(--line); padding-top:18px}
  .date .day{font-size:68px}
  .actions{flex-direction:column; align-items:stretch; width:min(300px,100%)}
}

/* Tablets and desktop: a floating card over a blurred copy of the cover */
@media (min-width:600px){
  body{padding:32px 16px 48px}
  body::before{content:""; position:fixed; inset:-40px; z-index:-1; background:var(--backdrop) center/cover no-repeat, var(--page); filter:blur(28px) saturate(1.1); opacity:.55}
  .inv{border-radius:4px; box-shadow:0 40px 80px -40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.08)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .fx{display:none}
}