/* ============================================================
   LONDON SCHOOL — Organic Pebble Decorations
   Varied sizes & shapes like scattered pebbles.
   Gentle float + slow rotation. Alternating L/R edges.
   At least 60% of each pebble visible. Always 2 on opposite sides.
   ============================================================ */

/* ── ANIMATIONS — 4 unique drift paths, each includes rotation ── */

@keyframes peb-float-a {
  0%   { transform: translate(0,    0)    rotate(0deg); }
  20%  { transform: translate(22px, -28px) rotate(72deg); }
  40%  { transform: translate(-16px,-20px) rotate(144deg); }
  60%  { transform: translate(-25px, 14px) rotate(216deg); }
  80%  { transform: translate(14px,  22px) rotate(288deg); }
  100% { transform: translate(0,    0)    rotate(360deg); }
}

@keyframes peb-float-b {
  0%   { transform: translate(0,    0)    rotate(360deg); }
  20%  { transform: translate(-20px, 25px) rotate(288deg); }
  40%  { transform: translate(18px,  20px) rotate(216deg); }
  60%  { transform: translate(28px, -16px) rotate(144deg); }
  80%  { transform: translate(-12px,-22px) rotate(72deg); }
  100% { transform: translate(0,    0)    rotate(0deg); }
}

@keyframes peb-float-c {
  0%   { transform: translate(0,    0)    rotate(0deg); }
  25%  { transform: translate(28px,  18px) rotate(90deg); }
  50%  { transform: translate(-20px, 24px) rotate(180deg); }
  75%  { transform: translate(-14px,-28px) rotate(270deg); }
  100% { transform: translate(0,    0)    rotate(360deg); }
}

@keyframes peb-float-d {
  0%   { transform: translate(0,    0)    rotate(360deg); }
  25%  { transform: translate(-25px,-20px) rotate(270deg); }
  50%  { transform: translate(16px, -26px) rotate(180deg); }
  75%  { transform: translate(22px,  18px) rotate(90deg); }
  100% { transform: translate(0,    0)    rotate(0deg); }
}


/* ══════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════ */

.shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
  overflow-x: hidden;
  overflow-x: clip;
}


/* ══════════════════════════════════════════════════════════════
   BASE SHAPE
   ══════════════════════════════════════════════════════════════ */

.shape {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}


/* ══════════════════════════════════════════════════════════════
   6 PEBBLE SIZES — bigger, slightly different from each other,
   each with its own float path & duration for natural motion
   ══════════════════════════════════════════════════════════════ */

.shape-xl  { width: 620px; height: 570px; animation: peb-float-a 130s linear infinite; }
.shape-lg  { width: 490px; height: 520px; animation: peb-float-b 108s linear infinite; }
.shape-md  { width: 350px; height: 375px; animation: peb-float-c 88s  linear infinite; }
.shape-sm  { width: 230px; height: 210px; animation: peb-float-d 68s  linear infinite; }
.shape-xs  { width: 150px; height: 140px; animation: peb-float-a 52s  linear infinite; }
.shape-dot { width: 90px;  height: 85px;  animation: peb-float-b 42s  linear infinite; }


/* ══════════════════════════════════════════════════════════════
   COLORS — 4 palettes
   ══════════════════════════════════════════════════════════════ */

.shape--peach { background: var(--peach); }
.shape--sage  { background: var(--sage-100); }
.shape--navy  { background: var(--navy-100); opacity: 0.55; }
.shape--red   { background: var(--red-100); }


/* ══════════════════════════════════════════════════════════════
   8 ORGANIC BORDER-RADIUS VARIANTS — like unique pebbles
   ══════════════════════════════════════════════════════════════ */

.peb-1 { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; }
.peb-2 { border-radius: 42% 58% 55% 45% / 48% 52% 48% 52%; }
.peb-3 { border-radius: 48% 52% 60% 40% / 38% 62% 38% 62%; }
.peb-4 { border-radius: 55% 45% 48% 52% / 50% 58% 42% 50%; }
.peb-5 { border-radius: 70% 30% 40% 60% / 35% 65% 35% 65%; }
.peb-6 { border-radius: 35% 65% 65% 35% / 55% 45% 55% 45%; }
.peb-7 { border-radius: 50% 50% 35% 65% / 65% 40% 60% 35%; }
.peb-8 { border-radius: 40% 60% 50% 50% / 45% 55% 50% 50%; }


/* ══════════════════════════════════════════════════════════════
   CTA ORBS — white shapes on navy card
   ══════════════════════════════════════════════════════════════ */

@keyframes shape-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cta-orb {
  display: block;
  position: absolute;
  pointer-events: none;
  animation: shape-rotate linear infinite;
}

.cta-orb--1 {
  width: 280px;
  height: 280px;
  top: -35%;
  left: -8%;
  border-radius: 55% 45% 50% 50% / 50% 55% 45% 55%;
  background: rgba(255, 255, 255, 0.07);
  animation-duration: 90s;
}

.cta-orb--2 {
  width: 320px;
  height: 320px;
  bottom: -45%;
  right: -10%;
  border-radius: 48% 52% 42% 58% / 52% 48% 52% 48%;
  background: rgba(255, 255, 255, 0.06);
  animation-duration: 110s;
  animation-direction: reverse;
}

.cta-orb--3 {
  width: 140px;
  height: 140px;
  top: -15%;
  right: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  animation-duration: 80s;
}

.cta-orb--4 {
  width: 100px;
  height: 100px;
  bottom: -10%;
  left: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  animation-duration: 100s;
  animation-direction: reverse;
}


/* ══════════════════════════════════════════════════════════════
   FOOTER WAVE
   ══════════════════════════════════════════════════════════════ */

.ft::before {
  content: '';
  position: absolute;
  top: -39px;
  left: 0;
  right: 0;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,10 480,0 720,20 C960,40 1200,10 1440,0 L1440,40 Z' fill='%23243F62'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: 100% 100%;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .shape-xl  { width: 420px; height: 390px; }
  .shape-lg  { width: 320px; height: 340px; }
  .shape-md  { width: 220px; height: 235px; }
  .shape-sm  { width: 150px; height: 138px; }
  .shape-xs  { width: 95px;  height: 88px; }
  .shape-dot { width: 60px;  height: 55px; }
}

@media (max-width: 600px) {
  .shapes { display: none; }
  .cta-orb { display: none !important; }
  .ft::before { height: 24px; top: -23px; }
}

@media (prefers-reduced-motion: reduce) {
  .shape, .cta-orb { animation: none; }
}