/* A full-height closing signature, using the original Poto wordmark and tokens. */
.poto-contact {
  --contact-bg:var(--poto-paper);
  --contact-ink:var(--poto-ink);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:calc(var(--poto-space-xxl) * 2);
  min-height:calc(100svh - var(--poto-control-height) - var(--poto-space-xl));
  padding:calc(var(--poto-space-xxl) * 2) 5% 0;
  background:var(--contact-bg);
  color:var(--contact-ink);
  font-family:'Poto Reference Variable',Arial,sans-serif;
  scroll-margin-top:calc(var(--poto-control-height) + var(--poto-space-xl));
}
html[data-landscape-mode='night'] .poto-contact {
  --contact-bg:var(--poto-ink);
  --contact-ink:var(--poto-paper);
  color-scheme:dark;
}
.contact-top { display:grid; grid-template-columns:2fr 1fr; gap:var(--poto-space-xxl); align-items:start; }
.contact-invitation h2 { margin:0 0 var(--poto-space-sm); font:500 clamp(2rem,3.4vw,4rem)/1.15 'Poto Reference Variable',Arial,sans-serif; letter-spacing:-.035em; color:inherit; }
.contact-email { display:inline-block; max-width:100%; color:inherit; font-size:clamp(1.5rem,3.4vw,4rem); line-height:1.25; letter-spacing:-.035em; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1px; text-underline-offset:var(--poto-space-sm); transition:text-decoration-color var(--poto-fast); }
.contact-email:hover { text-decoration-color:currentColor; }
.contact-socials { display:grid; gap:var(--poto-space-sm); padding:0; margin:0; list-style:none; }
.contact-social { display:flex; justify-content:space-between; gap:var(--poto-space-xl); align-items:center; padding:var(--poto-space-md) 0; color:inherit; line-height:1.5; text-decoration:none; }
.contact-social-copy { display:grid; gap:var(--poto-space-xs); }
.contact-social-copy > span { font-size:1.25rem; }
.contact-social-copy small { font-size:.875rem; color:inherit; }
.contact-arrow { width:var(--poto-space-lg); height:var(--poto-space-lg); flex:none; transition:transform var(--poto-fast) var(--poto-ease); }
.contact-social:is(:hover,:focus-visible) .contact-arrow { transform:translate(var(--poto-space-xs),calc(var(--poto-space-xs) * -1)); }
.contact-social:is(:hover,:focus-visible) .contact-social-copy > span { text-decoration:underline; text-underline-offset:var(--poto-space-xs); }
.poto-contact a:focus-visible { outline:2px solid currentColor; outline-offset:var(--poto-space-xs); }
.contact-brand { position:relative; margin-top:auto; flex:none; overflow:hidden; aspect-ratio:267.2 / 37.5; }
.contact-brand img { display:block; width:100%; height:auto; filter:brightness(0); }
html[data-landscape-mode='night'] .contact-brand img { filter:none; }
.contact-title-mask { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em; }
.contact-title-word { display:inline-block; }
@media(max-width:900px) {
  .contact-top { grid-template-columns:1.5fr 1fr; gap:var(--poto-space-xl); }
  .contact-email { font-size:clamp(1.25rem,3.4vw,2rem); }
}
@media(max-width:600px) {
  .poto-contact { padding:var(--poto-space-xxl) 5% 0; gap:var(--poto-space-xxl); min-height:auto; }
  .contact-top { grid-template-columns:1fr; gap:var(--poto-space-xxl); }
  .contact-email { font-size:clamp(1.125rem,6vw,2rem); }
}
@media(prefers-reduced-motion:reduce) { .contact-email,.contact-arrow { transition:none; } .contact-social:is(:hover,:focus-visible) .contact-arrow { transform:none; } }
.reduce-motion .contact-email,.reduce-motion .contact-arrow { transition:none; }
.reduce-motion .contact-social:is(:hover,:focus-visible) .contact-arrow { transform:none; }

/* Three-quarter signature crop; brand geometry stays intact inside the mask.
   A seamless three-second breathing gradient is scoped to this signature.
   Reference-requested blue stops are local to the footer, not global brand tokens. */
