@font-face { font-family: "Young Serif"; src: url("../fonts/play/youngserif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("../fonts/play/urbanist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("../fonts/play/urbanist-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Birthstone"; src: url("../fonts/play/birthstone-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* WONDER (theme key "play"): modern, aesthetic kids' parties. No cartoons: each world is a fine gold line drawing over
   soft watercolour washes, set in a pearl arch (core/themes/play/_art.php): unicorn, fairy, mermaid, snow tiara,
   moon & planet, long-neck dinosaur, vintage race car. The client picks the world (hero.world) and any palette.
   Signature idea: the pearl arch. On the opening screen it holds the age as an iridescent numeral; tap and a sheen
   sweeps across, the numeral lifts away and the drawing draws itself in gold.
   Type: Young Serif (names, headings) · Birthstone (little script words) · Urbanist (easy reading). */
:root {
  --bg: #f7f2f8; --paper: #fffdfd; --ink: #3d2f45; --muted: #6e6075; --line: rgba(61, 47, 69, .13);
  --accent: #9a5d8f; --accent-ink: #ffffff; --card: #fffdfd; --h1: #f6d4e4; --h2: #dccff2; --h3: #cfeee8; --art: #a9844f;
  --display: "Young Serif", Georgia, serif; --script: "Birthstone", cursive; --text: "Urbanist", system-ui, sans-serif;
  --pearl: linear-gradient(160deg, #fff 0%, var(--h1) 30%, #fff 48%, var(--h2) 66%, var(--h3) 100%);
  --radius: 18px; --maxw: 540px;
}
body { background: var(--bg); color: var(--ink); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60vmax 50vmax at 0% 0%, color-mix(in srgb, var(--h1) 55%, transparent), transparent 70%),
              radial-gradient(50vmax 50vmax at 100% 30%, color-mix(in srgb, var(--h2) 50%, transparent), transparent 70%),
              radial-gradient(60vmax 40vmax at 30% 100%, color-mix(in srgb, var(--h3) 50%, transparent), transparent 70%); }

/* ---------- the drawing ---------- */
.wd-art { display: block; width: 100%; height: auto; overflow: visible; }
.wd-wash circle { opacity: .75; } .wd-wash .c1 { fill: var(--h1); } .wd-wash .c2 { fill: var(--h2); } .wd-wash .c3 { fill: var(--h3); }
.wd-f { opacity: .7; } .wd-f.c1 { fill: var(--h1); } .wd-f.c2 { fill: var(--h2); } .wd-f.c3 { fill: var(--h3); }
.wd-f.wd-face { fill: #fff; opacity: .9; } .wd-f.wd-tyre { fill: var(--bg); opacity: 1; }
.wd-cheek { fill: var(--h1); opacity: .9; }
.wd-ink { fill: none; stroke: var(--art); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wd-ink .wd-eye, .wd-dots circle { fill: var(--art); stroke: none; }
.wd-bl circle { stroke: var(--art); stroke-width: 1.1; } .wd-bl.c1 circle { fill: var(--h1); } .wd-bl.c2 circle { fill: var(--h2); } .wd-bl.c3 circle { fill: var(--h3); }
.wd-bl .wd-bc { fill: var(--art) !important; stroke: none; }
.wd-num { fill: var(--art); stroke: none; font: 400 13px var(--display); }
.wd-sps path, .wd-orn path:last-child { fill: var(--art); }
.wd-sp { transform-box: fill-box; transform-origin: center; animation: wd-tw 2.8s ease-in-out infinite; }
.wd-sp:nth-child(2) { animation-delay: -.7s; } .wd-sp:nth-child(3) { animation-delay: -1.4s; } .wd-sp:nth-child(4) { animation-delay: -2.1s; }
@keyframes wd-tw { 50% { transform: scale(.45); opacity: .5; } }
.wd-orn { display: block; width: 60px; height: 12px; margin: 0 auto; color: var(--art); }

/* ---------- intro: the pearl arch ---------- */
.wd-intro { --intro-ms: 2700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; overflow: hidden; text-align: center;
  background: var(--bg) radial-gradient(70% 50% at 50% 40%, color-mix(in srgb, var(--h2) 60%, transparent), transparent 75%); transition: opacity .6s ease 2.05s, visibility 0s linear 2.7s; }
.wd-for { margin: 0; font: 400 2rem/1 var(--script); color: var(--accent); }
.wd-for b { font-weight: 400; color: var(--ink); }
.wd-k { margin: 0; font: 600 .74rem var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.wd-door { position: relative; display: grid; place-items: center; width: min(250px, 66vw); aspect-ratio: 5 / 7; margin: 8px 0 4px; padding: 0; overflow: hidden; cursor: pointer;
  border: 0; border-radius: 999px 999px 14px 14px; background: var(--pearl); box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--ink) 50%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .8); }
.wd-door::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--art); border-radius: 999px 999px 8px 8px; opacity: .7; pointer-events: none; }
.wd-arch-in { position: absolute; inset: 22% 10% 12%; display: grid; place-items: center; }
.wd-big { position: relative; font: 400 clamp(7rem, 34vw, 9.5rem)/1.2 var(--display); background: linear-gradient(170deg, var(--art), color-mix(in srgb, var(--art) 55%, #fff) 45%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .06em .08em; transition: transform .9s cubic-bezier(.5, 0, .2, 1), opacity .6s ease; }
.wd-door > .wd-orn { width: 90px; height: 18px; }
.wd-sheen { position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%); transform: translateX(-70%); pointer-events: none; }
.wd-draw .wd-ink > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.wd-draw .wd-ink > .wd-bl, .wd-draw .wd-ink > .wd-dots, .wd-draw .wd-ink > text, .wd-draw .wd-ink > .wd-eye { stroke-dasharray: none; }
.wd-draw .wd-wash, .wd-draw .wd-fill, .wd-draw .wd-sps, .wd-draw .wd-num, .wd-draw .wd-bl, .wd-draw .wd-eye { opacity: 0; transition: opacity .9s ease 1.5s; }
.wd-name { margin: 2px 0 0; font: 400 clamp(1.9rem, 9vw, 2.5rem)/1.1 var(--display); }
.wd-intro .intro-hint { font: 600 .72rem var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); animation: wd-pulse 2.4s ease-in-out infinite; }
@keyframes wd-pulse { 50% { opacity: .45; } }
.is-opening .wd-sheen { transform: translateX(70%); transition: transform 1.1s ease .05s; }
.is-opening .wd-big { transform: translateY(-36%) scale(.8); opacity: 0; }
.is-opening .wd-draw .wd-ink > * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease .35s; }
.is-opening .wd-draw .wd-wash, .is-opening .wd-draw .wd-fill, .is-opening .wd-draw .wd-sps, .is-opening .wd-draw .wd-num, .is-opening .wd-draw .wd-bl, .is-opening .wd-draw .wd-eye { opacity: 1; }
.is-opening .wd-k, .is-opening .wd-for, .is-opening .wd-intro .intro-hint { opacity: 0; transition: opacity .3s; animation: none; }

/* ---------- cover ---------- */
.t-play .wd-hero { display: block; place-items: normal; padding: 64px 20px 56px; min-height: 0; text-align: center; }
.wd-stage { position: relative; width: min(300px, 74vw); margin: 0 auto; }
.wd-arch { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 16px 16px; background: var(--pearl);
  box-shadow: 0 28px 44px -28px color-mix(in srgb, var(--ink) 55%, transparent); }
.wd-arch::after { content: ""; position: absolute; inset: 9px; z-index: 2; border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px 999px 9px 9px; pointer-events: none; }
.no-media .wd-arch::after { border-color: var(--art); opacity: .6; }
.wd-solo { position: absolute; left: 10%; top: 16%; width: 80%; }
.wd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wd-peek { position: absolute; z-index: 3; right: -16%; bottom: -12%; width: 52%; }
.wd-hero .hero-media-tag { bottom: 16%; font-size: .56rem; white-space: normal; width: 70%; max-width: none; text-align: center; line-height: 1.3; }
.wd-arch .ph-slot { border-radius: inherit; }
.wd-copy { max-width: var(--maxw); margin: 34px auto 0; }
.wd-hero .hero-guest { margin: 0 0 4px; font: 400 2rem/1 var(--script); color: var(--accent); }
.wd-hero .hero-guest b { font-weight: 400; color: var(--ink); }
.wd-hero .hero-k { margin: 0; font: 600 .74rem var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.wd-hero .hero-t { margin: 8px 0 0; font: 400 clamp(3rem, 15vw, 4.4rem)/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.wd-age { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 0; }
.wd-age span { font: 400 2.1rem/1 var(--script); color: var(--accent); }
.wd-age b { font: 400 clamp(4.2rem, 20vw, 5.6rem)/1.2 var(--display); margin-block: -.1em; padding: 0 .05em .06em; background: linear-gradient(170deg, var(--art), color-mix(in srgb, var(--art) 50%, #fff) 48%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.wd-hero .hero-line { margin: 12px auto 0; max-width: 24em; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }
.wd-when { margin: 24px auto 0; padding: 18px 8px; max-width: 22rem; border-block: 1px solid var(--line); }
.wd-when p { margin: 0; font: 400 1.12rem/1.35 var(--display); }
.wd-when p span { display: block; margin-top: 2px; font: 600 .78rem var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wd-when .wd-orn { margin: 10px auto; }
.wd-hero .hero-cta { margin-top: 26px; padding: 14px 40px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 .82rem var(--text); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 14px 24px -14px var(--accent); }

/* ---------- sections ---------- */
.t-play .s:not(.s-hero) { padding: 60px 20px; }
.t-play .sh::after { content: ""; display: block; width: 44px; height: 1px; margin: 14px auto 0; background: var(--art); }
.t-play .sh-k { font: 400 2rem/1 var(--script); letter-spacing: 0; text-transform: none; color: var(--accent); }
.t-play .sh-t { margin-top: 2px; font: 400 clamp(1.8rem, 8vw, 2.3rem)/1.1 var(--display); letter-spacing: 0; }
.t-play .cd-u b { font: 400 2.5rem/1 var(--display); color: var(--ink); }
.t-play .cd-u span { font-weight: 600; letter-spacing: .12em; }
.t-play .tl-time { font-weight: 600; color: var(--accent); }
.t-play .tl-title { font: 400 1.15rem var(--display); }
.t-play .vn-c, .t-play .gl-it, .t-play .gl-c, .t-play .dr-roles > div, .t-play .rs-form { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  box-shadow: 0 18px 34px -26px color-mix(in srgb, var(--ink) 45%, transparent); }
.t-play .vn-n { font: 400 1.3rem var(--display); }
.t-play .btn-line { border-radius: 999px; font: 600 .78rem var(--text); letter-spacing: .14em; text-transform: uppercase; }
.t-play .rs-btn { border-radius: 999px; font: 600 .86rem var(--text); letter-spacing: .18em; text-transform: uppercase; }
.t-play .gl-btn { font-weight: 600; border-radius: 999px; }
.t-play .faq summary { font: 400 1.08rem var(--display); }

/* gallery: a little colonnade of arches */
.wd-arches { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; max-width: var(--maxw); margin: 0 auto; }
.wd-ga { margin: 0; text-align: center; }
.wd-ga:nth-child(even) { margin-top: 28px; }
.wd-gimg { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 12px 12px; background: var(--pearl); box-shadow: 0 16px 28px -22px color-mix(in srgb, var(--ink) 55%, transparent); }
.wd-gimg .ph-slot { border-radius: inherit; }
.wd-ga figcaption { margin-top: 8px; font: 400 1.5rem/1 var(--script); color: var(--accent); }

/* closing */
.wd-close { text-align: center; }
.wd-carch { width: min(170px, 46vw); margin: 0 auto 18px; padding: 26px 16px 10px; border-radius: 999px 999px 14px 14px; background: var(--pearl); }
.t-play .cl-line { font: 400 clamp(1.6rem, 7vw, 2.1rem)/1.25 var(--display); max-width: 16em; margin-inline: auto; }
.t-play .cl-sign { margin-top: 8px; font: 400 2rem/1 var(--script); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .wd-sp, .wd-intro .intro-hint { animation: none; }
  .is-opening .wd-draw .wd-ink > * { transition: none; }
}