/* ==========================================================================
  jymer1102 — Site Stylesheet
  Table of Contents:
    1.  Fonts & Design Tokens
    2.  Global Reset & Base
    3.  Utility / Shared Patterns (eyebrows, glow text, interactive glow utility)
    4.  Navigation
    5.  Hero (Home)
    6.  Intro + Split Section (Home)
    7.  Page Header (Creations / Connect)
    8.  Project Cards & Gallery
    9.  Project Icons & Logo Images
    10. Connect Page & Contact Form
    11. Footer
    12. Responsive
    13. Scroll Indicator, Cursors & Modals
  ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
  1. Fonts & Design Tokens
  -------------------------------------------------------------------------- */
:root {
/* Surfaces */
--bg: #0a0a0c;
--bg-raised: #111116;
--bg-card-from: #131318;
--bg-card-to: #17171d;
--border: rgba(255, 255, 255, 0.07);
--border-hover: rgba(30, 86, 224, 0.85);

/* Accent (deep electric blue) */
--accent: #1E56E0;
--accent-bright: #4FA9FF;
--accent-dim: rgba(30, 86, 224, 0.14);
--accent-glow: rgba(30, 86, 224, 0.35);

/* Text */
--text-1: #f7f7f7;
--text-2: #a3a3ac;
--text-3: #6c6c75;

/* Status */
--green: #2ecc71;
--amber: #f39c12;
--red: #e74c3c;

/* Type */
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Layout */
--container-w: 1120px;
--radius-lg: 18px;
--radius-md: 12px;
--radius-sm: 8px;
--ease: cubic-bezier(0.22, 0.8, 0.28, 1);

/* Nav bar background (theme-aware) */
--nav-bg: rgba(10, 10, 12, 0.72);
}

/* Light theme overrides — applied when <html data-theme="light"> */
:root[data-theme="light"] {
--bg: #f4f5f8;
--bg-raised: #ffffff;
--bg-card-from: #ffffff;
--bg-card-to: #edeff3;
--border: rgba(10, 10, 12, 0.09);
--border-hover: rgba(30, 86, 224, 0.85);

--text-1: #15151a;
--text-2: #46464f;
--text-3: #74747d;

--nav-bg: rgba(255, 255, 255, 0.78);
}

/* Text that used the bright pastel accent for legibility on dark
   backgrounds needs a deeper blue to stay readable on light ones. */
:root[data-theme="light"] {
--accent-bright: #145dc7;
}

:root[data-theme="light"] .glow-text {
background: linear-gradient(120deg, #0a0a0c 0%, #0a0a0c 45%, var(--accent-bright) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
  2. Global Reset & Base
  -------------------------------------------------------------------------- */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
position: relative;
}

html {
scroll-behavior: smooth;
}

body {
background-color: var(--bg);
background-image:
radial-gradient(circle at 15% 0%, rgba(30, 86, 224, 0.08), transparent 40%),
radial-gradient(circle at 85% 20%, rgba(30, 86, 224, 0.05), transparent 35%);
background-attachment: fixed;
color: var(--text-1);
font-family: var(--font-body);
line-height: 1.5;
}

a {
color: inherit;
}

img {
max-width: 100%;
height: auto;
display: block;
}

a:focus-visible,
button:focus-visible {
outline: 2px solid var(--accent-bright);
outline-offset: 4px;
border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}

.container {
max-width: var(--container-w);
width: 100%;
margin: 0 auto;
padding: 100px 24px 60px;
}

/* --------------------------------------------------------------------------
  3. Utility / Shared Patterns
  -------------------------------------------------------------------------- */

.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--accent-bright);
letter-spacing: 0.02em;
margin-bottom: 14px;
}

.eyebrow::before {
content: '//';
color: var(--text-3);
}

