/**
 * PortShopping.expert niche chrome v1.4
 * Scene: dusk seascape, three modern cruise ships, two airplanes with
 *        contrails, fifteen falling diamonds, duck flotilla (2 ducklings +
 *        1 clickable duck linking to /duck/)
 * Preloader: glamorous GMT "Batman"-style watch FACE, hands sweeping a
 *        12-hour circle (hour 36s, minute 3s = true 1:12 ratio), light
 *        gleam passing over the crystal, warm gold glow
 *
 * Brand cues evoked by shape/color only; no logos or trademarked patterns.
 * Scene animation is transform/opacity only; collapses under reduced motion.
 */

/* ---------- Scene container ---------- */

.psx-ocean {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg,
    #071626 0%,
    #0A2038 28%,
    #0B2440 41%,
    #0F455B 43%,
    #104A5E 68%,
    #0E4B5A 100%);
}

.page.page_wrap {
  position: relative;
  z-index: 1;
}

.page .background {
  display: none;
}

/* ---------- Sun glint ---------- */

.psx-ocean__glint {
  position: absolute;
  top: 40vh;
  left: 55%;
  width: 42vw;
  height: 13vh;
  background: radial-gradient(ellipse at center,
    rgba(255, 205, 120, 0.14) 0%,
    rgba(255, 205, 120, 0.05) 42%,
    rgba(255, 205, 120, 0) 70%);
  animation: psx-glint 9s ease-in-out infinite alternate;
}

@keyframes psx-glint {
  from { opacity: 0.45; transform: scaleX(0.92); }
  to   { opacity: 1;    transform: scaleX(1.06); }
}

/* ---------- Modern cruise ships (traffic) ---------- */

.psx-ship {
  position: absolute;
  left: 0;
}

.psx-ship::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2072'%3E%3Cpath%20d='M4%2044%20L14%2064%20L274%2064%20L296%2044%20Z'%20fill='%23081524'/%3E%3Crect%20x='26'%20y='32'%20width='234'%20height='12'%20rx='2'%20fill='%230B1B2E'/%3E%3Cpath%20d='M258%2032%20L284%2044%20L258%2044%20Z'%20fill='%230B1B2E'/%3E%3Crect%20x='40'%20y='21'%20width='202'%20height='11'%20rx='3'%20fill='%230B1B2E'/%3E%3Crect%20x='56'%20y='11'%20width='152'%20height='10'%20rx='4'%20fill='%230B1B2E'/%3E%3Cpath%20d='M84%204%20L102%204%20L97%2011%20L89%2011%20Z'%20fill='%230B1B2E'/%3E%3Cline%20x1='226'%20y1='4'%20x2='222'%20y2='11'%20stroke='%230B1B2E'%20stroke-width='2'/%3E%3Cline%20x1='32'%20y1='38'%20x2='252'%20y2='38'%20stroke='%23F4E3B2'%20stroke-opacity='0.5'%20stroke-width='2'%20stroke-dasharray='3%206'/%3E%3Cline%20x1='46'%20y1='26.5'%20x2='234'%20y2='26.5'%20stroke='%23F4E3B2'%20stroke-opacity='0.42'%20stroke-width='2'%20stroke-dasharray='3%207'/%3E%3Cline%20x1='62'%20y1='16'%20x2='200'%20y2='16'%20stroke='%23F4E3B2'%20stroke-opacity='0.35'%20stroke-width='2'%20stroke-dasharray='3%208'/%3E%3Cline%20x1='34'%20y1='52'%20x2='262'%20y2='52'%20stroke='%23F4E3B2'%20stroke-opacity='0.3'%20stroke-width='1.6'%20stroke-dasharray='2%209'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: psx-bob 6.5s ease-in-out infinite alternate;
}

.psx-ship--1 {
  top: calc(41vh - 60px);
  width: 260px;
  height: 62px;
  animation: psx-drift 150s linear infinite;
  animation-delay: -40s;
  opacity: 0.95;
}

.psx-ship--2 {
  top: calc(40vh - 30px);
  width: 140px;
  height: 34px;
  animation: psx-drift-rev 230s linear infinite;
  animation-delay: -120s;
  opacity: 0.6;
}

.psx-ship--2::before {
  animation: psx-bob-flip 7.5s ease-in-out infinite alternate;
}

.psx-ship--3 {
  top: calc(40.6vh - 46px);
  width: 190px;
  height: 46px;
  animation: psx-drift 190s linear infinite;
  animation-delay: -150s;
  opacity: 0.8;
}

