/* Nur Karim portfolio. Palette taken from the flag, mustard fields and river. */
@font-face{font-family:"Baloo Da 2";src:url(../assets/fonts/baloo-da-2-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Baloo Da 2";src:url(../assets/fonts/baloo-da-2-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo Da 2";src:url(../assets/fonts/baloo-da-2-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hind Siliguri";src:url(../assets/fonts/hind-siliguri-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hind Siliguri";src:url(../assets/fonts/hind-siliguri-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hind Siliguri";src:url(../assets/fonts/hind-siliguri-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --green:#006A4E; --red:#F42A41; --red-deep:#C8102E; --mustard:#F2B705;
  --ink:#12372A; --ink-soft:#3D5A4E; --paper:#FFFDF6; --bar:56px;
  --display:"Baloo Da 2","Trebuchet MS",sans-serif; --body:"Hind Siliguri","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-snap-type:y mandatory}
body{margin:0;font:400 1.0625rem/1.6 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:var(--green)}
:focus-visible{outline:3px dashed var(--red);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* top bar */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:20;display:flex;align-items:center;gap:16px;padding:0 clamp(12px,3vw,32px);background:rgba(255,253,246,.82);backdrop-filter:blur(8px);border-bottom:2px dashed rgba(0,106,78,.25)}
.brand{display:flex;align-items:center;gap:10px;font:800 1.25rem/1 var(--display);color:var(--ink);text-decoration:none}
.topbar nav{margin-left:auto;display:flex;gap:clamp(10px,2.2vw,26px)}
.topbar nav a{font-weight:600;font-size:.98rem;color:var(--ink);text-decoration:none;padding:6px 2px;border-bottom:3px solid transparent}
.topbar nav a:hover,.topbar nav a.on{border-bottom-color:var(--red)}
.sound{display:flex;align-items:center;gap:6px;font:600 .9rem var(--body);color:var(--green);background:#fff;border:2px solid var(--green);border-radius:999px;padding:6px 12px;cursor:pointer}
.sound[aria-pressed="true"]{background:var(--green);color:#fff}
.sound .waves{display:none}.sound[aria-pressed="true"] .waves{display:block}.sound[aria-pressed="true"] .mute{display:none}

/* slides */
.slide{position:relative;min-height:100vh;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;padding-top:var(--bar)}
.content{position:relative;z-index:2;transform:translateZ(0);flex:1;width:min(1120px,100%);margin:0 auto;padding:clamp(20px,5vh,56px) clamp(18px,4vw,40px) 12px}
.scene{position:relative;z-index:1;display:block;width:100%;height:clamp(170px,41vh,420px);flex:none;margin-top:-34px;overflow:visible}
.slide-contact .scene{margin-top:-80px}
.slide-home{background:linear-gradient(#BFE0F2 0%,#E4F1EE 38%,#FFE9C4 66%,#FFD49A 100%)}
.slide-services{background:linear-gradient(#9FD0EE 0%,#D3EBF6 55%,#EEF8F5 100%)}
.slide-skills{background:linear-gradient(#A9D6F0 0%,#E0F0E6 52%,#FBF3C8 100%)}
.slide-courses{background:linear-gradient(#B9DBEF 0%,#F3EDD4 52%,#FAD9A0 100%)}
.slide-contact{background:linear-gradient(#CBD6EE 0%,#F6D3C3 40%,#FDB58A 70%,#FB9A6B 100%)}

h1{font:800 clamp(3.4rem,9vw,6.6rem)/.92 var(--display);letter-spacing:-.02em;color:var(--green)}
h2{font:800 clamp(2.2rem,5vw,3.4rem)/1 var(--display);color:var(--green)}
h3{font:700 1.2rem/1.2 var(--display)}
.intro{max-width:56ch;margin-top:8px;color:var(--ink-soft)}

/* buttons */
.btn{display:inline-block;font:700 1.05rem/1 var(--display);text-decoration:none;padding:14px 26px 12px;border-radius:14px 18px 14px 20px;border:2px solid var(--red);cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red-deep);border-color:var(--red-deep);color:#fff;box-shadow:0 4px 0 #8f0b20}
.btn-line{background:#fff;color:var(--green);border-color:var(--green);box-shadow:0 4px 0 var(--green)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(16px,4vw,56px)}
.hello{font-weight:600;color:var(--red-deep)}
.role{font:700 clamp(1.15rem,2.2vw,1.5rem)/1.2 var(--display);margin-top:6px}
.lead{max-width:48ch;margin-top:12px;color:var(--ink-soft)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.hero-visual{position:relative;justify-self:center;padding-right:clamp(80px,13vw,180px)}
.portrait{width:clamp(170px,26vw,330px);aspect-ratio:1;border-radius:50%;padding:8px;background:var(--green);box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--red)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.flagpole{position:absolute;right:clamp(64px,11vw,160px);top:-8%;bottom:-60vh;width:9px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%,rgba(0,0,0,.28)),repeating-linear-gradient(#C9A24B 0 34px,#7d5f24 34px 37px,#d8b662 37px 40px)}
.flagpole::before{content:"";position:absolute;left:-3px;top:-10px;width:14px;height:14px;border-radius:50%;background:var(--mustard)}
.flag{--w:clamp(100px,15vw,210px);position:absolute;left:8px;top:6px;width:var(--w);height:calc(var(--w)*.6);display:flex;
  background:radial-gradient(circle at 45% 50%,var(--red) 0 33.3%,transparent 34%) , var(--green)}
.flag.live{background:none}
.flag canvas{position:absolute;left:0;top:-30%;width:104%;height:160%;filter:drop-shadow(2px 4px 3px rgba(0,0,0,.2))}

/* sky: clouds and birds (added by JS), sun, river, boats, plants */
.sky{position:absolute;inset:var(--bar) 0 0 0;pointer-events:none;overflow:hidden;z-index:1}
.cloud{position:absolute;left:-260px;width:240px;height:90px;color:#fff;opacity:.92;animation:drift linear infinite}
.slide-contact .cloud{color:#ffe3d3}.slide-courses .cloud{color:#fff7e6}
@keyframes drift{to{transform:translateX(calc(100vw + 280px))}}
.flock{position:absolute;left:0;animation:fly linear infinite;color:#26352f}
.slide-contact .flock{color:#3b2a35}
.flock.rev{animation-name:fly-rev}
@keyframes fly{from{transform:translate(-30vw,3vh)}50%{transform:translate(50vw,-2vh)}to{transform:translate(130vw,2vh)}}
@keyframes fly-rev{from{transform:translate(130vw,-2vh)}50%{transform:translate(50vw,3vh)}to{transform:translate(-30vw,-1vh)}}
.bird{position:absolute;overflow:visible;animation:glide 2.6s ease-in-out infinite alternate}
.flock.rev .bird{scale:-1 1}
@keyframes glide{to{translate:0 5px}}
.wing{animation:flapL .46s ease-in-out infinite alternate;transform-origin:0 0}
.wing.r{animation-name:flapR}
@keyframes flapL{from{transform:rotate(26deg)}to{transform:rotate(-34deg)}}
@keyframes flapR{from{transform:rotate(-26deg)}to{transform:rotate(34deg)}}

.sun{transform:translateY(70px);transition:transform 3.2s cubic-bezier(.2,.7,.2,1)}
.in .sun{transform:none}
.sun.set{transform:translateY(-60px)}.in .sun.set{transform:translateY(8px)}
.drift{animation:sail linear infinite}
@keyframes sail{from{transform:translateX(var(--from))}to{transform:translateX(var(--to))}}
.bob{animation:bob 3.6s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-1.2px) rotate(-.8deg)}to{transform:translateY(1.4px) rotate(.9deg)}}
.shimmer{opacity:.5;animation:shimmer 5s ease-in-out infinite alternate}
.shimmer.b{animation-duration:7s;animation-delay:-3s}
@keyframes shimmer{from{transform:translateX(-18px);opacity:.15}to{transform:translateX(22px);opacity:.6}}
.glitter{animation:glitter 2.2s ease-in-out infinite alternate}
@keyframes glitter{from{opacity:.4;transform:translateX(-3px)}to{opacity:.85;transform:translateX(3px)}}
.sway{animation:sway 4.2s ease-in-out infinite alternate}
.sway.strong{animation-duration:3.2s}
@keyframes sway{from{transform:skewX(-3deg)}to{transform:skewX(4.5deg)}}
.fronds{animation:fronds 5s ease-in-out infinite alternate}
@keyframes fronds{from{transform:rotate(-2.2deg)}to{transform:rotate(2.6deg)}}
.kite{transform-box:fill-box;transform-origin:50% 0;animation:kite 5s ease-in-out infinite alternate}
.k2{animation-duration:6.5s;animation-delay:-2s}
@keyframes kite{from{transform:translate(-14px,6px) rotate(-10deg)}to{transform:translate(16px,-6px) rotate(12deg)}}
.fly{animation:glow 2.4s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.05}to{opacity:1}}
.slide:not(.live) *{animation-play-state:paused!important}

/* services: stitched cards that float in like boats */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.cards li{position:relative;background:var(--paper);border-radius:16px 20px 14px 22px;padding:18px 18px 16px;box-shadow:0 5px 0 rgba(0,106,78,.18)}
.cards li::after{content:"";position:absolute;inset:6px;border:2px dashed rgba(244,42,65,.55);border-radius:inherit;pointer-events:none}
.cards h3{color:var(--green)}
.cards p{font-size:.98rem;line-height:1.45;margin-top:4px;color:var(--ink-soft)}
.js .cards li{opacity:0;transform:translateX(-46px) rotate(-2deg)}
.js .in .cards li{opacity:1;transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;transition-delay:calc(var(--n)*90ms)}

/* skills: plots of land that grow up from the ground */
.plots{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:22px;align-items:end}
.plot{background:var(--paper);border-radius:14px;border-bottom:8px solid #7CC27A;padding:14px 14px 12px;transform-origin:50% 100%}
.plot h3{color:var(--red-deep);font-size:1.05rem}
.plot li{font-weight:500;padding:5px 0;border-top:2px dashed rgba(0,106,78,.22)}
.plot li:first-child{border-top:0}
.js .plot{opacity:0;transform:scaleY(.2)}
.js .in .plot{opacity:1;transform:none;transition:transform .8s cubic-bezier(.2,1.2,.3,1),opacity .4s;transition-delay:calc(var(--n)*110ms)}

/* courses: school slates */
.slates{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:24px;margin-top:24px}
.slate{position:relative;background:#184D3B;color:#F6F3E4;border:8px solid #9A6B3A;border-radius:10px;padding:26px 20px 20px;transform-origin:50% -20px}
.slate h3{font-size:1.6rem;color:#fff}
.slate p{font-size:.98rem;line-height:1.5;margin-top:6px;opacity:.9}
.soon{position:absolute;top:-16px;right:14px;font:700 .85rem/1 var(--display);background:var(--mustard);color:#3B2A00;padding:7px 12px 5px;border-radius:999px;transform:rotate(3deg)}
.js .in .slate{animation:swing 1.5s ease-out both;animation-delay:calc(var(--n)*160ms)}
@keyframes swing{0%{transform:rotate(9deg)}35%{transform:rotate(-6deg)}65%{transform:rotate(3deg)}100%{transform:none}}
.note{margin-top:18px;font-weight:600}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,64px);align-items:start}
.slide-contact h2,.slide-contact a{color:var(--green)}
.links{margin-top:18px;display:grid;gap:10px;font-weight:600}
.links li{padding-left:22px;position:relative}
.links li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--red)}
.form{background:var(--paper);border-radius:18px 22px 16px 24px;padding:20px;display:grid;gap:10px;position:relative;box-shadow:0 5px 0 rgba(0,106,78,.2)}
.form label{font-weight:600;font-size:.95rem;display:grid;gap:4px}
.form input,.form textarea{font:inherit;font-weight:400;color:var(--ink);background:#fff;border:2px solid #9DBDAE;border-radius:10px;padding:9px 12px;width:100%;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,106,78,.2)}
.form .btn{justify-self:start}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:.92rem;font-weight:600;color:var(--red-deep);min-height:1.2em}
.foot{position:absolute;z-index:3;bottom:8px;left:0;right:0;text-align:center;font-size:.85rem;font-weight:500;color:#fff}

/* side dots */
.dots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:20;display:grid;gap:12px}
.dots a{width:12px;height:12px;border-radius:50%;border:2px solid var(--green);background:#fff}
.dots a.on{background:var(--red);border-color:var(--red);transform:scale(1.3)}

@media (max-width:900px){
  .plots{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  :root{--bar:52px}
  body{font-size:1rem}
  .brand span,.sound-label,.dots{display:none}
  .topbar{gap:10px}.topbar nav a{font-size:.9rem}
  .sound{padding:8px}
  .hero{grid-template-columns:1fr;gap:18px}
  .hero-visual{order:-1;justify-self:start;padding-right:0}
  .flagpole{right:auto;left:calc(100% + 40px);top:-4%;bottom:-6px}
  .flagpole::after{content:"";position:absolute;left:-13px;bottom:-5px;width:34px;height:10px;border-radius:50%;background:#3E9B63}
  .cards{gap:10px;margin-top:14px}.cards li{padding:14px 12px 12px}.cards h3{font-size:1.02rem}.cards p{font-size:.88rem}
  .plots{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px;align-items:stretch}
  .slates{grid-template-columns:1fr;gap:26px}
  .contact{grid-template-columns:1fr}
  .scene{height:clamp(150px,27vh,250px);margin-top:-10px}
  .plot ul{display:flex;flex-wrap:wrap;gap:4px 6px}
  .plot li,.plot li:first-child{border:1.5px solid rgba(0,106,78,.3);border-radius:999px;padding:1px 9px;font-size:.92rem}
  .form{padding:14px;gap:6px}.form input,.form textarea{padding:7px 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .cards li,.js .plot{opacity:1;transform:none}
  .sun,.sun.set{transform:none}
  html{scroll-snap-type:y proximity}
}