/*
  Custom minimal design system for unique one-pager portfolio
  - Pastel palette with sharp accents
  - Handwritten script for headings (via CSS paint + fallback)
  - Parallax hero layers
  - Smooth reveal animations
  - Responsive + accessible
*/

:root{
  --bg: #faf7f5;
  --text: #2b2b2b;
  --muted: #6d6d6d;
  --accent: #4f7cac;
  --accent-2: #f25f5c;
  --pastel-1: #f2e9e4;
  --pastel-2: #e6f2f1;
  --pastel-3: #f3f0ff;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.5 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden;
}

/* Header */
.site-header{position:fixed; inset:0 0 auto 0; height:64px; display:flex; align-items:center; gap:18px; padding:0 18px; z-index:50; backdrop-filter:saturate(180%) blur(10px); background:linear-gradient(180deg, rgba(250,247,245,.9), rgba(250,247,245,0));}
.logo{width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--text); color:white; text-decoration:none; font-weight:700;}
.nav{display:flex; gap:14px; margin-left:auto}
.nav a{color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:10px}
.nav a:hover{background:rgba(0,0,0,.05); color:var(--text)}
.lang-switch{display:flex; gap:6px}
.lang-switch button{border:0; padding:6px 10px; border-radius:10px; background:#fff; box-shadow:var(--shadow); cursor:pointer}
.lang-switch .is-active{background:var(--accent); color:#fff}

/* Sections */
.section{min-height:100vh; position:relative; display:flex; align-items:center; padding:100px 20px 60px}
.container{width:min(1100px, 100%); margin:0 auto}
.section-title{font-size:clamp(28px, 5vw, 42px); margin:0 0 14px; letter-spacing:.2px}
.section-sub{color:var(--muted); margin-bottom:28px}
.section-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.35; pointer-events:none}
.texture-1{background:radial-gradient(40% 40% at 10% 10%, var(--pastel-1), transparent 60%), radial-gradient(40% 40% at 90% 20%, var(--pastel-2), transparent 60%)}
.texture-2{background:radial-gradient(40% 40% at 10% 90%, var(--pastel-3), transparent 60%), radial-gradient(40% 40% at 80% 20%, var(--pastel-2), transparent 60%)}
.texture-3{background:radial-gradient(40% 40% at 20% 10%, var(--pastel-2), transparent 60%), radial-gradient(40% 40% at 80% 70%, var(--pastel-1), transparent 60%)}
.texture-4{background:radial-gradient(40% 40% at 50% 10%, var(--pastel-3), transparent 60%), radial-gradient(40% 40% at 20% 70%, var(--pastel-2), transparent 60%)}

/* Hero */
.hero{display:grid; place-items:center; text-align:center}
.hero-bg{position:absolute; inset:0; overflow:hidden}
.layer{position:absolute; width:120vmax; height:120vmax; border-radius:50%; filter:blur(40px); opacity:.45; mix-blend:multiply}
.layer-1{background:conic-gradient(from 0deg, #ffd9e8, #e0f7fa, #e6e6ff, #ffd9e8); top:-20%; left:-10%}
.layer-2{background:conic-gradient(from 90deg, #e6f2f1, #fff3e0, #f3f0ff, #e6f2f1); top:10%; right:-20%}
.layer-3{background:conic-gradient(from 180deg, #f2e9e4, #e6f2f1, #ffe6e6, #f2e9e4); bottom:-20%; left:0}
.hero-inner{position:relative; z-index:1}
.hero-title{font-size:clamp(28px, 5vw, 56px); line-height:1.1; margin:0 0 10px}
.script{display:block; font-family:"Brush Script MT", "Comic Neue", cursive; font-size:.8em; color:var(--accent-2)}
.hero-sub{color:var(--muted); max-width:800px; margin:0 auto 20px}
.hero-cta{display:flex; gap:12px; justify-content:center}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:12px 18px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .2s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:#fff; color:var(--text); border-color:rgba(0,0,0,.08)}

/* About */
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
.tags{display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none}
.tags li{background:#fff; border:1px solid rgba(0,0,0,.06); padding:8px 12px; border-radius:999px}
.timeline{list-style:none; padding:0; margin:0}
.timeline li{background:#fff; border:1px dashed rgba(0,0,0,.15); border-radius:var(--radius); padding:12px; margin-bottom:10px}
.t-year{font-weight:700; margin-right:8px}

/* Projects */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{position:relative; border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow); transform:translateY(20px); opacity:0; transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s}
.card.in{transform:none; opacity:1}
.card img{width:100%; height:200px; object-fit:cover; display:block; filter:saturate(1) contrast(.95)}
.card-mask{position:absolute; inset:0; display:grid; place-items:center; text-align:center; background:rgba(0,0,0,.0); color:#fff; transition:background .25s}
.card h3{transform:translateY(10px); opacity:0; transition:transform .3s, opacity .3s}
.card p{transform:translateY(16px); opacity:0; transition:transform .35s, opacity .35s}
.card:hover .card-mask{background:linear-gradient(180deg, rgba(79,124,172,.0), rgba(242,95,92,.45))}
.card:hover h3, .card:focus h3{transform:none; opacity:1}
.card:hover p, .card:focus p{transform:none; opacity:1}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.25); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .2s; z-index:60}
.modal.show{opacity:1; pointer-events:auto}
.modal-dialog{background:#fff; width:min(900px, 92vw); border-radius:var(--radius); overflow:hidden; display:grid; grid-template-columns:1fr .8fr}
.modal-body{display:contents}
.modal img{width:100%; height:100%; object-fit:cover}
.modal-text{padding:18px}
.modal-close{position:absolute; top:14px; right:16px; border:0; background:#fff; border-radius:50%; width:36px; height:36px; cursor:pointer; box-shadow:var(--shadow)}

/* Services */
.s-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; list-style:none; padding:0; margin:0}
.s-card{background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transform:translateY(20px); opacity:0; transition:transform .6s, opacity .6s}
.s-card.in{transform:none; opacity:1}
.s-card i{color:var(--accent); margin-bottom:8px}

/* Contact */
.contact-wrap{display:grid; grid-template-columns:1fr .8fr; gap:24px}
.form{display:grid; gap:10px}
.form input,.form textarea{border:1px solid rgba(0,0,0,.1); border-radius:10px; padding:10px 12px; background:#fff}
.socials{display:flex; gap:10px; font-size:20px}
.qrbox{display:grid; place-items:center; gap:6px; padding:12px; background:#fff; border-radius:var(--radius); border:1px dashed rgba(0,0,0,.1)}
.map-wrap iframe{width:100%; height:220px; border:0; border-radius:var(--radius); box-shadow:var(--shadow)}

/* Footer */
.site-footer{padding:30px 20px; text-align:center; color:var(--muted)}

/* Reveal */
.reveal{transform:translateY(20px); opacity:0}
.reveal.in{transform:none; opacity:1}

/* Responsive */
@media (max-width: 1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .s-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .modal-dialog{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero-title{font-size:clamp(24px, 8vw, 40px)}
}