:root {
  --accent: #e6a66e;
  --sun: #ffd27a;
  --text: #f4eee5;
  --muted: #a9a6a0;
  --panel: rgba(11,16,29,.84);
  --border: rgba(231,192,130,.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #050811;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   LANDING
   ========================================= */

.landing {
  --sunset-progress: 0;

  height: 100vh;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #050811;
}

.landing:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(8,12,22,.2) 38%,
    #080c16 100%
  );
}


/* =========================================
   SKY
   ========================================= */

.sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: #050811;
  overflow: hidden;
}

.sky:before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    #70a9c6 0%,
    #8db7c9 55%,
    #b8d0d0 100%
  );

  opacity: calc(1 - var(--sunset-progress,0));
}

.sky:after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    #d28a67 0%,
    #d97762 48%,
    #9f4e61 100%
  );

  opacity: var(--sunset-progress,0);
}

.stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 2s;
  pointer-events: none;

  background-image:
    radial-gradient(
      circle,
      #fff 0 1px,
      transparent 1.5px
    );

  background-size: 87px 91px;
}


/* =========================================
   LANDING TITLE
   ========================================= */

.landing-title {
  position: absolute;
  top: 9%;
  left: 7%;

  opacity: 0;
  transform: translateY(25px);
  transition: 1.2s;
}

.landing-title.visible {
  opacity: 1;
  transform: none;
}

.landing-title span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  color: #ffffffaa;
}

.landing-title h1 {
  margin: 8px 0 0;

  font-size: clamp(42px,6vw,92px);
  line-height: .95;
  letter-spacing: -.045em;
}

.landing-title i {
  display: block;
  width: 90px;
  height: 2px;
  margin-top: 22px;
  background: var(--text);
}


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

.sun-container {
  position: absolute;
  left: 50%;
  top: 10%;

  width: 1px;
  height: 1px;

  z-index: 5;
  transition: 1s linear;
}

.sun {
  position: relative;

  width: 150px;
  height: 150px;
  padding: 0;

  border: 0;
  background: none;

  transform: translate(-50%,-50%);

  cursor: pointer;
}

.sun b {
  position: absolute;
  inset: 15px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #fff1b0,
      var(--sun) 55%,
      #f2ad55
    );

  box-shadow:
    0 0 25px #ffb85d7a,
    0 0 70px #ffb85d7a;
}

.sun em {
  position: absolute;

  top: calc(100% + 22px);
  left: 50%;

  transform: translateX(-50%);

  opacity: 0;

  color: #fff;
  font-style: normal;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;

  white-space: nowrap;
}

.sun.clickable em {
  opacity: 1;
}

.sun.resting {
  animation: sunBob 3.8s ease-in-out infinite;
}

.sun.resting b {
  animation: sunGlow 3.8s ease-in-out infinite;
}

@keyframes sunBob {
  0%,100% {
    transform:
      translate(-50%,-50%)
      translateY(0);
  }

  25% {
    transform:
      translate(-50%,-50%)
      translateY(-10px);
  }

  50% {
    transform:
      translate(-50%,-50%)
      translateY(2px);
  }

  75% {
    transform:
      translate(-50%,-50%)
      translateY(-8px);
  }
}

@keyframes sunGlow {
  0%,100% {
    box-shadow:
      0 0 25px #ffb85d7a,
      0 0 70px #ffb85d7a;
  }

  50% {
    box-shadow:
      0 0 30px #ffb85d90,
      0 0 82px #ffb85d90;
  }
}


/* =========================================
   CITY
   ========================================= */

.city {
  position: absolute;

  bottom: 0;
  left: 0;

  width: 100%;
  height: 31%;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  gap: 3px;

  overflow: hidden;
}

.building {
  position: relative;

  background:
    linear-gradient(
      #151c29,
      #080c13
    );
}

.windows {
  position: absolute;

  inset: 12px 8px 5px;

  display: grid;

  grid-auto-rows: 8px;

  gap: 7px 6px;
}

.window {
  background: #ffd88a05;

  transition:
    background 1.5s ease,
    box-shadow 1.5s ease;
}

.window.lit {
  background: var(--sun);

  box-shadow:
    0 0 5px #ffd0784d;
}


/* =========================================
   LANDING HINT
   ========================================= */

.hint {
  position: absolute;

  bottom: 7%;
  left: 50%;

  transform: translateX(-50%);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;

  color: #ffffff73;
}


/* =========================================
   NIGHT TRANSITION
   ========================================= */

.landing.entering-night
.sky:after,
.landing.entering-night
.sky:before {
  transition: opacity 1.5s ease;
}

.landing.entering-night .sky:after {
  opacity: 0;
}

.landing.entering-night .sky:before {
  opacity: 0;
}

.landing.entering-night {
  background: #050811;
  transition: background 1.5s ease;
}

.landing.entering-night .stars {
  opacity: .55;
  transition: opacity 1.5s ease;
}

.landing.entering-night .sun {
  opacity: .15;
  transition: opacity 1.5s ease;
}

.landing.entering-night .city {
  filter: brightness(.72);
  transition: filter 1.5s ease;
}

.night .sky {
  background:
    linear-gradient(
      #11182d,
      #0b1020 55%,
      #050811
    );
}

.night .stars {
  opacity: .55;
}

.night .sun {
  opacity: .15;
}

.night .city {
  filter: brightness(.72);
}

.night .hint {
  opacity: 0;
}


/* =========================================
   REVIEWS SECTION
   ========================================= */

.reviews {
  min-height: 100vh;

  position: relative;

  padding: 110px 30px 100px;

  background:
    linear-gradient(
      #080c16,
      #050811
    );
}

