/* Liliya's Beach — shared design system */

:root{
  --sky-1:#eafaff; --sky-2:#bfe6f7; --sky-3:#9dd6ef;
  --sea:#4ec3d9; --sea-2:#31b7d4; --sea-deep:#1e8aa8;
  --sand:#f7e3b8; --sand-2:#eccf96; --sand-deep:#d9b678;
  --coral:#f4766a; --sun:#ffc93f; --leaf:#5fd6b8; --shell:#ff9dbb;
  --ink:#123b47; --ink-soft:#3d6b78;
  --card:rgba(255,255,255,.88); --card-line:#ffffff;

  --display:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --body-f:Georgia,"Iowan Old Style",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--body-f);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior:none;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 46%,var(--sky-3) 62%,var(--sea) 63%,var(--sea-2) 78%,var(--sand) 78.5%,var(--sand-2) 100%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- beach scenery layers ---------- */

.sun{
  position:fixed;z-index:1;top:5vh;right:8vw;
  width:clamp(70px,12vw,120px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(60% 60% at 40% 35%,#fff3c9,var(--sun) 70%);
  box-shadow:0 0 60px rgba(255,201,63,.75), 0 0 140px rgba(255,201,63,.4);
  cursor:pointer;
  animation:sunBreathe 5s ease-in-out infinite;
}
.sun::after{
  content:"";position:absolute;inset:-26%;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,201,63,.32) 0 12deg, transparent 12deg 30deg,
    rgba(255,201,63,.32) 30deg 42deg, transparent 42deg 60deg, rgba(255,201,63,.32) 60deg 72deg,
    transparent 72deg 90deg, rgba(255,201,63,.32) 90deg 102deg, transparent 102deg 120deg,
    rgba(255,201,63,.32) 120deg 132deg, transparent 132deg 150deg, rgba(255,201,63,.32) 150deg 162deg,
    transparent 162deg 180deg, rgba(255,201,63,.32) 180deg 192deg, transparent 192deg 210deg,
    rgba(255,201,63,.32) 210deg 222deg, transparent 222deg 240deg, rgba(255,201,63,.32) 240deg 252deg,
    transparent 252deg 270deg, rgba(255,201,63,.32) 270deg 282deg, transparent 282deg 300deg,
    rgba(255,201,63,.32) 300deg 312deg, transparent 312deg 330deg, rgba(255,201,63,.32) 330deg 342deg, transparent 342deg 360deg);
  animation:sunSpin 30s linear infinite;
}
@keyframes sunSpin{to{transform:rotate(360deg)}}
@keyframes sunBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.cloud{
  position:fixed;z-index:1;
  width:clamp(90px,16vw,160px);height:clamp(34px,6vw,58px);
  background:#fff;border-radius:99px;
  opacity:.95;cursor:pointer;
  filter:drop-shadow(0 6px 10px rgba(30,138,168,.18));
  animation:cloudDrift linear infinite;
}
.cloud::before,.cloud::after{
  content:"";position:absolute;background:#fff;border-radius:50%;
}
.cloud::before{width:46%;height:150%;left:14%;top:-62%}
.cloud::after{width:34%;height:110%;right:16%;top:-38%}
@keyframes cloudDrift{
  0%{transform:translateX(-30vw)}
  100%{transform:translateX(130vw)}
}

.waves{
  position:fixed;z-index:1;left:0;right:0;
  top:calc(62% - 20px);height:44px;pointer-events:none;
}
.wave{
  position:absolute;left:-60px;right:-60px;height:100%;
  background-repeat:repeat-x;background-size:120px 100%;
  background-image:radial-gradient(60px 30px at 60px 44px, rgba(255,255,255,.85) 58%, transparent 60%);
  animation:waveMove 7s linear infinite;
}
.wave.w2{top:12px;opacity:.6;animation-duration:9.5s;animation-direction:reverse}
@keyframes waveMove{to{transform:translateX(120px)}}

/* ---------- chrome ---------- */

.homeBtn{
  position:fixed;z-index:40;top:.8rem;left:.8rem;
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:20px;
  background:var(--card);border:3px solid var(--card-line);
  font-size:1.6rem;text-decoration:none;
  box-shadow:0 8px 18px rgba(18,59,71,.25);
  transition:transform .15s;
}
.homeBtn:active{transform:scale(.92)}