@keyframes psx-drift {
  from { transform: translate3d(-300px, 0, 0); }
  to   { transform: translate3d(calc(100vw + 300px), 0, 0); }
}

@keyframes psx-drift-rev {
  from { transform: translate3d(calc(100vw + 300px), 0, 0); }
  to   { transform: translate3d(-300px, 0, 0); }
}

@keyframes psx-bob {
  from { transform: translate3d(0, -2px, 0); }
  to   { transform: translate3d(0,  2px, 0); }
}

@keyframes psx-bob-flip {
  from { transform: scaleX(-1) translate3d(0, -1.5px, 0); }
  to   { transform: scaleX(-1) translate3d(0,  1.5px, 0); }
}

/* ---------- Airplanes ---------- */

.psx-plane {
  position: absolute;
  left: 0;
  width: 52px;
  height: 18px;
}

.psx-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2052%2018'%3E%3Cpath%20d='M2%209%20C8%206.5%2030%206%2042%207.5%20L50%209%20L42%2010.5%20C30%2012%208%2011.5%202%209%20Z'%20fill='%232E4A66'/%3E%3Cpath%20d='M22%209%20L13%2016%20L18%2016%20L28%2010%20Z'%20fill='%232E4A66'/%3E%3Cpath%20d='M22%209%20L15%203%20L19%203%20L28%208%20Z'%20fill='%232E4A66'/%3E%3Cpath%20d='M6%208%20L2%202.5%20L6%203.5%20L10%207.5%20Z'%20fill='%232E4A66'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.psx-plane::after {
  content: "";
  position: absolute;
  top: 45%;
  height: 2px;
  width: 120px;
  border-radius: 2px;
}

.psx-plane--1 {
  top: 9vh;
  animation: psx-drift 75s linear infinite;
  animation-delay: -20s;
}

.psx-plane--1::after {
  right: 96%;
  background: linear-gradient(270deg, rgba(232, 234, 237, 0.3), rgba(232, 234, 237, 0));
}

.psx-plane--2 {
  top: 15vh;
  width: 40px;
  height: 14px;
  opacity: 0.75;
  animation: psx-drift-rev 105s linear infinite;
  animation-delay: -60s;
}

.psx-plane--2::before {
  transform: scaleX(-1);
}

.psx-plane--2::after {
  left: 96%;
  background: linear-gradient(90deg, rgba(232, 234, 237, 0.25), rgba(232, 234, 237, 0));
}

/* ---------- Falling diamonds ---------- */

.psx-ocean__gem {
  position: absolute;
  top: -30px;
  width: 16px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2022'%3E%3Cpath%20d='M6%202%20L18%202%20L22%208%20L12%2020%20L2%208%20Z'%20fill='%23CFEDF2'%20fill-opacity='0.85'%20stroke='%238FD6CE'%20stroke-width='1'/%3E%3Cpath%20d='M2%208%20L22%208%20M6%202%20L9%208%20L12%2020%20M18%202%20L15%208%20L12%2020'%20stroke='%239FD9DE'%20stroke-width='0.7'%20fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation: psx-fall 18s linear infinite;
}

.psx-ocean__gem--1  { left: 8%;  width: 16px; height: 15px; animation-duration: 18s; animation-delay: -2s; }
.psx-ocean__gem--2  { left: 18%; width: 11px; height: 10px; animation-duration: 24s; animation-delay: -9s; }
.psx-ocean__gem--3  { left: 30%; width: 20px; height: 18px; animation-duration: 15s; animation-delay: -5s; }
.psx-ocean__gem--4  { left: 42%; width: 13px; height: 12px; animation-duration: 21s; animation-delay: -13s; }
.psx-ocean__gem--5  { left: 55%; width: 17px; height: 16px; animation-duration: 17s; animation-delay: -1s; }
.psx-ocean__gem--6  { left: 66%; width: 12px; height: 11px; animation-duration: 25s; animation-delay: -17s; }
.psx-ocean__gem--7  { left: 76%; width: 19px; height: 17px; animation-duration: 16s; animation-delay: -7s; }
.psx-ocean__gem--8  { left: 86%; width: 14px; height: 13px; animation-duration: 22s; animation-delay: -11s; }
.psx-ocean__gem--9  { left: 94%; width: 15px; height: 14px; animation-duration: 19s; animation-delay: -15s; }
.psx-ocean__gem--10 { left: 4%;  width: 14px; height: 13px; animation-duration: 20s; animation-delay: -4s; }
.psx-ocean__gem--11 { left: 13%; width: 18px; height: 16px; animation-duration: 16s; animation-delay: -10s; }
.psx-ocean__gem--12 { left: 24%; width: 12px; height: 11px; animation-duration: 23s; animation-delay: -19s; }
.psx-ocean__gem--13 { left: 37%; width: 15px; height: 14px; animation-duration: 18s; animation-delay: -8s; }
.psx-ocean__gem--14 { left: 49%; width: 11px; height: 10px; animation-duration: 26s; animation-delay: -21s; }
.psx-ocean__gem--15 { left: 61%; width: 16px; height: 15px; animation-duration: 17s; animation-delay: -3s; }

