/* Frame 05: a dark, personal contact close with a real point-projected,
   freely rotatable world globe. Inherits permanent header/footer/grid from
   earlier approved frames. Only this isolated concept is changed. */
.frame-five-backdrop{
 position:absolute;inset:0;z-index:24;pointer-events:none;
 /* Match the *finished* Frame 04 gallery exactly: no purple lighting seam. */
 background:linear-gradient(180deg,#09080e 0%,#07070c 54%,#050509 100%);
 opacity:0;visibility:hidden;will-change:opacity;
}
.frame-five-backdrop.is-active{visibility:visible}
.frame-five-contact{
 position:absolute;inset:0;z-index:26;opacity:0;visibility:hidden;
 color:#f6f1fb;pointer-events:none;overflow:hidden;
}
.frame-five-contact.is-visible{visibility:visible;pointer-events:auto}
.contact-layout{
 position:absolute;inset:0;display:grid;
 grid-template-columns:minmax(300px,43%) minmax(0,57%);
 align-items:center;
 padding:5% clamp(28px,4.5vw,84px) 7%;
 gap:clamp(12px,2.5vw,50px);
}
.contact-details{position:relative;z-index:5;transform:translateY(22px);opacity:0;transition:transform .92s cubic-bezier(.16,.78,.17,1),opacity .85s ease}
.frame-five-contact.is-visible .contact-details{transform:translateY(0);opacity:1}
.globe-caption{
 font:770 10px/1.6 ui-monospace,Consolas,monospace;
 letter-spacing:.22em;color:#dcb3ec;margin:0 0 32px;
}

.contact-heading{
 font-size:clamp(62px,6.45vw,118px);line-height:.99;
 font-weight:560;letter-spacing:-.084em;margin:0 0 31px;
 text-shadow:0 9px 44px rgba(0,0,0,.15);
}
.contact-heading em{font-family:Georgia,Times,serif;font-weight:340;letter-spacing:-.09em;color:#efb3fd}
.contact-lead{font-size:clamp(15px,1.13vw,19px);line-height:1.75;color:#c9bbd8;max-width:435px;margin:0 0 clamp(30px,4.8vh,52px)}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.contact-email{
 position:relative;display:flex;flex-direction:column;
 gap:8px;padding:15px 49px 15px 0;
 border-bottom:1px solid rgba(212,136,238,.5);color:#fceaff;
 max-width:100%;text-decoration:none;
}
.contact-email>span:first-child{font:760 10px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#b88dcb}
.contact-email strong{font-size:clamp(20px,2.4vw,37px);font-weight:500;letter-spacing:-.04em;overflow-wrap:anywhere}
.contact-arrow{position:absolute;right:8px;bottom:17px;font-size:27px;color:#eaa3f9;transition:transform .25s ease}
.contact-email:hover .contact-arrow{transform:translate(4px,-4px)}
.contact-github{font:760 11px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.12em;color:#cab5d4;text-decoration:none;padding:9px 0}
.contact-github:hover{color:#fff}
.contact-github span{padding-left:17px;color:#dd8cf3}
.globe-column{
 position:relative;width:100%;max-width:810px;justify-self:center;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 margin-top:-20px;
}
.globe-caption{margin:0 0 9px;align-self:center;color:#b99dcb;font-size:9px}
.globe-caption span{color:#eaadfa;margin:0 8px}
.globe-shell{
 position:relative;width:min(100%,740px,74vh);aspect-ratio:1;
 margin:0 auto;touch-action:none;cursor:grab;
 background:transparent;box-shadow:none;filter:none;
}
.globe-shell.is-dragging{cursor:grabbing}
/* No pseudo-element glow or shadow is allowed around the transparent sphere. */
.globe-shell::before{content:none;display:none}
.globe-canvas{
 position:absolute;inset:0;width:100%;height:100%;display:block;
 pointer-events:none;background:transparent;box-shadow:none;filter:none
}
.globe-location{
 position:absolute;z-index:3;left:50%;top:41%;display:flex;align-items:center;
 gap:12px;white-space:nowrap;pointer-events:none;
 opacity:0;transform:translate(8px,-50%);
 color:#fbeeff;font:770 10px/1.4 ui-monospace,Consolas,monospace;
 letter-spacing:.14em;text-shadow:0 2px 14px #000;
}
.globe-location i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(234,136,254,.22),0 0 19px #e8b0ff;flex-shrink:0}
.globe-tools{display:flex;align-items:center;justify-content:center;gap:30px;white-space:nowrap}

.globe-tools #globe-state{font:670 10px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.07em;color:#a894b5}
.globe-tools #globe-state span{color:#d6a4ea;padding:0 7px}

body.frame-five-active .gridlines{opacity:.59}
body.frame-five-active #pointer-pattern{opacity:0!important}
body.frame-five-active .portal-navigation{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
/* Keep the cinematic scene visible through the fixed navigation bars. */
body.frame-one .site-header,
body.frame-one .site-footer{
 background:transparent;
 box-shadow:none;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}

@media(max-width:1120px){
 .contact-layout{grid-template-columns:minmax(270px,43%) minmax(0,57%);padding:6% 5% 8%;gap:14px}
 .contact-heading{font-size:clamp(58px,7vw,90px)}
 .globe-shell{width:min(100%,620px,66vh)}
 
}
/* Stack the contact and globe on portrait tablets. */
@media(max-width:900px){
 .contact-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:8% 6% 13%;gap:0}
 .contact-details{text-align:left}
 
 .contact-heading{font-size:clamp(48px,8.7vw,72px);line-height:1.0;margin-bottom:14px}
 .contact-lead{font-size:13px;line-height:1.5;margin-bottom:14px;max-width:540px}
 .contact-links{flex-direction:row;align-items:center;gap:22px}
 .contact-email{padding:4px 19px 8px 0;gap:3px}
 .contact-email>span:first-child{font-size:8px}
 .contact-email strong{font-size:clamp(16px,3.7vw,26px)}
 .contact-arrow{font-size:18px;bottom:8px;right:1px}
 .contact-github{font-size:9px}
 .contact-github span{padding-left:4px}
 .globe-column{margin-top:6px}
 .globe-caption{font-size:8px;margin:0}
 .globe-shell{width:min(86vw,56vh,510px)}
 .globe-tools{gap:15px}
 
 .globe-tools #globe-state{font-size:8px}
 
}
@media(max-width:470px){
 .contact-layout{padding:9% 6% 15%;gap:0}
 
 .contact-heading{font-size:clamp(45px,10.4vw,60px);margin-bottom:10px}
 .contact-lead{font-size:12px;margin-bottom:10px}
 .contact-links{gap:16px}
 .contact-email strong{font-size:17px}
 .contact-github{font-size:8px}
 .globe-shell{width:min(91vw,47vh)}
 .globe-location{font-size:7px;gap:8px}
 .globe-location i{width:6px;height:6px}
 .globe-caption{font-size:7px}
 .globe-tools{gap:8px}
 .globe-tools #globe-state{font-size:7px}
 
}
@media(max-height:680px) and (min-width:761px){
 .globe-shell{width:min(100%,590px,73vh)}
 .contact-heading{font-size:clamp(58px,6vw,84px)}
 .contact-lead{margin-bottom:17px}
 
}
/* Short landscape tablets retain two columns to protect the footer. */
@media(max-width:900px) and (min-width:761px) and (max-height:680px){
 .contact-layout{display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);padding:5% 4% 7%;gap:10px}
 .contact-links{flex-direction:column;align-items:flex-start;gap:10px}
 .contact-heading{font-size:clamp(45px,5.8vw,68px)}
}
@media(prefers-reduced-motion:reduce){
 .contact-details,.globe-shell{transition:none!important}
}

/* Preserve Frame 05 copy while making its existing “let’s talk” phrase useful. */
.contact-lead-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(235,181,254,.68);transition:color .2s ease,border-color .2s ease}
.contact-lead-link:hover{color:#fff;border-color:#fff}


/* Frame 01 → 02 editorial handoff.
   Scroll progress owns these properties; old time-based title animations
   must not keep moving after the user scrolls backwards. Only the final
   five-frame experience is affected: the locked frame assets stay intact. */
.frame-stage .hero-text{
  will-change:opacity,translate,filter;
}
.frame-stage #chapter-two{
  will-change:opacity,translate;
}
.frame-stage #chapter-two .chapter-title > span,
.frame-stage #chapter-two .chapter-description,
.frame-stage #chapter-two .chapter-link{
  transition:none!important;
  will-change:transform,opacity,filter;
}
@media(prefers-reduced-motion:reduce){
  .frame-stage .hero-text,
  .frame-stage #chapter-two,
  .frame-stage #chapter-two .chapter-title > span,
  .frame-stage #chapter-two .chapter-description,
  .frame-stage #chapter-two .chapter-link{
    will-change:auto;
    filter:none!important;
  }
}


/* Frame 02 → Frame 03: the very same scroll-controlled cinematic grammar.
   Remove legacy timed fades only inside this current five-frame experience.
   Frame 03's nine-piece interactive number keeps its original transitions. */
.frame-stage #chapter-two{
  transition:none!important;
  will-change:opacity,translate,filter;
}
.frame-stage #chapter-three{
  will-change:opacity,translate;
}
.frame-stage #chapter-three .chapter-three-kicker,
.frame-stage #chapter-three .side-statement span{
  transition:none!important;
  will-change:opacity,transform,filter;
}
@media(prefers-reduced-motion:reduce){
  .frame-stage #chapter-two,
  .frame-stage #chapter-three,
  .frame-stage #chapter-three .chapter-three-kicker,
  .frame-stage #chapter-three .side-statement span{
    will-change:auto;
    filter:none!important;
  }
}

/* Transparent navigation in every chapter and playback state.
   Earlier scene styles use higher-specificity selectors. */
html body.frame-one .site-header,
html body.frame-one .site-footer,
html body.frame-one.chapter-two-active .site-header,
html body.frame-one.chapter-two-active .site-footer,
html body.frame-one.frame-five-active .site-header,
html body.frame-one.frame-five-active .site-footer {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}


/* First scene: display the role directly beneath the name. */
.frame-stage .scene-eyebrow{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.frame-stage .scene-eyebrow .eyebrow-name,.frame-stage .scene-eyebrow .eyebrow-role{display:block;margin:0;color:inherit}
.frame-stage .scene-eyebrow .eyebrow-role{font-size:9px;letter-spacing:.15em;opacity:.83}