@import url("https://fonts.googleapis.com/css2?family=Alan+Sans:wght@400..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..900;1,6..12,400..900&display=swap");

/* ==========================================================
Sonia Space กค Coming Soon
Brand palette
Terracotta  #E56B4E
Sage Green  #4E8B78
Deep Brown  #3C2A21
========================================================== */

:root {
--terracotta: #E56B4E;
--sage: #4E8B78;
--brown: #3C2A21;
--cream: #FFF9F2;
--page-bg: #E9CFB3;
}

* {
box-sizing: border-box;
}

html,
body {
margin: 0;
height: 100%;
overflow: hidden;
background: var(--page-bg);
}

[hidden] {
display: none !important;
}

a {
color: var(--terracotta);
}

a:hover {
color: var(--sage);
}

.coming-soon {
position: fixed;
inset: 0;
overflow: hidden;
background: var(--page-bg);
--u: min(calc(100vw / 1920), calc(100vh / 1080));
}

.scene {
position: absolute;
}

.scene img {
position: absolute;
display: block;
}

.scene .bg {
inset: 0;
width: 100%;
height: 100%;
}

/* Landscape scene */
.land {
width: max(100vw, calc(100vh * 1.77683));
height: max(100vh, calc(100vw / 1.77683));
left: calc((100vw - max(100vw, calc(100vh * 1.77683))) * .5);
top: -3vh;
}

.land .plant {
left: 11.483%;
top: 1.275%;
width: 10.048%;
height: 35.388%;
transform-origin: 53.57% 3%;
}

/* Portrait scene */
.port {
display: none;
width: max(100vw, calc(100vh * 0.56280));
height: max(100vh, calc(100vw / 0.56280));
left: calc((100vw - max(100vw, calc(100vh * 0.56280))) * .62);
top: 0;
}

.port .plant {
left: 13.603%;
top: 9.091%;
width: 16.684%;
height: 21.531%;
transform-origin: 52.23% 2.22%;
}

.plant {
pointer-events: none;
animation: sway 6.5s ease-in-out infinite;
will-change: transform;
}

@keyframes sway {
0% {
transform: rotate(-1.4deg);
}

35% {
transform: rotate(1.1deg);
}

65% {
transform: rotate(1.5deg);
}

100% {
transform: rotate(-1.4deg);
}
}