.moon {
  position: absolute;

  top: 70px;
  right: 10%;

  width: 110px;
  height: 110px;

  border-radius: 50%;

  background: #e8dfc9;

  box-shadow:
    0 0 60px #dcd7be26;
}

.moon:after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 50%;

  background: #080c16;

  transform:
    translate(28px,-10px);
}

.wrap {
  width: min(1380px,100%);
  margin: auto;

  position: relative;
}


/* =========================================
   REVIEW HEADER
   ========================================= */

.reviews header {
  display: flex;

  justify-content: space-between;
  align-items: end;

  margin-bottom: 55px;
}

.reviews header small {
  color: var(--accent);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .28em;
}

.reviews h2 {
  font-size: clamp(46px,7vw,88px);

  line-height: .9;

  letter-spacing: -.05em;

  margin: 14px 0 0;
}

.reviews header p {
  color: var(--muted);

  font-size: 15px;

  margin-top: 22px;
}

.header-actions {
  display: flex;

  align-items: center;

  gap: 18px;
}

.total-rating {
  color: var(--sun);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .12em;

  white-space: nowrap;
}

.reviews header button {
  background: none;

  color: var(--muted);

  border: 1px solid var(--border);

  padding: 11px 15px;

  cursor: pointer;
}


/* =========================================
   REVIEW WIDGET
   ========================================= */

/*
   The GitHub iframe contains the actual
   two-column review layout.

   This makes the iframe span the ENTIRE
   Neocities review area instead of sitting
   inside the old left-hand grid column.
*/

.layout {
  display: grid;

  grid-template-columns:
    minmax(320px,.8fr)
    minmax(400px,1.2fr);

  gap: 25px;
}

#reviewsFrame {
  grid-column: 1 / -1;

  display: block;
  width: 100%;

  height: 700px;
  min-height: 700px;

  border: 0;

  background: #050811;
  color-scheme: dark;
}


/* =========================================
   LEGACY / SHARED REVIEW STYLING
   ========================================= */

.form-panel,
.list-panel {
  background: var(--panel);

  border: 1px solid var(--border);

  backdrop-filter: blur(12px);
}

.form-panel {
  padding: 32px;
}

.form-panel > strong {
  font-size: 11px;
  letter-spacing: .2em;
}

.form-panel hr {
  border: 0;

  border-top: 1px solid var(--border);

  margin: 17px 0 35px;
}

.form-panel label {
  display: block;

  color: var(--muted);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .17em;

  margin-bottom: 27px;
}

.form-panel label > input,
.form-panel textarea {
  display: block;

  width: 100%;

  margin-top: 10px;

  background: #0003;

  border: 1px solid #fff1;

  color: var(--text);

  padding: 14px;

  outline: 0;
}

.form-panel label > input {
  height: 48px;
}

.form-panel textarea {
  min-height: 170px;

  resize: vertical;
}

.rating button {
  background: none;

  border: 0;

  color: #383d47;

  font-size: 23px;
}

.rating button.active {
  color: var(--sun);
}

label span {
  display: flex;

  justify-content: space-between;
}

#count {
  color: #686b72;
}

.submit {
  width: 100%;
  height: 52px;

  border: 0;

  background: var(--accent);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .18em;

  display: flex;

  justify-content: space-between;

  padding: 0 17px;
}

.list-panel {
  min-height: 600px;
}

.list-head {
  padding: 25px 28px;

  border-bottom: 1px solid var(--border);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .17em;

  color: var(--muted);
}

.list-head b {
  display: inline-flex;

  margin-left: 12px;

  min-width: 25px;
  height: 25px;

  border-radius: 50%;

  align-items: center;
  justify-content: center;

  background: #e6a66e1a;

  color: var(--accent);
}

.list {
  height: 540px;

  overflow-y: auto;

  padding: 5px 28px;
}

.card {
  padding: 25px 0;

  border-bottom: 1px solid #fff1;
}

.card .top {
  display: flex;

  justify-content: space-between;
}

.card .name {
  font-weight: 700;

  font-size: 14px;
}

.card .date {
  font-size: 10px;

  color: #686b72;
}

.card .stars {
  color: var(--sun);

  margin: 10px 0;

  font-size: 17px;

  letter-spacing: 2px;
}

.card .rating-number {
  font-size: 10px;

  color: #686b72;

  letter-spacing: .1em;

  margin-left: 8px;
}

.card p {
  color: #b7b5b1;

  font-size: 13px;

  line-height: 1.7;

  white-space: pre-wrap;
}

.empty {
  height: 100%;

  min-height: 450px;

  display: grid;

  place-items: center;

  text-align: center;

  color: #686b72;
}

.empty p {
  font-size: 12px;
}


/* =========================================
   DELETE BUTTON
   ========================================= */

.delete-review {
  margin-top: 10px;

  padding: 6px 9px;

  border:
    1px solid
    rgba(201,109,109,.35);

  background: transparent;

  color: #c96d6d;

  font: inherit;

  font-size: 10px;

  letter-spacing: .14em;

  cursor: pointer;
}

.delete-review:hover:not(:disabled) {
  background:
    rgba(201,109,109,.08);
}

.delete-review:disabled {
  opacity: .55;

  cursor: wait;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

  .layout {
    grid-template-columns: 1fr;
  }

  /*
     Still spans the full widget width
     when the layout becomes one column.
  */

  #reviewsFrame {
    grid-column: 1;
  }

  .reviews header {
    align-items: flex-start;

    flex-direction: column;
  }

  .header-actions {
    width: 100%;

    justify-content: flex-start;
  }

  .list {
    height: 450px;
  }
}


@media (max-width: 600px) {

  .landing-title {
    left: 25px;
  }

  .landing-title h1 {
    font-size: 48px;
  }

  .reviews {
    padding: 80px 18px;
  }

  .form-panel {
    padding: 22px;
  }

}