/* ==========================================================================
   Design Your World — playground layer
   Texture, colour washes, drifting shapes and soft dividers.
   Everything here is decorative, sits behind content, and is inert to
   pointers, screen readers and reduced-motion users.
   ========================================================================== */

/* --------------------------------------------------------- paper grain --
   A fixed fractal-noise film over the whole page. It stops the large flat
   cream areas reading as dead screen colour and gives the site the feel of
   something printed. Kept very faint so it never fights the type.          */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------ drifting shapes --
   A single document-height layer holding small engineering doodles: gears,
   bolts, sparks, brick studs, circuits. They drift slowly and scale with the
   page rather than the viewport, so the whole scroll feels inhabited.      */
body{position:relative}
.playdeck{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.playdeck i{
  position:absolute; display:block;
  color:var(--ink);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35));
  animation:drift 18s ease-in-out infinite;
  will-change:transform;
}
.playdeck svg{width:100%;height:100%;display:block}
.playdeck i[hidden]{display:none}
.playdeck i:nth-child(3n)  {animation-duration:23s}
.playdeck i:nth-child(3n+1){animation-duration:29s}
.playdeck i:nth-child(4n)  {animation-direction:reverse}

@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  33%    {transform:translate3d(9px,-16px,0) rotate(7deg)}
  66%    {transform:translate3d(-7px,10px,0) rotate(-6deg)}
}

/* Main content rides above the doodles. Only elements that are statically
   positioned get a position here: the header, drawer and mobile bar already
   carry their own sticky/fixed positioning and stacking order, and
   overriding those drops the hidden drawer back into the document flow. */
main,.foot{position:relative;z-index:1}

/* -------------------------------------------------------- colour blobs --
   Big blurred washes of brand colour. They give the cream depth without any
   pattern, and they sit far enough back to never affect text contrast.    */
.blob{
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.30; pointer-events:none;
  animation:blobdrift 26s ease-in-out infinite;
}
@keyframes blobdrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(28px,-34px,0) scale(1.09)}
}

/* ------------------------------------------------------- section bands --
   Alternating sections used to be flat blocks of a single colour with hard
   rules top and bottom. They are now soft vertical washes that tint toward a
   different brand colour each time, so scrolling moves through a colour
   story instead of a set of boxes.                                        */
.band{position:relative}
.band--tint{
  background:
    linear-gradient(180deg,
      rgba(207,230,228,.62) 0%,
      rgba(252,231,190,.52) 46%,
      rgba(251,220,203,.44) 80%,
      rgba(251,242,226,1) 100%),
    var(--cream);
}
main > .band--tint:nth-of-type(even){
  background:
    linear-gradient(180deg,
      rgba(251,220,203,.58) 0%,
      rgba(220,233,206,.52) 44%,
      rgba(207,230,228,.48) 82%,
      rgba(251,242,226,1) 100%),
    var(--cream);
}
.band--ink{
  background:
    radial-gradient(120% 90% at 12% 0%, #0A3A63 0%, rgba(3,40,71,0) 62%),
    radial-gradient(90% 80% at 92% 100%, #073455 0%, rgba(3,40,71,0) 58%),
    var(--ink);
  color:var(--cream);
}
.band--ink h2,.band--ink h3{color:var(--cream)}
.band--ink .eyebrow{color:var(--gold)}

/* ------------------------------------------------------- wave dividers --
   Hard 3px rules between sections read as a filing cabinet. These are soft
   scalloped edges cut into the top and bottom of each band instead.       */
.band::before,.band::after{
  content:""; position:absolute; left:0; right:0; height:34px;
  background-repeat:repeat-x; background-size:128px 34px; pointer-events:none;
}
.band::before{
  top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V11c16 0 16-11 32-11s16 11 32 11 16-11 32-11 16 11 32 11v23z' fill='%23FBF2E2'/%3E%3C/svg%3E");
}
.band::after{
  bottom:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='34' preserveAspectRatio='none'%3E%3Cpath d='M0 0v23c16 0 16 11 32 11s16-11 32-11 16 11 32 11 16-11 32-11V0z' fill='%23FBF2E2'/%3E%3C/svg%3E");
}
/* the scallops are cut in the colour of whatever sits outside the band */
.band--ink + .band--tint::before,
.band--tint + .band--tint::before{background-image:none}

/* --------------------------------------------------- rainbow stripe ----
   A cut-paper stripe of the full palette. Used under the header and above
   the footer as a single unmistakable "this is a place for children" cue. */
.stripe{
  height:12px; border:0; margin:0; flex:none; opacity:1;
  background:repeating-linear-gradient(
    -45deg,
    var(--orange) 0 22px,
    var(--gold)   22px 44px,
    var(--teal)   44px 66px,
    var(--green)  66px 88px);
}
.hdr{border-bottom:0}
.hdr .stripe{display:block;width:100%}

.d2::after{
  content:""; display:block; width:138px; height:13px; margin-top:1rem;
  background:var(--orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='13'%3E%3Cpath d='M4 8c12-8 23 5 35 0s23-9 35-4 23 8 35 3 23-6 25-4' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='13'%3E%3Cpath d='M4 8c12-8 23 5 35 0s23-9 35-4 23 8 35 3 23-6 25-4' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.band--ink .d2::after,.cta .d2::after{background:var(--gold)}
.center .d2::after{margin-inline:auto}

/* ------------------------------------------------- playful underline ---
   A hand-drawn wobble under section headings, in place of a straight rule. */
.squiggle{display:block;width:132px;height:12px;margin-top:.85rem;color:var(--orange)}
.squiggle path{
  stroke:currentColor;stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:300;stroke-dashoffset:300;
  transition:stroke-dashoffset 1.1s var(--ease-out) .15s;
}
.is-in .squiggle path,.squiggle.is-in path{stroke-dashoffset:0}

/* --------------------------------------------------------- hero sky ----
   Soft sun and cloud shapes behind the home hero only.                    */
.hero{position:relative;z-index:1}
.hero__sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero__sun{
  position:absolute;top:-40px;right:-30px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,163,19,.55) 38%,rgba(246,163,19,.16) 66%,transparent 74%);
  animation:sunpulse 7s ease-in-out infinite;
}
@keyframes sunpulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%    {transform:scale(1.07);opacity:1}
}

/* --------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  .playdeck i,.blob,.hero__sun{animation:none !important}
  .squiggle path{stroke-dashoffset:0;transition:none}
}

/* On narrow screens the gutters disappear, so the doodles would land behind
   body copy. They stay, but drop back to faint texture that cannot affect
   the contrast of the text sitting over them. */
@media(max-width:1080px){
  .playdeck i{opacity:.45}
}
@media(max-width:680px){
  .playdeck i{opacity:.28;transform:scale(.62)}
  .blob{opacity:.20}
  .hero__sun{width:170px;height:170px;top:-20px;right:-40px}
  .stripe{height:9px}
  .band::before,.band::after{height:22px;background-size:96px 22px}
  .d2::after{width:112px;height:11px;margin-top:.8rem}
}