/* Vertical split, two storefront signs.
   Left: halo-lit rose-gold letters on pink plaster. Right: neon tube on dark brick.
   Placeholder palette until the brand colours are defined. */
:root {
  --plaster-hi: #fff0f3;
  --plaster: #f2bccb;
  --plaster-lo: #d98ea3;
  --rose-ink: #8a3550;

  --wall: #151017;
  --wall-lo: #0b080c;
  --neon: #ff2fa6;
  --neon-deep: #d4108a;
  --tube: #ffeaf6;

  --font-fresa: "Pinyon Script", "Snell Roundhand", "Edwardian Script ITC", cursive;
  --font-street: "Sedgwick Ave Display", "Permanent Marker", "Marker Felt", cursive;
  --font-nea: "Tilt Neon", "Arial Rounded MT Bold", "Helvetica Neue", sans-serif;
  --font-ui: "Jost", "Helvetica Neue", Arial, sans-serif;

  --sign-size: clamp(3.2rem, 8.6vw, 9.5rem);
}

@property --on {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--wall-lo);
  color: var(--tube);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- split ---------- */

.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100svh;
  overflow: hidden;
}

.side {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 4rem max(1rem, 3vw) 9rem;
  overflow: hidden;
  isolation: isolate;
}

/* film grain on both walls */
.side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/grain.svg");
  background-size: 220px;
  pointer-events: none;
}

.sign {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  text-align: center;
}

.word { white-space: nowrap; }

.tag {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(.68rem, 1vw, .82rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-right: -.42em; /* optically centre tracked caps */
}

/* ---------- La Fresa: halo-lit rose gold on plaster ---------- */

.fresa {
  --sx: 6;
  --sy: 10;
  --sheen: 40;
  background:
    radial-gradient(70% 55% at 50% -8%, var(--plaster-hi) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 45%, var(--plaster) 35%, var(--plaster-lo) 100%);
}

.fresa::after { opacity: .5; mix-blend-mode: multiply; }

.fresa-letters {
  margin: 0;
  font-family: var(--font-fresa);
  font-weight: 400;
  font-size: calc(var(--sign-size) * 1.15);
  line-height: 1.02;
  /* room for the swashes, so the metal fill reaches them */
  padding: .12em .32em .2em;
  background: linear-gradient(172deg,
      #f6d6cc 0%, #d3907f 20%, #9c5048 38%, #edbcaf 54%,
      #b86e61 70%, #7f3a36 86%, #d9998a 100%);
  background-size: 100% 260%;
  background-position: 50% calc(var(--sheen) * 1%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .85))
    drop-shadow(0 0 2px rgba(255, 250, 251, .9))
    drop-shadow(0 0 18px rgba(255, 250, 251, .95))
    drop-shadow(0 0 46px rgba(255, 236, 242, .85))
    drop-shadow(calc(var(--sx) * 1px) calc(var(--sy) * 1px) 10px rgba(96, 22, 48, .38));
  transition: background-position .5s ease-out, filter .5s ease-out;
}

.fresa .tag { color: var(--rose-ink); }

/* ---------- La Nea: neon on brick ---------- */

.nea {
  background:
    radial-gradient(55% 40% at 50% 46%, rgb(255 47 166 / calc(var(--on) * .26)), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='60'%3E%3Cpath d='M0 1H76M0 31H76M38 1V31M1 31V60M75 31V60' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='2.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--wall), var(--wall-lo));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .06);
}

.nea::after { opacity: .35; mix-blend-mode: overlay; }

/* old spray paint, only visible where the neon lights the wall */
.graffiti {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: calc(var(--on) * .2);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 46%, #000 0%, transparent 85%);
          mask-image: radial-gradient(60% 50% at 50% 46%, #000 0%, transparent 85%);
}

.neon-panel {
  position: relative;
  padding: clamp(.8rem, 2vw, 1.6rem) clamp(1rem, 2.6vw, 2.4rem);
  border-radius: 14px;
  /* clear acrylic backer */
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .45);
}

/* stand-off bolts */
.neon-panel::before,
.neon-panel::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9a9aa2, #3a3a40);
}
.neon-panel::before { left: 10px; }
.neon-panel::after { right: 10px; }

.neon,
.neon .faulty {
  color: rgb(255 234 246 / calc(.28 + var(--on) * .72));
  text-shadow:
    0 0 1px rgb(255 255 255 / var(--on)),
    0 0 4px rgb(255 214 238 / var(--on)),
    0 0 9px rgb(255 47 166 / var(--on)),
    0 0 18px rgb(255 47 166 / var(--on)),
    0 0 36px rgb(255 47 166 / calc(var(--on) * .9)),
    0 0 70px rgb(212 16 138 / calc(var(--on) * .8)),
    0 0 120px rgb(212 16 138 / calc(var(--on) * .6));
}

.neon {
  margin: 0;
  font-family: var(--font-nea);
  font-size: var(--sign-size);
  line-height: .95;
  letter-spacing: .06em;
  margin-right: -.06em;
}

.nea .tag {
  font-family: var(--font-street);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  letter-spacing: .01em;
  text-transform: none;
  margin-right: 0;
  color: #ffe45c;
  transform: rotate(-4deg);
  /* overspray, tinted by the neon */
  text-shadow: 0 0 1px rgba(255, 228, 92, .7), 0 0 7px rgba(255, 228, 92, .3), 0 0 22px rgb(255 47 166 / calc(var(--on) * .35));
}

/* ---------- Instagram: handle and button sit on the seam ---------- */

.follow {
  position: absolute;
  left: 50%;
  bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.25rem));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  transform: translateX(-50%);
}

