.social {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;

  padding: 8rem 2rem;

  background: #050505;
}

.social-post {
  width: min(720px, 100%);

  background: rgba(18, 18, 18, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 28px;

  padding: 3rem;

  backdrop-filter: blur(14px);

  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.social-header {
  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 2.5rem;

  overflow: visible;
}

.avatar {
  width: 60px;

  height: 60px;

  border-radius: 50%;

  object-fit: cover;

  display: block;

  flex-shrink: 0;

  border: 2px solid rgba(255, 255, 255, 0.08);
}

.profile {
  display: flex;

  flex-direction: column;
}

.profile h2 {
  margin: 0;

  color: #ffffff;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0.03em;
}

.profile span {
  margin-top: 0.35rem;

  color: #9d9d9d;

  font-size: 0.82rem;

  letter-spacing: 0.28em;
}

.social-text {
  margin: 0;

  max-width: 31ch;

  color: #f6f3ef;

  font-size: clamp(1.4rem, 2vw, 1.85rem);

  font-weight: 300;

  line-height: 1.95;

  letter-spacing: -0.015em;
}

.social-actions {
  display: flex;

  align-items: center;

  gap: 1.35rem;

  margin-top: 2rem;
}

.social-action {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  border: none;

  background: none;

  color: rgba(255, 255, 255, 0.52);

  cursor: default;

  line-height: 0;
}

.social-action svg {
  width: 1.45rem;

  height: 1.45rem;

  fill: currentColor;
}
.social-post:hover {
  transform: translateY(-2px);

  transition: transform 0.45s ease;
}

/* ==========================================================
   STORY RING FOUNDATION

   Dormant until Engineering Task 002.
   ========================================================== */

@property --story-ring-angle {
  syntax: "<angle>";

  inherits: false;

  initial-value: 135deg;
}

#scene-02 .story-ring-wrapper {
  --story-ring-size: 142px;
  --story-ring-padding: 3px;
  --story-ring-light-spread: 34px;
  --story-ring-light-blur: 26px;
  --story-ring-inner-border-width: 5px;

  position: relative;

  width: var(--story-ring-size);

  height: var(--story-ring-size);

  overflow: visible;
}

#scene-02 .ring-light {
  position: absolute;

  inset: calc(-1 * var(--story-ring-light-spread));

  border-radius: 50%;

  transform-origin: center center;

  background:
    radial-gradient(
      circle at 25% 30%,
      rgba(255, 45, 120, 0.42),
      transparent 38%
    ),
    radial-gradient(
      circle at 80% 35%,
      rgba(162, 30, 255, 0.34),
      transparent 42%
    ),
    radial-gradient(circle at 72% 82%, rgba(0, 191, 191, 0.3), transparent 46%),
    radial-gradient(circle at 30% 85%, rgba(255, 238, 8, 0.2), transparent 36%);

  filter: blur(var(--story-ring-light-blur));

  opacity: 0.92;

  z-index: 0;

  will-change: opacity, filter;

  animation: storyRingGlow 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;

  pointer-events: none;
}

#scene-02 .story-ring {
  z-index: 2;

  isolation: isolate;

  width: var(--story-ring-size);

  height: var(--story-ring-size);

  border: none;

  border-radius: 50%;

  padding: var(--story-ring-padding);

  cursor: pointer;

  position: relative;

  --story-ring-angle: 135deg;

  background: linear-gradient(
    var(--story-ring-angle),
    var(--pink),
    var(--purple),
    var(--teal),
    var(--yellow)
  );

  background-size: 125% 125%;

  background-position: center center;

  box-shadow:
    0 0 18px rgba(255, 45, 120, 0.35),
    0 0 34px rgba(162, 30, 255, 0.28),
    0 0 54px rgba(0, 191, 191, 0.2);

  animation: storyRingAlive 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;

  transition: transform 0.35s ease;
}

#scene-02 .story-ring:hover {
  transform: scale(1.02);

  box-shadow:
    0 0 22px rgba(255, 45, 120, 0.42),
    0 0 40px rgba(162, 30, 255, 0.34),
    0 0 60px rgba(0, 191, 191, 0.26);
}

#scene-02 .story-ring:focus-visible {
  transform: scale(1.02);

  box-shadow:
    0 0 22px rgba(255, 45, 120, 0.42),
    0 0 40px rgba(162, 30, 255, 0.34),
    0 0 60px rgba(0, 191, 191, 0.26);

  outline: 2px solid rgba(255, 255, 255, 0.5);

  outline-offset: 4px;
}

#scene-02 .story-ring img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

  display: block;

  border: var(--story-ring-inner-border-width) solid #0d0d0d;
}

@keyframes storyRingGlow {
  0% {
    opacity: 0.78;

    filter: blur(22px) brightness(0.94);
  }

  100% {
    opacity: 1;

    filter: blur(38px) brightness(1.14);
  }
}

@keyframes storyRingAlive {
  0% {
    --story-ring-angle: 125deg;

    background-size: 118% 118%;

    background-position: 44% 56%;

    box-shadow:
      0 0 14px rgba(255, 45, 120, 0.22),
      0 0 26px rgba(162, 30, 255, 0.16),
      0 0 42px rgba(0, 191, 191, 0.1);
  }

  100% {
    --story-ring-angle: 145deg;

    background-size: 140% 140%;

    background-position: 56% 44%;

    box-shadow:
      0 0 24px rgba(255, 45, 120, 0.5),
      0 0 46px rgba(162, 30, 255, 0.42),
      0 0 70px rgba(0, 191, 191, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  #scene-02 .ring-light {
    animation: none;
  }

  #scene-02 .story-ring {
    animation: none;
  }

  #scene-02 .story-ring:hover,
  #scene-02 .story-ring:focus-visible {
    transform: none;
  }
}

/* ==========================================================
   CROSSING — social dissolve (active when body.story-opening)

   Timings preserved from approved Crossing phase.
   Total sequence duration: 4400 ms
   (200 + 800 + 1200 + 700 + 1500)
   ========================================================== */

body.story-opening .social-post:hover {
  transform: none;
}

body.story-opening .story-ring {
  pointer-events: none;

  cursor: default;
}

body.story-opening .story-ring:hover,
body.story-opening .story-ring:focus-visible {
  transform: none;

  box-shadow:
    0 0 18px rgba(255, 45, 120, 0.35),
    0 0 34px rgba(162, 30, 255, 0.28),
    0 0 54px rgba(0, 191, 191, 0.2);

  outline: none;
}

#scene-02 .ring-light.story-ring-settled {
  animation: none;

  opacity: 0.91;

  filter: blur(26px);
}

@media (prefers-reduced-motion: reduce) {
  body.story-opening #scene-02 .profile {
    opacity: 0;

    visibility: hidden;
  }

  body.story-opening #scene-02 .social-post {
    background: rgba(18, 18, 18, 0);

    border-color: rgba(255, 255, 255, 0);

    box-shadow: none;

    backdrop-filter: blur(0);
  }

  body.story-opening #scene-02 .ring-light {
    animation: none;

    opacity: 0.91;

    filter: blur(26px);
  }
}