/*
Theme Name: Birthday Invitation 3D
Theme URI: https://example.com/
Author: Groupe GMG
Description: Immersive 3D birthday invitation (WebGL toy diorama, live countdown, EN / FR / Tamil, music, Google & iPhone calendar). Texts are editable blocks; languages are built in (or Polylang / WPML). Event details: Appearance › Customize › Birthday invitation. Fonts, 3D engine and music are bundled: no external CDN.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bday-invitation-3d
Tags: one-column, custom-colors, full-width-template, block-patterns, translation-ready
*/

/* ---------- self-hosted fonts ---------- */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/fredoka-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/fredoka-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/fredoka-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/nunito-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/nunito-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/nunito-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Patrick Hand";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/patrick-hand-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Baloo Thambi 2";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/baloo-thambi-2-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Baloo Thambi 2";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/baloo-thambi-2-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Baloo Thambi 2";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/baloo-thambi-2-tamil-600-normal.woff2") format("woff2");unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}
@font-face{font-family:"Baloo Thambi 2";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/baloo-thambi-2-tamil-800-normal.woff2") format("woff2");unicode-range:U+0B80-0BFF,U+200C-200D,U+25CC}

/* Layout: a fixed WebGL "toy diorama" world behind a cinematic single-page scroll.
   Each scene is a transparent stage; the camera travels while frosted candy cards carry the real text.
   Deliberately single-theme: a soft pastel party world, like the invitation itself. */
:root{
  --sky-1:#fff7fb;         /* soft white */
  --sky-2:#fde8f4;         /* blush */
  --sky-3:#efe4ff;         /* lilac haze */
  --ink:#3a1640;           /* plum ink */
  --ink-soft:#6d4a72;
  --candy:#ff3d95;         /* ASVINY magenta */
  --grape:#7b3dff;         /* & */
  --berry:#1f6bff;         /* ASVITHA blue */
  --mint:#2cc79f;
  --butter:#ffc531;
  --frost:#fffaf4;         /* cream card */
  --stitch:#ff8cc3;
  --scallop:#ffb3d6;
  --leaf:#1e9a45;          /* "Where ?" green from the card */
  --f-display:"Fredoka","Baloo Thambi 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Nunito","Baloo Thambi 2","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-hand:"Patrick Hand","Baloo Thambi 2","Comic Sans MS","Segoe Print",cursive;
  --f-tamil:"Baloo Thambi 2","Noto Sans Tamil","Latha",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{background:var(--sky-1)}
body{margin:0;background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 50%,var(--sky-3));background-color:var(--sky-1);color:var(--ink);font:500 17px/1.55 var(--f-body);-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- world ---------- */
#world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:pan-y}
.loader{position:fixed;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;transition:opacity .8s ease}
.loader span{font:600 15px/1 var(--f-display);color:var(--ink-soft);letter-spacing:.08em;display:flex;gap:10px;align-items:center}
.loader i{width:10px;height:10px;border-radius:50%;background:var(--candy);animation:lp 1s ease-in-out infinite}
.loader i:nth-child(2){background:var(--grape);animation-delay:.15s}.loader i:nth-child(3){background:var(--berry);animation-delay:.3s}
@keyframes lp{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ready .loader{opacity:0}
#fallback{display:none}
.no3d #world,.no3d .loader{display:none}
.no3d #fallback{display:grid;place-items:center;position:fixed;inset:0;z-index:0;padding:80px 16px 120px;perspective:1200px}
.no3d #fallback img{max-height:100%;width:auto;max-width:min(100%,760px);filter:drop-shadow(0 30px 40px rgba(120,40,110,.25));animation:fb 6s ease-in-out infinite}
@keyframes fb{0%,100%{transform:rotateY(-6deg) rotateX(3deg) translateY(0)}50%{transform:rotateY(6deg) rotateX(-2deg) translateY(-10px)}}

/* ---------- controls ---------- */
.hud{position:fixed;z-index:30;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;pointer-events:none}
.hud>*{pointer-events:auto}
.monogram{font:700 15px/1 var(--f-display);color:var(--ink);background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:10px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(150,60,130,.15);letter-spacing:.02em;white-space:nowrap}
.monogram b{color:var(--candy)}.monogram em{font-style:normal;color:var(--grape)}.monogram strong{color:var(--berry)}
.hud-right{display:flex;gap:8px}
.pill{display:inline-flex;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:4px;box-shadow:0 6px 18px rgba(150,60,130,.15)}
.pill button{font:800 13px/1 var(--f-body);border:0;background:transparent;color:var(--ink-soft);padding:8px 11px;border-radius:999px;cursor:pointer}
.pill button[aria-pressed="true"]{background:var(--candy);color:#fff}
.sound{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 var(--f-body);color:var(--ink);border:0;cursor:pointer;
  background:rgba(255,255,255,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:11px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(150,60,130,.15)}
.sound svg{width:18px;height:18px}
.sound .waves{opacity:.25;transition:opacity .2s}
.sound[aria-pressed="true"] .waves{opacity:1}
.sound[aria-pressed="true"]{background:var(--candy);color:#fff}
.sound.nudge{animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{box-shadow:0 6px 18px rgba(150,60,130,.15),0 0 0 0 rgba(255,61,149,.55)}50%{box-shadow:0 6px 18px rgba(150,60,130,.15),0 0 0 10px rgba(255,61,149,0)}}
:lang(ta) .unit,:lang(ta) .eyebrow,:lang(ta) .cue{letter-spacing:0;text-transform:none}
:lang(ta) h2{line-height:1.25}
:lang(ta) .count-wrap h2{font-size:clamp(28px,4.6vw,56px)}
:lang(ta) .unit{font-size:12px}
button:focus-visible,a:focus-visible{outline:3px solid var(--butter);outline-offset:3px}

/* ---------- scenes ---------- */
main{position:relative;z-index:2}
.scene{position:relative;min-height:100svh;display:flex;padding-inline:16px;padding-block:96px 64px}
.scene .inner{width:100%;max-width:1240px;margin:0 auto;display:flex;min-width:0}
#s-hero{align-items:flex-end;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px);pointer-events:none}
#s-hero .inner{justify-content:center}
.caption{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;pointer-events:auto}
.caption .date{font:600 clamp(15px,1.6vw,18px)/1.3 var(--f-display);color:var(--ink);background:rgba(255,255,255,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:10px 18px;border-radius:999px;box-shadow:0 8px 22px rgba(150,60,130,.16)}
.caption .date b{color:var(--candy);font-weight:700}
.cue{font:600 13px/1 var(--f-body);color:var(--ink-soft);display:flex;align-items:center;gap:8px;letter-spacing:.06em;text-transform:uppercase}
.cue svg{width:16px;height:16px;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.tap{font:400 19px/1 var(--f-hand);color:var(--grape)}

.card{
  position:relative;background:var(--frost);border-radius:34px;padding:clamp(26px,3.4vw,40px);
  box-shadow:0 0 0 10px var(--scallop),0 0 0 13px #fff,0 30px 60px rgba(150,50,120,.22),inset 0 -8px 0 #f8e1ec;
  min-width:0;
}
.card::before{content:"";position:absolute;inset:12px;border:2.5px dashed var(--stitch);border-radius:24px;pointer-events:none}
.eyebrow{margin:0;font:800 12.5px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--candy)}
h2{margin:0;font:700 clamp(30px,4.2vw,50px)/1.02 var(--f-display);color:var(--ink);text-wrap:balance}
.hand{font-family:var(--f-hand);font-weight:400}

/* countdown */
#s-count{align-items:center}
#s-count .inner{justify-content:center}
.count-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
  background:radial-gradient(closest-side,rgba(255,250,252,.88),rgba(255,250,252,.6) 70%,rgba(255,250,252,0));padding:40px clamp(8px,4vw,60px)}
.count-wrap h2{font-size:clamp(34px,5.6vw,68px)}
.count-wrap h2 .m{color:var(--candy)}
.blocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,22px);width:min(100%,720px)}
.block{
  --c1:#ff8cc4;--c2:#ff3d95;--e1:#e0207a;--e2:#b01760;
  position:relative;border-radius:26px;padding:clamp(16px,2.4vw,24px) 4px clamp(12px,1.6vw,16px);
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:inset 0 4px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(0,0,0,.08),
    0 3px 0 var(--e1),0 6px 0 var(--e1),0 9px 0 var(--e2),0 12px 0 var(--e2),0 26px 30px rgba(120,30,90,.3);
  transform:translateY(-6px);transition:transform .2s;overflow:hidden;
}
.block::before{content:"";position:absolute;left:12%;top:7%;width:38%;height:14%;border-radius:999px;background:rgba(255,255,255,.55);transform:rotate(-6deg)}
.block::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-60%);animation:shine 6s ease-in-out infinite}
.block:nth-child(2)::after{animation-delay:.3s}.block:nth-child(3)::after{animation-delay:.6s}.block:nth-child(4)::after{animation-delay:.9s}
@keyframes shine{0%,70%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.b-h{--c1:#c6a6ff;--c2:#8a55ff;--e1:#6b35e6;--e2:#5223bd}
.b-m{--c1:#8fd0ff;--c2:#2f86ff;--e1:#1f65d6;--e2:#164ca8}
.b-s{--c1:#7deed6;--c2:#22c39b;--e1:#14987a;--e2:#0d735c}
.block.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:translateY(-6px) scale(1)}35%{transform:translateY(-2px) scale(1.06,.94)}100%{transform:translateY(-6px) scale(1)}}
.digits{display:flex;justify-content:center;perspective:400px;font:700 clamp(40px,8vw,88px)/1 var(--f-display);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.14);height:1.02em}
.digits span{display:inline-block;width:.6em;text-align:center;transform-origin:50% 100%;backface-visibility:hidden}
.digits span.roll{animation:roll .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes roll{0%{transform:rotateX(-100deg) translateY(-10%);opacity:0}60%{opacity:1}100%{transform:none}}
.unit{font:800 11.5px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-top:8px;position:relative}
.when{font:600 clamp(16px,1.8vw,20px)/1.4 var(--f-display);margin:0}
.local{margin:0;color:var(--ink-soft);font-size:15px}
.party{font:700 clamp(40px,8vw,88px)/1 var(--f-display);color:var(--candy);text-shadow:0 3px 0 #e0207a,0 6px 0 #b01760,0 18px 26px rgba(120,30,90,.3);margin:0;animation:bump .8s cubic-bezier(.3,1.6,.5,1)}

/* invitation */
#s-invite{align-items:center}
#s-invite .inner{justify-content:flex-start}
.invite-tilt{perspective:1300px;width:min(100%,560px)}
.invite{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.invite .layer{transform:translateZ(var(--z,0));position:relative}
.invite-grid{display:flex;flex-direction:column;gap:20px}
.invite h2 .a{color:var(--candy)}.invite h2 .b{color:var(--grape)}.invite h2 .c{color:var(--berry)}
.facts{display:grid;gap:14px}
.fact{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.fact .ico{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1),0 6px 12px rgba(150,50,120,.18)}
.fact .ico svg{width:24px;height:24px}
.fact .label{font:400 22px/1 var(--f-hand)}
.fact .val{font:600 19px/1.35 var(--f-display);margin:2px 0 0}
.fact .note{margin:2px 0 0;font-size:14.5px;color:var(--ink-soft)}
address{font-style:normal}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;border:0;font:800 14.5px/1 var(--f-body);
  border-radius:999px;padding:14px 20px;transition:box-shadow .2s;will-change:transform}
.btn svg{width:18px;height:18px;flex:none}
.btn-candy{background:var(--candy);color:#fff;box-shadow:inset 0 -4px 0 #c01a6c,0 10px 20px rgba(255,61,149,.32)}
.btn-soft{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px #f6c5dc,inset 0 -4px 0 #f6dbe8}
.toast{min-height:18px;font:700 13.5px/1.2 var(--f-body);color:var(--leaf)}
.ta{font:800 clamp(18px,2.2vw,22px)/1.5 var(--f-tamil);color:var(--grape);margin:0}

/* crew */
#s-crew{align-items:flex-end}
#s-crew .inner{justify-content:flex-start}
.crew{max-width:440px;display:flex;flex-direction:column;gap:12px}
.crew p{margin:0;color:var(--ink-soft)}

/* party */
#s-party{align-items:center}
#s-party .inner{justify-content:flex-end}
.party-panel{width:min(100%,600px);display:flex;flex-direction:column;gap:22px}
.items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.item{all:unset;box-sizing:border-box;cursor:pointer;background:#fff;border-radius:24px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:inset 0 -5px 0 #f6dbe8,0 10px 22px rgba(150,50,120,.14);text-align:center;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.item:focus-visible{outline:3px solid var(--butter);outline-offset:3px}
.item:hover{transform:translateY(-4px)}
.icon3d{width:96px;height:96px;position:relative;perspective:500px}
.icon3d .rig{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s ease-out}
.icon3d svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.icon3d .l0{transform:translateZ(-14px)}.icon3d .l1{transform:translateZ(0)}.icon3d .l2{transform:translateZ(18px)}.icon3d .l3{transform:translateZ(32px)}
.item.pop .rig{animation:ipop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes ipop{0%{transform:scale(1)}30%{transform:scale(1.18,.86) translateY(4px)}100%{transform:scale(1)}}
.item b{font:700 20px/1 var(--f-display)}
.item small{font-size:13.5px;color:var(--ink-soft);line-height:1.3}

/* finale */
#s-final{align-items:flex-end;min-height:110svh}
#s-final .inner{justify-content:center}
.finale{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:radial-gradient(closest-side,rgba(255,250,252,.92),rgba(255,250,252,.7) 70%,rgba(255,250,252,0));padding:40px clamp(10px,5vw,70px)}
.finale h2{font-size:clamp(32px,5vw,60px)}
.finale .names{font:700 clamp(22px,3vw,30px)/1 var(--f-display)}
.names .a{color:var(--candy)}.names .b{color:var(--grape)}.names .c{color:var(--berry)}
footer{position:relative;z-index:2;padding:22px 16px calc(env(safe-area-inset-bottom,0px) + 22px);text-align:center;font-size:13px;color:var(--ink-soft)}

/* reveals: content is visible at rest; reveal only adds a lift */
.reveal{transition:transform 1s cubic-bezier(.2,1.2,.3,1)}
.reveal.pre{transform:translateY(40px) rotateX(8deg)}

@media (max-width:860px){
  .scene{padding-block:84px 48px}
  #s-invite,#s-party{align-items:flex-end}
  #s-invite .inner,#s-party .inner{justify-content:center}
  .blocks{gap:8px}
  .block{border-radius:20px}
  .unit{font-size:10px;letter-spacing:.1em}
  .monogram .full{display:none}
}
@media (max-width:440px){.monogram{display:none}.hud{justify-content:flex-end}}
@media (max-width:860px){
  .hud{background:linear-gradient(180deg,rgba(255,247,251,.96) 40%,rgba(255,247,251,0));padding-bottom:18px}
  .count-wrap,.finale{background:rgba(255,250,252,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px;
    box-shadow:0 18px 40px rgba(150,50,120,.18);padding:28px 18px}
  .card{padding:24px 20px;box-shadow:0 0 0 7px var(--scallop),0 0 0 9px #fff,0 24px 48px rgba(150,50,120,.2),inset 0 -6px 0 #f8e1ec;border-radius:28px}
  .card::before{inset:9px;border-radius:20px}
  .invite-grid{gap:16px}
  .actions .btn{flex:1 1 auto;justify-content:center}
  .finale .actions{width:100%}
}
@media (max-width:420px){
  h2{font-size:28px}
  .btn{padding:12px 14px;font-size:13.5px}
  .fact .ico{width:40px;height:40px;border-radius:14px}
  .fact .val{font-size:17px}
  .count-wrap h2{font-size:30px}
  .digits{font-size:38px}
}
@media (orientation:landscape) and (max-height:520px){
  .scene{padding-block:70px 28px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invite-tilt{width:min(100%,700px)}
  .items{grid-template-columns:repeat(4,minmax(0,1fr))}
  .party-panel{width:min(100%,760px)}
  .icon3d{width:64px;height:64px}
  .count-wrap{padding:18px 24px;gap:12px}
  .count-wrap h2{font-size:30px}
  .digits{font-size:44px}
  .caption .date{padding:7px 14px}
}
@media (max-width:420px){
  .items{gap:10px}.item{padding:12px}.icon3d{width:78px;height:78px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- WordPress integration ---------- */
html{margin-top:0!important}
.admin-bar .hud{top:32px}
@media (max-width:782px){.admin-bar .hud{top:46px}}

/* ---------- language switcher ---------- */
.pill a{font:800 13px/1 var(--f-body);color:var(--ink-soft);padding:8px 11px;border-radius:999px;text-decoration:none;display:inline-block}
.pill a[aria-current="page"]{background:var(--candy);color:#fff}
.pill a:focus-visible{outline:3px solid var(--butter);outline-offset:2px}
/* ---------- ordinary pages (legal notice, etc.) ---------- */
.bday-page{min-height:auto;padding-top:110px}
.bday-prose{max-width:760px;margin:0 auto}
.bday-prose h1{font:700 clamp(28px,4vw,44px)/1.1 var(--f-display);margin:0 0 16px}
.bday-prose a{color:var(--candy)}