/* Content: landscape */
.txt {
position: absolute;
left: 50%;
top: 5.5vh;
transform: translateX(-50%);
width: min(1040px, 92vw);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.logo {
display: block;
width: max(110px, calc(158 * var(--u)));
height: auto;
}

.soon {
display: flex;
align-items: center;
gap: max(10px, calc(15 * var(--u)));
margin: max(20px, calc(36 * var(--u))) 0 0;
font-family: 'Nunito Sans', sans-serif;
font-weight: 800;
font-size: max(11.5px, calc(16 * var(--u)));
letter-spacing: .24em;
text-transform: uppercase;
color: var(--brown);
}

.soon i {
display: block;
width: max(26px, calc(44 * var(--u)));
height: 2px;
background: var(--terracotta);
border-radius: 2px;
}

h1 {
margin: max(12px, calc(20 * var(--u))) 0 0;
font-family: 'Alan Sans', sans-serif;
font-weight: 700;
font-size: max(28px, calc(52 * var(--u)));
line-height: 1.2;
letter-spacing: -.03em;
color: var(--brown);
text-shadow: 0 1px 0 rgba(255, 247, 236, .55);
white-space: nowrap;
}

h1 em {
font-style: normal;
color: var(--terracotta);
text-shadow: 0 1px 0 rgba(255, 247, 236, .45);
}

h1 .br {
display: none;
}

.sub {
margin: max(10px, calc(20 * var(--u))) 0 0;
font-family: 'Nunito Sans', sans-serif;
font-weight: 600;
font-size: max(14px, calc(22 * var(--u)));
line-height: 1.45;
color: var(--brown);
}

/* Email subscription */
.cta {
width: max(430px, calc(580 * var(--u)));
max-width: 100%;
margin: max(18px, calc(32 * var(--u))) auto 0;
text-align: left;
}

.fld {
display: contents;
}

.form {
--field-bg: rgba(255, 249, 242);
display: flex;
align-items: center;
gap: 10px;
height: max(48px, calc(62 * var(--u)));
padding: 0 6px 0 max(16px, calc(22 * var(--u)));
background: var(--field-bg);
border-radius: 999px;
box-shadow:
0 18px 34px -22px rgba(60, 42, 33, .55),
inset 0 0 0 1px rgba(229, 107, 78, .45),
inset 0 1px 0 rgba(255, 255, 255, .6);
backdrop-filter: blur(10px) saturate(1.05);
-webkit-backdrop-filter: blur(10px) saturate(1.05);
}

.form.err {
box-shadow:
0 18px 34px -22px rgba(60, 42, 33, .55),
inset 0 0 0 1.5px var(--terracotta);
}

.form svg {
flex: 0 0 auto;
width: max(18px, calc(22 * var(--u)));
height: auto;
}

.form input {
flex: 1;
min-width: 0;
height: 100%;
border: 0;
background: transparent;
outline: none;
font-family: 'Nunito Sans', sans-serif;
font-size: max(15px, calc(18 * var(--u)));
color: var(--brown);
}

.form input::placeholder {
color: rgba(60, 42, 33, .55);
}

.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form input:-webkit-autofill:active {
-webkit-text-fill-color: var(--brown);
/* -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset; */
transition: background-color 9999s ease-out 0s;
}

.btn {
all: unset;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: calc(100% - 12px);
padding: 0 max(18px, calc(26 * var(--u)));
border-radius: 999px;
background: var(--terracotta);
color: var(--cream);
font-family: 'Nunito Sans', sans-serif;
font-weight: 700;
font-size: max(14px, calc(17 * var(--u)));
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
transition: background .2s, transform .2s, box-shadow .2s;
}

.btn:hover {
background: var(--sage);
/*transform: translateY(-1px);*/
box-shadow: 0 8px 14px -8px rgba(78, 139, 120, .65);
}

.btn:active {
transform: translateY(1px);
}

.btn:focus-visible {
outline: 2px solid var(--brown);
outline-offset: 3px;
}

.btn.busy {
pointer-events: none;
opacity: .85;
}

.msg {
margin: 8px 0 0;
text-align: center;
font-family: 'Nunito Sans', sans-serif;
font-size: 14px;
font-weight: 800;
color: #e56b4e;
}

/* Consent checkbox */
.consent {
display: flex;
align-items: flex-start;
gap: 9px;
width: 100%;
margin: 12px auto 0;
padding: 0 max(16px, calc(22 * var(--u)));
font-family: 'Nunito Sans', sans-serif;
font-size: max(13px, calc(16 * var(--u)));
font-weight: 600;
line-height: 1.45;
color: var(--brown);
}

.consent input {
appearance: none;
flex: 0 0 15px;
width: 15px;
height: 15px;
margin: 1px 0 0;
border: 1.5px solid rgba(60, 42, 33, .5);
border-radius: 4px;
background: #fff;
cursor: pointer;
}

.consent input:hover {
border-color: var(--sage);
}

.consent input:checked {
border-color: var(--sage);
background: var(--sage);
}

/*.consent input:checked::after {*/
/*content: "";*/
/*display: block;*/
/*width: 5px;*/
/*height: 9px;*/
/*margin: 1px 0 0 5px;*/
/*border: solid #fff;*/
/*border-width: 0 2px 2px 0;*/
/*transform: rotate(45deg);*/
/*}*/

.consent input:checked::after {
    content: "";
    display: block;
    width: 3px;
    height: 8px;
    margin: 1px 0 0 4.5px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.consent input:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 2px;
}

.privacy-link{
color: var(--brown);
text-decoration: none;
}

.meet-link {
color: #e56b4e;
text-decoration: none;
font-weight: 800;
}

.privacy-link:hover,
.privacy-link:focus-visible,
.meet-link:hover,
.meet-link:focus-visible {
color: var(--sage);
text-decoration: underline;
text-underline-offset: 3px;
}

/* Success message */
.done {
text-align: center;
font-family: 'Nunito Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--brown);
padding: 16px 20px;
border-radius: 18px;
background: rgba(255, 249, 242, .8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: rise .5s cubic-bezier(.34, 1.3, .5, 1) both;
}

.done b {
display: block;
font-family: 'Alan Sans', sans-serif;
font-weight: 800;
font-size: 20px;
margin-bottom: 2px;
color: var(--brown);
}

.done span {
display: block;
}

.done button {
all: unset;
cursor: pointer;
display: inline-block;
margin-top: 8px;
font-size: 14px;
color: var(--brown);
opacity: .75;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s, opacity .2s;
}

.done button:hover {
color: var(--sage);
opacity: 1;
}

.done button:focus-visible {
outline: 2px solid var(--brown);
outline-offset: 3px;
}

@keyframes rise {
from {
opacity: 0;
transform: translateY(10px);
}

to {
opacity: 1;
transform: none;
}
}

/* Footer */
.footer {
position: absolute;
z-index: 2;
right: max(24px, calc(48 * var(--u)));
bottom: max(16px, calc(22 * var(--u)));
left: max(24px, calc(48 * var(--u)));
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: 'Nunito Sans', sans-serif;
font-size: max(14px, calc(17 * var(--u)));
font-weight: 600;
color: var(--brown);
}

.footer::before {
content: "";
position: absolute;
z-index: -1;
left: -100vw;
right: -100vw;
bottom: -16px;
height: 50px;
background: linear-gradient(
to bottom,
rgba(255, 249, 242, 0),
rgba(255, 249, 242, .88)
);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
pointer-events: none;
}

.copyright,
.footer-right {
margin: 0;
}

.footer-right {
display: flex;
align-items: center;
gap: 5px;
}

/* Portrait: tablet portrait + mobile */
@media (max-aspect-ratio: 1 / 1) {
.land {
display: none;
}

.port {
display: block;
}

.txt {
left: calc(51.5% - min(90vw, 560px) / 2);
transform: none;
top: clamp(80px, 13vh, 130px);
width: min(90vw, 560px);
}

.logo {
width: clamp(84px, 21vw, 150px);
}

.soon {
gap: 11px;
margin-top: clamp(16px, 4vw, 26px);
font-size: clamp(11px, 2.9vw, 14px);
}

.soon i {
width: clamp(16px, 4.5vw, 32px);
}

h1 {
margin-top: clamp(10px, 2.6vw, 18px);
font-size: clamp(25px, 6.8vw, 42px);
line-height: 1.16;
}

h1 .br {
display: inline;
}

.sub {
margin-top: clamp(10px, 2.6vw, 16px);
font-size: clamp(14px, 3.6vw, 18px);
max-width: clamp(220px, 46vw, 360px);
}

.cta {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: clamp(90px, 12vh, 130px);
width: min(342px, calc(100vw - 48px));
margin: 0;
}

.form {
height: 50px;
padding: 0 6px 0 18px;
}

.form svg {
width: 20px;
}

.form input {
font-size: 14px;
}

.btn {
font-size: 13px;
padding: 0 18px;
}

.msg {
font-size: 12px;
}

.consent {
padding-right: 18px;
padding-left: 18px;
font-size: 12px;
}

.done {
font-size: 13px;
}

.done b {
font-size: 16px;
}

.done button {
font-size: 12px;
}

.footer {
right: 18px;
bottom: 14px;
left: 18px;
flex-direction: column;
gap: 4px;
text-align: center;
font-size: 12px;
}
}

/* Mobile portrait: input and button stacked */
@media (max-aspect-ratio: 1 / 1) and (max-width: 520px) {
.form {
flex-wrap: wrap;
height: auto;
padding: 0;
gap: 10px;
background: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

.form .fld {
--field-bg: rgba(255, 249, 242);
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 50px;
padding: 0 18px;
background: var(--field-bg);
border-radius: 999px;
box-shadow:
0 14px 26px -18px rgba(60, 42, 33, .55),
inset 0 0 0 1px rgba(229, 107, 78, .45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.form.err .fld {
box-shadow: inset 0 0 0 1.5px var(--terracotta);
}

.btn {
width: 100%;
height: 50px;
}
}

/* Tablet portrait */
@media (max-aspect-ratio: 1 / 1) and (min-width: 521px) {
.cta {
width: 440px;
}
}

/* iPad portrait */
@media screen and (orientation: portrait) and (min-width: 700px) and (max-width: 900px) {
.txt {
top: 170px;
}

.logo {
width: 84px;
}

h1 {
font-size: 34px;
}

.cta {
position: static;
left: auto;
bottom: auto;
transform: none;
width: min(440px, 100%);
margin: 24px auto 0;
}
}

/* Short portrait screens */
@media (max-aspect-ratio: 1 / 1) and (max-height: 720px) {
.txt {
top: 64px;
}

.logo {
width: 72px;
}

.soon {
margin-top: 12px;
font-size: 10.5px;
}

h1 {
margin-top: 8px;
font-size: 22px;
}

.sub {
margin-top: 8px;
font-size: 13px;
line-height: 1.4;
}
}

/* Tablet-like landscape screens */
@media (orientation: landscape)
and (min-width: 768px)
and (max-width: 1600px)
and (min-height: 700px)
and (max-aspect-ratio: 3 / 2) {
.land {
transform: scale(1.04);
transform-origin: top left;
}
}

/* Mobile: keep logo + content on the wall, scaled with the background */
@media (max-aspect-ratio: 1 / 1) and (max-width: 767px) {
  .txt {
    --sh: max(100vh, calc(100vw / 0.5628));
    top: calc(var(--sh) * 0.13);         
  }

  .logo {
      width: max(64px, calc(var(--sh) * 0.105));
      }
  .soon {
      font-size: max(10px, calc(var(--sh) * 0.01375));
      }
  h1    {
      font-size: max(18px, calc(var(--sh) * 0.03125));
  }
  .sub  {
      font-size: max(12px, calc(var(--sh) * 0.0175));
     }

  .cta { 
      bottom: clamp(60px, 8vh, 84px);
    }
}


/* Tablet portrait: readable footer over the rug */
@media (max-aspect-ratio: 1 / 1) and (min-width: 521px) {
  .footer {
  font-size: 16px;
  font-weight: 700;
  }

  .footer::before {
    height: 80px;
    bottom: -14px;
    background: linear-gradient(
      to bottom,
      rgba(255, 249, 242, 0),
      rgb(255 249 242 / 50%) 40%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
.plant {
animation: none;
}

* {
transition: none !important;
}
}