/* Sindhuraa – one-screen launch page */
:root{
  --bg:#f7f9ff;--ink:#0a1f5c;--red:#e30a0a;--text:#3f4558;--muted:#5d6480;
  --line:rgba(10,31,92,.16);--wave1:rgba(10,31,92,.07);--wave2:rgba(227,10,10,.07);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{
  height:100%;margin:0;overflow:hidden;color:var(--text);
  background:linear-gradient(90deg,#dbe4fa 0%,#eef2fd 35%,var(--bg) 62%);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* animated waves */
.waves{position:fixed;left:0;right:0;bottom:0;height:40%;pointer-events:none;overflow:hidden;z-index:0}
.waves svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.waves .w1{animation:flow 26s linear infinite}
.waves .w2{animation:flow 38s linear infinite reverse}
@keyframes flow{to{transform:translateX(-50%)}}

/* character (desktop: left panel) */
.hero{
  position:fixed;left:0;bottom:0;z-index:1;height:100%;width:auto;max-width:48vw;
  object-fit:cover;object-position:left bottom;
  -webkit-mask-image:linear-gradient(90deg,#000 68%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 68%,transparent 100%);
  animation:in 1.2s ease-out both;
}
.veil{display:none}
@keyframes in{from{opacity:0;transform:translateX(-2em)}to{opacity:1;transform:none}}

.stage{
  position:relative;z-index:2;height:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:3vh 5vw 3vh min(44vw,62vh);
  font-size:calc(var(--u,1) * clamp(12px,0.7vw + 1.4vh + 5px,20px));
  line-height:1.5;
}

.kicker{
  display:flex;align-items:center;gap:.9em;margin:0 0 .6em;
  color:var(--ink);font-weight:600;font-size:1.15em;
}
.kicker::before,.kicker::after{content:"";width:2.4em;height:2px;background:var(--red)}

.logo{
  margin:0;width:calc(var(--u,1) * min(42vw,660px,34vh * 3.71));
  animation:rise 1s cubic-bezier(.2,.7,.2,1) .15s both;
}
.logo img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
@keyframes rise{from{opacity:0;transform:translateY(1em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

.bar{display:block;width:6em;height:.32em;border-radius:9px;margin:.7em 0 1.1em;background:linear-gradient(90deg,var(--ink))}

.about{margin:0 0 .6em;max-width:34em;font-size:1.1em;font-weight:500;color:var(--ink);text-wrap:balance}
.meaning{margin:0 0 1.2em;max-width:34em;font-size:.95em;color:var(--muted);text-wrap:balance}
.meaning b{color:var(--ink);font-weight:600}

.soon{
  margin:0;display:inline-flex;align-items:center;gap:.7em;
  padding:.6em 1.5em;border:1.5px solid var(--red);border-radius:99px;background:rgba(227,10,10,.07);
  font-weight:700;font-size:1.1em;letter-spacing:.04em;color:var(--red);
}
.soon i{width:.6em;height:.6em;border-radius:50%;background:var(--red);animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(227,10,10,.6)}100%{box-shadow:0 0 0 .9em rgba(227,10,10,0)}}
.soon span{
  background:linear-gradient(100deg,var(--red) 35%,var(--ink) 50%,var(--red) 65%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:shimmer 2.8s linear infinite;
}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.soon b{display:inline-flex;gap:.25em}
.soon u{width:.35em;height:.35em;border-radius:50%;background:var(--red);animation:hop 1.2s ease-in-out infinite}
.soon u:nth-child(2){animation-delay:.15s}.soon u:nth-child(3){animation-delay:.3s}
@keyframes hop{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-.4em);opacity:1}}

.tag{margin:1.2em 0 0;padding:.5em 1.4em;border-radius:99px;background:rgba(10,31,92,.07);color:var(--ink);font-weight:600;font-size:.95em}
.tag b{padding-right:.7em;margin-right:.7em;border-right:2px solid var(--red);font-weight:700}

.contact{margin-top:1.1em;display:flex;flex-direction:column;align-items:center;gap:.8em}
.reach{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 1.8em}
.reach a{color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid transparent}
.reach a:hover{border-bottom-color:var(--red)}
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.8em}
.social a{display:grid;place-items:center;width:2.4em;height:2.4em;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:rgba(255,255,255,.6);transition:background .2s,color .2s,border-color .2s,transform .2s}
.social a:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.social a.instagram:hover{background:#e4405f;border-color:#e4405f;color:#fff}
.social a.facebook:hover{background:#1877f2;border-color:#1877f2;color:#fff}
.social a.threads:hover{background:#000;border-color:#000;color:#fff}
.social a.x:hover{background:#000;border-color:#000;color:#fff}
.social a.linkedin:hover{background:#0a66c2;border-color:#0a66c2;color:#fff}
.social a.youtube:hover{background:#ff0000;border-color:#ff0000;color:#fff}
.social svg{width:1.15em;height:1.15em;fill:currentColor}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* phones and portrait screens: character becomes the background */
@media (max-aspect-ratio:1/1){
  body{background:var(--bg)}
  .hero{
    width:100%;max-width:none;height:100%;object-fit:cover;object-position:18% bottom;
    -webkit-mask-image:none;mask-image:none;opacity:.9;
  }
  .veil{
    display:block;position:fixed;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(247,249,255,.94) 0%,rgba(247,249,255,.86) 50%,rgba(247,249,255,.45) 100%);
  }
  .stage{padding:3vh 6vw;font-size:calc(var(--u,1) * clamp(12px,1.2vw + 1.1vh + 5px,19px))}
  .logo{width:calc(var(--u,1) * min(84vw,560px,30vh * 3.71))}
  .contact{padding:.7em 1.2em;border-radius:1.2em;background:rgba(247,249,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
@media (max-height:620px){.tag{display:none}}
@media (prefers-reduced-motion:reduce){
  .waves svg,.logo,.hero,.soon i,.soon span,.soon u{animation:none}
}