@keyframes psx-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(-10deg);      opacity: 0; }
  6%   { opacity: 0.9; }
  50%  { transform: translate3d(16px, 55vh, 0) rotate(8deg); }
  74%  { opacity: 0.85; }
  86%  { opacity: 0; }
  100% { transform: translate3d(-8px, 112vh, 0) rotate(-6deg); opacity: 0; }
}

/* ---------- Layered waves ---------- */

.psx-ocean__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% + 1200px);
  background-repeat: repeat-x;
  background-size: 1200px 100%;
}

.psx-ocean__wave--far {
  height: 23vh;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,60%20C300,110%20300,10%20600,60%20C900,110%20900,10%201200,60%20L1200,120%20L0,120%20Z'%20fill='%23123F52'%20fill-opacity='0.8'/%3E%3C/svg%3E");
  animation: psx-wave 44s linear infinite;
}

.psx-ocean__wave--mid {
  height: 16vh;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,60%20C300,110%20300,10%20600,60%20C900,110%20900,10%201200,60%20L1200,120%20L0,120%20Z'%20fill='%23145666'%20fill-opacity='0.75'/%3E%3C/svg%3E");
  animation: psx-wave 30s linear infinite reverse;
}

.psx-ocean__wave--near {
  height: 10vh;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,60%20C300,110%20300,10%20600,60%20C900,110%20900,10%201200,60%20L1200,120%20L0,120%20Z'%20fill='%230C3D4C'/%3E%3Cpath%20d='M0,60%20C300,110%20300,10%20600,60%20C900,110%20900,10%201200,60'%20fill='none'%20stroke='%238FD6CE'%20stroke-opacity='0.28'%20stroke-width='3'/%3E%3C/svg%3E");
  animation: psx-wave 21s linear infinite;
}

@keyframes psx-wave {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1200px, 0, 0); }
}

/* ---------- Duck flotilla ---------- */

.psx-duck,
.psx-duckling {
  background: none;
}

.psx-duck {
  position: fixed;
  bottom: 5.5vh;
  left: 0;
  width: 36px;
  height: 32px;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  animation: psx-duck-drift 110s linear infinite;
}

.psx-duck::before,
.psx-duckling::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2034'%3E%3Cellipse%20cx='22'%20cy='24'%20rx='15'%20ry='9'%20fill='%23FFD34D'/%3E%3Ccircle%20cx='14'%20cy='11'%20r='9'%20fill='%23FFD34D'/%3E%3Cpath%20d='M6%2010%20L0%2013%20L6%2016%20Z'%20fill='%23F59E0B'/%3E%3Cellipse%20cx='26'%20cy='24'%20rx='6.5'%20ry='4'%20fill='%23F2C230'/%3E%3Ccircle%20cx='11.5'%20cy='9'%20r='1.7'%20fill='%231B2430'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: psx-duck-rock 3.4s ease-in-out infinite alternate;
  transform-origin: 50% 85%;
}

.psx-duck:focus-visible {
  outline: 2px solid #C9A227;
  outline-offset: 3px;
  border-radius: 50%;
}

/* Decorative ducklings inside the scene (non-interactive) */
.psx-duckling {
  position: absolute;
  pointer-events: none;
}

.psx-duckling--1 {
  bottom: 8vh;
  left: 0;
  width: 22px;
  height: 19px;
  opacity: 0.85;
  animation: psx-drift 140s linear infinite;
  animation-delay: -35s;
}

.psx-duckling--1::before {
  animation: psx-duck-rock-flip 3.1s ease-in-out infinite alternate;
}

.psx-duckling--2 {
  bottom: 3.5vh;
  left: 0;
  width: 28px;
  height: 25px;
  animation: psx-drift-rev 88s linear infinite;
  animation-delay: -50s;
}

