/* Coming Soon page for myuval.co.il. Brand colours and fonts from the V11 site. */
@font-face{font-family:Rubik;src:url('/fonts/rubik-extra.ttf') format('truetype');font-weight:800 900;font-display:swap}
@font-face{font-family:'Gveret Levin';src:url('/fonts/gveret-levin.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --cream:#F6F2C2;
  --paper:#FBEBCD;
  --ink:#5D3A17;
  --blue:#16385C;
  --yellow:#E5B553;
}

*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  color:var(--ink);
  background:
    radial-gradient(120% 70% at 50% 0%, #fffdf1 0%, rgba(255,253,241,0) 60%),
    radial-gradient(90% 60% at 50% 100%, var(--paper) 0%, rgba(251,235,205,0) 70%),
    var(--cream);
  font-family:Rubik,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.stage{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:center;
  justify-items:center;
  gap:clamp(8px,3vw,24px);
  padding:max(24px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom));
  text-align:center;
}

.product{
  display:block;
  width:min(100%,680px,78vh);
  width:min(100%,680px,78svh);
  height:auto;
  filter:drop-shadow(0 18px 28px rgba(93,58,23,.18));
}

.copy{display:grid;justify-items:center}

h1{
  margin:0;
  font-weight:900;
  font-size:clamp(32px,11.5vw,76px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
}

.soon{
  position:relative;
  margin:.15em 0 0;
  padding:0 .35em .25em;
  font-family:'Gveret Levin',Rubik,Arial,sans-serif;
  font-size:clamp(34px,9vw,56px);
  line-height:1.2;
  color:var(--blue);
}
.swoosh{
  position:absolute;
  inset-inline:0;
  bottom:0;
  width:100%;
  height:.42em;
  fill:none;
  stroke:var(--yellow);
  stroke-width:5;
  stroke-linecap:round;
}

/* Wide screens: same centred composition, more breathing room. */
@media (min-width:900px){
  .stage{gap:28px;padding-block:48px}
}

@media (prefers-reduced-motion:no-preference){
  .product,.copy{animation:rise .7s ease-out both}
  .copy{animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}