/* Your First Sky, coming soon page. Look carried over from the Rasmiya prototype. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/cormorant.woff2") format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/jost.woff2") format('woff2');
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  background: #cfe4f3;
  color: #1c2742;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}
p, h1, h2, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* Sky */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky_layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.layer_day { background: radial-gradient(ellipse at 50% 110%, rgba(255,244,222,.9) 0%, rgba(255,244,222,0) 55%), linear-gradient(180deg, #a9cdea 0%, #c6dff1 40%, #e2eef4 75%, #f4efe3 100%); }
.layer_night { background: radial-gradient(ellipse at 30% 20%, rgba(90,70,130,.45) 0%, transparent 45%), radial-gradient(ellipse at 75% 70%, rgba(60,90,140,.4) 0%, transparent 50%), radial-gradient(ellipse at 50% 40%, #2a2650 0%, #151a33 70%); }
.layer_sunrise { background: radial-gradient(ellipse at 50% 105%, #ffd9a3 0%, rgba(255,217,163,0) 55%), radial-gradient(ellipse at 15% 15%, rgba(190,175,230,.55) 0%, transparent 50%), linear-gradient(180deg, #7f86c2 0%, #c7a3c4 42%, #f0c7ad 78%, #fbe3bd 100%); }
.layer_sunset { background: radial-gradient(ellipse at 50% 100%, #ffb56b 0%, rgba(255,181,107,0) 50%), radial-gradient(ellipse at 80% 20%, rgba(120,60,140,.5) 0%, transparent 50%), linear-gradient(180deg, #241a45 0%, #5e2a5e 38%, #b4453f 70%, #e8894a 100%); }
.sky_day .layer_day, .sky_night .layer_night, .sky_sunrise .layer_sunrise, .sky_sunset .layer_sunset { opacity: 1; }

.cloud { position: absolute; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 70%); filter: blur(10px); animation: yfs_cloud 140s linear infinite alternate; }
.cloud_a { left: 4%; top: 9%; width: 46vw; height: 9vh; min-width: 260px; }
.cloud_b { left: 52%; top: 22%; width: 38vw; height: 7vh; min-width: 220px; animation-duration: 180s; }
.cloud_c { left: 18%; top: 48%; width: 52vw; height: 8vh; min-width: 280px; opacity: .7; animation-duration: 200s; }
.cloud_d { left: 60%; top: 68%; width: 34vw; height: 6vh; min-width: 200px; opacity: .6; animation-duration: 160s; }

.stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.sky_night .stars { opacity: 1; }
.sky_sunrise .stars { opacity: .35; }
.sky_sunset .stars { opacity: .65; }
.sky_day .stars { visibility: hidden; }
.star { position: absolute; border-radius: 50%; }

.meteor { position: absolute; left: 78%; top: 12%; width: 180px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(239,230,210,0), rgba(239,230,210,.95)); box-shadow: 0 0 8px rgba(239,230,210,.6); opacity: 0; animation: rz_shoot 60s cubic-bezier(.3,.6,.7,1) 8s infinite; }
.sky_day .meteor, .reading .meteor { display: none; }

@keyframes rz_twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes rz_drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-60px,120px,0); } }
@keyframes rz_shoot { 0% { transform: translate3d(0,0,0) rotate(-35deg); opacity: 0; } 0.3% { opacity: 1; } 4% { opacity: 1; } 5.8% { transform: translate3d(-900px,630px,0) rotate(-35deg); opacity: 0; } 100% { transform: translate3d(-900px,630px,0) rotate(-35deg); opacity: 0; } }
@keyframes yfs_cloud { from { transform: translate3d(-3vw,0,0); } to { transform: translate3d(5vw,0,0); } }

/* Page */
.page { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: clamp(20px,4vw,44px) 16px calc(36px + env(safe-area-inset-bottom)); }
.veil { width: 100%; max-width: 680px; padding: clamp(22px,4vw,34px) clamp(20px,4vw,36px); border-radius: 18px; border: 1px solid transparent; transition: background-color 1s, color 1s, border-color 1s; }

.hero { text-align: center; }
.wordmark { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px,5vw,40px); font-weight: 500; line-height: 1.1; letter-spacing: .03em; }
.tagline { margin-top: 6px; font-size: 18px; letter-spacing: .06em; }
h1 { margin-top: 26px; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(30px,5.2vw,46px); line-height: 1.12; text-wrap: balance; }
.lede { margin-top: 18px; font-size: clamp(18px,2.2vw,20px); text-wrap: pretty; }

.call { font-weight: 500; }

.toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; border-radius: 24px; overflow: hidden; border: 1px solid; transition: background-color 1s, border-color 1s; }
.pill { min-height: 46px; padding: 0 16px; border: 0; background: transparent; font-size: 18px; cursor: pointer; transition: background-color .3s, color .3s; }
.pill:focus-visible, .save:focus-visible, .card:focus-visible, .close:focus-visible, input:focus-visible { outline: 3px solid; outline-offset: 2px; }

.caption { width: auto; padding: 12px 22px; text-align: center; }

/* Cards */
.row { display: flex; justify-content: center; gap: clamp(16px,3vw,36px); width: 100%; max-width: 1120px; }
.slot { flex: none; perspective: 1600px; }
.card { display: block; width: min(330px, 78vw); aspect-ratio: 1 / 2; padding: 0; border: 0; background: transparent; border-radius: 14px; cursor: pointer; text-align: center; transition: transform .35s cubic-bezier(.22,.8,.2,1); }
.card_inner { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,.7,.2,1); }
.js .card:not(.turned) .card_inner { transform: rotateY(180deg); }
.card_side { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border: 1px solid rgba(201,164,92,.55); }
.card_face { display: flex; flex-direction: column; align-items: center; padding: 18px 18px 16px; }
.card_back { transform: rotateY(180deg); }
.art { display: block; width: 100%; aspect-ratio: 2 / 3; min-height: 0; flex: 0 1 auto; border-radius: 8px; overflow: hidden; border: 1px solid rgba(201,164,92,.4); background: #0b0a14; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.card_title { display: block; flex: none; margin-top: 12px; font-family: 'Cormorant Garamond', serif; font-size: 27px; font-weight: 500; line-height: 1.1; letter-spacing: .01em; }
.card_place { display: block; flex: none; margin-top: 6px; font-size: 18px; line-height: 1.3; }
.card_cue { display: block; flex: none; margin-top: auto; padding-top: 8px; font-size: 18px; line-height: 1.3; letter-spacing: .04em; }
@media (hover: hover) { .card:hover { transform: translateY(-6px); } }

.face_dark .card_face { background: linear-gradient(180deg,#171426 0%,#100e1b 100%); box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 5px #100e1b, inset 0 0 0 6px rgba(201,164,92,.35); color: #efe6d2; }
.face_dark .card_place { color: #c9a45c; }
.face_dark .card_cue { color: #b8b1c6; }
.face_light .card_face { background: linear-gradient(180deg,#fbf6ec 0%,#efe3cd 100%); box-shadow: 0 30px 60px rgba(0,0,0,.3), inset 0 0 0 5px #f4ecdb, inset 0 0 0 6px rgba(201,164,92,.35); color: #1f1730; }
.face_light .card_place { color: #6b4f17; }
.face_light .card_cue { color: #4d4060; }

.face_dark .card_back { background-color: #131022; background-image: radial-gradient(circle closest-side at 50% 50%, rgba(201,164,92,0) 0 71.6%, rgba(201,164,92,.6) 72.2% 72.8%, transparent 73.4%), radial-gradient(circle closest-side at 50% 50%, transparent 0 53.4%, rgba(201,164,92,.35) 54% 54.6%, transparent 55.2%), radial-gradient(circle closest-side at 50% 50%, transparent 0 35.2%, rgba(201,164,92,.6) 35.8% 36.4%, transparent 37%), radial-gradient(circle closest-side at 50% 50%, #c9a45c 0 1.8%, transparent 2.4%), radial-gradient(rgba(201,164,92,.5) .7px, transparent 1.2px); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 22px 22px; box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 10px #131022, inset 0 0 0 11px rgba(201,164,92,.5); }
.face_light .card_back { background-color: #f4ecdb; background-image: radial-gradient(circle closest-side at 50% 50%, rgba(154,117,42,0) 0 71.6%, rgba(154,117,42,.75) 72.2% 72.8%, transparent 73.4%), radial-gradient(circle closest-side at 50% 50%, transparent 0 53.4%, rgba(154,117,42,.45) 54% 54.6%, transparent 55.2%), radial-gradient(circle closest-side at 50% 50%, transparent 0 35.2%, rgba(154,117,42,.75) 35.8% 36.4%, transparent 37%), radial-gradient(circle closest-side at 50% 50%, #9a752a 0 1.8%, transparent 2.4%), radial-gradient(rgba(154,117,42,.55) .7px, transparent 1.2px); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 22px 22px; box-shadow: 0 30px 60px rgba(0,0,0,.3), inset 0 0 0 10px #f4ecdb, inset 0 0 0 11px rgba(154,117,42,.55); }

/* Trust, form, footer */
.trust p { text-wrap: pretty; }
.signup h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(28px,4.4vw,36px); line-height: 1.15; }
.field { margin-top: 18px; }
.field label { display: block; margin-bottom: 6px; font-weight: 500; }
.field label .soft { font-weight: 400; margin-left: 6px; }
.field input { display: block; width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 10px; border: 1px solid; font-size: 18px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { margin-top: 12px; font-weight: 500; }
.save { margin-top: 20px; width: 100%; min-height: 54px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; font-size: 19px; font-weight: 500; letter-spacing: .04em; cursor: pointer; transition: filter .2s; }
.save:hover { filter: brightness(1.08); }
.save[disabled] { opacity: .6; cursor: default; }
.under { margin-top: 14px; }
.thanks { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px,3.6vw,30px); line-height: 1.25; font-weight: 500; text-align: center; outline: none; }
.foot { text-align: center; }
.foot_name { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 500; letter-spacing: .03em; }

/* Sky themes for text that sits on the sky */
.sky_day { color: #1c2742; }
.sky_day .veil { background-color: rgba(255,255,255,.58); border-color: rgba(28,39,66,.14); }
.sky_day .soft { color: #37435e; }
.sky_day .pills { background-color: rgba(255,255,255,.58); border-color: rgba(28,39,66,.45); }
.sky_day .pill { color: #1c2742; }
.sky_day .pill[aria-pressed="true"] { background-color: #1c2742; color: #f7f1e4; }
.sky_day .field input { background-color: #ffffff; border-color: #55617c; color: #1c2742; }
.sky_day .save { background-color: #1c2742; color: #f7f1e4; }
.sky_day .error { color: #8c1d1d; }

.sky_night { color: #efe6d2; background: #151a33; }
.sky_night .veil { background-color: rgba(21,26,51,.62); border-color: rgba(201,164,92,.3); }
.sky_night .soft { color: #c9c2d6; }
.sky_night .pills { background-color: rgba(21,26,51,.62); border-color: rgba(201,164,92,.6); }
.sky_night .pill { color: #efe6d2; }
.sky_night .pill[aria-pressed="true"] { background-color: #c9a45c; color: #151a33; }
.sky_night .field input { background-color: rgba(11,10,20,.7); border-color: #c9a45c; color: #efe6d2; }
.sky_night .save { background-color: #c9a45c; color: #151a33; }
.sky_night .error { color: #ffb4a6; }

.sky_sunrise { color: #2e2540; background: #c7a3c4; }
.sky_sunrise .veil { background-color: rgba(255,250,242,.72); border-color: rgba(46,37,64,.16); }
.sky_sunrise .soft { color: #43375a; }
.sky_sunrise .pills { background-color: rgba(255,250,242,.72); border-color: rgba(46,37,64,.5); }
.sky_sunrise .pill { color: #2e2540; }
.sky_sunrise .pill[aria-pressed="true"] { background-color: #2e2540; color: #fbf1e2; }
.sky_sunrise .field input { background-color: #ffffff; border-color: #5a4d6e; color: #2e2540; }
.sky_sunrise .save { background-color: #2e2540; color: #fbf1e2; }
.sky_sunrise .error { color: #8c1d1d; }

.sky_sunset { color: #fbe9d0; background: #5e2a5e; }
.sky_sunset .veil { background-color: rgba(30,20,56,.8); border-color: rgba(251,233,208,.22); }
.sky_sunset .soft { color: #ecd3bd; }
.sky_sunset .pills { background-color: rgba(30,20,56,.8); border-color: rgba(251,233,208,.55); }
.sky_sunset .pill { color: #fbe9d0; }
.sky_sunset .pill[aria-pressed="true"] { background-color: #fbe9d0; color: #241a45; }
.sky_sunset .field input { background-color: rgba(17,11,33,.75); border-color: #ecd3bd; color: #fbe9d0; }
.sky_sunset .save { background-color: #fbe9d0; color: #241a45; }
.sky_sunset .error { color: #ffc2b5; }

/* Reading view */
.read { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 26px clamp(20px,5vw,40px) 34px; border-radius: 16px; border: 1px solid rgba(201,164,92,.55); overflow-y: auto; overscroll-behavior: contain; font-size: 19px; line-height: 1.55; }
.read::backdrop { background: rgba(21,26,51,.6); }
.read_art { width: 150px; margin: 4px auto 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(201,164,92,.4); }
.read h2 { margin-top: 16px; text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(30px,6vw,38px); line-height: 1.1; }
.read_place { margin-top: 6px; text-align: center; font-size: 18px; }
.read_text { margin-top: 20px; text-wrap: pretty; }
.read_lines { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(201,164,92,.4); display: flex; flex-direction: column; gap: 14px; }
.label { display: block; font-size: 18px; font-weight: 500; letter-spacing: .08em; }
.close { position: sticky; top: 0; float: right; width: 48px; height: 48px; margin: -12px -8px 0 0; border-radius: 50%; border: 1px solid rgba(201,164,92,.6); font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; }

.face_dark .read { background: linear-gradient(180deg,#171426 0%,#100e1b 100%); color: #efe6d2; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.face_dark .read_place, .face_dark .label { color: #c9a45c; }
.face_dark .close { background: #171426; color: #efe6d2; }
.face_light .read { background: linear-gradient(180deg,#fbf6ec 0%,#efe3cd 100%); color: #1f1730; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.face_light .read_place, .face_light .label { color: #6b4f17; }
.face_light .close { background: #fbf6ec; color: #1f1730; }

/* Phones: the three cards become a row you slide sideways, each card fits on one screen, and the sky and card face buttons sit under the cards */
@media (max-width: 1080px) {
  .row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 0 40px; margin: -14px -16px -30px; width: 100vw; max-width: none; scrollbar-width: none; }
  .row::before, .row::after { content: ""; flex: none; width: calc(50vw - 150px); }
  .row::-webkit-scrollbar { display: none; }
  .slot { scroll-snap-align: center; }
  .card { height: min(156vw, max(100vh - 130px, 470px), 660px); height: min(156vw, max(100svh - 130px, 470px), 660px); width: auto; }
}
@media (max-width: 700px) {
  .hero { order: 1; }
  .signup_top { order: 2; }
  .caption { order: 3; }
  .row { order: 4; }
  .toggles { order: 5; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
  .trust { order: 6; }
  .signup_bottom { order: 7; }
  .foot { order: 8; }
  .pills { width: 100%; max-width: 420px; border-radius: 16px; }
  .pill { flex: 1 0 50%; }
  .card_title { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .meteor { display: none; }
}