/* the handle changes colour where it crosses the seam */
.handle {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .16em;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--rose-ink) 50%, #ffd9ee 50%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.ig {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.ig:hover { transform: translateY(-3px); }
.ig:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.ig-half {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-block: .75rem;
  font-size: 1.05rem;
}

.ig-fresa {
  justify-content: flex-end;
  padding-inline: 1.4rem 2.4rem;
  border-radius: 999px 0 0 999px;
  background: var(--plaster-hi);
  color: #9c5048;
  font-family: var(--font-fresa);
  font-size: 1.55rem;
  line-height: 1;
}

.ig-nea {
  justify-content: flex-start;
  padding-inline: 2.4rem 1.4rem;
  border-radius: 0 999px 999px 0;
  background: var(--wall-lo);
  color: #ffe45c;
  font-family: var(--font-street);
  font-size: 1.2rem;
  box-shadow: inset 0 0 0 1px rgba(255, 47, 166, .55);
}

.ig-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(90deg, #c27a70 50%, var(--neon) 50%);
  color: #fff;
  box-shadow: 0 0 0 3px var(--plaster-hi), 0 0 0 4px rgba(0, 0, 0, .4);
}
.ig-icon svg { width: 1.35rem; height: 1.35rem; }

/* ---------- narrow screens: keep the split, stack each name ---------- */

@media (max-width: 47.99rem) {
  :root { --sign-size: clamp(2.6rem, 15vw, 5rem); }
  .word { display: block; }
  .fresa-letters { font-size: min(18vw, 6rem); padding: .1em .08em .16em; }
  .side { padding-bottom: 8rem; }
  .neon-panel::before, .neon-panel::after { display: none; }
  .tag { letter-spacing: .3em; margin-right: -.3em; }
  .ig-half { font-size: .95rem; padding-block: .65rem; }
  .ig-fresa { font-size: 1.35rem; padding-inline: 1.1rem 2.2rem; }
  .ig-nea { font-size: 1.05rem; }
  .handle { font-size: .8rem; letter-spacing: .12em; }
  .ig-nea { padding-inline: 2.2rem 1.1rem; }
}

/* ---------- motion: the neon powers on, one tube is faulty ---------- */

@keyframes power-on {
  0%   { --on: 0; }
  8%   { --on: 1; }
  10%  { --on: 0; }
  22%  { --on: 0; }
  24%  { --on: .8; }
  27%  { --on: .1; }
  34%  { --on: 1; }
  37%  { --on: .3; }
  44%, 100% { --on: 1; }
}

@keyframes faulty {
  0%, 90%, 100% { --on: 1; }
  91% { --on: .15; }
  92% { --on: 1; }
  93.5% { --on: .25; }
  95% { --on: 1; }
}

@keyframes wall-light {
  from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: no-preference) {
  .nea { animation: power-on 1.8s .5s both; }
  .neon .faulty { animation: faulty 7s 4s infinite; }
  .fresa .sign { animation: wall-light 1.4s cubic-bezier(.2, .7, .2, 1) both; }
}