/* =========================================================
   SNEHAKOOTA — HOME PAGE STYLES
   ---------------------------------------------------------
   Owns index/home-specific layout, artwork, content presentation
   and animation. Shared tokens remain in theme.css.
   ========================================================= */


  html,body{
    margin:0;
    padding:0;
    height:100%;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    overflow-x:hidden;
  }

  /* =========================================================
     STAGE 2C-1 — NAVIGATION CSS OWNERSHIP CLEANUP
     ---------------------------------------------------------
     Navigation visual rules now live in navigation.css.
     Keep this page-specific style block for index/home content only.

     Intentionally preserved outside this cleanup:
     - road/path SVG and its animation
     - home-page content and typography
     - mini-game widget
     - account/Supabase integration
     - existing navigation HTML and navigation.js behaviour

     The old navigation CSS is no longer duplicated here.
     ========================================================= */

  .stage{
    /*
       STAGE 4A — HERO PROPORTION REFINEMENT
       -------------------------------------------------------
       The hero remains the opening moment, but no longer consumes
       most of the first viewport. These bounds preserve the cinematic
       wide composition while making the supporting homepage content
       arrive sooner on desktop and laptop screens.

       Mobile overrides remain width-driven below so phones keep their
       intentional landscape composition rather than inheriting a tall
       viewport-based hero.
    */
    --hero-height:clamp(360px, 48svh, 560px);

    /*
       ROAD / HERO THRESHOLD CONTRACT
       The convergence hub belongs at the bottom edge of the hero,
       not as a separate point floating inside the copy area. Keep the
       desktop offset as a named composition value so the SVG geometry
       can be tuned without scattering hard-coded transforms.
    */
    --road-join-offset:clamp(-150px, -18svh, -94px);
    --road-join-x:77%;

    position:relative;
    isolation:isolate;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:0 6vw 10vh;
    text-align:center;
  }

  /* =========================================================
     GATEWAY / HORIZON HERO FRAME
     ---------------------------------------------------------
     The hero is one visual surface rather than a generic banner card.
     A quiet asymmetric horizon cut gives the image an architectural
     edge while the fine inset frame and warm depth keep it connected
     to the rest of the page.
     ========================================================= */
  .hero-gateway{
    --gateway-top:clamp(8px, 1vw, 16px);
    --gateway-side:clamp(8px, 1.35vw, 22px);
    --gateway-shape:
      polygon(
        0 28px,
        28px 0,
        calc(100% - 76px) 0,
        100% 34px,
        100% calc(100% - 30px),
        calc(100% - 36px) 100%,
        0 100%
      );

    position:absolute;
    top:var(--gateway-top);
    left:var(--gateway-side);
    width:calc(100% - (var(--gateway-side) * 2));
    height:var(--hero-height);
    z-index:-3;
    overflow:hidden;
    clip-path:var(--gateway-shape);
    filter:
      drop-shadow(0 22px 34px rgba(43,33,24,0.12))
      drop-shadow(0 3px 8px rgba(226,155,63,0.08));
  }

  .hero-gateway::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    clip-path:var(--gateway-shape);
    box-shadow:
      inset 0 0 0 1px rgba(255,246,232,0.36),
      inset 0 -1px 0 rgba(226,155,63,0.28);
  }

  .hero-media,
  .hero-shade{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .hero-media{
    overflow:hidden;
  }

  .hero-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }

  .hero-shade{
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(20,16,13,0.42) 0%, rgba(20,16,13,0.16) 38%, rgba(20,16,13,0.08) 62%, rgba(20,16,13,0) 100%);
  }

  /* ---- Signature: converging paths ---- */
  .paths{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;

    /*
       The SVG's convergence hub is deliberately lifted onto the hero
       threshold. Previously the hub sat visibly below the image, making
       the main line feel like an unrelated diagonal drawn over the hero.
       This offset makes the roads meet at the gateway edge and lets the
       main line continue naturally into the image.
    */
    transform:translateY(var(--road-join-offset));
  }


  /*
     ROAD / HERO BLEND
     ---------------------------------------------------------
     A very soft warm bloom sits behind the exact visual threshold where
     the converging roads enter the hero. It is intentionally subtle:
     the line itself remains the narrative element while the bloom removes
     the hard "image ends / SVG starts" seam.
  */
  .stage::before{
    content:"";
    position:absolute;
    left:var(--road-join-x);
    top:calc(var(--gateway-top, 8px) + var(--hero-height));
    width:clamp(72px, 8vw, 130px);
    height:clamp(72px, 8vw, 130px);
    transform:translate(-50%, -50%);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(
        circle,
        rgba(226,155,63,0.18) 0%,
        rgba(226,155,63,0.09) 30%,
        rgba(226,155,63,0.025) 54%,
        transparent 74%
      );
    filter:blur(5px);
    animation:roadJoinGlow 4.8s ease-in-out infinite;
  }

  @keyframes roadJoinGlow{
    0%,100%{ opacity:0.42; transform:translate(-50%, -50%) scale(0.94); }
    50%{ opacity:0.78; transform:translate(-50%, -50%) scale(1.06); }
  }

  .paths path{
    fill:none;
    stroke-linecap:round;
  }
  .thread{
    stroke:var(--line-idle);
    stroke-width:1.4;
    stroke-dasharray:1400;
    stroke-dashoffset:1400;
    animation:draw 2.6s ease-out forwards;
  }
  .mainline{
    stroke:var(--marigold);
    stroke-width:2.6;
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    animation:draw 2.4s 1.1s ease-out forwards;
    filter:drop-shadow(0 0 6px rgba(226,155,63,0.35));
  }
  .thread:nth-child(1){ animation-delay:.05s; }
  .thread:nth-child(2){ animation-delay:.25s; }
  .thread:nth-child(3){ animation-delay:.15s; }
  .thread:nth-child(4){ animation-delay:.35s; }
  .thread:nth-child(5){ animation-delay:.2s; }
  .thread:nth-child(6){ animation-delay:.4s; }

  @keyframes draw{
    to{ stroke-dashoffset:0; }
  }

  .sun{
    position:absolute;
    left:82%;
    top:9%;
    transform:translate(-50%,-50%);
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(226,155,63,0.55) 0%, rgba(226,155,63,0) 70%);
    z-index:0;
    animation:glow 4s ease-in-out infinite;
  }
  @keyframes glow{
    0%,100%{ opacity:.55; }
    50%{ opacity:.9; }
  }

  /* ---- Content ---- */
  .content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:min(100%, 640px);
    max-width:640px;
  }

  /*
     The hero identity owns the image space.
     Supporting copy begins only after the hero has ended.
  */
  .hero-identity{
    min-height:var(--hero-height);
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    padding:0 0 clamp(2.5rem, 6vh, 4.25rem);
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    font-family:'Work Sans', sans-serif;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,246,232,0.94);
    background:rgba(20,16,13,0.24);
    border:1px solid rgba(255,246,232,0.24);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:.5em 1.1em;
    border-radius:999px;
    margin-bottom:1.35rem;
  }
  .eyebrow .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--marigold);
    animation:pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.4; transform:scale(.7); }
  }

  .wordmark{
    font-family:'Fraunces', serif;
    font-optical-sizing:auto;
    font-weight:600;
    font-size:clamp(3rem, 7.4vw, 5.1rem);
    line-height:.96;
    margin:0;
    color:var(--sky-top);
    text-shadow:0 3px 20px rgba(20,16,13,0.28);
  }
  .wordmark .sneha,
  .wordmark .koota{ color:inherit; }

  /* ---- Supporting message composition ---- */
  .home-copy{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:min(100%, 560px);
    padding-top:clamp(2.25rem, 5vh, 4rem);
    padding-bottom:clamp(2rem, 6vh, 5rem);
  }

  .tagline{
    font-family:'Fraunces', serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.15rem, 2.6vw, 1.55rem);
    color:var(--ink-soft);
    margin:0;
    line-height:1.5;
    text-wrap:balance;
  }

  .home-message{
    width:min(100%, 480px);
    margin-top:1.8rem;
    padding-top:1.55rem;
    border-top:1px solid rgba(43,33,24,0.11);
  }

  .desc{
    font-size:1.02rem;
    line-height:1.7;
    color:var(--ink-soft);
    margin:0;
    text-wrap:pretty;
  }

  .kannada{
    font-family:'Noto Sans Kannada', sans-serif;
    font-size:.95rem;
    line-height:1.7;
    color:var(--ink-soft);
    opacity:.86;
    margin:1rem 0 0;
  }

  @media (max-width:480px){
    .home-message{
      margin-top:1.5rem;
      padding-top:1.3rem;
    }

    .desc{
      font-size:.98rem;
      line-height:1.68;
    }
  }

  footer{
    position:relative;
    z-index:1;
    padding-bottom:5vh;
    font-size:.82rem;
    color:var(--ink-soft);
    opacity:.75;
    letter-spacing:.02em;
  }

  @media (prefers-reduced-motion: reduce){
    .thread, .mainline, .sun, .eyebrow .dot, .stage::before{
      animation:none !important;
      stroke-dashoffset:0 !important;
      opacity:1 !important;
    }
  }

  /* =========================================================
     RESPONSIVE HERO COMPOSITION
     ---------------------------------------------------------
     Desktop remains intentionally untouched. On narrow screens the
     same scene is preserved as a focused composition: the hero becomes
     slightly shorter (reducing aggressive horizontal cropping), while
     the crop stays centred on the people and sunset rather than trying
     to squeeze the wide desktop image into the phone.
     ========================================================= */
  @media (max-width:700px){
    /*
       On phones/tablets the hero height follows viewport WIDTH rather
       than viewport height. This keeps the same wide-image character
       instead of turning a landscape image into a tall cropped panel.
    */
    .stage{
      --hero-height:clamp(250px, 56.25vw, 380px);
    }

    .hero-gateway{
      --gateway-top:clamp(6px, 1.2vw, 12px);
      --gateway-side:clamp(6px, 1.6vw, 14px);
      --gateway-shape:
        polygon(
          0 20px,
          20px 0,
          calc(100% - 46px) 0,
          100% 24px,
          100% calc(100% - 22px),
          calc(100% - 26px) 100%,
          0 100%
        );
    }

    .hero-media img{
      object-position:48% center;
    }

    /*
       MOBILE ROAD / TEXT HARMONY
       ---------------------------------------------------------
       Keep the convergence visually tied to the hero threshold, then
       let the artwork soften away before it reaches the supporting copy.
       This preserves the upward-flow idea without allowing road lines to
       compete with the tagline and message on a narrow screen.
    */
    .paths{
      /* Mobile uses its own focused SVG composition and join position. */
      transform:translateY(-clamp(42px, 8vw, 72px));
      transform-origin:top center;
      -webkit-mask-image:linear-gradient(
        to bottom,
        #000 0,
        #000 calc(var(--hero-height) + 24px),
        rgba(0,0,0,.72) calc(var(--hero-height) + 110px),
        transparent calc(var(--hero-height) + 240px)
      );
      mask-image:linear-gradient(
        to bottom,
        #000 0,
        #000 calc(var(--hero-height) + 24px),
        rgba(0,0,0,.72) calc(var(--hero-height) + 110px),
        transparent calc(var(--hero-height) + 240px)
      );
    }

    .hero-identity{
      padding-bottom:clamp(1.75rem, 4vw, 2.5rem);
    }

    /* The mobile SVG viewBox already focuses on the hub; avoid a
       desktop-positioned bloom appearing away from the actual join. */
    .stage::before{
      display:none;
    }
  }

  @media (max-width:480px){
    .stage{
      --hero-height:clamp(220px, 56.25vw, 300px);
      padding:0 7vw 8vh;
    }

    .hero-gateway{
      --gateway-top:6px;
      --gateway-side:6px;
      --gateway-shape:
        polygon(
          0 16px,
          16px 0,
          calc(100% - 34px) 0,
          100% 18px,
          100% calc(100% - 18px),
          calc(100% - 20px) 100%,
          0 100%
        );
    }

    .hero-media img{
      object-position:47% center;
    }

    .wordmark{
      font-size:clamp(2.65rem, 12vw, 3.55rem);
    }

    .eyebrow{
      margin-bottom:1rem;
    }

    .hero-identity{
      padding-bottom:1.5rem;
    }

    .home-copy{
      padding-top:clamp(1.75rem, 4svh, 2.5rem);
    }
  }

