/* =========================================================================
   julioanaya.mx - "Abriremos pronto"
   Letrero de cartulina colgado tras el vidrio de la puerta de un local.
   Sin fuentes externas, sin JS de terceros: todo es CSS.
   ========================================================================= */

:root {
    /* Interior del local, apagado, visto a traves del vidrio */
    --interior-deep: #120e0b;
    --interior-warm: #2a1f16;

    /* Cartulina impresa */
    --card-face: #f6efe1;
    --card-shade: #e6dac2;
    --card-edge: #c9bca0;

    --ink: #211c18;
    --verde: #2f6b47;
    --rojo: #a33227;
    --brass: #b9932f;
    --brass-hi: #e8ce85;

    /* Impact es la tipografia que de verdad llevan los letreros impresos
       en papeleria. No es un accidente. */
    --font-sign: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Narrow Bold", "Arial Black", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

    /* Sin minimo en px: un clamp con min 300px desborda un viewport de 320
       una vez descontado el padding de .storefront. */
    --card-w: min(88vw, 400px);
    --cord-len: calc(var(--card-w) * 0.42);
    --cord-drop: calc(var(--card-w) * 0.184);
}

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

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--interior-deep);
    background-image:
        radial-gradient(135% 105% at 50% 46%, transparent 34%, rgba(0, 0, 0, 0.6) 100%),
        radial-gradient(70% 52% at 50% 40%, rgba(120, 88, 52, 0.22) 0%, transparent 72%),
        radial-gradient(120% 90% at 50% 38%, var(--interior-warm) 0%, var(--interior-deep) 62%),
        radial-gradient(60% 30% at 50% 104%, rgba(185, 147, 47, 0.10) 0%, transparent 70%);
    color: var(--card-face);
    font-family: var(--font-mono);
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- escena */

.storefront {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 6vh, 4rem) 1rem;
    overflow: hidden;
}

/* Reflejo diagonal sobre el vidrio de la puerta */
.glass-sheen {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background: linear-gradient(
        102deg,
        transparent 34%,
        rgba(203, 222, 232, 0.045) 43%,
        rgba(203, 222, 232, 0.085) 47%,
        rgba(203, 222, 232, 0.03) 51%,
        transparent 60%
    );
}

/* Grano: el vidrio nunca esta limpio */
.glass-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- letrero */

.sign-stage {
    position: relative;
    display: grid;
    justify-items: center;
    width: var(--card-w);
    /* Sin esto el min-width:auto de grid deja que el min-content del
       titular ensanche la escena y el letrero se sale del viewport. */
    min-width: 0;
    animation: stage-in 0.5s ease-out both;
}

/* La ventosa pegada al vidrio. El letrero pivota exactamente aqui. */
.suction-cup {
    position: relative;
    z-index: 3;
    width: 30px;
    height: 17px;
    border-radius: 50% 50% 42% 42%;
    /* Ventosa translucida: esta pegada del otro lado del vidrio */
    background:
        radial-gradient(62% 58% at 36% 28%, rgba(255, 255, 255, 0.80) 0%, transparent 64%),
        linear-gradient(180deg, rgba(232, 240, 243, 0.52), rgba(156, 174, 182, 0.34));
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* El gancho de laton bajo la ventosa */
.suction-cup::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 50%;
    width: 7px;
    height: 9px;
    transform: translateX(-50%);
    border: 2px solid var(--brass);
    border-top: none;
    border-radius: 0 0 50% 50%;
}

.sign {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    width: 100%;
    margin-top: -2px;
    transform-origin: 50% 2px;
    animation:
        swing-in 2.4s cubic-bezier(0.25, 0.6, 0.25, 1) both,
        sway 7s 2.4s ease-in-out infinite;
}

/* ------------------------------------------------------------ el cordon */

.cord {
    position: relative;
    width: 100%;
    height: var(--cord-drop);
}

