/*
Theme Name: Jack — 3D Creator
Theme URI: https://example.com/
Author: OpenAI
Description: Custom responsive WordPress portfolio theme for Jack, a 3D Creator.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: jack-3d-creator
*/

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --black: #0C0C0C;
  --white: #fff;
  --text: #D7E2EA;
  --muted: rgba(12,12,12,.6);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--text);
  font-family: 'Kanit', sans-serif;
  box-sizing: border-box;
  overflow-x: clip;
}
*, *::before, *::after { box-sizing: inherit; }
body { min-height: 100vh; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button, a { -webkit-tap-highlight-color:transparent; }

.hero-heading {
  background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.jack-main { overflow-x:clip; background:var(--black); }
.jack-hero { position:relative; display:flex; flex-direction:column; height:100vh; min-height:650px; overflow:hidden; background:var(--black); }
.jack-nav { position:relative; z-index:30; display:flex; justify-content:space-between; align-items:center; padding:24px 24px 0; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; }
.jack-nav a { transition:opacity .2s; }
.jack-nav a:hover { opacity:.7; }

.hero-title-wrap { position:relative; z-index:1; overflow:hidden; margin-top:24px; }
.hero-title { width:100%; margin:0; white-space:nowrap; font-size:14vw; font-weight:900; line-height:.9; letter-spacing:-.05em; text-transform:uppercase; }

.hero-portrait { position:absolute; z-index:10; left:50%; top:50%; width:280px; transform:translate(-50%,-50%); will-change:transform; transition:transform .3s ease-out; }
.hero-portrait img { width:100%; user-select:none; }

.hero-bottom { margin-top:auto; position:relative; z-index:20; display:flex; justify-content:space-between; align-items:flex-end; padding:0 24px 28px; }
.hero-copy { max-width:160px; margin:0; color:var(--text); font-size:clamp(.75rem,1.4vw,1.5rem); font-weight:300; line-height:1.1; letter-spacing:.08em; text-transform:uppercase; }

.contact-button {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:12px 32px;
  color:#fff; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%);
  box-shadow:0 4px 4px rgba(181,1,167,.25), 4px 4px 12px #7721B1 inset;
  outline:2px solid #fff; outline-offset:-3px;
  transition:transform .25s ease, filter .25s ease;
}
.contact-button:hover { transform:translateY(-2px); filter:brightness(1.08); }

.fade-in { opacity:0; transform:translate3d(0,30px,0); transition:opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1); }
.fade-in.is-visible { opacity:1; transform:none; }

.jack-marquee { overflow:hidden; background:var(--black); padding:96px 0 40px; }
.marquee-row { display:flex; gap:12px; width:max-content; margin:6px 0; will-change:transform; }
.marquee-tile { width:420px; height:270px; flex:0 0 auto; border-radius:16px; object-fit:cover; }

.jack-about { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:80px 20px; background:var(--black); }
.about-decor { position:absolute; pointer-events:none; }
.about-content { position:relative; z-index:2; max-width:800px; display:flex; flex-direction:column; align-items:center; gap:40px; text-align:center; }
.about-heading, .section-heading { margin:0; font-size:clamp(3rem,12vw,160px); font-weight:900; line-height:.9; letter-spacing:-.04em; text-transform:uppercase; }
.animated-text { max-width:560px; margin:0; color:var(--text); font-size:clamp(1rem,2vw,1.35rem); font-weight:500; line-height:1.65; text-align:center; }
.animated-text .char { opacity:.2; transition:opacity .12s linear; }

.jack-services {
  position:relative; z-index:2; border-radius:40px 40px 0 0;
  padding:80px 20px; background:#fff; color:var(--black);
}
.jack-services .section-heading { margin-bottom:64px; text-align:center; color:var(--black); }
.services-list { max-width:1024px; margin:0 auto; }
.service-item { display:grid; grid-template-columns:.8fr 2fr; align-items:center; gap:16px; padding:32px 0; border-top:1px solid rgba(12,12,12,.15); }
.service-number { font-size:clamp(3rem,10vw,140px); font-weight:900; line-height:.8; }
.service-name { margin:0 0 3px; font-size:clamp(1rem,2.2vw,2.1rem); font-weight:500; text-transform:uppercase; }
.service-desc { max-width:680px; margin:0; font-size:clamp(.85rem,1.6vw,1.25rem); font-weight:300; line-height:1.6; opacity:.6; }

.jack-projects {
  position:relative; z-index:10; margin-top:-40px;
  border-radius:40px 40px 0 0; padding:80px 20px 96px; background:var(--black); color:var(--text);
}
.jack-projects .section-heading { margin-bottom:64px; text-align:center; }
.project-stack { max-width:1280px; margin:0 auto; }
.project-wrap { position:relative; height:85vh; min-height:560px; }
.project-card {
  position:sticky; top:96px; height:calc(85vh - 16px); min-height:540px;
  overflow:hidden; padding:16px; border:2px solid var(--text); border-radius:40px;
  background:var(--black); transform-origin:center top; will-change:transform;
}
.project-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:16px; }
.project-meta { display:flex; min-width:0; align-items:flex-start; gap:16px; }
.project-number { font-size:clamp(3rem,8vw,110px); font-weight:900; line-height:.8; }
.project-type { margin:0; font-size:12px; letter-spacing:.25em; text-transform:uppercase; opacity:.5; }
.project-name { margin:4px 0 0; font-size:clamp(1.1rem,2.5vw,2rem); font-weight:500; text-transform:uppercase; }
.live-button { flex:0 0 auto; padding:10px 24px; border:2px solid var(--text); border-radius:999px; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; transition:background .2s; }
.live-button:hover { background:rgba(215,226,234,.1); }
.project-grid { display:grid; grid-template-columns:2fr 3fr; gap:12px; height:calc(100% - 105px); overflow:hidden; }
.project-left { display:grid; grid-template-rows:clamp(130px,16vw,230px) 1fr; gap:12px; overflow:hidden; }
.project-grid img { width:100%; height:100%; object-fit:cover; border-radius:40px; }
.contact-footer { min-height:35vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; text-align:center; }
.contact-kicker { margin:0; font-size:13px; letter-spacing:.35em; text-transform:uppercase; opacity:.5; }

