@import url('https://fonts.googleapis.com/css2?family=Germania+One&family=Pirata+One&display=swap');

:root{
  --v97-heading:"Pirata One","Old English Text MT","Lucida Blackletter","Engravers Old English",Georgia,serif;
  --v97-body:"Germania One",Georgia,"Times New Roman",serif;
  --v97-white:#f8fdff;
  --v97-cyan:#66f5ff;
  --v97-blue:#426cff;
  --v97-red:#ff4e73;
  --v97-shadow:rgba(2,12,22,.92);
}

/* Readable Gothic system: decorative headings, calmer body text. */
html.v106-gothic-ready body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-family:var(--v97-body)!important;
}

html.v106-gothic-ready :where(p,li,label,small,strong,em,a,button,input,textarea,select,option){
  font-family:var(--v97-body)!important;
  letter-spacing:.012em;
}

html.v106-gothic-ready :where(h1,h2,h3,h4,h5,h6,.brand,.site-title,.hero-title,.menu-label,.project-link,.project-title,.project-gothic-title,.times-featured-v59__title,[data-v97-heading]){
  font-family:var(--v97-heading)!important;
  font-weight:400!important;
  letter-spacing:.015em;
  text-shadow:
    0 2px 2px var(--v97-shadow),
    -1px 0 3px rgba(66,108,255,.44),
    1px 0 3px rgba(102,245,255,.28);
}

.v97-readable-text{
  text-shadow:0 1px 2px rgba(0,0,0,.72);
}

.v97-readable-heading{
  position:relative;
  isolation:isolate;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}

/* Glitch remains a brief accent only on hover/focus; it never creates a permanent second title. */
.v97-readable-heading::before,
.v97-readable-heading::after{
  content:attr(data-v97-text);
  position:absolute;
  inset:0;
  z-index:-1;
  color:currentColor;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  white-space:inherit;
  transition:opacity .16s ease;
}

@media (hover:hover) and (pointer:fine){
  .v97-readable-heading:hover::before,
  .v97-readable-heading:focus-visible::before{
    opacity:.16;
    clip-path:inset(18% 0 60% 0);
    transform:translateX(-1px);
    text-shadow:2px 0 var(--v97-blue);
    animation:v97-slice-a .42s steps(2,end) 1;
  }
  .v97-readable-heading:hover::after,
  .v97-readable-heading:focus-visible::after{
    opacity:.12;
    clip-path:inset(66% 0 10% 0);
    transform:translateX(1px);
    text-shadow:-2px 0 var(--v97-red);
    animation:v97-slice-b .5s steps(2,end) 1;
  }
}

/* Replacement for the original 3D title. The old 3D text is removed from the bundle in V97. */
#v97-hero-gothic{
  position:fixed;
  left:50%;
  top:42%;
  z-index:18;
  width:min(86vw,960px);
  transform:translate(-50%,-50%);
  text-align:center;
  color:var(--v97-white);
  pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.72));
  transition:opacity .28s ease,visibility .28s ease;
}
#v97-hero-gothic[hidden]{display:none!important}
#v97-hero-gothic .v97-hero-line{
  display:block;
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  font-family:var(--v97-heading)!important;
  font-size:clamp(4rem,8.2vw,9.2rem);
  font-weight:400;
  line-height:.84;
  letter-spacing:.012em;
  white-space:nowrap;
  transform:scaleX(.86);
  transform-origin:center;
  text-shadow:
    0 3px 3px rgba(0,0,0,.9),
    0 0 8px rgba(255,255,255,.3),
    -1px 0 3px rgba(66,108,255,.7),
    1px 0 3px rgba(102,245,255,.45);
}
#v97-hero-gothic .v97-hero-line + .v97-hero-line{margin-top:.12em}

/* Dynamic title in View Projects: maximum two clean lines, never wider than the viewport. */
.project-gothic-title,
.v97-project-title{
  box-sizing:border-box!important;
  width:min(86vw,980px)!important;
  max-width:86vw!important;
  margin-inline:auto!important;
  padding-inline:clamp(10px,2vw,24px)!important;
  font-family:var(--v97-heading)!important;
  font-size:clamp(2.35rem,5.4vw,6rem)!important;
  font-weight:400!important;
  line-height:.9!important;
  letter-spacing:.008em!important;
  text-align:center!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
  transform:scaleX(.9);
  transform-origin:center;
  text-shadow:
    0 3px 3px rgba(0,0,0,.9),
    -1px 0 3px rgba(66,108,255,.55),
    1px 0 3px rgba(102,245,255,.32)!important;
}