.glow-text {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(120deg, #ffffff 0%, #ffffff 45%, var(--accent-bright) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
word-break: break-word;
}

.cursor {
display: inline-block;
width: 0.5ch;
background: var(--accent-bright);
color: transparent;
margin-left: 4px;
animation: blink 1.1s step-end infinite;
box-shadow: 0 0 12px var(--accent-glow);
}

@keyframes blink {
0%, 45% { opacity: 1; }
50%, 100% { opacity: 0; }
}

.btn,
.project-link {
font-family: var(--font-body);
font-weight: 600;
text-decoration: none;
transition: color 0.25s var(--ease), transform 0.25s var(--ease), text-shadow 0.25s var(--ease);
}

/* --- Global Interactive Card Glow & Active Border Lighting --- */
.js-interactive-container {
position: relative;
overflow: hidden;
z-index: 1;
border: 1px solid var(--border);
transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.js-interactive-container::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
600px circle at var(--mx, 50%) var(--my, 50%), 
var(--accent-glow), 
transparent 60%
);
opacity: 0;
transition: opacity 0.35s var(--ease);
pointer-events: none;
z-index: 1;
}

.js-interactive-container:hover::before,
.js-interactive-container:active::before,
.js-interactive-container:focus-within::before {
opacity: 1;
}

.js-interactive-container:hover,
.js-interactive-container:active,
.js-interactive-container:focus-within {
border-color: var(--border-hover) !important;
box-shadow: 0 0 25px rgba(30, 86, 224, 0.35);
}

.js-interactive-container > * {
position: relative;
z-index: 2;
}

/* --- Shared "reveal on scroll" utility ---
  Cards/panels wrapped in .reveal-on-scroll start hidden and only fade/slide
  into view once the page has been scrolled past 10px. Scrolling back to the
  very top removes .is-visible again, hiding them and bringing the scroll
  indicator back. Individual cards inside can still carry their own
  data-aos attributes for staggered entrance as they cross the viewport. */
.reveal-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}

/* --------------------------------------------------------------------------
  4. Navigation
  -------------------------------------------------------------------------- */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 8%;
background-color: var(--nav-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
border-bottom: 1px solid var(--border);
}

.logo {
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 500;
color: var(--text-1);
letter-spacing: -0.02em;
text-decoration: none;
cursor: pointer;
transition: color 0.25s var(--ease);
}

.nav-left {
display: flex;
align-items: center;
gap: 16px;
}

.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-raised);
color: var(--text-2);
font-size: 0.95rem;
cursor: pointer;
transition: border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
flex-shrink: 0;
}

.theme-toggle:hover {
border-color: var(--border-hover);
color: var(--accent-bright);
box-shadow: 0 0 12px var(--accent-glow);
transform: scale(1.06);
}

.theme-toggle i {
display: inline-block;
}

.theme-toggle i.icon-spin {
animation: themeIconSpin 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes themeIconSpin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.55);
}
100% {
transform: rotate(360deg) scale(1);
}
}

@media (prefers-reduced-motion: reduce) {
.theme-toggle i.icon-spin {
animation: none;
}
}

.logo:hover {
color: var(--accent-bright);
}

.logo::before {
content: '<';
color: var(--accent-bright);
}

.logo::after {
content: '/>';
color: var(--accent-bright);
}

.nav-links {
display: flex;
align-items: center;
margin-left: auto;
}

.nav-links a {
position: relative;
color: var(--text-2);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
margin-left: 32px;
padding-bottom: 4px;
transition: color 0.25s var(--ease);
}

.nav-links a::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
background: var(--accent-bright);
box-shadow: 0 0 10px var(--accent-glow), 0 0 4px var(--accent-bright);
transition: width 0.3s var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
color: var(--text-1);
}

.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}

/* --------------------------------------------------------------------------
  5. Home Banner + Hero
  -------------------------------------------------------------------------- */
.home-banner {
position: relative;
width: 100%;
height: clamp(240px, 34vw, 460px);
overflow: hidden;
transition: opacity 1.0s var(--ease), visibility 1.0s var(--ease);
opacity: 1;
visibility: visible;
}

.home-banner.fade-out {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}

.home-banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
display: block;
}

.home-banner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bg) 0%, transparent) 0%,
color-mix(in srgb, var(--bg) 0%, transparent) 40%,
color-mix(in srgb, var(--bg) 35%, transparent) 62%,
color-mix(in srgb, var(--bg) 70%, transparent) 78%,
color-mix(in srgb, var(--bg) 92%, transparent) 90%,
var(--bg) 100%
);
}