/* =========================================================
     HOME STAGE 5 — FLOATING INTRO SURFACE
     ---------------------------------------------------------
     Keeps the hero cinematic while grouping the supporting copy into
     one maintainable floating surface that overlaps the hero threshold.
     ========================================================= */

.stage{
  /* Let the hero + intro surface define the stage height naturally. */
  min-height:auto;
  padding-bottom:clamp(2.5rem,5vh,4rem);
}

.content{
  width:min(100%,920px);
  max-width:920px;
}

.home-copy{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:min(760px, calc(100vw - 12vw));
  margin-top:clamp(-3.5rem, -5vw, -2rem);
  padding:clamp(1.6rem,3vw,2.5rem) clamp(1.5rem,4vw,3rem) clamp(1.5rem,3vw,2.25rem);
  border:1px solid rgba(43,33,24,.12);
  border-radius:28px;
  background:rgba(255,246,232,.86);
  box-shadow:
    0 20px 46px rgba(43,33,24,.09),
    0 4px 12px rgba(226,155,63,.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.home-copy::before{
  content:"";
  display:block;
  width:46px;
  height:2px;
  margin:0 auto clamp(.9rem,2vw,1.25rem);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(181,80,46,.25), rgba(226,155,63,.72), rgba(47,82,51,.25));
}

.tagline{
  max-width:680px;
}

.home-message{
  width:min(100%,620px);
  margin-top:clamp(1.1rem,2.2vw,1.5rem);
  padding-top:clamp(1rem,2vw,1.25rem);
}

.desc{
  font-size:clamp(.95rem,1.6vw,1.02rem);
  line-height:1.65;
}

.kannada{
  margin-top:.8rem;
}

@media (max-width:700px){
  .stage{
    padding:0 5vw clamp(2rem,5vh,3rem);
  }

  .content{
    width:100%;
  }

  /* The road is intentionally a desktop/tablet composition;
     the intro surface becomes the clean mobile transition. */
  .paths{
    display:none;
  }

  .home-copy{
    width:100%;
    margin-top:-1.5rem;
    padding:1.35rem 1.1rem 1.25rem;
    border-radius:22px;
    box-shadow:0 14px 32px rgba(43,33,24,.08);
  }

  .home-copy::before{
    margin-bottom:.8rem;
  }

  .tagline{
    font-size:clamp(1.05rem,5vw,1.3rem);
    line-height:1.42;
  }

  .home-message{
    width:100%;
    margin-top:1rem;
    padding-top:.95rem;
  }

  .desc{
    font-size:.94rem;
    line-height:1.6;
  }

  .kannada{
    font-size:.9rem;
    margin-top:.7rem;
  }
}

@media (max-width:480px){
  .home-copy{
    margin-top:-1.25rem;
    padding:1.2rem .95rem 1.1rem;
    border-radius:20px;
  }

  .tagline{
    font-size:1.05rem;
  }
}