/* ---------- Reset / base ---------- */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--hop-black-900);
  color: var(--hop-white);
  font-family: var(--hop-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

.eyebrow {
  font-family: var(--hop-font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hop-white-300);
}

.container {
  width: 100%;
  max-width: var(--hop-container);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px) {
  .container {
    padding: 0 20px;
  }
}

::selection {
  background: var(--hop-red);
  color: var(--hop-white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.hero {
  --x: 50%;
  --y: 40%;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--hop-black-900);
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.7s var(--hop-ease), filter 0.7s var(--hop-ease);
}

.hero--leaving {
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
}

.hero[hidden] {
  display: none;
}

.hero__grain {
  position: absolute;
  inset: -20%;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--x) var(--y), rgba(212, 44, 61, 0.16), transparent 70%);
  transition: background 0.1s linear;
}

.hero__top,
.hero__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
}

.hero__center {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(24px);
  animation: hop-rise 0.9s var(--hop-ease) 0.15s forwards;
}

@keyframes hop-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title {
  margin: 0;
  font-family: var(--hop-font-display);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.02em;
  font-size: clamp(48px, 11vw, 160px);
  color: var(--hop-white);
  text-transform: uppercase;
}

.hero__title span {
  display: block;
}

.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--hop-red);
}

.hero__tagline {
  margin: 0;
  max-width: 34ch;
  color: var(--hop-white-300);
  font-size: clamp(14px, 1.4vw, 17px);
}

.hero__bottom {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-bottom: 48px;
  opacity: 0;
  animation: hop-fade 0.8s var(--hop-ease) 0.5s forwards;
}

@keyframes hop-fade {
  to {
    opacity: 1;
  }
}

.hero__enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--hop-black-600);
  color: var(--hop-white);
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--hop-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.25s var(--hop-ease), background 0.25s var(--hop-ease), transform 0.25s var(--hop-ease);
}

.hero__enter:hover {
  border-color: var(--hop-red);
  background: rgba(212, 44, 61, 0.08);
  transform: translateY(-2px);
}

.hero__enter-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hop-red);
}

.hero__scroll-hint {
  opacity: 0.6;
}

@media (max-width: 640px) {

  .hero__top,
  .hero__bottom {
    padding: 20px;
  }
}

/* ---------- Portfolio ---------- */

.portfolio {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  opacity: 0;
  animation: hop-fade 0.6s var(--hop-ease) forwards;
}

/* Pushes the footer to the bottom of the viewport on short pages instead of
   leaving it floating right under the grid, while still flowing normally
   once content grows past one screen. */
.portfolio__main {
  flex: 1 0 auto;
}

.portfolio[hidden] {
  display: none;
}

.portfolio__header {
  padding: 28px 20px 12px;
}

.portfolio__logo {
  background: none;
  border: none;
  padding: 0;
  color: var(--hop-white);
  font-family: var(--hop-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--hop-ease);
}

.portfolio__logo:hover {
  color: var(--hop-red);
}

.portfolio__empty {
  padding: 40px 0;
  color: var(--hop-white-300);
}

.portfolio__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 24px;
  padding-bottom: 40px;
  border-top: 1px solid var(--hop-black-700);
}

.portfolio__admin-link {
  text-decoration: none;
  transition: color 0.2s var(--hop-ease);
}

.portfolio__admin-link:hover {
  color: var(--hop-red);
}

/* ---------- Category tabs ---------- */

.tabs {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--hop-black-700);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__item {
  position: relative;
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--hop-white-300);
  font-family: var(--hop-font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 20px 22px;
  transition: color 0.2s var(--hop-ease);
}

.tabs__item:hover {
  color: var(--hop-white);
}

.tabs__item--active {
  color: var(--hop-white);
}

.tabs__underline {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--hop-red);
  transition: left 0.3s var(--hop-ease), width 0.3s var(--hop-ease);
}

@media (max-width: 640px) {
  .tabs {
    display: none;
  }
}

/* ---------- Mobile category menu (phones) ---------- */

.mobile-nav {
  display: none;
  position: relative;
  border-bottom: 1px solid var(--hop-black-700);
}

@media (max-width: 640px) {
  .mobile-nav {
    display: block;
  }
}

.mobile-nav__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 16px 2px;
  color: var(--hop-white);
  font-family: var(--hop-font-body);
  font-size: 15px;
  font-weight: 500;
}

.mobile-nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  height: 16px;
  flex-shrink: 0;
}

.mobile-nav__hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--hop-white);
  border-radius: 1px;
  transition: transform 0.25s var(--hop-ease), opacity 0.25s var(--hop-ease);
}

.mobile-nav__toggle--open .mobile-nav__hamburger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-nav__toggle--open .mobile-nav__hamburger span:nth-child(2) {
  opacity: 0;
}

.mobile-nav__toggle--open .mobile-nav__hamburger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav__label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  display: none;
  flex-direction: column;
  background: var(--hop-black-800);
  border: 1px solid var(--hop-black-700);
  border-radius: 0 0 var(--hop-radius) var(--hop-radius);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: hop-nav-open 0.2s var(--hop-ease);
}