.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 70px 20px 90px;
position: relative;
width: 100%;
}

.hero .glow-text {
font-size: clamp(2.2rem, 5vw, 3.6rem);
line-height: 1.15;
margin-bottom: 18px;
max-width: 900px;
}

.hero .subtitle {
font-size: 1.15rem;
color: var(--text-2);
}

/* --------------------------------------------------------------------------
  6. Intro + Split Section (Home)
  -------------------------------------------------------------------------- */
section {
margin-bottom: 140px;
width: 100%;
}

section:last-child {
margin-bottom: 40px;
}

.intro-section {
text-align: center;
max-width: 760px;
margin: 0 auto 140px auto;
width: 100%;
}

.intro-section h2 {
font-family: var(--font-display);
font-size: 2.3rem;
font-weight: 600;
margin-bottom: 20px;
letter-spacing: -0.01em;
}

.intro-section p {
font-size: 1.1rem;
line-height: 1.85;
color: var(--text-2);
}

.split-section {
display: flex;
flex-wrap: wrap;
gap: 44px;
width: 100%;
}

.split-card {
flex: 1 1 calc(50% - 28px);
min-width: 280px;
background: linear-gradient(160deg, var(--bg-card-from), var(--bg-card-to));
border-radius: var(--radius-lg);
padding: 38px;
max-width: 100%;
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
will-change: transform;
transform-style: preserve-3d;
}

.split-card h3 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 600;
color: var(--accent-bright);
margin-bottom: 14px;
}

.split-card p {
color: var(--text-2);
line-height: 1.7;
font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
  7. Page Header (Creations / Connect)
  -------------------------------------------------------------------------- */
.page-header {
padding: 160px 24px 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center; 
width: 100%;
min-height: 100vh;
min-height: 100svh;
justify-content: center;
box-sizing: border-box;
position: relative;
}

.page-header .eyebrow {
order: 1;
}

.page-header .glow-text {
font-size: clamp(2rem, 4.5vw, 3rem);
margin-bottom: 14px;
order: 2;
}

.page-header .subtitle {
color: var(--text-2);
font-size: 1.05rem;
order: 3;
}

/* --------------------------------------------------------------------------
  7b. 404 / Error Page
  Compact variant of .page-header so the "return home" card sits on screen
  right away — no min-height:100vh, no scroll needed to see it.
  -------------------------------------------------------------------------- */
.page-header.error-header {
min-height: auto;
padding: 140px 24px 24px;
}

.container.error-main {
display: flex;
justify-content: center;
padding-top: 0;
padding-bottom: 60px;
}

.error-card {
text-align: center;
max-width: 500px;
flex: none;
}

.error-card p {
margin-bottom: 28px;
}

.error-footer {
margin-top: 0;
}

/* --------------------------------------------------------------------------
  8. Project Cards & Gallery
  -------------------------------------------------------------------------- */
.project-grid {
display: flex;
flex-direction: column;
gap: 48px;
width: 100%;
}

.project-card {
display: flex;
align-items: center;
gap: 32px;
background: linear-gradient(160deg, var(--bg-card-from) 0%, var(--bg-card-to) 100%);
border-radius: var(--radius-lg);
padding: 34px;
text-decoration: none;
color: inherit;
cursor: pointer;
width: 100%;
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
will-change: transform;
transform-style: preserve-3d;
--tilt-rx: 0;
--tilt-ry: 0;
}

.project-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
flex-shrink: 0;
width: 96px;
}

.project-info {
flex: 1;
min-width: 0;
}

.project-info h2 {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: -0.01em;
}

.project-info p {
color: var(--text-2);
font-size: 1rem;
line-height: 1.65;
margin-bottom: 20px;
max-width: 62ch;
}

/* --------------------------------------------------------------------------
  9. Project Tags & Links
  -------------------------------------------------------------------------- */
.project-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}

.project-tag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}

.tag-active {
background-color: rgba(46, 204, 113, 0.12);
color: var(--green);
border: 1px solid rgba(46, 204, 113, 0.25);
}

