@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --sky-deep: #080f20;
  --sky-mid: #0c172b;
  --sky-warm: #302014;
  --gold: #f4aa25;
  --gold-soft: #f6b55d;
  --text-soft: #b7bed0;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--sans);
  color: #fff;
  background: var(--sky-deep);
}

button {
  font: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid #0a1f44;
  outline-offset: 3px;
}

/* =========================================
   MAIN BACKGROUND
========================================= */

.landing {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 62px 24px 100px;

  background:
    radial-gradient(
      ellipse 80% 60% at 50% 70%,
      rgba(242,156,34,.43),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      var(--sky-deep) 0%,
      var(--sky-mid) 50%,
      var(--sky-warm) 100%
    );
}

/* SUN BACKGROUND GLOW */

.landing::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  content: '';
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(243,164,27,.33) 0%,
    rgba(210,122,7,.13) 45%,
    transparent 70%
  );
  filter: blur(8px);
  pointer-events: none;
}

/* =========================================
   BACKGROUND STARS
========================================= */

.stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stars i {
  position: absolute;
  display: block;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: #fff;
}

.stars i:nth-child(1) {left:8%;top:12%;opacity:.7}
.stars i:nth-child(2) {left:15%;top:5%;opacity:.5;width:1px;height:1px}
.stars i:nth-child(3) {left:22%;top:18%;opacity:.6;width:2px;height:2px}
.stars i:nth-child(4) {left:35%;top:8%;opacity:.4;width:1px;height:1px}
.stars i:nth-child(5) {left:42%;top:22%;opacity:.65}
.stars i:nth-child(6) {left:55%;top:6%;opacity:.5;width:1px;height:1px}
.stars i:nth-child(7) {left:63%;top:15%;opacity:.55;width:2px;height:2px}
.stars i:nth-child(8) {left:72%;top:4%;opacity:.45;width:1px;height:1px}
.stars i:nth-child(9) {left:80%;top:20%;opacity:.7}
.stars i:nth-child(10) {left:88%;top:9%;opacity:.5;width:1px;height:1px}
.stars i:nth-child(11) {left:92%;top:25%;opacity:.6;width:2px;height:2px}
.stars i:nth-child(12) {left:5%;top:35%;opacity:.4;width:1px;height:1px}
.stars i:nth-child(13) {left:18%;top:40%;opacity:.55}
.stars i:nth-child(14) {left:28%;top:32%;opacity:.5;width:1px;height:1px}
.stars i:nth-child(15) {left:45%;top:38%;opacity:.45;width:2px;height:2px}
.stars i:nth-child(16) {left:60%;top:30%;opacity:.6;width:1px;height:1px}
.stars i:nth-child(17) {left:75%;top:42%;opacity:.5}
.stars i:nth-child(18) {left:85%;top:35%;opacity:.55;width:1px;height:1px}
.stars i:nth-child(19) {left:95%;top:40%;opacity:.4;width:2px;height:2px}
.stars i:nth-child(20) {left:10%;top:55%;opacity:.35;width:1px;height:1px}
.stars i:nth-child(21) {left:30%;top:60%;opacity:.4}
.stars i:nth-child(22) {left:50%;top:55%;opacity:.3;width:1px;height:1px}
.stars i:nth-child(23) {left:70%;top:62%;opacity:.4;width:2px;height:2px}
.stars i:nth-child(24) {left:90%;top:52%;opacity:.4;width:1px;height:1px}

/* =========================================
   CENTER CONTENT
========================================= */

.centerpiece {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1200px);
  text-align: center;
}

/* =========================================
   ANIMATED SUN
========================================= */

/* Entire sun floating */

.sunmark {
  position: relative;
  display: block;
  height: 220px;
  width: 220px;
  flex: none;
  margin-bottom: 30px;

  animation-name: sun-float;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;

  will-change: transform;
}

/* SVG positioning */