/* Ensure the ordinary white UI remains above the hero and is not obscured by decorative copies. */
.viewButtonTransition,
.viewLiveTransition,
.viewCodeTransition,
nav,
header,
[role="navigation"]{
  position:relative;
  z-index:60;
}

@keyframes v97-slice-a{
  0%{clip-path:inset(18% 0 60% 0);transform:translateX(-1px)}
  50%{clip-path:inset(52% 0 25% 0);transform:translateX(2px)}
  100%{clip-path:inset(30% 0 48% 0);transform:translateX(0)}
}
@keyframes v97-slice-b{
  0%{clip-path:inset(66% 0 10% 0);transform:translateX(1px)}
  50%{clip-path:inset(15% 0 70% 0);transform:translateX(-2px)}
  100%{clip-path:inset(58% 0 20% 0);transform:translateX(0)}
}

@media (max-width:700px){
  #v97-hero-gothic{
    top:40.5%;
    width:84vw;
  }
  #v97-hero-gothic .v97-hero-line{
    font-size:clamp(2.35rem,11.2vw,4.05rem);
    line-height:.9;
    letter-spacing:0;
    transform:scaleX(.76);
  }
  .project-gothic-title,
  .v97-project-title{
    width:82vw!important;
    max-width:82vw!important;
    padding-inline:4px!important;
    font-size:clamp(2rem,9.8vw,4rem)!important;
    line-height:.92!important;
    transform:scaleX(.78);
  }
  html.v106-gothic-ready :where(p,li,label,small,strong,em,a,button){
    letter-spacing:.006em;
  }
}

@media (max-width:390px){
  #v97-hero-gothic{width:82vw;top:40%}
  #v97-hero-gothic .v97-hero-line{
    font-size:clamp(2.1rem,10.7vw,3.45rem);
    transform:scaleX(.73);
  }
  .project-gothic-title,
  .v97-project-title{
    width:79vw!important;
    max-width:79vw!important;
    font-size:clamp(1.85rem,9.3vw,3.4rem)!important;
    transform:scaleX(.74);
  }
}

@media (prefers-reduced-motion:reduce){
  .v97-readable-heading::before,
  .v97-readable-heading::after{display:none!important;animation:none!important}
}


