/* Approved portrait homepage. Image sizing and spacing match sample/portrait-home. */
.home-portrait {
  --hero-gap: 2.5rem;
  --portrait-scale: 1.22;
  --portrait-crop-scale: 1.1;
  --hero-inset: clamp(0px, calc(20vw - 12rem), 2rem);
}
/* Approved motifs: 15 password note, 11 offline Wi-Fi, 06 NULL, 01 code.
   Generated from sample/portrait-home/motif-catalog.js; same density as the preview. */
.asusn-site.home-portrait .hero {
  overflow-x: clip;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22240%22%20viewBox%3D%220%200%20256%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.145%22%3E%3Cg%20transform%3D%22translate(42%2043)%20rotate(-12)%22%3E%3Cpath%20d%3D%22M-16-18H16V8L6%2018H-16ZM6%2018V8H16%22%2F%3E%3Cg%20transform%3D%22translate(0%20-2)%20scale(0.54)%22%3E%3Cpath%20transform%3D%22translate(-20.5%200)%22%20d%3D%22M1-5%204-8V8M0%208h8%22%2F%3E%3Cpath%20transform%3D%22translate(-9.5%200)%22%20d%3D%22M0-5q0-3%204-3t4%203q0%203-4%205T0%208h8%22%2F%3E%3Cpath%20transform%3D%22translate(1.5%200)%22%20d%3D%22M0-8h4q4%200%204%204T4%200H2m2%200q4%200%204%204T4%208H0%22%2F%3E%3Cpath%20transform%3D%22translate(12.5%200)%22%20d%3D%22M0-8V1H8M8-8V8%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(174%2057)%20rotate(10)%22%3E%3Cpath%20d%3D%22M-18-7q18-15%2036%200M-12%200q12-10%2024%200M-6%207q6-5%2012%200M-3%2013l6%206M3%2013l-6%206%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(82%20162)%20rotate(-10)%22%3E%3Cg%20transform%3D%22translate(0%200)%20scale(0.88)%22%3E%3Cpath%20transform%3D%22translate(-20.5%200)%22%20d%3D%22M0%208V-8L8%208V-8%22%2F%3E%3Cpath%20transform%3D%22translate(-9.5%200)%22%20d%3D%22M0-8V4q0%204%204%204t4-4V-8%22%2F%3E%3Cpath%20transform%3D%22translate(1.5%200)%22%20d%3D%22M0-8V8H8%22%2F%3E%3Cpath%20transform%3D%22translate(12.5%200)%22%20d%3D%22M0-8V8H8%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(205%20192)%20rotate(9)%22%3E%3Cpath%20d%3D%22m-9-9-10%209%2010%209M9-9l10%209-10%209M4-13-4%2013%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.12%22%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%22115%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22177%22%20cy%3D%22132%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22214%22%20r%3D%221.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 256px 240px;
  background-position: center top;
  background-repeat: repeat;
}
.asusn-site.home-portrait .hero-main { padding-bottom: 0; }
.asusn-site.home-portrait .hero-copy {
  grid-column: 1;
  grid-row: 1;
  max-width: min(100%, calc(36vw + var(--hero-inset)));
  padding-left: var(--hero-inset);
  position: relative;
  z-index: 1;
}
.asusn-site.home-portrait .hero .portrait-photo {
  grid-column: 1 / -1;
  grid-row: 1;
  width: calc(((100% - var(--hero-gap)) / 2.1 - 4rem) * 11 / 9 * 2400 / 1802 * var(--portrait-scale));
  max-width: 100vw;
  aspect-ratio: calc(2400 * var(--portrait-crop-scale)) / 1802;
  justify-self: end;
  align-self: end;
  margin: 1rem calc((100% - 100vw) / 2) 0 0;
  border: 0;
  transform: none;
  background: transparent;
  overflow: hidden;
}
.asusn-site.home-portrait .portrait-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-width: none;
  background: transparent;
  object-fit: contain;
  transform: none;
}
.asusn-site.home-portrait .hero-copy :is(.catchphrase, .hero-message) {
  width: 100%;
  max-width: 31rem;
  white-space: nowrap;
  overflow-wrap: normal;
}
.asusn-site.home-portrait .photo--profile { transform: none; }
.asusn-site.home-portrait .photo--profile img { aspect-ratio: 9 / 11; object-fit: contain; height: auto; }

@media (max-width: 1000px) {
  .home-portrait { --hero-gap: 1rem; }
}
@media (min-width: 701px) {
  .home-portrait {
    --hero-layout-width: min(var(--a-width-page), calc(100vw - var(--a-gutter) * 2));
    --hero-portrait-width: calc(((var(--hero-layout-width) - var(--hero-gap)) / 2.1 - 4rem) * 11 / 9 * 2400 / 1802 * var(--portrait-scale));
    /* Exclude the 647px transparent right margin at the approved vertical crop. */
    --hero-center-offset: calc((var(--hero-portrait-width) * 647 / 2400 - (100vw - var(--hero-layout-width)) / 2 - var(--hero-inset)) / 2);
  }
  .asusn-site.home-portrait .hero-main { transform: translateX(var(--hero-center-offset)); }
  .asusn-site.home-portrait .hero .portrait-photo { width: var(--hero-portrait-width); }
}
@media (max-width: 700px) {
  .home-portrait { --hero-inset: 0px; }
  .asusn-site.home-portrait .hero-copy { max-width: none; }
  .asusn-site.home-portrait .hero-main { grid-template-columns: minmax(0, 1fr); padding-top: 3rem; gap: .5rem; }
  .asusn-site.home-portrait .hero-copy :is(.catchphrase, .hero-message) {
    width: 88%;
    max-width: 27.28rem;
    margin-inline: auto;
  }
  /* Transparent margins extend off screen, while the entire person remains visible. */
  .asusn-site.home-portrait .hero .portrait-photo {
    grid-column: 1;
    grid-row: 2;
    width: 150vw;
    max-width: none;
    justify-self: center;
    margin: .5rem 0 0;
    position: relative;
    left: 6vw;
  }
}

.home-portrait .catchphrase-letters { display: inline-block; white-space: nowrap; }
.home-portrait .catchphrase-letter { display: inline-block; transform-origin: 50% 80%; }
.home-portrait.is-motion-ready .catchphrase-letter {
  animation: home-catchphrase-pop 5s ease-in-out calc(160ms + var(--letter-index) * 60ms) infinite both;
}
/* A 620ms bounce per character, then rest until the next five-second cycle. */
@keyframes home-catchphrase-pop {
  0%, 12.4%, 100% { transform: translateY(0) scale(1); }
  2.48% { transform: translateY(.035em) scale(.90, .86); }
  5.952% { transform: translateY(-.14em) scale(1.06, 1.08); }
  9.176% { transform: translateY(.025em) scale(1.02, .96); }
}
@media (prefers-reduced-motion: reduce) {
  .home-portrait.is-motion-ready .catchphrase-letter { animation: none; }
}