.sunmark svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Rotating rays: SVG-native rotation keeps the thin lines as vector artwork. */
.sunrays {
  shape-rendering: geometricPrecision;
  /* Rotation now lives inside the SVG <g> via animateTransform. */
}
.sunrays line {
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

/* Glowing breathing sun */

.sunbody {
  transform-origin: center center;
  transform-box: view-box;

  animation-name: sun-breathe;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;

  will-change: transform, filter;
}

/* Sun pulsing and glowing */

@keyframes sun-breathe {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(
      0 0 8px rgba(244,170,37,.18)
    );
  }

  50% {
    transform: scale(1.09);
    filter: drop-shadow(
      0 0 25px rgba(244,170,37,.60)
    );
  }
}

/* Vertical sun movement */

@keyframes sun-float {
  0%, 100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-18px);
  }
}

/* =========================================
   BRAND TEXT
========================================= */

.brand {
  margin: 0 0 21px;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: 16px;
  font-weight: 500;
}

h1 {
  margin: 0 0 24px;
  font: 700 clamp(4rem, 8.2vw, 8rem)/1.08 var(--serif);
  letter-spacing: -.035em;
}

.gold-rule {
  width: 66px;
  height: 1px;
  display: block;
  background: var(--gold);
  margin: 0 0 25px;
}

.tagline {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--text-soft);
}

.domain-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  color: #7e8798;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .15em;
  text-align: center;
}

/* =========================================
   COOKIE BANNER
========================================= */

.cookie-banner {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  color: #171717;
  box-shadow: 0 -3px 17px rgba(0,0,0,.12);
  border-top: 1px solid #d1d5db;
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 17px 24px;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  align-items: center;
}

.cookie-copy {
  flex: 1;
}

.cookie-copy h2 {
  margin: 0 0 4px;
  font: 700 15px/1.3 Georgia, serif;
  color: #272727;
}

.cookie-copy p {
  margin: 0;
  color: #5b6473;
  font-size: 14px;
  line-height: 1.5;
}

.cookie-actions {
  flex: none;
  display: flex;
  gap: 10px;
  align-items: center;
}

.cookie-actions button {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 600;
  font-size: 13px;
  transition: filter .2s;
}

.cookie-actions button:hover {
  filter: brightness(.94);
}

.cookie-decline {
  background: #d4f51f;
  color: #676b24;
}

.cookie-accept {
  background: #f2a010;
  color: #fff;
  outline: 2px solid #222;
  outline-offset: 1px;
}

/* =========================================
   MOBILE RESPONSIVE DESIGN
========================================= */

@media (max-width: 700px) {

  .landing {
    padding: 32px 20px 88px;
  }

  .sunmark {
    width: 175px;
    height: 175px;
    margin-bottom: 24px;
  }

  .brand {
    font-size: 12px;
    margin-bottom: 18px;
    letter-spacing: .22em;
  }

  h1 {
    font-size: clamp(3.25rem, 12vw, 5.6rem);
    margin-bottom: 23px;
  }

  .gold-rule {
    margin-bottom: 20px;
  }

  .tagline {
    font-size: 15px;
  }

  .cookie-inner {
    padding: 14px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
  }

  .cookie-copy p {
    font-size: 12px;
  }

  .cookie-actions {
    justify-content: flex-end;
  }
}

/* =========================================
   SHORT DESKTOP SCREENS
========================================= */

@media (max-height: 660px) and (min-width: 701px) {

  .landing {
    padding-top: 30px;
    padding-bottom: 45px;
  }

  .sunmark {
    width: 150px;
    height: 150px;
    margin-bottom: 16px;
  }

  .brand {
    margin-bottom: 12px;
  }

  h1 {
    font-size: clamp(4rem, 7.4vw, 7rem);
    margin-bottom: 16px;
  }

  .gold-rule {
    margin-bottom: 12px;
  }

  .domain-name {
    bottom: 12px;
  }
}

/* =========================================
   M LOGO - THREE TIMES SMALLER
========================================= */

/*
   Logo size: 19% of sun container.
   Overrides the older 48% inline stylesheet
   in index.php without changing that file.
*/

.sunmark > img.sun-logo-center {
  width: 19% !important;
  height: 19% !important;
}

/* End of MySunDirection CSS v1.6 */