@keyframes psx-duck-drift {
  from { transform: translate3d(calc(100vw + 60px), 0, 0); }
  to   { transform: translate3d(-80px, 0, 0); }
}

@keyframes psx-duck-rock {
  from { transform: rotate(-5deg) translate3d(0, -1.5px, 0); }
  to   { transform: rotate(5deg)  translate3d(0,  1.5px, 0); }
}

@keyframes psx-duck-rock-flip {
  from { transform: scaleX(-1) rotate(-5deg) translate3d(0, -1.2px, 0); }
  to   { transform: scaleX(-1) rotate(5deg)  translate3d(0,  1.2px, 0); }
}

/* ---------- Preloader: glamorous watch face, 12-hour sweep ---------- */

.preloader {
  background: #071626 !important;
}

.preloader .vertical-center {
  position: relative;
}

.preloader .spinner,
.preloader .spinner.box-rotation,
.preloader .spinner.default-circle {
  width: 172px !important;
  height: 172px !important;
  position: relative;
  display: inline-block;
  border: none !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 70px rgba(201, 162, 39, 0.3),
    0 26px 60px rgba(3, 10, 20, 0.55) !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Ccircle%20cx='100'%20cy='100'%20r='98'%20fill='%236E747C'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='94'%20fill='%23A8AEB6'/%3E%3Cpath%20d='M12%20100%20A88%2088%200%200%201%20188%20100%20Z'%20fill='%231D3E77'/%3E%3Cpath%20d='M188%20100%20A88%2088%200%200%201%2012%20100%20Z'%20fill='%230B0B0D'/%3E%3Ccircle%20cx='100'%20cy='22'%20r='5'%20fill='%23E8EAEA'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='88'%20fill='none'%20stroke='%236E747C'%20stroke-width='2'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='67'%20fill='none'%20stroke='%23C9CDD2'%20stroke-width='3'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='64'%20fill='%2308080A'/%3E%3Cpath%20d='M93%2044%20L107%2044%20L100%2056%20Z'%20fill='%23E8EAEA'/%3E%3Crect%20x='140'%20y='93'%20width='14'%20height='14'%20rx='2'%20fill='%23E8E6E1'/%3E%3Cg%20fill='%23E8EAEA'%3E%3Ccircle%20cx='127'%20cy='53.2'%20r='4'/%3E%3Ccircle%20cx='146.8'%20cy='73'%20r='4'/%3E%3Ccircle%20cx='146.8'%20cy='127'%20r='4'/%3E%3Ccircle%20cx='127'%20cy='146.8'%20r='4'/%3E%3Ccircle%20cx='100'%20cy='154'%20r='4'/%3E%3Ccircle%20cx='73'%20cy='146.8'%20r='4'/%3E%3Ccircle%20cx='53.2'%20cy='127'%20r='4'/%3E%3Ccircle%20cx='46'%20cy='100'%20r='4'/%3E%3Ccircle%20cx='53.2'%20cy='73'%20r='4'/%3E%3Ccircle%20cx='73'%20cy='53.2'%20r='4'/%3E%3C/g%3E%3Cline%20x1='100'%20y1='100'%20x2='68'%20y2='58'%20stroke='%232C5BB8'%20stroke-width='4'%20stroke-linecap='round'/%3E%3Ccircle%20cx='68'%20cy='58'%20r='4.5'%20fill='%232C5BB8'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: visible;
  margin: 0 auto;
  animation: none !important;
}

/* Reset the parent theme's spinner pseudo styling (box-rotation draws
   translucent boxes via ::before/::after backgrounds). */
.preloader .spinner::before,
.preloader .spinner::after {
  width: auto;
  height: auto;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  top: auto;
  left: auto;
  margin: 0 !important;
}

/* Hour hand: full circle in 36s. Starts at the classic 10:08 pose. */
.preloader .spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Crect%20x='96.5'%20y='58'%20width='7'%20height='48'%20rx='3.5'%20fill='%23D6DADF'/%3E%3Ccircle%20cx='100'%20cy='66'%20r='3'%20fill='%23E8EAEA'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: psx-hand 36s linear infinite;
  animation-delay: -30.4s;
}

/* Minute hand + center cap: full circle in 3s (true 1:12 ratio). */
.preloader .spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Crect%20x='97.5'%20y='38'%20width='5'%20height='68'%20rx='2.5'%20fill='%23D6DADF'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='6.5'%20fill='%23C9CDD2'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='2.5'%20fill='%238E959D'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: psx-hand 3s linear infinite;
  animation-delay: -0.4s;
}