.tag-progress {
background-color: rgba(243, 156, 18, 0.12);
color: var(--amber);
border: 1px solid rgba(243, 156, 18, 0.25);
}

.project-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--accent-bright);
font-size: 0.98rem;
}

.project-link:hover {
color: #c19dfa;
text-shadow: 0 0 14px var(--accent-glow);
transform: translateX(4px);
}

.project-link.disabled {
color: var(--text-3);
cursor: default;
}

.project-link.disabled:hover {
transform: none;
text-shadow: none;
}

.in-progress {
cursor: default;
}

/* --------------------------------------------------------------------------
  9b. Project Icons & Logo Images
  -------------------------------------------------------------------------- */
.project-icon-mount {
display: inline-flex;
transform-style: preserve-3d;
transform: rotateY(calc(var(--tilt-ry) * -1deg)) rotateX(calc(var(--tilt-rx) * -1deg));
}

.project-icon {
width: 72px;
height: 72px;
border-radius: var(--radius-md);
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.09);
transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
overflow: hidden;
transform-style: preserve-3d;
transform: translateZ(38px);
box-shadow: 0 26px 34px -14px rgba(0, 0, 0, 0.6);
}

.project-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.project-card:hover .project-icon {
transform: translateZ(60px) scale(1.14);
background: rgba(255, 255, 255, 0.07);
box-shadow: 0 38px 48px -16px rgba(0, 0, 0, 0.7);
}

.project-tag {
transition: transform 0.35s var(--ease);
}

.project-card:hover .tag-active {
transform: scale(1.05);
}

.icon-agent  { border-color: rgba(43, 147, 243, 0.25); box-shadow: 0 0 16px rgba(43, 147, 243, 0.08); }
.icon-pet    { border-color: rgba(43, 156, 183, 0.25); box-shadow: 0 0 16px rgba(43, 156, 183, 0.08); }
.icon-blob   { border-color: rgba(46, 204, 113, 0.25); box-shadow: 0 0 16px rgba(46, 204, 113, 0.08); }
.icon-note   { border-color: rgba(255, 208, 0, 0.25); box-shadow: 0 0 16px rgba(255, 208, 0, 0.08); }
.icon-tag    { border-color: rgba(155, 89, 182, 0.25); box-shadow: 0 0 16px rgba(155, 89, 182, 0.08); }
.icon-zombie { border-color: rgba(255, 162, 0, 0.85); box-shadow: 0 0 16px rgba(255, 162, 0, 0.5); }


.icon-fallback {
color: var(--red);
text-shadow: 0 0 12px rgba(231, 76, 60, 0.45);
border-color: rgba(231, 76, 60, 0.25);
box-shadow: 0 0 16px rgba(231, 76, 60, 0.08);
font-family: var(--font-mono);
font-weight: 500;
font-size: 1.3rem;
}

.project-img.is-hidden {
display: none;
}

/* --------------------------------------------------------------------------
  10. Connect Page & Contact Form
  -------------------------------------------------------------------------- */

/* Links Section */
.connect-section {
width: 100%;
margin-bottom: 200px;
}

/* Links Container */
.connect-panel {
max-width: 620px;
width: 100%;
margin: 0 auto;
background: linear-gradient(160deg, var(--bg-card-from), var(--bg-card-to));
border-radius: var(--radius-lg);
padding: 48px;
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
will-change: transform;
transform-style: preserve-3d;
--tilt-rx: 0;
--tilt-ry: 0;
}

/* Connect List Layout */
.connect-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 32px;
}

.connect-list li {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border);
}

.connect-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}

.connect-label {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-3);
width: 110px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
display: inline-flex;
align-items: center;
}

.connect-label i {
margin-right: 6px;
color: var(--accent-bright);
}

.connect-value {
color: var(--text-1);
font-weight: 500;
text-decoration: none;
transition: color 0.25s var(--ease);
}

.connect-value i {
margin-right: 6px;
color: var(--accent-bright);
}

.connect-value:hover {
color: var(--accent-bright);
text-shadow: 0 0 10px var(--accent-glow);
}

/* Contact Form Section */
.contact-section {
width: 100%;
}

