/* ==========================================================================
   Portfolio Landing — Elio
   Recreated 1:1 from the "Portfolio Landing" design.

   Scaling: the design was authored at a fixed 1160px card on a ~1266px
   viewport. Every size below is expressed in rem (1rem = 16px = the design's
   own px value), and the root font size grows with the viewport, so the whole
   page scales up proportionally on large screens instead of sitting as a
   small card in the middle of the display.
   ========================================================================== */

:root {
  --bg-page: #d6d4d0;
  --bg-card: #f1efec;
  --bg-panel: #fdfdfc;
  --ink: #26241f;
  --ink-soft: #78746f;
  --ink-footer: #807c77;
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);
}

html { font-size: 16px; }

/* Fill the screen: 16 / 1266 = 1.2638vw reproduces the design exactly at its
   authoring width, then keeps growing with the viewport (capped at 2x). */
@media (min-width: 1266px) {
  html { font-size: min(1.2638vw, 32px); }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  font-family: Poppins, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #201e1d; text-decoration: none; }
a:hover { color: #6b6864; }

.icon { display: block; flex: none; width: 1rem; height: 1rem; }

/* --------------------------------------------------------------- Layout -- */

.page {
  background: var(--bg-page);
  padding: 3.25rem 1.25rem 4.5rem;
  color: var(--ink);
  display: flex;
  justify-content: center;
}

/* Holds both views and carries the cross-view transition. */
.viewport {
  width: 72.5rem;
  max-width: 100%;
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
  filter: blur(0);
  transition: opacity .34s var(--ease-out), transform .52s var(--ease-out), filter .34s ease;
}
.viewport.is-out {
  opacity: 0;
  transform: scale(.965) translate3d(0, 10px, 0);
  filter: blur(7px);
}

.card {
  width: 100%;
  background: var(--bg-card);
  border-radius: 1.875rem;
  overflow: hidden;
}
.view[hidden] { display: none; }

/* -------------------------------------------------------------- Buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins, sans-serif;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
/* The design promotes every button to its own compositor layer permanently
   (will-change + translateZ). That layer stops repainting when an ancestor
   finishes animating a blur filter, which makes the button disappear — so the
   hint is only applied while the pointer is actually on the button. */
.btn:hover, .btn:focus-visible { will-change: transform; }

/* White pill — header "Copy" */
.btn--light {
  font-size: .71875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  background: #fff;
  padding: .5625rem 1.625rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .3s ease;
}
.btn--light:hover {
  background: #fff;
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 16px -6px rgba(38, 36, 31, .18);
}
.btn--light:active {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 2px 5px -3px rgba(38, 36, 31, .16);
  transition-duration: .14s;
}

/* Dark pill — "Latest Shots", "Discord" */
.btn--dark {
  gap: .5625rem;
  font-size: .78125rem;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  padding: .9375rem 1.875rem;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .3s ease;
}
.btn--dark:hover {
  background: #332f28;
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 26px -8px rgba(38, 36, 31, .35);
}
.btn--dark:active {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 4px 10px -4px rgba(38, 36, 31, .3);
  transition-duration: .14s;
}

/* White pill — "Back" on the work view. Slides left on hover, not up. */
.btn--back {
  gap: .5rem;
  font-size: .71875rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  padding: .625rem 1.25rem .625rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.btn--back .icon { width: .8125rem; height: .8125rem; }
.btn--back:hover {
  transform: translate3d(-2px, 0, 0);
  box-shadow: 0 8px 16px -8px rgba(38, 36, 31, .22);
}
.btn--back:active {
  transform: translate3d(0, 0, 0);
  transition-duration: .14s;
}

/* ----------------------------------------------------------------- Hero -- */

.hero {
  background: var(--bg-card);
  border-bottom-left-radius: 2.75rem;
  border-bottom-right-radius: 2.75rem;
  padding: 2.125rem 2.75rem 4.625rem;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar__left { display: flex; align-items: center; gap: .875rem; }
.topbar__actions { display: flex; gap: .625rem; }
.topbar__mail {
  font-size: .78125rem;
  letter-spacing: .01em;
  color: #3c3936;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  color: #4a4744;
}
.topbar__right a { color: #4a4744; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3.625rem;
}

.hero__mark { margin-top: 5rem; }

/* The wordmark is painted as ink and punched out by the artwork's alpha,
   so it always matches the text colour rather than the file's own black. */
.wordmark {
  height: 8.25rem;
  width: 18.25rem;
  background: var(--ink);
  -webkit-mask: url(assets/elio-wordmark.png) center / contain no-repeat;
  mask: url(assets/elio-wordmark.png) center / contain no-repeat;
}

.hero__title {
  margin: .75rem 0 0;
  text-align: center;
  font-size: 3.375rem;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 40rem;
  text-wrap: balance;
}

.hero__cta {
  margin-top: 2.375rem;
  gap: .625rem;
  padding: 1.0625rem 2.125rem;
}
.hero__cta .icon { width: .8125rem; height: .8125rem; }

/* ---------------------------------------------------------- Client logos -- */

.logos {
  background: var(--bg-panel);
  border-bottom-left-radius: 2.75rem;
  border-bottom-right-radius: 2.75rem;
  padding: 2.75rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6rem;
}
.logos__item {
  width: auto;
  filter: grayscale(1) contrast(1.05) brightness(.72);
  opacity: .9;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.logos__item:hover { filter: none; opacity: 1; }

/* Per-logo sizing, exactly as specified in the design. Emotka is the one
   logo the design gives no hover scale to. */
.logos__item--ocean { height: 4.875rem; }
.logos__item--ocean:hover { transform: scale(1.06); }

.logos__item--rose { height: 4.375rem; }
.logos__item--rose:hover { transform: scale(1.06); }

.logos__item--emotka { height: 4.625rem; }

/* ------------------------------------------------------------- Services -- */

.services { padding: 5.75rem 3.5rem 5.5rem; }

.services__title {
  margin: 0;
  text-align: center;
  font-size: 1.875rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.services__divider {
  position: relative;
  margin: 3.5rem 0 0;
  height: 1px;
  background: #d3d0cb;
}
.services__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 999px;
  padding: .4375rem 1.375rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.services__grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.75rem;
}
.service {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.service .icon { width: 1.875rem; height: 1.875rem; }
.service__name {
  font-size: .90625rem;
  font-weight: 600;
  color: var(--ink);
}
.service__desc {
  margin: 0;
  font-size: .71875rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 11.875rem;
}

/* ------------------------------------------------------ Contact + footer -- */

.contact {
  background: var(--bg-panel);
  border-top-left-radius: 2.75rem;
  border-top-right-radius: 2.75rem;
  padding: 4.125rem 3.5rem 0;
}
.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact__badge {
  width: 4.875rem;
  height: 4.875rem;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__badge .icon { width: 2.25rem; height: 2.25rem; }
.contact__title {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: 2.75rem;
  line-height: 1.26;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 32.5rem;
}
.contact__actions {
  margin-top: 2.25rem;
  display: flex;
  gap: .875rem;
}
.contact__actions .icon { width: .9375rem; height: .9375rem; }

.footer {
  margin-top: 4.625rem;
  border-top: 1px solid #eceae6;
  padding: 1.625rem 0 1.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .71875rem;
  color: var(--ink-footer);
}
.footer__links {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.footer__links a { color: var(--ink-footer); }

/* ------------------------------------------------------------ Work view -- */

.work { padding: 2.125rem 2.75rem 3.5rem; }

.work__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.work__mail {
  font-size: .75rem;
  color: #4a4744;
}

.work__head {
  margin-top: 3.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
}
.work__title {
  margin: 0;
  font-size: 3.25rem;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 35rem;
}
.work__lede {
  margin: 0 0 .5rem;
  font-size: .78125rem;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 17.5rem;
}

.work__empty {
  margin-top: 3.5rem;
  /* The design's min-height sits inside the dashed border, not around it. */
  box-sizing: content-box;
  min-height: 21.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .875rem;
  border: 1.5px dashed #d3cfca;
  border-radius: 1.5rem;
}
.work__empty .icon {
  width: 2.125rem;
  height: 2.125rem;
  color: #b6b1ab;
}
.work__empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.work__empty-text {
  margin: 0;
  font-size: .78125rem;
  line-height: 1.7;
  color: #8d8983;
  max-width: 18.75rem;
}

.work__footer {
  margin-top: 4rem;
  border-top: 1px solid #ddd9d4;
  padding-top: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .71875rem;
  color: var(--ink-footer);
}
.work__footer a { color: var(--ink-footer); }

/* -------------------------------------------------------- Discord modal -- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(30, 28, 24, .34);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease-out), backdrop-filter .42s var(--ease-out);
}
.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal {
  width: 24.5rem;
  max-width: 100%;
  background: var(--bg-panel);
  border-radius: 1.75rem;
  padding: 2.125rem 2rem 1.875rem;
  box-shadow: 0 40px 90px -30px rgba(30, 28, 24, .45);
  font-family: Poppins, sans-serif;
  transform: translate3d(0, 18px, 0) scale(.94);
  transition: transform .52s var(--ease-out);
}
.overlay.is-open .modal { transform: translate3d(0, 0, 0) scale(1); }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal__brand {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.modal__brand-icon {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__brand-icon .icon { width: 1.125rem; height: 1.125rem; }
.modal__title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
}
.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--ink);
  cursor: pointer;
  transition: transform .4s var(--ease-out), background-color .25s ease;
}
.modal__close .icon { width: .875rem; height: .875rem; }
.modal__close:hover { background: #e8e5e1; }
.modal__close:active { transform: scale(.92); transition-duration: .14s; }

.modal__body {
  margin-top: 1.625rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9375rem 1.125rem;
  border-radius: 1rem;
  background: #f4f2ef;
}
.modal__row--dark {
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .25s ease;
}
.modal__row--dark .icon { width: 1rem; height: 1rem; }
.modal__row--dark:hover {
  background: #332f28;
  color: #fff;
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 14px 28px -12px rgba(38, 36, 31, .5);
}
.modal__row--dark:active {
  transform: translate3d(0, 0, 0);
  transition-duration: .14s;
}
.modal__field {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
}
.modal__label {
  font-size: .65625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8d8983;
}
.modal__label--dark { color: #a8a49d; }
.modal__value {
  font-size: .90625rem;
  font-weight: 600;
  color: inherit;
}
.modal__row:not(.modal__row--dark) .modal__value { color: var(--ink); }

.modal__copy {
  font-size: .71875rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  padding: .5625rem 1.125rem;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.modal__copy:hover {
  box-shadow: 0 8px 16px -8px rgba(38, 36, 31, .3);
  transform: translate3d(0, -1.5px, 0);
}
.modal__copy:active {
  transform: translate3d(0, 0, 0);
  transition-duration: .14s;
}

/* ----------------------------------------------------- Reveal animations -- */

[data-reveal] { opacity: 0; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.82); }
  60%  { opacity: 1; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slideChip {
  0%   { opacity: 0; transform: translateX(-14px) scale(.9); }
  65%  { opacity: 1; transform: translateX(2px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ----------------------------------------------------------- Responsive -- */

@media (max-width: 1024px) {
  .hero { padding: 1.875rem 2rem 3.875rem; }
  .hero__mark { margin-top: 3rem; }
  .hero__title { font-size: 2.75rem; max-width: 32.5rem; }
  .logos { padding: 2.5rem 2rem; gap: 3.5rem; }
  .services { padding: 4.75rem 2rem 4.5rem; }
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .service__desc { max-width: 16.25rem; }
  .contact { padding: 3.625rem 2rem 0; }
  .contact__title { font-size: 2.25rem; }
  .footer { margin-top: 3.625rem; }

  .work { padding: 1.875rem 2rem 3rem; }
  .work__title { font-size: 2.75rem; }
}

@media (max-width: 680px) {
  .page { padding: 1.5rem .875rem 2.5rem; }
  .card { border-radius: 1.5rem; }

  .hero { padding: 1.5rem 1.375rem 3.25rem; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; }
  .topbar { flex-wrap: wrap; gap: .75rem; }
  .hero__inner { margin-top: 2.75rem; }
  .hero__mark { margin-top: 1.5rem; }
  .wordmark { width: 13.5rem; height: 6.1rem; }
  .hero__title { font-size: 2rem; margin-top: .75rem; }
  .hero__cta { margin-top: 1.875rem; }

  .logos {
    padding: 2rem 1.375rem;
    gap: 2.125rem;
    flex-wrap: wrap;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }
  .logos__item--ocean { height: 3.625rem; }
  .logos__item--rose { height: 3.25rem; }
  .logos__item--emotka { height: 3.4375rem; }

  .services { padding: 3.625rem 1.375rem 3.5rem; }
  .services__title { font-size: 1.3125rem; line-height: 1.45; }
  /* The design's hard line break strands "agencies" on its own at this width. */
  .services__title br { display: none; }
  .services__divider { margin-top: 2.5rem; }
  .services__grid { grid-template-columns: 1fr; gap: 2.125rem; margin-top: 2.75rem; }
  .service__desc { max-width: none; }

  .contact { padding: 3rem 1.375rem 0; border-top-left-radius: 2rem; border-top-right-radius: 2rem; }
  .contact__title { font-size: 1.75rem; }
  .contact__actions { flex-wrap: wrap; justify-content: center; }
  .footer {
    margin-top: 2.875rem;
    flex-direction: column;
    gap: .625rem;
    text-align: center;
  }

  .work { padding: 1.5rem 1.375rem 2.5rem; }
  .work__head { flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 2.5rem; }
  .work__title { font-size: 2rem; }
  .work__lede { max-width: none; margin-bottom: 0; }
  .work__empty { margin-top: 2.5rem; min-height: 15rem; }
  .work__empty-title { font-size: 1.25rem; }
  .work__footer {
    margin-top: 2.875rem;
    flex-direction: column;
    gap: .625rem;
    text-align: center;
  }

  .modal { padding: 1.75rem 1.375rem 1.5rem; border-radius: 1.5rem; }
}