@keyframes psx-hand {
  to { transform: rotate(360deg); }
}

/* Light gleam sweeping over the crystal. */
.preloader .vertical-center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 172px;
  height: 172px;
  margin: -86px 0 0 -86px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 96%, transparent 100%);
  animation: psx-wipe 3.2s ease-in-out infinite;
}

@keyframes psx-wipe {
  0%        { background-position: 150% 0; }
  60%, 100% { background-position: -50% 0; }
}

/* ---------- Motion discipline ---------- */

@media (prefers-reduced-motion: reduce) {
  .psx-ocean__glint,
  .psx-ship,
  .psx-ship::before,
  .psx-plane,
  .psx-ocean__wave,
  .psx-duck,
  .psx-duck::before,
  .psx-duckling,
  .psx-duckling::before,
  .preloader .spinner::before,
  .preloader .spinner::after,
  .preloader .vertical-center::before {
    animation: none !important;
  }
  .psx-ship,
  .psx-plane,
  .psx-duckling,
  .psx-ocean__gem { display: none; }
  .psx-duck { left: 4vw; }
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
  .psx-ship--1 { width: 170px; height: 41px; top: calc(41vh - 40px); }
  .psx-ship--2 { width: 95px;  height: 23px; top: calc(40vh - 20px); }
  .psx-ship--3 { display: none; }
  .psx-plane--2 { display: none; }
  .psx-ocean__wave--far { height: 16vh; }
  .psx-ocean__wave--mid { height: 11vh; }
  .psx-ocean__wave--near { height: 7vh; }
  .psx-duck { width: 28px; height: 25px; bottom: 4.5vh; }
  .psx-duckling--1 { display: none; }
  .psx-ocean__gem--2, .psx-ocean__gem--6, .psx-ocean__gem--8,
  .psx-ocean__gem--11, .psx-ocean__gem--14 { display: none; }
  .preloader .spinner, .preloader .spinner.box-rotation { width: 132px !important; height: 132px !important; }
}

/* ============================================================
   v1.5 DAY MODE
   html.psx-day is added pre-paint by a tiny inline script in
   <head> when the visitor's local clock reads 07:00-18:59.
   Night (the palette above) is the no-JS default.
   ============================================================ */

/* ---------- Sun (day only) ---------- */

.psx-ocean__sun {
  display: none;
  position: absolute;
  top: 9vh;
  left: 66%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #FFF8DE 0%,
    #FFEDA6 42%,
    rgba(255, 237, 166, 0) 72%);
  box-shadow: 0 0 90px 34px rgba(255, 240, 180, 0.5);
  animation: psx-sun 10s ease-in-out infinite alternate;
}

html.psx-day .psx-ocean__sun {
  display: block;
}

@keyframes psx-sun {
  from { opacity: 0.9;  transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.05); }
}

/* ---------- Dolphins (day only, leap between the wave layers) ---------- */