/* Outer Form Container */
.form-container {
max-width: 620px;
width: 100%;
margin: 0 auto;
background: linear-gradient(160deg, var(--bg-card-from), var(--bg-card-to));
border-radius: var(--radius-lg);
padding: 44px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
will-change: transform;
transform-style: preserve-3d;
--tilt-rx: 0;
--tilt-ry: 0;
}

/* Form Field Spacing */
.form-group {
margin-bottom: 26px;
}

.form-group:last-of-type {
margin-bottom: 32px;
}

.form-group label {
display: block;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 10px;
}

/* Inputs, Selects & Textarea Base Styles */
.form-control,
.glow-input-display {
width: 100%;
padding: 14px 18px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--text-1);
background-color: var(--bg-raised);
box-sizing: border-box;
transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Textarea Specific Resizing */
textarea.form-control {
resize: vertical;
min-height: 120px;
max-height: 400px;
}

/* Custom Light-Grey Dropdown Arrow for Select */
select.form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
padding-right: 42px;
cursor: pointer;
}

/* Custom Dropdown Option Items Background/Text */
select.form-control option {
background-color: var(--bg-raised);
color: var(--text-1);
}

.form-control::placeholder {
color: var(--text-3);
}

.form-control:focus {
outline: none;
border-color: var(--accent-bright);
box-shadow: 0 0 0 3px var(--accent-glow);
caret-color: var(--accent-bright);
}

/* Submit Button */
.submit-btn {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 14px 24px;
background: linear-gradient(160deg, var(--bg-card-from), var(--bg-card-to));
color: var(--text-1);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: transform 0.35s var(--ease), 
border-color 0.35s var(--ease), 
box-shadow 0.35s var(--ease),
color 0.35s var(--ease);
}

.submit-btn:hover {
border-color: var(--border-hover);
color: var(--accent-bright);
box-shadow: 0 16px 40px rgba(30, 86, 224, 0.18);
transform: translateY(-4px);
}

.submit-btn:active {
transform: translateY(-1px);
}

.submit-btn:disabled {
opacity: 0.7;
cursor: default;
transform: none !important;
box-shadow: none !important;
}

.submit-btn .fa-spinner {
animation: spin 0.8s linear infinite;
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* Form Submit Status Message */
.form-status {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 18px;
padding: 16px 18px;
border-radius: var(--radius-md);
font-size: 0.92rem;
line-height: 1.55;
opacity: 0;
transform: translateY(-8px);
max-height: 0;
overflow: hidden;
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), max-height 0.4s var(--ease), margin-top 0.4s var(--ease), padding 0.4s var(--ease);
}

.form-status.is-visible {
opacity: 1;
transform: translateY(0);
max-height: 200px;
}

.form-status i {
margin-top: 2px;
flex-shrink: 0;
}

.form-status.status-success {
background-color: rgba(46, 204, 113, 0.1);
border: 1px solid rgba(46, 204, 113, 0.3);
color: var(--green);
}

.form-status.status-error {
background-color: rgba(231, 76, 60, 0.1);
border: 1px solid rgba(231, 76, 60, 0.3);
color: var(--red);
}

/* Custom Glow Caret Container */
.glow-input-wrapper {
position: relative;
width: 100%;
}

.glow-input-hidden {
position: absolute;
inset: 0;
opacity: 0;
z-index: 2;
cursor: text;
}

.glow-input-display {
display: flex;
align-items: center;
pointer-events: none;
}

.glow-input-hidden:focus + .glow-input-display {
border-color: var(--border-hover);
box-shadow: 0 0 16px var(--accent-glow);
}

.custom-caret {
display: inline-block;
width: 2px;
height: 1.2em;
background-color: var(--accent-bright);
box-shadow: 
0 0 6px var(--accent-bright),
0 0 12px var(--accent-bright),
0 0 20px var(--accent-glow);
margin-left: 1px;
animation: caretBlink 1s infinite;
}

@keyframes caretBlink {
0%, 45% { opacity: 1; }
50%, 100% { opacity: 0; }
}

/* Multi-line variant of the glow-caret input, used for the message textarea */
.glow-textarea-wrapper {
display: block;
}