@supports (mask-image:url('')) {
  .contact-brand img { opacity:0; }
  .contact-brand::after {
    --contact-blue-bright:#1996f5;
    --contact-blue-rich:#287bff;
    --contact-blue-soft:#8bbcff;
    content:''; position:absolute; top:0; left:0; width:100%; height:133.333333%;
    mask:url('/potodesign/assets/potodesign-footer-type.svg') center / 100% 100% no-repeat;
    -webkit-mask:url('/potodesign/assets/potodesign-footer-type.svg') center / 100% 100% no-repeat;
    background:linear-gradient(110deg,var(--contact-blue-bright),var(--contact-blue-rich) 25%,var(--contact-blue-soft) 48%,var(--contact-blue-rich) 72%,var(--contact-blue-bright));
    background-size:240% 100%;
    animation:contact-gradient-drift 3s ease-in-out infinite;
  }
  /* Pale ice blues keep the signature readable against the dark footer. */
  html[data-landscape-mode='night'] .contact-brand::after {
    --contact-blue-bright:var(--poto-glass-muted);
    --contact-blue-rich:var(--poto-blue-light);
    --contact-blue-soft:var(--poto-year-accent);
  }
  .contact-brand::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:133.333333%;
    z-index:1; pointer-events:none; opacity:.32; mix-blend-mode:soft-light;
    mask:url('/potodesign/assets/potodesign-footer-type.svg') center / 100% 100% no-repeat;
    -webkit-mask:url('/potodesign/assets/potodesign-footer-type.svg') center / 100% 100% no-repeat;
    background:url('/potodesign/assets/footer-grain.svg') repeat;
  }
}
@keyframes contact-gradient-drift { 0%,100% { background-position:15% 50%; } 50% { background-position:85% 50%; } }
@media(prefers-reduced-motion:reduce) { .contact-brand::after { animation:none; background-position:50% 50%; } }
.reduce-motion .contact-brand::after { animation:none; background-position:50% 50%; }

/* Shallow extrusion of the authentic symbol: decorative, behind all contact text. */
.contact-top,.contact-brand { z-index:1; }
.contact-sculpture {
  position:absolute; inset:5% 27% 0; pointer-events:none; perspective:1000px;
  display:grid; place-items:center; opacity:.65;
}
.contact-sculpture-depth {
  position:relative; width:100%; aspect-ratio:1; transform-style:preserve-3d;
  transform:rotateX(12deg) rotateY(-24deg) rotateZ(-10deg);
}
.contact-sculpture-depth span {
  position:absolute; inset:0;
  mask:url('/potodesign/assets/poto-symbol.svg') center / contain no-repeat;
  -webkit-mask:url('/potodesign/assets/poto-symbol.svg') center / contain no-repeat;
  background:color-mix(in srgb,var(--poto-paper),var(--poto-blue-deep) 7%);
  transform:translateZ(calc(var(--depth) * 1px));
}
.contact-sculpture-depth span:last-child {
  background:linear-gradient(135deg,var(--poto-paper) 15%,color-mix(in srgb,var(--poto-paper),var(--poto-blue-light) 9%) 65%,var(--poto-paper));
}
html[data-landscape-mode='night'] .contact-sculpture-depth span {
  background:color-mix(in srgb,var(--poto-ink),var(--poto-blue-light) 11%);
}
html[data-landscape-mode='night'] .contact-sculpture-depth span:last-child {
  background:linear-gradient(135deg,color-mix(in srgb,var(--poto-ink),var(--poto-blue-light) 8%),var(--poto-ink) 75%);
}

/* Retain the experimental sculpture in source, but keep the footer visually quiet. */
.contact-sculpture { display:none; }

/* Apply the same signature palette and loop to the invitation's final word. */
@supports (background-clip:text) {
  .contact-invitation .contact-title-mask:last-child .contact-title-word {
    --contact-title-bright:#1996f5; --contact-title-rich:#287bff; --contact-title-soft:#8bbcff;
    background:linear-gradient(110deg,var(--contact-title-bright),var(--contact-title-rich) 25%,var(--contact-title-soft) 48%,var(--contact-title-rich) 72%,var(--contact-title-bright));
    background-size:240% 100%; background-clip:text; -webkit-background-clip:text; color:transparent;
    animation:contact-gradient-drift 3s ease-in-out infinite;
  }
  html[data-landscape-mode='night'] .contact-invitation .contact-title-mask:last-child .contact-title-word {
    --contact-title-bright:var(--poto-glass-muted); --contact-title-rich:var(--poto-blue-light); --contact-title-soft:var(--poto-year-accent);
  }
}
@media(prefers-reduced-motion:reduce) { .contact-invitation .contact-title-mask:last-child .contact-title-word { animation:none; } }
.reduce-motion .contact-invitation .contact-title-mask:last-child .contact-title-word { animation:none; }