/* ================================================================================
00. CONFIGURATION & TOKENS
================================================================================
Contains core grid variables and spacing units. 
Changing --sq affects the scale of the entire board.
================================================================================
*/

:root {
    --sq: 72px; 
    --cols: 20;
    --rows: 12;
}

/* ================================================================================
01. THE STAGE (MAIN WRAPPER)
================================================================================
Handles the viewport, section padding, and the global feathering mask.
================================================================================
*/

.about-grid-text {
    background-color: transparent;
    min-height: 100vh;
    display: flex;
    justify-content: center; 
    align-items: center;
    overflow: visible; 
    padding: 140px 0 100px 0;

    /* [FIX] We push the mask start/end further out so illustrations don't hit the transparent edge */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}

.grid-safe-area {
    position: relative;
    width: calc(var(--sq) * var(--cols));
    height: calc(var(--sq) * var(--rows));
    background-color: transparent;
    overflow: visible; 
}

/* ================================================================================
02. THE STENCIL (GRID SYSTEM)
================================================================================
Layer 0: The background lines. Uses a mask to fade edges.
================================================================================
*/

.grid-stencil {
    position: absolute;
    top: -60px; 
    bottom: -40px; 
    left: 0; 
    right: 0;
    background-image: 
        linear-gradient(to right, #1A1A1A 1px, transparent 1px),
        linear-gradient(to bottom, #1A1A1A 1px, transparent 1px);
    background-size: var(--sq) var(--sq);
    background-position: 0 40px; 
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    transition: filter 0.6s ease, opacity 0.6s ease;
}

/* ================================================================================
03. PHOTO COMPONENT (BULLETIN ITEMS)
================================================================================
Layer 1: Base styling for the 14 photos.
Note: Overflow is set to visible to allow pop-out interactions.
================================================================================
*/

.bulletin-item {
    position: absolute !important;
    z-index: 10;
    background: transparent;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    transition: 
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease,
        opacity 0.6s ease;
    
    /* [CHANGE] Remove isolation to let SVGs breathe */
    isolation: auto !important; 
    overflow: visible !important;
}

/* ================================================================================
04. COLOR-ON-HOVER LOGIC
================================================================================
Stacks the B&W and Color images. Handles the smooth opacity transition.
================================================================================
*/

.bulletin-item .img-bw {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    border-radius: 2px; 
    overflow: hidden;
}

.bulletin-item .img-color {
    position: absolute; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2; 
    border-radius: 2px; 
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.bulletin-item:hover .img-color {
    opacity: 1;
}

.bulletin-item:hover {
    z-index: 100 !important;
    transform: scale(1.02) rotate(inherit);
}

/* ================================================================================
05. TYPOGRAPHY (WELCOME TEXT)
================================================================================
Layer 2: The handwriting header and its blurred background plate.
================================================================================
*/

.bulletin-text {
    position: absolute;
    z-index: 15;
    top: calc(var(--sq) * 1); 
    left: 40%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulletin-text h2 {
    font-family: 'Mynerve', cursive;
    font-size: 32px;
    line-height: 1.2;
    color: #fff;
    font-weight: 500;
}

.text-blur-plate {
    position: absolute;
    width: 357px;
    height: 143px;
    background: rgba(7, 7, 7, 0.90);
    filter: blur(33px);
    z-index: -1; 
    border-radius: 50%;
    pointer-events: none;
}

/* ================================================================================
06. THE PIXELWORLD INTERACTION (FULL-SCREEN GLASS OVERLAY)
================================================================================ */

/* 1. THE GLASS OVERLAY (The "Entire Screen" effect) */
.grid-safe-area::before {
    content: '';
    position: absolute;
    /* Stretch beyond the safe area to ensure the whole screen is covered */
    top: -25%; 
    left: -25%; 
    right: -25%; 
    bottom: -25%;
    
    /* Sits above the grid (1) and other images (10) but below the hero (9999) */
    z-index: 50; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;

    /* [YOUR SPECIFIED STYLING] */
    border-radius: 40px;
    background: linear-gradient(90deg, rgba(7, 0, 220, 0.4) 0%, rgba(169, 0, 0, 0.4) 100%); /* Line 190 */
    box-shadow: 0 4px 24px 7px rgba(0, 0, 0, 0.60); /* Line 191 */  
    backdrop-filter: blur(23.85px);
    -webkit-backdrop-filter: blur(23.85px);
}

/* 2. TRIGGER: Show the glass overlay when a story is hovered */
.grid-safe-area:has(.has-details:hover)::before {
    opacity: 0.2;
}

/* 3. DIMMING: Soften other elements behind the glass */
.grid-safe-area:has(.has-details:hover) .bulletin-item:not(:hover),
.grid-safe-area:has(.has-details:hover) .bulletin-text,
.grid-safe-area:has(.has-details:hover) .grid-stencil {
    filter: blur(12px) brightness(0.2); 
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* --- HERO STATE (STRAIGHTEN & SCALE) --- */
.bulletin-item.has-details:hover {
    transform: rotate(0deg) scale(1.15) !important;
    z-index: 9999 !important; 
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.9);
    
    /* [FIX 1] Allow total breakout */
    overflow: visible !important; 
    /* [FIX 2] Remove isolation to let children breathe in the global stack */
    isolation: auto !important;
}

/* --- STORY DETAILS (TEXT & POP-OUTS) --- */
.bulletin-details {
    position: absolute;
    top: 0; 
    right: 110%; 
    width: 450px; /* [INCREASED] To fit the long title on one line */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    text-align: right;
    z-index: 1000;  
    
}

.bulletin-item:hover .bulletin-details {
    opacity: 1;
    transform: translateX(-20px);
}

.detail-text h3 {
    font-family: 'Albert Sans', sans-serif; 
    font-size: 28px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 700;
    
    /* [ADD THIS] Forces text to stay on a single line */
    white-space: nowrap;
}

.detail-text p {
    font-family: 'Mynerve', cursive; 
    font-size: 22px;
    color: #fff;
    line-height: 1.3;
}

/* --- STORY ILLUSTRATIONS (SVGS) --- */
.illus {
    position: absolute;
    /* [CHANGE] Reduced to 40px as requested for better fit */
    width: 70px; 
    height: auto;
    opacity: 0;
    transform: scale(0.4) translateY(20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1100;
}

.bulletin-item:hover .illus {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Tighter Cluster at Bottom-Left */
.bike-icon { 
    top: 230%; /* Pushed down into the pink box area */
    left: 435px; /* Moved inside the photo edge */
    transition-delay: 0.1s; 
}

.engine-icon { 
    top: 320%; 
    left: 600px; /* Clustered slightly to the right of the bike */
    transition-delay: 0.15s; 
}

.helmet-icon { 
    top: 330%; 
    left: 460px; /* Anchored at the very bottom-left corner */
    transition-delay: 0.2s; 
}

/* --- IC-DRAMA SPECIFIC OVERRIDES (OVERLAY & ILLUSTRATION & TEXTS) --- */

/* 1. Push text to the RIGHT side of the image */
.ic-drama .bulletin-details {
    right: auto; /* Reset the left-side default */
    left: 110%;  /* Place on the right side */
    text-align: left; /* Align text toward the photo */
    top: auto; 
    bottom: 0;
}

/* 2. Update hover animation direction */
.ic-drama:hover .bulletin-details {
    transform: translateX(20px); /* Slide in from the right */
}

/* 3. Position the Ticket (Top-Left Corner Overlay) */
.ticket-icon {
    top: -105px; 
    left: -210px; 
    transition-delay: 0.1s;
    transform: rotate(-10deg); /* Slight tilt for a 'tacked on' look */
}

/* 4. Position the Masks (Bottom-Left Corner Overlay) */
.mask-icon {
    top: 44%; 
    left: -210px; 
    transition-delay: 0.2s;
}


/* --- IC-FOOTBALL SPECIFIC OVERRIDES (OVERLAY & ILLUSTRATION & TEXTS) --- */

/* 1. Position text to the RIGHT & BOTTOM (Yellow Arrow) */
.ic-football .bulletin-details {
    right: auto;
    left: 110%; /* Move to right side of photo */
    top: auto;
    bottom: 10%; /* Aligns near the bottom as per yellow arrow */
    text-align: left;
    width: 300px;
    background: none; /* Keeps it clean if you don't want the glass card here */
    box-shadow: none;
    backdrop-filter: none;
}

/* 2. Position the Shoes (Top-Left Pink Arrow) */
.shoes-icon {
    top: -200px; 
    left: -200px; 
    transition-delay: 0.1s;
    transform: rotate(-5deg);
}

/* 3. Position the Playground (Middle-Left Pink Arrow) */
.playground-icon {
    top: -130px; 
    left: -220px; 
    transition-delay: 0.2s;
    transform: rotate(-15deg);
}

/* 4. Ensure hover slide works for the right side */
.ic-football:hover .bulletin-details {
    transform: translateX(20px);
}


/* --- IC-TREK SPECIFIC OVERRIDES (OVERLAY & ILLUSTRATION & TEXTS) --- */

/* 1. Position text to the RIGHT & BOTTOM (Yellow Arrow) */
.ic-trek .bulletin-details {
    right: auto;
    left: 115%; /* Positions on the right side of the photo */
    top: auto;
    bottom: 5%; /* Aligned near the bottom per yellow arrow */
    text-align: left;
    width: 350px;
    background: none; 
    box-shadow: none;
    backdrop-filter: none;
}

/* 2. Position the Campfire (Top-Left Pink Arrow) */
.campfire-icon {
    top: -60px; 
    left: -160px; 
    transition-delay: 0.1s;
    transform: rotate(-10deg);
}

/* 3. Position the Compass (Bottom-Left Pink Arrow) */
.compass-icon {
    top: 42%; 
    left: -160px; 
    transition-delay: 0.2s;
    transform: rotate(5deg);
}

/* 4. Ensure hover slide works for right-side placement */
.ic-trek:hover .bulletin-details {
    transform: translateX(20px);
}


/* --- IC-BIRIYANI SPECIFIC OVERRIDES   (OVERLAY & ILLUSTRATION & TEXTS) --- */

/* 1. Hover behavior: Straighten ONLY (Forces scale back to 1) */
.ic-biriyani.has-details:hover {
    /* Cancels the 1.15 scale from the global rule */
    transform: rotate(0deg) scale(1) !important; 
    z-index: 9999 !important;
}

/* 2. Position text to the LEFT (since image is on the far right) */
.ic-biriyani .bulletin-details {
    right: 115%; /* Standard left positioning */
    left: auto;
    top: auto;
    bottom: 12%; /* Aligned to the bottom area of the photo */
    text-align: right;
    width: 250px;
    background: none; 
    box-shadow: none;
    backdrop-filter: none;
}

/* 3. Text slide-in direction (towards the photo) */
.ic-biriyani:hover .bulletin-details {
    transform: translateX(-20px);
}

/* ================================================================================
07. COORDINATE MAPPING (X,Y PLACEMENT)
================================================================================
Layer 1: Individual positions for the 14 photos.
Organized roughly from Top-Left to Bottom-Right.
================================================================================
*/

.ic-trek { 
    width: calc(var(--sq) * 1.2); 
    height: calc(var(--sq) * 1.2); 
    top: calc(var(--sq) * 6.0); 
    left: calc(var(--sq) * 12); 
    transform: rotate(-8deg); 
}

.ic-cat { 
    width: calc(var(--sq) * 1.6); 
    height: calc(var(--sq) * 1.6); 
    top: calc(var(--sq) * 0.8); 
    left: calc(var(--sq) * 14.6); 
    transform: rotate(10deg); 
}

.ic-micky { 
    width: calc(var(--sq) * 1.6); 
    height: calc(var(--sq) * 1.6); 
    top: calc(var(--sq) * 0.8); 
    left: calc(var(--sq) * 16.8); 
    transform: rotate(10deg); 
}

.ic-tea { 
    width: calc(var(--sq) * 2.2); 
    height: calc(var(--sq) * 3.4); 
    top: calc(var(--sq) * 3.5); 
    left: calc(var(--sq) * 5.2); 
    transform: rotate(-9deg); 
}

.ic-childhood { 
    width: calc(var(--sq) * 2.0); 
    height: calc(var(--sq) * 2.0); 
    top: calc(var(--sq) * 7.8); 
    left: calc(var(--sq) * 5.2); 
    transform: rotate(-4deg); 
}

.ic-biking { 
    width: calc(var(--sq) * 2.2); 
    height: calc(var(--sq) * 2.2); 
    top: calc(var(--sq) * 6.8); 
    left: calc(var(--sq) * 8.4); 
    transform: rotate(4deg); 
}

.ic-mountain { 
    width: calc(var(--sq) * 1.4); 
    height: calc(var(--sq) * 1.4); 
    top: calc(var(--sq) * 4.0); 
    left: calc(var(--sq) * 8.6); 
    transform: rotate(6deg); 
}

.ic-deer { 
    width: calc(var(--sq) * 2.2); 
    height: calc(var(--sq) * 2.2); 
    top: calc(var(--sq) * 8.0); 
    left: calc(var(--sq) * 11.5); 
    transform: rotate(-8deg); 
}

.ic-biriyani { 
    width: calc(var(--sq) * 1.2); 
    height: calc(var(--sq) * 1.2); 
    top: calc(var(--sq) * 9.2); 
    left: calc(var(--sq) * 15.2); 
    transform: rotate(7deg); 
}

.ic-ride { 
    width: calc(var(--sq) * 4.2); 
    height: calc(var(--sq) * 5); 
    top: calc(var(--sq) * 3.5); 
    left: calc(var(--sq) * 14.5); 
    transform: rotate(6deg); 
}

.ic-desert { 
    width: calc(var(--sq) * 2.2); 
    height: calc(var(--sq) * 3.4); 
    top: calc(var(--sq) * 1.6); 
    left: calc(var(--sq) * 11.4); 
    transform: rotate(-6deg); 
}

.ic-mountain-me { 
    width: calc(var(--sq) * 2.9); 
    height: calc(var(--sq) * 1.6); 
    top: calc(var(--sq) * 3.8); 
    left: calc(var(--sq) * 1.4); 
    transform: rotate(-8deg); 
}

.ic-football { 
    width: calc(var(--sq) * 2.2); 
    height: calc(var(--sq) * 3.6); 
    top: calc(var(--sq) * 6.2); 
    left: calc(var(--sq) * 1.6); 
    transform: rotate(6deg); 
}

.ic-drama { 
    width: calc(var(--sq) * 2); 
    height: calc(var(--sq) * 2.0); 
    top: calc(var(--sq) * 0.8); 
    left: calc(var(--sq) * 1.5); 
    transform: rotate(10deg); 
}


/* ================================================================================
07. MOBILE RESPONSIVEness
================================================================================*/