.glow-textarea-hidden {
resize: none;
min-height: 120px;
max-height: 400px;
overflow-y: auto;
font-family: var(--font-body);
line-height: 1.6;
}

.glow-textarea-display {
display: block;
align-items: normal;
white-space: pre-wrap;
word-wrap: break-word;
min-height: 120px;
max-height: 400px;
overflow-y: auto;
line-height: 1.6;
}

.glow-textarea-display .custom-caret {
vertical-align: text-bottom;
}
/* --------------------------------------------------------------------------
  11. Footer
  -------------------------------------------------------------------------- */
footer {
text-align: center;
padding: 40px 24px 50px;
color: var(--text-3);
font-family: var(--font-mono);
font-size: 0.8rem;
border-top: 1px solid var(--border);
width: 100%;
}

/* --------------------------------------------------------------------------
  12. Responsive
  -------------------------------------------------------------------------- */
@media (max-width: 860px) {
.split-section {
flex-direction: column;
}

.split-card {
width: 100%;
}

.project-card {
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 28px;
}

.project-header {
flex-direction: row;
width: 100%;
justify-content: space-between;
}

.project-info p {
max-width: 100%;
}
}

@media (max-width: 560px) {
nav {
padding: 14px 5%;
flex-wrap: wrap;
row-gap: 10px;
}

.nav-links {
width: 100%;
margin-left: 0;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
display: none;
}

.nav-links a {
margin-left: 0;
margin-right: 20px;
font-size: 0.88rem;
white-space: nowrap;
flex-shrink: 0;
}

.nav-links a:last-child {
margin-right: 4px;
}

.container {
padding: 90px 18px 40px;
}

.page-header {
padding-top: 130px;
}

.connect-panel,
.form-container {
padding: 30px 20px;
}

.connect-list li {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}

.connect-label {
width: auto;
}

.playground-preview {
height: 280px;
}

.playground-editor {
min-height: 140px;
font-size: 0.8rem;
}

.playground-toolbar {
padding: 12px 16px;
justify-content: center;
}

.playground-actions {
margin-left: 0;
justify-content: center;
width: 100%;
}

.playground-btn {
padding: 8px 14px;
font-size: 0.78rem;
}
}

@media (max-width: 400px) {
nav {
padding: 12px 5%;
}

.logo {
font-size: 0.95rem;
}

.nav-links a {
font-size: 0.82rem;
margin-right: 16px;
}

.hero .subtitle,
.page-header .subtitle {
font-size: 0.95rem;
}

.playground-preview {
height: 240px;
}
}

@media (min-width: 993px) {
.container {
padding-top: 170px;
padding-bottom: 100px;
}

.hero {
padding-top: 60px;
padding-bottom: 160px;
}

    section,
    .connect-section {
margin-bottom: 260px;
}

.intro-section {
margin-bottom: 200px;
}

.split-card {
padding: 52px 46px;
}

.project-card {
padding: 46px;
}

.split-section {
max-width: 1120px;
margin: 0 auto;
gap: 44px;
}

.project-grid {
gap: 300px;
}
}

/* --------------------------------------------------------------------------
  13. Scroll Indicator, Cursors & Modals
  -------------------------------------------------------------------------- */
#scroll-indicator {
position: fixed;
bottom: calc(30px + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
margin: 0;
opacity: 0.6;
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.05em;
color: var(--text-2);
z-index: 999;
transition: opacity 0.5s var(--ease);
pointer-events: none;
animation: indicatorPulse 2s infinite var(--ease);
}

#scroll-indicator.is-hidden {
opacity: 0 !important;
animation-play-state: paused;
}

@keyframes indicatorPulse {
0%, 100% {
opacity: 0.3;
transform: translate(-50%, 0);
}
50% {
opacity: 0.7;
transform: translate(-50%, -6px);
}
}

html, body {
cursor: url('/jymer1102/images/cursor/custom-j-cursor.png') 0 0, default;
}

a, button, .nav-cta, .btn-primary, select, input[type="submit"], .submit-btn,
.logo, .theme-toggle, .playground-btn, .modal-close-btn, .modal-btn,
select.form-control, .project-card:not(.in-progress) {
cursor: url('/jymer1102/images/cursor/custom-j-cursor-pointer.png') 0 0, pointer;
}

