/*
Theme Name: ImaginIt Fun Coming Soon
Theme URI: https://imaginitfun.com
Author: ImaginIt Fun
Description: A festive single-page "coming soon" theme for ImaginIt Fun, a children's theme-party business. Includes a working email signup that saves entries to the WordPress database and an admin page to view/export them.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imaginit-fun
*/

:root{
  --ink: #FFF8ED;
  --night: #241B45;
  --night-deep: #17112E;
  --plum: #3D2E63;
  --marigold: #F7B733;
  --coral: #FF6F5E;
  --mint: #45C6AE;
  --lilac: #B79CED;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background: radial-gradient(120% 140% at 50% -10%, var(--plum) 0%, var(--night) 45%, var(--night-deep) 100%);
  color: var(--ink);
  font-family: 'Quicksand', sans-serif;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

/* ambient confetti dots */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(3px 3px at 8% 20%, var(--marigold) 40%, transparent 41%),
    radial-gradient(3px 3px at 22% 65%, var(--coral) 40%, transparent 41%),
    radial-gradient(2.5px 2.5px at 40% 15%, var(--mint) 40%, transparent 41%),
    radial-gradient(3px 3px at 65% 80%, var(--lilac) 40%, transparent 41%),
    radial-gradient(2.5px 2.5px at 80% 30%, var(--marigold) 40%, transparent 41%),
    radial-gradient(3px 3px at 90% 60%, var(--coral) 40%, transparent 41%),
    radial-gradient(2.5px 2.5px at 12% 85%, var(--mint) 40%, transparent 41%),
    radial-gradient(2.5px 2.5px at 55% 45%, var(--lilac) 40%, transparent 41%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

/* ===== Bunting garland ===== */
.bunting{
  width:100%;
  max-width:1100px;
  padding: 28px 24px 0;
  z-index:2;
}
.bunting svg{ display:block; width:100%; height:auto; }
.flag{ animation: sway 4.5s ease-in-out infinite; transform-origin: top center; }
.flag:nth-child(2n){ animation-duration: 5.2s; animation-delay:.3s; }
.flag:nth-child(3n){ animation-duration: 3.9s; animation-delay:.6s; }
@keyframes sway{
  0%,100%{ transform: rotate(-3deg); }
  50%{ transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce){
  .flag{ animation: none; }
}

/* ===== Hero ===== */
main{
  flex:1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 40px 24px 80px;
  position:relative;
  z-index:2;
}

.eyebrow{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.72rem;
  color: var(--mint);
  background: rgba(69,198,174,.12);
  border: 1px solid rgba(69,198,174,.4);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.logo{
  width: clamp(96px, 16vw, 140px);
  height: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.wordmark{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  line-height: .95;
  font-size: clamp(3rem, 10vw, 6.5rem);
  letter-spacing: -.01em;
}
.wordmark .imagin{ color: var(--marigold); }
.wordmark .it{ color: var(--coral); }
.wordmark .fun{
  display:block;
  color: var(--mint);
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  margin-top: -.08em;
}

.tagline{
  max-width: 640px;
  margin: 26px auto 6px;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  color: rgba(255,248,237,.88);
  font-weight: 500;
}

.themes{
  max-width: 620px;
  margin: 10px auto 40px;
  font-size: .98rem;
  color: var(--lilac);
  font-weight: 600;
}

.status{
  font-family:'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  margin-bottom: 14px;
  color: var(--ink);
}
.status span{ color: var(--coral); }

.subcopy{
  max-width: 520px;
  color: rgba(255,248,237,.75);
  margin-bottom: 34px;
  font-size: 1rem;
  line-height:1.6;
}

form#imaginit-signup-form{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:center;
  margin-bottom: 14px;
}
input[type="email"]{
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  font-size: 1rem;
  padding: 15px 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,248,237,.25);
  background: rgba(255,248,237,.06);
  color: var(--ink);
  min-width: 280px;
  outline:none;
  transition: border-color .2s ease, background .2s ease;
}
input[type="email"]::placeholder{ color: rgba(255,248,237,.5); }
input[type="email"]:focus{
  border-color: var(--marigold);
  background: rgba(255,248,237,.1);
}
button{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size: 1rem;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  background: var(--marigold);
  color: var(--night-deep);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
button:hover{ background: #ffc857; transform: translateY(-2px); }
button:disabled{ opacity:.7; cursor:default; transform:none; }
button:focus-visible, input:focus-visible{ outline: 3px solid var(--mint); outline-offset: 2px; }

.form-msg{
  min-height: 1.2em;
  font-size:.9rem;
  font-weight:600;
  margin-bottom: 10px;
}
.form-msg.success{ color: var(--mint); }
.form-msg.error{ color: var(--coral); }

.fineprint{
  font-size:.82rem;
  color: rgba(255,248,237,.5);
}

/* ===== Balloons ===== */
.balloons{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.balloon{
  position:absolute;
  animation: bob 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .balloon{ animation:none; }
}
@keyframes bob{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-18px); }
}
.b1{ top: 12%; left: 6%; width: 70px; animation-duration: 5.5s; }
.b2{ top: 22%; right: 7%; width: 56px; animation-duration: 6.8s; animation-delay:.4s; }
.b3{ bottom: 16%; left: 10%; width: 46px; animation-duration: 5s; animation-delay:.9s; }
.b4{ bottom: 10%; right: 12%; width: 64px; animation-duration: 7.2s; animation-delay:.2s; }

footer{
  width:100%;
  text-align:center;
  padding: 22px 24px 30px;
  font-size:.85rem;
  color: rgba(255,248,237,.45);
  z-index:2;
}
footer a{ color: var(--mint); text-decoration:none; font-weight:600; }
footer a:hover{ text-decoration:underline; }

@media (max-width: 480px){
  input[type="email"]{ min-width: 220px; }
}