/* V98 — About must always be the frontmost readable content. */
html.v98-about-open #v97-hero-gothic{
  opacity:0!important;
  visibility:hidden!important;
  transform:translate(-50%,-50%) scale(.965)!important;
}
.v98-about-panel{
  position:relative!important;
  z-index:220!important;
  pointer-events:auto!important;
  max-height:min(78dvh,720px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(106,241,255,.85) rgba(1,24,36,.45);
  background:linear-gradient(155deg,rgba(2,45,62,.97),rgba(4,91,111,.92))!important;
  box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 0 0 1.5px rgba(102,241,255,.7)!important;
}
.v98-about-panel::-webkit-scrollbar{display:block;width:8px}
.v98-about-panel::-webkit-scrollbar-thumb{background:rgba(106,241,255,.8);border-radius:999px}
.v98-about-panel :where(p,li,strong,button){
  position:relative;
  z-index:2;
  text-shadow:0 2px 3px rgba(0,0,0,.92)!important;
}
.v98-about-panel h1{
  position:relative;
  z-index:3;
  color:#fff!important;
  text-shadow:0 3px 4px rgba(0,0,0,.95),0 0 12px rgba(102,241,255,.42)!important;
}
@media(max-width:700px){
  .v98-about-panel{max-height:76dvh!important;width:min(92vw,600px)!important}
}


/* V104: one title layer only; controls remain above it. */
#v97-hero-gothic{z-index:14!important}
#v97-hero-gothic~#v97-hero-gothic{display:none!important}
html.v104-webgl-recovering #snow,
html.v105-webgl-recovering #snow,
html.v104-webgl-recovering #css3d-cloud-viewport-v92,
html.v105-webgl-recovering #css3d-cloud-viewport-v92{opacity:0!important;visibility:hidden!important}


/* V105 — AI Engineer identity, reliable About isolation and ocean-safe glass UI. */
html.v105-about-open #v97-hero-gothic,
html.v98-about-open #v97-hero-gothic{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
#v97-hero-gothic{
  top:40%!important;
  width:min(92vw,1180px)!important;
  z-index:14!important;
}
#v97-hero-gothic .v97-hero-line{
  white-space:nowrap!important;
  transform:scaleX(.92)!important;
  text-shadow:0 4px 4px rgba(0,0,0,.84),0 0 18px rgba(255,255,255,.34),-2px 0 4px rgba(66,108,255,.62),2px 0 4px rgba(102,245,255,.48)!important;
}
.v98-about-panel{
  width:min(92vw,680px)!important;
  background:linear-gradient(145deg,rgba(1,41,58,.94),rgba(5,92,112,.88))!important;
  border:1px solid rgba(137,246,255,.46)!important;
  box-shadow:0 30px 100px rgba(0,17,29,.42),0 0 48px rgba(72,220,245,.12),inset 0 0 0 1px rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px) saturate(1.14)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.14)!important;
}
.v98-about-panel .v105-stack-card{
  background:linear-gradient(135deg,rgba(3,35,50,.78),rgba(7,78,94,.58))!important;
  border:1px solid rgba(158,247,255,.34)!important;
  box-shadow:0 14px 34px rgba(0,12,24,.28),inset 0 0 22px rgba(84,225,243,.05)!important;
}
.v98-about-panel .v105-stack-label{
  background:rgba(4,44,60,.72)!important;
  color:#d8fbff!important;
}
.v98-about-panel h1{
  font-size:clamp(2rem,4vw,3.15rem)!important;
  margin-top:-22px!important;
  padding-inline:56px!important;
  text-align:center!important;
}
@media(max-width:700px){
  #v97-hero-gothic{top:39%!important;width:90vw!important}
  #v97-hero-gothic .v97-hero-line{font-size:clamp(3rem,13vw,5.2rem)!important;transform:scaleX(.82)!important}
  .v98-about-panel h1{font-size:clamp(1.65rem,7vw,2.5rem)!important;padding-inline:42px!important}
  .v98-about-panel .v105-stack-card{width:100%!important;max-width:100%!important}
}


/* V106 — cohesive sky, stable project title, About isolation and controlled AI glitch. */
:root{
  --v106-sky-top:#0b2b63;
  --v106-sky-mid:#2e76ae;
  --v106-sky-horizon:#72c9e8;
}

/* Blend the sky into one continuous atmosphere without covering the ocean. */
html:not([data-project-style-v104="true"]) body::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:7!important;
  pointer-events:none!important;
  opacity:1!important;
  mix-blend-mode:screen!important;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(132,206,239,.22) 0%,rgba(66,133,187,.10) 35%,transparent 64%),
    linear-gradient(180deg,
      rgba(5,26,68,.08) 0%,
      rgba(21,69,126,.16) 29%,
      rgba(47,126,177,.34) 46%,
      rgba(90,190,222,.34) 57%,
      rgba(76,196,226,.12) 66%,
      transparent 73%)!important;
}
html:not([data-project-style-v104="true"]) body::after{
  content:""!important;
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:43vh!important;
  bottom:auto!important;
  height:18vh!important;
  z-index:8!important;
  pointer-events:none!important;
  opacity:.58!important;
  mix-blend-mode:screen!important;
  background:linear-gradient(180deg,rgba(92,190,221,0),rgba(105,211,235,.38) 50%,rgba(54,181,222,0))!important;
  filter:blur(12px)!important;
}

