/* Keep the original first screen; the professional profile follows below. */
html, body { display: block; height: auto; }
body { min-width: 0; overflow-x: hidden; }
/* Three animated, soft-edged color orbs blend across the entire viewport. */
body {
  background: #f9c942;
}
.gradient-orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: #f9c942;
}
.gradient-orbs span {
  position: absolute;
  display: block;
  width: 82vmax;
  height: 82vmax;
  opacity: 1;
  filter: blur(clamp(80px, 10vw, 180px));
  will-change: transform, border-radius;
  animation: blob-shape 19s ease-in-out infinite alternate;
}
.gradient-orbs .orb-pink {
  top: -43vmax;
  left: -32vmax;
  background: #ff1e56;
  animation: blob-shape 19s ease-in-out infinite alternate, drift-pink 25s ease-in-out infinite alternate;
}
.gradient-orbs .orb-yellow {
  top: 16%;
  left: 24%;
  background: #f9c942;
  animation: blob-shape 22s ease-in-out infinite alternate, drift-yellow 28s ease-in-out infinite alternate;
}
.gradient-orbs .orb-blue {
  right: -32vmax;
  bottom: -40vmax;
  background: #1e90ff;
  animation: blob-shape 23s ease-in-out infinite alternate, drift-blue 27s ease-in-out infinite alternate;
}
@keyframes blob-shape {
  0% { border-radius: 48% 52% 64% 36% / 40% 62% 38% 60%; }
  50% { border-radius: 61% 39% 36% 64% / 54% 34% 66% 46%; }
  100% { border-radius: 37% 63% 55% 45% / 66% 42% 58% 34%; }
}
@keyframes drift-pink {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to { transform: translate(55%, 35%) rotate(24deg) scale(1.18); }
}
@keyframes drift-yellow {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to { transform: translate(13%, -28%) rotate(-18deg) scale(1.22); }
}
@keyframes drift-blue {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to { transform: translate(-48%, -43%) rotate(28deg) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-orbs span { animation: none; border-radius: 50%; will-change: auto; }
}
main { display: block; position: relative; z-index: 1; }
/* Independent motion layers on the introductory screen. */
#content_wrapper .wrapper-content { position: relative; isolation: isolate; }
/* White, continuous marquee: in front of the ambient gradient, behind the animated head. */
#content_wrapper .hero-ticker {
  position: absolute;
  z-index: 0;
  top: 53%;
  left: 50%;
  width: 100vw;
  /* Only crop at the viewport sides; keep ascenders and descenders fully visible. */
  overflow-x: clip;
  overflow-y: visible;
  padding-block: .14em;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
}
#content_wrapper .hero-ticker-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: hero-marquee 58s linear infinite;
  will-change: transform;
}
#content_wrapper .hero-ticker-track span {
  display: block;
  flex: none;
  color: #fff;
  font-family: 'Dongle', sans-serif;
  font-size: clamp(136px, 14.5vw, 210px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.025em;
  text-transform: lowercase;
}
@keyframes hero-marquee {
  to { transform: translateX(calc(-50% - 1.25rem)); }
}
#content_wrapper .wrapper-content .content { z-index: 2; transform: translate3d(0, var(--hero-art-shift, 0px), 0); }
#content_wrapper .wrapper-content #animation { position: relative; z-index: 1; transform: translate3d(0, var(--hero-gif-shift, 0px), 0); }
/* The page stays readable without JavaScript; reveal effects enhance it only when supported. */
.reveal-ready .reveal-step { opacity: 0; transform: translate3d(0, 58px, 0); transition: opacity .85s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.reveal-ready .reveal-step.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
/* Keep the original, full-color PNG artwork unfiltered. */
.content img.tags, .content img.contact-me, .content img.arrow { filter: none; }
.profile { box-sizing: border-box; max-width: 840px; margin: 0 auto; padding: 72px 28px 120px; color: #fff; font-family: 'Dongle', Arial, sans-serif; line-height: 1.05; }
.profile h1 { font-size: clamp(54px, 8vw, 86px); font-weight: 700; line-height: .82; letter-spacing: -.015em; margin: 22px 0 36px; }
.profile h1 span { display: block; }
.profile h1 .title-creative { color: #fd79a8; }
.profile h1 .title-strategy { color: #2d3436; }
.profile h1 .title-visual { color: #ff9f1a; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .profile h1 .title-creative, .profile h1 .title-strategy, .profile h1 .title-visual {
    background-size: 280% 280%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: headline-gradient-flow 11s ease-in-out infinite alternate;
  }
  .profile h1 .title-creative { background-image: linear-gradient(115deg, #fd79a8 0%, #fd79a8 34%, #fdcb6e 58%, #fd79a8 82%, #fdcb6e 100%); }
  .profile h1 .title-strategy { background-image: linear-gradient(120deg, #2d3436 0%, #130f40 35%, #2d3436 63%, #130f40 100%); animation-duration: 13s; animation-delay: -4s; }
  .profile h1 .title-visual { background-image: linear-gradient(105deg, #ff9f1a 0%, #FFC312 30%, #B53471 60%, #ff9f1a 85%, #FFC312 100%); animation-duration: 12s; animation-delay: -7s; }
}
@keyframes headline-gradient-flow {
  0% { background-position: 0% 35%; }
  50% { background-position: 85% 70%; }
  100% { background-position: 15% 45%; }
}
.profile p { font-size: 29px; font-weight: 400; line-height: 1.08; margin: 0 0 24px; }
.profile > p:not(:first-of-type) { font-weight: 300; }
.profile .eyebrow { font-size: 19px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .065em; }
.brand-experience { margin-top: 44px; }
.brand-experience h2 { font-size: clamp(54px, 8vw, 86px); font-weight: 700; line-height: .82; letter-spacing: -.015em; color: #1289A7; margin: 0 0 60px; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .brand-experience h2 {
    background-image: linear-gradient(115deg, #1289A7 0%, #1289A7 25%, #C4E538 52%, #1289A7 78%, #C4E538 100%);
    background-size: 280% 280%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: headline-gradient-flow 12s ease-in-out infinite alternate;
  }
}
.profile .brand-experience p { font-size: 19.2px; line-height: 1.08; margin: 0 0 10px; }
.profile .brand-experience p:last-child { margin-bottom: 0; }
.brand-experience .brand-group { margin-bottom: 28px; }
.brand-experience .brand-group:last-child { margin-bottom: 0; }
.language-switch { display: flex; gap: 18px; margin-bottom: 62px; }
.language-switch a { color: inherit; text-decoration: none; font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: .07em; }
.language-switch a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
html[lang="ja"] .profile { font-family: 'Noto Sans JP', sans-serif; line-height: 1.75; }
html[lang="ja"] .profile h1 { font-size: clamp(29px, 4.8vw, 48px); line-height: 1.4; letter-spacing: .01em; margin-bottom: 36px; }
html[lang="ja"] .profile p { font-size: 17px; line-height: 1.95; }
html[lang="ja"] .brand-experience h2 { font-size: clamp(29px, 4.8vw, 48px); line-height: 1.4; letter-spacing: .01em; }
html[lang="ja"] .profile .brand-experience p { font-size: 15px; line-height: 1.9; }
html[lang="ja"] .language-switch a { font-family: 'Dongle', sans-serif; }
.profile-links { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 60px; }
.email-link, .linkedin-link { display: inline-block; flex-shrink: 0; }
.email-link { position: relative; isolation: isolate; overflow: hidden; border-radius: 3px; }
.email-link::before, .email-link::after { content: ''; position: absolute; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.email-link::before { inset: 1px; border-radius: 3px; background: linear-gradient(120deg, #2d3436 0%, #636e72 28%, #2d3436 58%, #636e72 82%, #2d3436 100%); background-size: 260% 260%; }
.email-link::after { inset: -65% -45%; background: radial-gradient(ellipse at 35% 45%, #636e72 0%, transparent 55%), radial-gradient(ellipse at 70% 65%, #2d3436 0%, transparent 60%); filter: blur(10px); }
.email-link:hover::before, .email-link:hover::after, .email-link:focus-visible::before, .email-link:focus-visible::after { opacity: 1; }
.email-link:hover::before, .email-link:focus-visible::before { animation: call-gradient-flow 4.5s ease-in-out infinite alternate; }
.email-link:hover::after, .email-link:focus-visible::after { animation: call-gradient-morph 5s ease-in-out infinite alternate; }
.email-link img { position: relative; z-index: 1; display: block; width: 142px; max-width: 100%; height: auto; }
@keyframes call-gradient-flow { from { background-position: 0% 35%; } to { background-position: 100% 70%; } }
@keyframes call-gradient-morph { from { transform: translate(-12%, 6%) rotate(-12deg) scale(1); border-radius: 42% 58% 64% 36%; } to { transform: translate(12%, -8%) rotate(18deg) scale(1.25); border-radius: 65% 35% 40% 60%; } }
.linkedin-link img { display: block; width: 39px; height: 39px; transition: filter .3s ease; }
.linkedin-link:hover img, .linkedin-link:focus-visible img { filter: brightness(0) saturate(100%) invert(32%) sepia(99%) saturate(1800%) hue-rotate(186deg) brightness(94%) contrast(103%); }
.emoji-cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 32px;
  line-height: 1;
  transform: translate(12px, 12px);
  user-select: none;
}
.emoji-cursor.is-visible { display: block; }
@media (hover: hover) and (pointer: fine) {
  .content a, .email-link, .linkedin-link { cursor: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal-step { opacity: 1; transform: none; transition: none; }
  #content_wrapper .wrapper-content .content, #content_wrapper .wrapper-content #animation { transform: none; }
  #content_wrapper .hero-ticker-track { animation: none; will-change: auto; }
  .email-link::before, .email-link::after { animation: none !important; transition: none; }
  .profile h1 .title-creative, .profile h1 .title-strategy, .profile h1 .title-visual, .brand-experience h2 { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }
}
@media (max-width: 760px) { .profile { padding: 44px 24px 90px; } .profile p { font-size: 27px; } }