/* myIndians-Online · Rangoli
   One centered column: banner, three icon links, website line. Single dark look. */

@font-face{font-family:"Orbitron";src:url("../fonts/orbitron-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Orbitron";src:url("../fonts/orbitron-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#0b0b0b;
  --ink:#f4ede4;
  --muted:#8a847c;
  --quiet:#6a655e;
  --orange:#ff8a1f;
  --display:"Orbitron",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(circle,#1a1a1a 1px,transparent 1.6px) 0 0/26px 26px,var(--bg);
  color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}

.page{
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-top:max(40px,env(safe-area-inset-top,0px));
  padding-bottom:max(40px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Banner */
.banner{width:min(960px,100%)}
.banner svg{display:block;width:100%;height:auto}
.b-tall{display:none;width:min(520px,100%)}
@media (max-width:640px){.b-wide{display:none}.b-tall{display:block}}
.spin{transform-box:view-box;animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Icons */
.links{
  display:flex;justify-content:center;
  gap:clamp(28px,9vw,112px);
  margin-top:clamp(64px,11vh,112px);     /* space below the banner */
  margin-bottom:clamp(56px,9vh,96px);    /* space above the website line */
}
.link{
  --c1:#fff;--c2:#fff;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-decoration:none;color:var(--muted);
  -webkit-tap-highlight-color:transparent;
}
.tiktok{--c1:#25f4ee;--c2:#fe2c55}
.threads{--c1:#c13584;--c2:#fcaf45}
.email{--c1:#ffb13b;--c2:#ff7a18}

.disc{
  position:relative;
  width:clamp(84px,22vw,148px);aspect-ratio:1;
  display:grid;place-items:center;
  font-size:clamp(36px,9.5vw,64px);color:#d9d3ca;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),color .35s;
}
.disc::before{
  content:"";position:absolute;inset:15%;
  transform:rotate(45deg);border-radius:14px;
  border:1.5px solid #3a3733;background:#111;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s,box-shadow .35s;
}
.disc::after{
  content:"";position:absolute;inset:2%;border-radius:50%;
  border:1px dashed #2c2a27;
  transition:transform .8s cubic-bezier(.2,.8,.2,1),border-color .35s;
}
.ico{position:relative;z-index:1;display:block}

.label{
  font-family:var(--display);font-weight:700;
  font-size:clamp(13px,3.4vw,16px);letter-spacing:.06em;
  transition:color .35s;
}

.link:is(:hover,:focus-visible,:active) .disc{color:#fff;transform:translateY(-4px)}
.link:is(:hover,:focus-visible,:active) .disc::before{
  background:linear-gradient(135deg,var(--c2),var(--c1));border-color:transparent;
  transform:rotate(45deg) scale(1.08);
  box-shadow:0 0 40px color-mix(in srgb,var(--c1) 50%,transparent);
}
.link:is(:hover,:focus-visible,:active) .disc::after{border-color:var(--c1);transform:rotate(90deg)}
.link:is(:hover,:focus-visible,:active) .label{color:var(--ink)}
.email:is(:hover,:focus-visible,:active) .disc{color:#1a0f02}
.link:focus-visible{outline:none}
.link:focus-visible .disc{outline:2px solid var(--ink);outline-offset:8px;border-radius:50%}

/* Website line */
.site{margin:0;font-size:13px;letter-spacing:.03em;color:var(--quiet);text-align:center}
.site a{color:inherit;text-decoration:none;transition:color .2s}
.site a:hover,.site a:focus-visible{color:var(--orange);outline:none}

@media (prefers-reduced-motion:reduce){
  .spin{animation:none}
  .disc,.disc::before,.disc::after,.label{transition:none}
}