.pageHead{
  position:relative;z-index:2;
  text-align:center;padding:clamp(1.2rem,4vw,2rem) 1rem .4rem;
}
.pageHead h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,7vw,3.4rem);line-height:1;letter-spacing:-.02em;
  margin:0;color:var(--ink);
  text-shadow:0 2px 0 rgba(255,255,255,.8);
  text-wrap:balance;
}
.pageHead h1 em{font-style:normal;color:var(--coral)}
.pageHead p{margin:.5rem auto 0;max-width:40ch;color:var(--ink-soft);font-size:1.05rem}

.content{position:relative;z-index:2;max-width:1040px;margin:0 auto;padding:0 clamp(.9rem,3.5vw,2rem) 4rem}

/* ---------- home tiles ---------- */

.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(.8rem,2.6vw,1.3rem);
  margin-top:1.4rem;
}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  background:var(--card);border:3px solid var(--card-line);
  border-radius:28px;
  padding:1.1rem .8rem 1rem;
  text-decoration:none;color:var(--ink);
  box-shadow:0 10px 24px rgba(18,59,71,.22), inset 0 2px 0 #fff;
  transition:transform .16s;
  cursor:pointer;
}
.tile:hover{transform:translateY(-5px)}
.tile:active{transform:scale(.95)}
.tile:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
.tile .art{width:clamp(70px,14vw,104px)}
.tile .art svg{width:100%;height:auto;display:block}
.tile b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1rem,3vw,1.25rem);line-height:1.15;text-align:center;
}
.tile small{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- shared bits ---------- */

.bigBtn{
  font-family:var(--display);font-weight:800;font-size:1.2rem;
  background:var(--sun);color:#5a3d00;border:none;border-radius:99px;
  padding:.8rem 1.8rem;cursor:pointer;box-shadow:0 7px 0 #c99a17;
  -webkit-tap-highlight-color:transparent;
}
.bigBtn:active{transform:translateY(4px);box-shadow:0 3px 0 #c99a17}

.confettiBit{position:fixed;z-index:60;pointer-events:none;will-change:transform}

.popRing{
  position:fixed;z-index:55;border-radius:50%;pointer-events:none;
  border:4px solid rgba(255,255,255,.95);
  animation:popRing .5s ease-out forwards;
}
@keyframes popRing{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.2);opacity:0}}

.wiggle{animation:wig .55s ease-in-out}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) scale(1.06)}75%{transform:rotate(7deg) scale(1.06)}}

.blk{animation:blinkAnim 4.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes blinkAnim{0%,93%,100%{transform:scaleY(1)}95.5%,97.5%{transform:scaleY(.08)}}

/* ---------- micro-motion: everything alive breathes a little ---------- */

@keyframes breatheAnim{
  0%,100%{transform:translateY(0) scale(1) rotate(0)}
  50%{transform:translateY(-4px) scale(1.025) rotate(.6deg)}
}
@keyframes floatyAnim{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-8px) rotate(-.8deg)}
}
.breathe, .breathe-host svg{animation:breatheAnim 3.6s ease-in-out infinite}

/* home tiles: the artwork drifts, the button itself stays solid to tap */
.tiles .art{animation:floatyAnim 5.5s ease-in-out infinite}
.tiles .tile:nth-child(2n) .art{animation-delay:-1.8s;animation-duration:6.3s}
.tiles .tile:nth-child(3n) .art{animation-delay:-3.4s;animation-duration:5.1s}
.tiles .tile:nth-child(4n) .art{animation-delay:-2.6s;animation-duration:6.8s}

/* grids of creatures breathe out of phase so it never looks mechanical */
.stagger > *:nth-child(2n) svg{animation-delay:-1.2s}
.stagger > *:nth-child(3n) svg{animation-delay:-2.3s}
.stagger > *:nth-child(5n) svg{animation-delay:-.6s}

/* a little sailboat drifts across the sea */
.boat{
  position:fixed;z-index:1;top:calc(62% - 58px);left:-140px;
  width:clamp(70px,10vw,110px);cursor:pointer;background:none;border:none;padding:0;
  animation:boatDrift 75s linear infinite;
  filter:drop-shadow(0 6px 8px rgba(18,59,71,.25));
  -webkit-tap-highlight-color:transparent;
}
.boat svg{width:100%;height:auto;display:block;animation:boatRock 4s ease-in-out infinite}
@keyframes boatDrift{0%{left:-140px}100%{left:110vw}}
@keyframes boatRock{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}