/* Hero motion experiment (/?hero=gsap, see hero-switch.js). Every rule is scoped
   to the experiment classes, so the page is unchanged without the parameter. */
html.hero-gsap .selection-frame,
html.hero-gsap .selection-frame i,
html.hero-gsap .fake-cursor{animation:none}
@media(prefers-reduced-motion:no-preference){
  html.hero-intro-pending .hero-left,
  html.hero-intro-pending .hero-portrait,
  html.hero-intro-pending .hero-right,
  html.hero-intro-pending .site-header .brand,
  html.hero-intro-pending #main-nav>a,
  html.hero-intro-pending .menu-toggle{visibility:hidden}
}
/* Figma-like size readout under the growing selection. */
.selection-frame .selection-size{position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 0;padding:2px 6px;border-radius:3px;background:var(--cyan);color:#10051e;font:600 12px/1.3 var(--body);letter-spacing:.01em;white-space:nowrap;opacity:0;pointer-events:none}
@media(max-width:800px){.selection-frame .selection-size{top:calc(100% + 6px)}}

.hero-switch-badge{position:fixed;left:12px;bottom:12px;z-index:100;padding:8px 12px;border:1px solid #ac7bda55;border-radius:999px;background:#160a27e6;color:#d9cce8;font:500 12px/1.3 var(--body);text-decoration:none;box-shadow:0 8px 24px #0006}
.hero-switch-badge a{color:inherit;text-decoration:none}
.hero-switch-badge a:hover,.hero-switch-badge a:focus-visible{color:var(--cyan)}
.hero-switch-badge b{color:#fff;font-weight:600}

/* "CONVERT" glint: every 4.5s a vivid iridescent band (with a soft halo) (lilac to cyan, like the
   sheen on the My approach illustrations) sweeps across the word, and a small
   four-point sparkle twinkles at its corner as the band leaves. At rest the
   word is plain white. Pauses with the hero's pause button; off with reduced
   motion; only where text clipping is supported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.hero-gsap .hero-convert{position:relative;
    background:linear-gradient(110deg,#fff 0 34%,#e7a0ff 41%,#ff8ff0 46%,#ffffff 50%,#7fe9ff 54%,#c9b6ff 59%,#fff 66% 100%) 100% 0/340% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:convert-glint 4.5s ease-in-out 1.8s infinite,convert-glow 4.5s ease-in-out 1.8s infinite}
  html.hero-gsap .hero-convert::after{content:"\2726";position:absolute;top:-.18em;right:-.5em;font-size:.42em;line-height:1;
    -webkit-text-fill-color:#fff;color:#fff;opacity:0;scale:0;rotate:-30deg;pointer-events:none;
    filter:drop-shadow(0 0 3px #ff8ff0) drop-shadow(0 0 9px #c24cf7) drop-shadow(0 0 16px #c24cf799);animation:convert-spark 4.5s ease-out 1.8s infinite}
  html.hero-gsap .motion-paused .hero-convert,html.hero-gsap .motion-paused .hero-convert::after{animation-play-state:paused}
}
/* The gradient is 340% wide, so the visible window is ~29% of it: at 100%
   and at 0% that window falls on plain white (the band lives between 34%
   and 66%), so the band fully enters and fully leaves the word;
   going from one to the other carries the band across the word, left to right. */
@keyframes convert-glint{0%{background-position:100% 0}36%,100%{background-position:0% 0}}
/* A soft lilac halo rides with the band, then fades: makes the sweep read. */
@keyframes convert-glow{0%,100%{filter:drop-shadow(0 0 0 #c24cf700)}18%{filter:drop-shadow(0 0 14px #c24cf780)}40%{filter:drop-shadow(0 0 0 #c24cf700)}}
@keyframes convert-spark{0%,26%{opacity:0;scale:0;rotate:-30deg}34%{opacity:1;scale:1.15;rotate:0deg}40%{opacity:1;scale:.9}50%{opacity:0;scale:.3;rotate:25deg}100%{opacity:0;scale:0}}
@media(prefers-reduced-motion:reduce){
  html.hero-gsap .hero-convert,html.hero-gsap .hero-convert::after{animation:none}
}

/* Same visual gap on both sides of the hero: "Hi! I'm Camila Piraneo" to
   "UX/UI" now matches "Focused on" to "Landing Pages" (~17px between the
   baseline of the small line and the cap height of the big one). UX/UI is so
   large that its line-height added ~21px of extra air above it; the pull-up
   is in em so it scales with the title at every breakpoint. */
html.hero-gsap .hero-role{margin-top:-.12em}
@media(max-width:1180px){html.hero-gsap .hero-role{margin-top:-.15em}}
@media(max-width:800px){html.hero-gsap .hero-role{margin-top:-.1em}}