/* [hidden] alone isn't reliable once any author rule sets `display` on this
   selector, since author styles always beat the UA's default [hidden] rule
   regardless of specificity — so visibility is driven explicitly here. */
.mobile-nav__panel:not([hidden]) {
  display: flex;
}

@keyframes hop-nav-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav__item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--hop-black-700);
  text-align: left;
  padding: 14px 16px;
  color: var(--hop-white-300);
  font-family: var(--hop-font-body);
  font-size: 15px;
}

.mobile-nav__item:last-child {
  border-bottom: none;
}

.mobile-nav__item--active {
  color: var(--hop-white);
  background: var(--hop-black-700);
  font-weight: 600;
}

/* ---------- Subnav (subcategories) ----------
   Left sidebar at every width, sized to its own content (not a fixed
   column) with a 40px gutter before the grid, tracked uppercase labels,
   active = white + red underline, inactive = muted gray. */

.portfolio__body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.portfolio__content {
  flex: 1;
  min-width: 0;
}

/* Shrink-to-fit (not a fixed 256px column) so the sidebar hugs whatever its
   longest label actually is — a short label like "Reels" shouldn't leave a
   few hundred extra px of dead space before the grid starts. The gap to the
   content is set below on .portfolio__body. */
.subnav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 40px;
}

.subnav__item {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0 0 8px;
  border-bottom: 2px solid transparent;
  color: var(--hop-white-300);
  font-family: var(--hop-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.2s var(--hop-ease), border-color 0.2s var(--hop-ease);
}

.subnav__item:hover {
  color: var(--hop-white);
}

.subnav__item--active {
  color: var(--hop-white);
  border-bottom-color: var(--hop-red);
}

/* Below 640px the subnav stays a sidebar (categories collapse into the
   hamburger up top instead) — just narrower, so Reels/Posts still reads as
   "left column" rather than switching to a horizontal pill row. */
@media (max-width: 640px) {
  .portfolio__body {
    gap: 16px;
  }

  .subnav {
    flex: 0 0 76px;
    gap: 20px;
    padding-top: 24px;
  }

  .subnav__item {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

/* ---------- Reel grid ----------
   Flexbox (not CSS grid) is deliberate: with fixed-width flex items and
   `justify-content: center`, an incomplete last row centers itself
   automatically — 2 cards sit centered as a pair instead of pinned to the
   left with a dead empty column, and it works the same at any card count. */

.reel-grid {
  --reel-cols: 4;
  --reel-gap: 30px;
  display: none;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--reel-gap);
  padding: 40px 0 80px;
}

/* Author rules setting `display` always beat the UA's default [hidden]
   rule regardless of specificity, so visibility has to be driven
   explicitly here rather than relying on the hidden attribute alone. */
.reel-grid:not([hidden]) {
  display: flex;
}

@media (max-width: 900px) {
  .reel-grid {
    --reel-cols: 2;
    --reel-gap: 18px;
  }
}

@media (max-width: 560px) {
  .reel-grid {
    --reel-cols: 1;
    --reel-gap: 16px;
  }
}

.reel-card {
  display: block;
  flex: 0 0 calc((100% - (var(--reel-cols) - 1) * var(--reel-gap)) / var(--reel-cols));
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--hop-radius);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  animation: hop-rise 0.4s var(--hop-ease) forwards;
}

.reel-card--static {
  cursor: default;
}

.reel-card__thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--hop-radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--hop-black-700);
  transition: border-color 0.25s var(--hop-ease), transform 0.25s var(--hop-ease);
}

.reel-card--square .reel-card__thumb {
  aspect-ratio: 1 / 1;
}

.reel-card--portrait .reel-card__thumb {
  aspect-ratio: 4 / 5;
}

.reel-card--horizontal .reel-card__thumb {
  aspect-ratio: 16 / 9;
}

/* Horizontal reels are wide (16:9), so they get a fixed half-row width
   instead of scaling off --reel-cols — that fits exactly 2 side by side
   whenever there's room, rather than 1 card eating 2 of 3 columns and
   leaving the last third empty. */
.reel-card--horizontal {
  flex-basis: calc((100% - var(--reel-gap)) / 2);
}

.reel-card--ratio-3-4 .reel-card__thumb {
  aspect-ratio: 3 / 4;
}

.reel-card--ratio-5-4 .reel-card__thumb {
  aspect-ratio: 5 / 4;
}

.reel-card--ratio-4-3 .reel-card__thumb {
  aspect-ratio: 4 / 3;
}

@media (max-width: 560px) {
  .reel-card--horizontal {
    flex-basis: 100%;
  }
}

.reel-card:hover .reel-card__thumb {
  border-color: var(--hop-red);
  transform: translateY(-4px) scale(1.02);
}

.reel-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.05) 45%, transparent 70%);
}

.reel-card__title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: var(--hop-white);
  font-family: var(--hop-font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.15;
}

.reel-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--hop-black-900);
  opacity: 0;
  transition: opacity 0.25s var(--hop-ease), transform 0.25s var(--hop-ease);
}

.reel-card:hover .reel-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

@media (max-width: 900px) {
  .reel-card__play {
    opacity: 1;
    width: 46px;
    height: 46px;
  }
}