.psx-dolphin {
  display: none;
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2040'%3E%3Cpath%20d='M4%2032%20Q6%2028%2010%2027%20Q8%2024%2010%2020%20Q13%2024%2017%2024%20Q26%208%2044%206%20Q56%205%2060%2012%20Q54%2010%2049%2012%20Q58%2016%2058%2024%20Q52%2018%2044%2017%20Q30%2016%2022%2026%20Q16%2034%208%2034%20Q5%2034%204%2032%20Z'%20fill='%2323566E'/%3E%3Cpath%20d='M34%209%20Q36%202%2042%202%20Q38%206%2037%2010%20Z'%20fill='%2323566E'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

html.psx-day .psx-dolphin {
  display: block;
}

.psx-dolphin--1 {
  bottom: 13vh;
  left: 18%;
  width: 62px;
  height: 40px;
  animation: psx-leap 12s ease-in-out infinite;
  animation-delay: -3s;
}

.psx-dolphin--2 {
  bottom: 12vh;
  left: 62%;
  width: 50px;
  height: 32px;
  animation: psx-leap-rev 14s ease-in-out infinite;
  animation-delay: -9s;
}

@keyframes psx-leap {
  0%, 52%   { transform: translate3d(-30px, 90px, 0) rotate(-38deg); opacity: 0; }
  56%       { opacity: 1; }
  68%       { transform: translate3d(70px, -44px, 0) rotate(-2deg); opacity: 1; }
  80%       { transform: translate3d(172px, 90px, 0) rotate(40deg); opacity: 1; }
  81%, 100% { transform: translate3d(172px, 90px, 0) rotate(40deg); opacity: 0; }
}

@keyframes psx-leap-rev {
  0%, 52%   { transform: scaleX(-1) translate3d(-30px, 90px, 0) rotate(-38deg); opacity: 0; }
  56%       { opacity: 1; }
  68%       { transform: scaleX(-1) translate3d(70px, -44px, 0) rotate(-2deg); opacity: 1; }
  80%       { transform: scaleX(-1) translate3d(172px, 90px, 0) rotate(40deg); opacity: 1; }
  81%, 100% { transform: scaleX(-1) translate3d(172px, 90px, 0) rotate(40deg); opacity: 0; }
}

/* ---------- Day palette overrides ---------- */

html.psx-day .psx-ocean {
  background: linear-gradient(180deg,
    #8FD0EA 0%,
    #A5DAEE 28%,
    #BDE4F2 41%,
    #37AECB 43%,
    #2AA0BC 68%,
    #2494B1 100%);
}

html.psx-day .psx-ocean__glint {
  background: radial-gradient(ellipse at center,
    rgba(255, 244, 190, 0.42) 0%,
    rgba(255, 244, 190, 0.14) 42%,
    rgba(255, 244, 190, 0) 70%);
}

/* Ships by day: white superstructure over a dark hull, dark windows */
html.psx-day .psx-ship::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2072'%3E%3Cpath%20d='M4%2044%20L14%2064%20L274%2064%20L296%2044%20Z'%20fill='%2314374C'/%3E%3Crect%20x='26'%20y='32'%20width='234'%20height='12'%20rx='2'%20fill='%23F4F8FA'/%3E%3Cpath%20d='M258%2032%20L284%2044%20L258%2044%20Z'%20fill='%23F4F8FA'/%3E%3Crect%20x='40'%20y='21'%20width='202'%20height='11'%20rx='3'%20fill='%23F4F8FA'/%3E%3Crect%20x='56'%20y='11'%20width='152'%20height='10'%20rx='4'%20fill='%23F4F8FA'/%3E%3Cpath%20d='M84%204%20L102%204%20L97%2011%20L89%2011%20Z'%20fill='%2326536B'/%3E%3Cline%20x1='226'%20y1='4'%20x2='222'%20y2='11'%20stroke='%2326536B'%20stroke-width='2'/%3E%3Cline%20x1='32'%20y1='38'%20x2='252'%20y2='38'%20stroke='%2333566B'%20stroke-opacity='0.75'%20stroke-width='2'%20stroke-dasharray='3%206'/%3E%3Cline%20x1='46'%20y1='26.5'%20x2='234'%20y2='26.5'%20stroke='%2333566B'%20stroke-opacity='0.65'%20stroke-width='2'%20stroke-dasharray='3%207'/%3E%3Cline%20x1='62'%20y1='16'%20x2='200'%20y2='16'%20stroke='%2333566B'%20stroke-opacity='0.55'%20stroke-width='2'%20stroke-dasharray='3%208'/%3E%3Cline%20x1='34'%20y1='52'%20x2='262'%20y2='52'%20stroke='%23E8F2F6'%20stroke-opacity='0.5'%20stroke-width='1.6'%20stroke-dasharray='2%209'/%3E%3C/svg%3E");
}

/* Diamonds by day: white body, deep turquoise facets so they stay crisp */
html.psx-day .psx-ocean__gem {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2022'%3E%3Cpath%20d='M6%202%20L18%202%20L22%208%20L12%2020%20L2%208%20Z'%20fill='%23FFFFFF'%20fill-opacity='0.92'%20stroke='%231F8FA8'%20stroke-width='1.2'/%3E%3Cpath%20d='M2%208%20L22%208%20M6%202%20L9%208%20L12%2020%20M18%202%20L15%208%20L12%2020'%20stroke='%2357B7CC'%20stroke-width='0.8'%20fill='none'/%3E%3C/svg%3E");
}

/* Waves by day: bright turquoise with white foam crest */
html.psx-day .psx-ocean__wave--far {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,60%20C300,110%20300,10%20600,60%20C900,110%20900,10%201200,60%20L1200,120%20L0,120%20Z'%20fill='%232E9FBC'%20fill-opacity='0.75'/%3E%3C/svg%3E");
}

html.psx-day .psx-ocean__wave--mid {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,60%20C300,110%20300,10%20600,60%20C900,110%20900,10%201200,60%20L1200,120%20L0,120%20Z'%20fill='%233BAECB'%20fill-opacity='0.7'/%3E%3C/svg%3E");
}

html.psx-day .psx-ocean__wave--near {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,60%20C300,110%20300,10%20600,60%20C900,110%20900,10%201200,60%20L1200,120%20L0,120%20Z'%20fill='%231F7F98'/%3E%3Cpath%20d='M0,60%20C300,110%20300,10%20600,60%20C900,110%20900,10%201200,60'%20fill='none'%20stroke='%23EFFBFD'%20stroke-opacity='0.5'%20stroke-width='3'/%3E%3C/svg%3E");
}

/* Preloader overlay by day */
html.psx-day .preloader {
  background: #DDEFF7 !important;
}

html.psx-day .preloader .spinner,
html.psx-day .preloader .spinner.box-rotation,
html.psx-day .preloader .spinner.default-circle {
  box-shadow:
    0 0 70px rgba(201, 162, 39, 0.35),
    0 26px 60px rgba(20, 55, 76, 0.35) !important;
}

/* ---------- Day-mode motion & phone discipline ---------- */

@media (prefers-reduced-motion: reduce) {
  .psx-ocean__sun,
  .psx-dolphin {
    animation: none !important;
  }
  .psx-dolphin { display: none !important; }
}

@media (max-width: 767px) {
  .psx-ocean__sun { width: 80px; height: 80px; left: 62%; }
  .psx-dolphin--2 { display: none; }
  .psx-dolphin--1 { width: 46px; height: 30px; }
}

/* ============================================================
   v1.6 DREAM PASS
   Softer storybook feel in both modes: stars + crescent moon by
   night, cream-horizon pastels by day, drifting puffy clouds in
   both, a redrawn dolphin, and a duck family train.
   ============================================================ */

/* ---------- Dreamier gradients ---------- */

.psx-ocean {
  background: linear-gradient(180deg,
    #0A1A32 0%,
    #0E2544 26%,
    #13304F 40%,
    #14506A 43%,
    #125871 68%,
    #10536B 100%);
}

html.psx-day .psx-ocean {
  background: linear-gradient(180deg,
    #9AD6EE 0%,
    #BCE5F4 26%,
    #E9F7F3 41%,
    #5FC3D8 43%,
    #39ADC8 66%,
    #2A9CB8 100%);
}

html.psx-day .psx-ocean__sun {
  box-shadow: 0 0 110px 44px rgba(255, 242, 190, 0.55);
}

/* ---------- Twinkling stars (night only) ---------- */

.psx-star {
  position: absolute;
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%200%20L14%2010%20L24%2012%20L14%2014%20L12%2024%20L10%2014%20L0%2012%20L10%2010%20Z'%20fill='%23EFE9D4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
  animation: psx-twinkle 4.5s ease-in-out infinite;
}

.psx-star--1 { top: 5vh;  left: 8%;  animation-delay: -1s; }
.psx-star--2 { top: 12vh; left: 24%; width: 7px; height: 7px; animation-delay: -2.6s; animation-duration: 5.5s; }
.psx-star--3 { top: 7vh;  left: 38%; width: 11px; height: 11px; animation-delay: -0.4s; animation-duration: 3.8s; }
.psx-star--4 { top: 16vh; left: 52%; animation-delay: -3.2s; }
.psx-star--5 { top: 4vh;  left: 58%; width: 7px; height: 7px; animation-delay: -1.8s; animation-duration: 6s; }
.psx-star--6 { top: 22vh; left: 74%; width: 8px; height: 8px; animation-delay: -2.2s; animation-duration: 4s; }
.psx-star--7 { top: 9vh;  left: 84%; width: 12px; height: 12px; animation-delay: -0.9s; animation-duration: 5s; }
.psx-star--8 { top: 27vh; left: 12%; width: 7px; height: 7px; animation-delay: -3.8s; animation-duration: 5.8s; }

html.psx-day .psx-star { display: none; }

@keyframes psx-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50%      { opacity: 0.9;  transform: scale(1); }
}

/* ---------- Crescent moon (night only) ---------- */

.psx-moon {
  position: absolute;
  top: 8vh;
  left: 16%;
  width: 84px;
  height: 84px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Cdefs%3E%3Cmask%20id='m'%3E%3Crect%20width='64'%20height='64'%20fill='white'/%3E%3Ccircle%20cx='43'%20cy='25'%20r='23'%20fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle%20cx='30'%20cy='32'%20r='26'%20fill='%23F2ECD8'%20mask='url(%23m)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 26px rgba(246, 241, 222, 0.5));
  animation: psx-float 14s ease-in-out infinite alternate;
}

html.psx-day .psx-moon { display: none; }

@keyframes psx-float {
  from { transform: translate3d(0, -4px, 0); }
  to   { transform: translate3d(0,  4px, 0); }
}

/* ---------- Puffy storybook clouds (both modes) ---------- */

.psx-cloud {
  position: absolute;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2044'%3E%3Cg%20fill='%23FFFFFF'%3E%3Cellipse%20cx='30'%20cy='30'%20rx='22'%20ry='13'/%3E%3Cellipse%20cx='58'%20cy='22'%20rx='26'%20ry='17'/%3E%3Cellipse%20cx='88'%20cy='30'%20rx='24'%20ry='13'/%3E%3Crect%20x='14'%20y='28'%20width='92'%20height='15'%20rx='7.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.1;
}

.psx-cloud--1 { top: 5vh;  width: 300px; height: 96px; animation: psx-cloud-drift 240s linear infinite; animation-delay: -60s; }
.psx-cloud--2 { top: 13vh; width: 200px; height: 66px; animation: psx-cloud-drift 190s linear infinite; animation-delay: -150s; opacity: 0.08; }
.psx-cloud--3 { top: 21vh; width: 240px; height: 78px; animation: psx-cloud-drift 280s linear infinite; animation-delay: -200s; opacity: 0.07; }
.psx-cloud--4 { top: 30vh; width: 150px; height: 50px; animation: psx-cloud-drift 210s linear infinite; animation-delay: -90s;  opacity: 0.06; }

html.psx-day .psx-cloud--1 { opacity: 0.92; }
html.psx-day .psx-cloud--2 { opacity: 0.78; }
html.psx-day .psx-cloud--3 { opacity: 0.66; }
html.psx-day .psx-cloud--4 { opacity: 0.5; }

@keyframes psx-cloud-drift {
  from { transform: translate3d(-420px, 0, 0); }
  to   { transform: translate3d(calc(100vw + 420px), 0, 0); }
}

/* ---------- Redrawn dolphin (recognizable: beak, dorsal fin, flukes) ---------- */

.psx-dolphin {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096%2064'%3E%3Cpath%20d='M88%2014%20C80%205%2062%202%2048%208%20C36%2013%2026%2024%2020%2038%20C18%2042%2016%2047%2015%2052%20C11%2047%207%2044%202%2044%20C7%2050%207%2054%204%2059%20C10%2058%2014%2056%2017%2053%20C20%2050%2022%2044%2025%2038%20C31%2026%2040%2018%2052%2015%20C62%2013%2076%2013%2084%2016%20L90%2015%20Z'%20fill='%233F7291'/%3E%3Cpath%20d='M46%209%20C48%202%2055%20-1%2061%201%20C56%204%2052%207%2050%2012%20Z'%20fill='%233F7291'/%3E%3Cpath%20d='M42%2016%20C38%2022%2032%2026%2026%2026%20C30%2029%2036%2029%2041%2025%20Z'%20fill='%233F7291'/%3E%3C/svg%3E");
}

/* ---------- Duck family train (ducklings 2-4 share one speed) ---------- */

.psx-duckling--3 {
  bottom: 3.2vh;
  left: 0;
  width: 17px;
  height: 15px;
  animation: psx-drift-rev 88s linear infinite;
  animation-delay: -47.2s;
}

.psx-duckling--4 {
  bottom: 3.4vh;
  left: 0;
  width: 15px;
  height: 13px;
  animation: psx-drift-rev 88s linear infinite;
  animation-delay: -44.8s;
}

/* ---------- Dream-pass motion & phone discipline ---------- */

@media (prefers-reduced-motion: reduce) {
  .psx-star,
  .psx-moon,
  .psx-cloud {
    animation: none !important;
  }
  .psx-star { opacity: 0.3; }
}

@media (max-width: 767px) {
  .psx-cloud--3, .psx-cloud--4 { display: none; }
  .psx-cloud--1 { width: 190px; height: 61px; }
  .psx-cloud--2 { width: 130px; height: 43px; }
  .psx-star--5, .psx-star--6, .psx-star--8 { display: none; }
  .psx-moon { width: 60px; height: 60px; }
  .psx-duckling--4 { display: none; }
}