.cord-strand {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: var(--cord-len);
    transform-origin: 50% 0;
    border-radius: 2px;
    /* Cordon trenzado rojo y crudo, como el de los letreros de verdad */
    background: repeating-linear-gradient(
        118deg,
        var(--rojo) 0 3px,
        #e8dcc6 3px 6px
    );
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.cord-strand--left {
    transform: translateX(-50%) rotate(-64deg);
}

.cord-strand--right {
    transform: translateX(-50%) rotate(64deg);
}

/* ----------------------------------------------------------- la cartulina */

.card {
    position: relative;
    width: 100%;
    padding: clamp(2.1rem, 7vw, 2.9rem) clamp(1.2rem, 5vw, 2.4rem) clamp(1.5rem, 5vw, 1.9rem);
    text-align: center;
    border: 1px solid var(--card-edge);
    border-radius: 3px;
    background:
        linear-gradient(178deg, var(--card-face) 0%, var(--card-shade) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 22px 40px -18px rgba(0, 0, 0, 0.75);
}

/* El filete verde impreso, por dentro del borde de la cartulina */
.card::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 3px solid var(--verde);
    border-radius: 1px;
    opacity: 0.85;
    pointer-events: none;
}

/* Grano de la cartulina: el papel no es liso */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

.grommet {
    position: absolute;
    top: clamp(0.7rem, 3vw, 1rem);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, var(--brass-hi) 0%, var(--brass) 55%, #6f5715 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.grommet::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #171310;
}

.grommet--left {
    left: 12%;
}

.grommet--right {
    right: 12%;
}

.card-eyebrow {
    margin: 0 0 clamp(1rem, 4vw, 1.4rem);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
    color: rgba(33, 28, 24, 0.55);
}

.card-headline {
    margin: 0;
    font-family: var(--font-sign);
    font-weight: 400;
    /* Escala con la cartulina, no con el viewport: asi el titular nunca
       puede ser mas ancho que el letrero que lo contiene. */
    font-size: calc(var(--card-w) * 0.155);
    line-height: 0.86;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--verde);
    /* Sangrado de tinta sobre papel poroso */
    text-shadow: 0 1px 0 rgba(47, 107, 71, 0.22);
}

/* FocusOnNavigate enfoca el h1 al montar. No queremos su anillo aqui:
   no es un control, y el letrero no se navega con teclado. */
.card-headline:focus,
.card-headline:focus-visible {
    outline: none;
}

.card-headline span {
    display: block;
}

.card-rule {
    width: 34%;
    margin: clamp(1.2rem, 4.5vw, 1.6rem) auto clamp(0.9rem, 3vw, 1.1rem);
    border: none;
    border-top: 1px solid rgba(33, 28, 24, 0.2);
}

.card-footer {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(33, 28, 24, 0.5);
}

/* --------------------------------------------------- la sombra que sigue */

.sign-shadow {
    position: absolute;
    z-index: 1;
    top: calc(var(--cord-drop) + 26px);
    left: 50%;
    width: 88%;
    height: 62%;
    margin-left: -44%;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.62);
    filter: blur(20px);
    transform-origin: 50% -80px;
    /* Va 90ms tarde: la sombra no llega al mismo tiempo que el objeto */
    animation:
        swing-in 2.4s 0.09s cubic-bezier(0.25, 0.6, 0.25, 1) both,
        sway 7s 2.49s ease-in-out infinite;
}

/* ----------------------------------------------------------- animaciones */

@keyframes stage-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Pendulo amortiguado: alguien acaba de cerrar la puerta */
@keyframes swing-in {
    0% {
        transform: rotate(-13deg);
    }
    22% {
        transform: rotate(8.4deg);
    }
    42% {
        transform: rotate(-5deg);
    }
    60% {
        transform: rotate(2.8deg);
    }
    76% {
        transform: rotate(-1.5deg);
    }
    88% {
        transform: rotate(0.7deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Vaiven ambiente, apenas perceptible */
@keyframes sway {
    0%,
    100% {
        transform: rotate(-0.55deg);
    }
    50% {
        transform: rotate(0.55deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sign-stage,
    .sign,
    .sign-shadow {
        animation: none;
        opacity: 1;
        transform: none;
    }
}