/* AI ENGINEER uses one real title plus two clipped chromatic slices. */
#v97-hero-gothic .v106-ai-glitch{
  position:relative;
  isolation:isolate;
  display:block;
  color:#fbfdff;
  animation:v106-glitch-main 5.8s linear infinite;
  will-change:transform,filter;
}
#v97-hero-gothic .v106-ai-glitch::before,
#v97-hero-gothic .v106-ai-glitch::after{
  content:attr(data-v106-text);
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  color:#fff;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
}
#v97-hero-gothic .v106-ai-glitch::before{
  z-index:-1;
  text-shadow:4px 0 #2451fa,-1px 0 #66f5ff;
  animation:v106-glitch-blue 5.8s steps(1,end) infinite;
}
#v97-hero-gothic .v106-ai-glitch::after{
  z-index:1;
  text-shadow:-4px 0 #ff315e,1px 0 #ff9fcf;
  animation:v106-glitch-red 5.8s steps(1,end) infinite;
}

@keyframes v106-glitch-main{
  0%,38%,40%,72%,74%,100%{transform:scaleX(.92) translate3d(0,0,0);filter:none}
  39%{transform:scaleX(.94) skewX(-2deg) translate3d(-2px,0,0);filter:contrast(1.12)}
  39.5%{transform:scaleX(.91) skewX(1deg) translate3d(2px,0,0)}
  73%{transform:scaleX(.95) skewX(-1deg) translate3d(1px,0,0);filter:brightness(1.16)}
  73.5%{transform:scaleX(.92) translate3d(-1px,0,0)}
}
@keyframes v106-glitch-blue{
  0%,37.8%,40.4%,71.8%,74.4%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  38%{opacity:.72;clip-path:inset(8% 0 67% 0);transform:translateX(-5px)}
  38.7%{opacity:.52;clip-path:inset(58% 0 18% 0);transform:translateX(4px)}
  39.4%{opacity:.68;clip-path:inset(32% 0 43% 0);transform:translateX(-3px)}
  72%{opacity:.65;clip-path:inset(17% 0 61% 0);transform:translateX(-4px)}
  72.8%{opacity:.48;clip-path:inset(69% 0 8% 0);transform:translateX(3px)}
  73.6%{opacity:.58;clip-path:inset(43% 0 34% 0);transform:translateX(-2px)}
}
@keyframes v106-glitch-red{
  0%,38.1%,40.6%,72.1%,74.6%,100%{opacity:0;clip-path:inset(100% 0 0 0);transform:translateX(0)}
  38.3%{opacity:.62;clip-path:inset(64% 0 12% 0);transform:translateX(5px)}
  39%{opacity:.50;clip-path:inset(22% 0 54% 0);transform:translateX(-4px)}
  39.8%{opacity:.60;clip-path:inset(47% 0 29% 0);transform:translateX(3px)}
  72.3%{opacity:.58;clip-path:inset(55% 0 20% 0);transform:translateX(4px)}
  73.1%{opacity:.46;clip-path:inset(12% 0 66% 0);transform:translateX(-3px)}
  73.9%{opacity:.55;clip-path:inset(36% 0 39% 0);transform:translateX(2px)}
}

/* Home CTA must never float above About. */
html.v105-about-open .v106-home-cta-cluster,
html.v98-about-open .v106-home-cta-cluster,
html.v105-about-open [aria-label="See Github Profile"],
html.v105-about-open [aria-label="See LinkedIn Profile"],
html.v105-about-open [aria-label="Navigate to Contact Section"],
html.v98-about-open [aria-label="See Github Profile"],
html.v98-about-open [aria-label="See LinkedIn Profile"],
html.v98-about-open [aria-label="Navigate to Contact Section"]{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
}
.v106-home-cta-cluster{
  transition:opacity .18s ease,visibility .18s ease!important;
}

/* Keep About's own content above every decorative layer. */
html.v105-about-open .v98-about-panel,
html.v98-about-open .v98-about-panel{
  z-index:420!important;
}

@media(max-width:700px){
  html:not([data-project-style-v104="true"]) body::after{top:45vh!important;height:14vh!important;filter:blur(9px)!important}
  #v97-hero-gothic .v106-ai-glitch::before,
  #v97-hero-gothic .v106-ai-glitch::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  #v97-hero-gothic .v106-ai-glitch,
  #v97-hero-gothic .v106-ai-glitch::before,
  #v97-hero-gothic .v106-ai-glitch::after{animation:none!important;transform:scaleX(.92)!important;filter:none!important}
  #v97-hero-gothic .v106-ai-glitch::before,
  #v97-hero-gothic .v106-ai-glitch::after{display:none!important}
}