/* Phone Action Modal */
.phone-modal {
position: fixed;
inset: 0;
background: rgba(10, 10, 12, 0.75);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.phone-modal.is-visible {
opacity: 1;
visibility: visible;
}

.phone-modal-content {
background: linear-gradient(160deg, var(--bg-card-from), var(--bg-card-to));
border: 1px solid var(--border-hover);
border-radius: var(--radius-lg);
padding: 32px;
width: 90%;
max-width: 400px;
text-align: center;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
transform: translateY(10px);
transition: transform 0.3s var(--ease);
}

.phone-modal.is-visible .phone-modal-content {
transform: translateY(0);
}

.phone-modal-content h3 {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--text-1);
margin-bottom: 6px;
}

.phone-modal-content p {
color: var(--text-2);
font-size: 0.9rem;
margin-bottom: 24px;
}

.phone-modal-actions {
display: flex;
gap: 14px;
margin-bottom: 16px;
}

.phone-modal-actions.stack {
flex-direction: column;
}

.phone-modal-actions.stack .modal-btn {
flex: none;
width: 100%;
}

.modal-btn {
flex: 1;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
font-family: var(--font-body);
border: 1px solid var(--border);
background: var(--bg-raised);
color: var(--text-1);
outline: none;
transition: all 0.25s var(--ease);
}

.modal-btn:hover {
border-color: var(--border-hover);
color: var(--accent-bright);
box-shadow: 0 0 16px var(--accent-glow);
}

.modal-close-btn {
background: transparent;
border: none;
color: var(--text-3);
font-family: var(--font-mono);
font-size: 0.85rem;
margin-top: 8px;
transition: color 0.2s var(--ease);
}

.modal-close-btn:hover {
color: var(--text-1);
}

/* --------------------------------------------------------------------------
  14. Code Playground
  -------------------------------------------------------------------------- */
.playground-wrapper {
width: 100%;
max-width: 1300px;
margin: 0 auto;
background: linear-gradient(160deg, var(--bg-card-from), var(--bg-card-to));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}

#playground-container {
max-width: 1300px;
}

.playground-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, 0.02);
}

.playground-tabs {
display: none;
gap: 8px;
}

.playground-actions {
display: flex;
gap: 12px;
margin-left: auto;
}

.playground-btn {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.02em;
padding: 9px 18px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-raised);
color: var(--text-1);
transition: border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.playground-btn:hover {
border-color: var(--border-hover);
color: var(--accent-bright);
box-shadow: 0 0 14px var(--accent-glow);
}

.playground-btn.primary {
border-color: var(--border-hover);
color: var(--accent-bright);
}

.playground-editors {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
}

.playground-pane {
display: flex;
flex-direction: column;
background: var(--bg-raised);
min-width: 0;
}

.playground-pane-label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}

.playground-pane:nth-child(1) .playground-pane-label { color: #e34c26; }
.playground-pane:nth-child(2) .playground-pane-label { color: #4FA9FF; }
.playground-pane:nth-child(3) .playground-pane-label { color: #f0db4f; }

.playground-editor {
flex: 1;
width: 100%;
min-height: 300px;
resize: vertical;
border: none;
outline: none;
background: transparent;
color: var(--text-1);
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.6;
padding: 16px;
tab-size: 2;
caret-color: var(--accent-bright);
}

.playground-preview-wrap {
border-top: 1px solid var(--border);
}

.playground-preview-label {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
padding: 10px 16px;
border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, 0.02);
}

.playground-preview {
display: block;
width: 100%;
height: 380px;
border: none;
background: #ffffff;
}

.playground-preview--large {
height: 640px;
}

@media (max-width: 860px) {
.playground-editors {
grid-template-columns: 1fr;
}

.playground-editor {
min-height: 160px;
}

.playground-preview--large {
height: 480px;
}
}

@media (max-width: 560px) {
.playground-preview--large {
height: 380px;
}
}

@media (max-width: 400px) {
.playground-preview--large {
height: 300px;
}
}