@media (min-width:640px) {
  .jack-nav { padding:32px 40px 0; font-size:18px; }
  .hero-title-wrap { margin-top:16px; }
  .hero-title { font-size:15vw; }
  .hero-portrait { width:360px; top:auto; bottom:0; transform:translateX(-50%); }
  .hero-bottom { padding:0 40px 32px; }
  .hero-copy { max-width:220px; }
  .contact-button { padding:14px 40px; font-size:14px; }
  .jack-marquee { padding-top:128px; }
  .jack-about { padding:80px 32px; }
  .about-content { gap:56px; }
  .jack-services { border-radius:50px 50px 0 0; padding:96px 32px; }
  .service-item { padding:40px 0; }
  .jack-projects { margin-top:-48px; border-radius:50px 50px 0 0; padding:96px 32px; }
  .project-card { top:128px; padding:24px; border-radius:50px; }
  .project-grid, .project-left { gap:16px; }
  .project-grid img { border-radius:50px; }
}
@media (min-width:768px) {
  .hero-title { font-size:16vw; }
  .hero-portrait { width:440px; }
  .jack-about { padding:80px 40px; }
  .jack-services { border-radius:60px 60px 0 0; padding:128px 40px; }
  .jack-services .section-heading { margin-bottom:112px; }
  .jack-projects { margin-top:-56px; border-radius:60px 60px 0 0; padding:128px 40px; }
  .jack-projects .section-heading { margin-bottom:112px; }
  .project-card { padding:32px; border-radius:60px; }
  .project-grid img { border-radius:60px; }
}
@media (min-width:1024px) {
  .hero-title { font-size:17.5vw; }
  .hero-portrait { width:520px; }
  .jack-nav { font-size:1.4rem; }
}
@media (max-width:639px) {
  .marquee-tile { width:300px; height:200px; }
  .about-decor.moon { width:90px !important; }
  .about-decor.object { width:80px !important; }
  .about-decor.lego { width:90px !important; }
  .about-decor.group { width:100px !important; }
  .service-item { grid-template-columns:.7fr 2fr; }
  .project-wrap { min-height:520px; }
  .project-card { min-height:500px; }
  .project-top { flex-wrap:wrap; }
  .live-button { padding:8px 14px; font-size:10px; }
  .project-grid { height:calc(100% - 125px); }
}